@empathyco/x-components 4.0.1 → 4.0.2-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.0.2-alpha.0](https://github.com/empathyco/x/compare/@empathyco/x-components@4.0.1...@empathyco/x-components@4.0.2-alpha.0) (2023-11-29)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+
+
+
+
 ## [4.0.1](https://github.com/empathyco/x/compare/@empathyco/x-components@4.0.1-alpha.0...@empathyco/x-components@4.0.1) (2023-11-24)
 
 **Note:** Version bump only for package @empathyco/x-components

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

@@ -1,5 +1,3 @@
-
-
 .x-uppercase {
   text-transform: uppercase;
 }
@@ -53,6 +51,7 @@
 .x-sticky {
   position: sticky !important;
 }
+
 .x-padding--00 {
   padding: 0 !important;
 }
@@ -1188,6 +1187,18 @@
 .x-self-baseline {
   align-self: baseline !important;
 }
+.dev-mode .slot-helper {
+  font-family: inherit;
+  color: grey;
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  border: dashed 1px grey;
+  border-radius: 10px;
+}
 .x-fill--lead {
   fill: var(--x-color-base-lead) !important;
 }
@@ -1231,18 +1242,6 @@
 .x-fill--transparent {
   fill: var(--x-color-base-transparent) !important;
 }
-.dev-mode .slot-helper {
-  font-family: inherit;
-  color: grey;
-  box-sizing: border-box;
-  display: flex;
-  height: 100%;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-  border: dashed 1px grey;
-  border-radius: 10px;
-}
 /* Material Elevations extracted from:
     https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
 */
@@ -3286,49 +3285,6 @@
 [dir="rtl"] .x-border-radius--bottom-right-20 {
   border-bottom-left-radius: var(--x-size-base-20) !important;
 }
-.x-background--lead {
-  background-color: var(--x-color-base-lead) !important;
-}
-
-.x-background--auxiliary {
-  background-color: var(--x-color-base-auxiliary) !important;
-}
-
-.x-background--neutral-10 {
-  background-color: var(--x-color-base-neutral-10) !important;
-}
-
-.x-background--neutral-35 {
-  background-color: var(--x-color-base-neutral-35) !important;
-}
-
-.x-background--neutral-70 {
-  background-color: var(--x-color-base-neutral-70) !important;
-}
-
-.x-background--neutral-95 {
-  background-color: var(--x-color-base-neutral-95) !important;
-}
-
-.x-background--neutral-100 {
-  background-color: var(--x-color-base-neutral-100) !important;
-}
-
-.x-background--accent {
-  background-color: var(--x-color-base-accent) !important;
-}
-
-.x-background--enable {
-  background-color: var(--x-color-base-enable) !important;
-}
-
-.x-background--disable {
-  background-color: var(--x-color-base-disable) !important;
-}
-
-.x-background--transparent {
-  background-color: var(--x-color-base-transparent) !important;
-}
 .x-border-color--lead {
   border-color: var(--x-color-base-lead) !important;
 }
@@ -3372,6 +3328,49 @@
 .x-border-color--transparent {
   border-color: var(--x-color-base-transparent) !important;
 }
+.x-background--lead {
+  background-color: var(--x-color-base-lead) !important;
+}
+
+.x-background--auxiliary {
+  background-color: var(--x-color-base-auxiliary) !important;
+}
+
+.x-background--neutral-10 {
+  background-color: var(--x-color-base-neutral-10) !important;
+}
+
+.x-background--neutral-35 {
+  background-color: var(--x-color-base-neutral-35) !important;
+}
+
+.x-background--neutral-70 {
+  background-color: var(--x-color-base-neutral-70) !important;
+}
+
+.x-background--neutral-95 {
+  background-color: var(--x-color-base-neutral-95) !important;
+}
+
+.x-background--neutral-100 {
+  background-color: var(--x-color-base-neutral-100) !important;
+}
+
+.x-background--accent {
+  background-color: var(--x-color-base-accent) !important;
+}
+
+.x-background--enable {
+  background-color: var(--x-color-base-enable) !important;
+}
+
+.x-background--disable {
+  background-color: var(--x-color-base-disable) !important;
+}
+
+.x-background--transparent {
+  background-color: var(--x-color-base-transparent) !important;
+}
 .x-text--stroke.x-text {
   --x-string-text-decoration: line-through;
 }
@@ -3684,6 +3683,52 @@
     --x-number-font-weight-tag-default-selected
   );
 }
+:root {
+  --x-color-background-tag-default: var(--x-color-base-neutral-100);
+  --x-color-border-tag-default: var(--x-color-text-tag-default);
+  --x-color-text-tag-default: var(--x-color-text-default);
+  --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
+  --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
+  --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
+  --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
+  --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
+  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
+  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
+  --x-size-border-width-tag-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
+  --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
+  --x-size-height-tag-default: var(--x-size-base-07);
+  --x-size-padding-right-tag-default: var(--x-size-base-04);
+  --x-size-padding-left-tag-default: var(--x-size-base-04);
+  --x-size-gap-tag-default: var(--x-size-base-02);
+  --x-font-family-tag-default: var(--x-font-family-text);
+  --x-size-font-tag-default: var(--x-size-font-text);
+  --x-size-line-height-tag-default: var(--x-size-line-height-text);
+  --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
+  --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
+  --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
+  --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
+  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
+  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
+  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
+  --x-number-font-weight-tag-default-curated-selected: var(
+    --x-number-font-weight-tag-default-selected
+  );
+}
 
 [dir="ltr"] .x-tag {
   border-left-width: var(--x-size-border-width-left-tag-default);
@@ -3859,52 +3904,6 @@
   );
   --x-size-line-height-filter-default-selected: var(--x-size-line-height-tag-default-selected);
 }
-:root {
-  --x-color-background-tag-default: var(--x-color-base-neutral-100);
-  --x-color-border-tag-default: var(--x-color-text-tag-default);
-  --x-color-text-tag-default: var(--x-color-text-default);
-  --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
-  --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
-  --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
-  --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
-  --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
-  --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
-  --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
-  --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
-  --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
-  --x-size-border-width-tag-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
-  --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
-  --x-size-height-tag-default: var(--x-size-base-07);
-  --x-size-padding-right-tag-default: var(--x-size-base-04);
-  --x-size-padding-left-tag-default: var(--x-size-base-04);
-  --x-size-gap-tag-default: var(--x-size-base-02);
-  --x-font-family-tag-default: var(--x-font-family-text);
-  --x-size-font-tag-default: var(--x-size-font-text);
-  --x-size-line-height-tag-default: var(--x-size-line-height-text);
-  --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
-  --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
-  --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
-  --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
-  --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
-  --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
-  --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
-  --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
-  --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
-  --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
-  --x-number-font-weight-tag-default-curated-selected: var(
-    --x-number-font-weight-tag-default-selected
-  );
-}
 :root {
   --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
@@ -4405,6 +4404,13 @@
   --x-size-padding-sliding-panel-button: var(--x-size-base-03);
   --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
 }
+:root {
+  --x-string-overflow-scroll: auto;
+  --x-color-background-scroll-bar: transparent;
+  --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
+  --x-color-background-scroll-bar-hover: transparent;
+  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
+}
 .x-sliding-panel {
   z-index: 0;
   background-color: var(--x-color-background-sliding-panel);
@@ -4470,13 +4476,6 @@
   --x-color-background-scroll-bar-hover: transparent;
   --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
 }
-:root {
-  --x-string-overflow-scroll: auto;
-  --x-color-background-scroll-bar: transparent;
-  --x-color-thumb-scroll-bar: var(--x-color-base-neutral-95);
-  --x-color-background-scroll-bar-hover: transparent;
-  --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
-}
 
 .x-scroll {
   overflow-y: var(--x-string-overflow-scroll);
@@ -4567,6 +4566,28 @@
   --x-size-gap-row-19: var(--x-size-base-19);
   --x-size-gap-row-20: var(--x-size-base-20);
 }
+:root {
+  --x-size-gap-row-01: var(--x-size-base-01);
+  --x-size-gap-row-02: var(--x-size-base-02);
+  --x-size-gap-row-03: var(--x-size-base-03);
+  --x-size-gap-row-04: var(--x-size-base-04);
+  --x-size-gap-row-05: var(--x-size-base-05);
+  --x-size-gap-row-06: var(--x-size-base-06);
+  --x-size-gap-row-07: var(--x-size-base-07);
+  --x-size-gap-row-08: var(--x-size-base-08);
+  --x-size-gap-row-09: var(--x-size-base-09);
+  --x-size-gap-row-10: var(--x-size-base-10);
+  --x-size-gap-row-11: var(--x-size-base-11);
+  --x-size-gap-row-12: var(--x-size-base-12);
+  --x-size-gap-row-13: var(--x-size-base-13);
+  --x-size-gap-row-14: var(--x-size-base-14);
+  --x-size-gap-row-15: var(--x-size-base-15);
+  --x-size-gap-row-16: var(--x-size-base-16);
+  --x-size-gap-row-17: var(--x-size-base-17);
+  --x-size-gap-row-18: var(--x-size-base-18);
+  --x-size-gap-row-19: var(--x-size-base-19);
+  --x-size-gap-row-20: var(--x-size-base-20);
+}
 
 .x-row--gap-01 {
   --x-size-gap-row: var(--x-size-gap-row-01);
@@ -4800,23 +4821,6 @@
   --x-size-border-width-result-description-default: 0;
   --x-size-border-width-result-picture-default: 0;
 }
-:root {
-  --x-color-border-result-default: var(--x-color-base-lead);
-  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
-  --x-color-border-result-description-default: var(--x-color-border-result-default);
-  --x-color-border-result-picture-default: var(--x-color-border-result-default);
-  --x-color-background-result-default: transparent;
-  --x-size-padding-result-default: 0;
-  --x-size-padding-result-overlay-default: 0;
-  --x-size-padding-result-description-default: 0;
-  --x-size-gap-result-default: var(--x-size-base-03);
-  --x-size-padding-result-picture-default: 0;
-  --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
-  --x-size-border-width-result-default: 0;
-  --x-size-border-width-result-overlay-default: 0;
-  --x-size-border-width-result-description-default: 0;
-  --x-size-border-width-result-picture-default: 0;
-}
 
 .x-result {
   display: grid;
@@ -4870,6 +4874,23 @@
     opacity: 1;
   }
 }
+:root {
+  --x-color-border-result-default: var(--x-color-base-lead);
+  --x-color-border-result-overlay-default: var(--x-color-border-result-default);
+  --x-color-border-result-description-default: var(--x-color-border-result-default);
+  --x-color-border-result-picture-default: var(--x-color-border-result-default);
+  --x-color-background-result-default: transparent;
+  --x-size-padding-result-default: 0;
+  --x-size-padding-result-overlay-default: 0;
+  --x-size-padding-result-description-default: 0;
+  --x-size-gap-result-default: var(--x-size-base-03);
+  --x-size-padding-result-picture-default: 0;
+  --x-size-border-radius-result-default: var(--x-size-border-radius-base-none);
+  --x-size-border-width-result-default: 0;
+  --x-size-border-width-result-overlay-default: 0;
+  --x-size-border-width-result-description-default: 0;
+  --x-size-border-width-result-picture-default: 0;
+}
 :root {
   --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
 }
@@ -6704,32 +6725,7 @@
   );
   --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;
@@ -6775,15 +6771,11 @@
 }
 [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"] 
 .x-input-group--line.x-input-group > .x-input-group__action {
-  margin-left: calc(
-      var(--x-size-border-width-inline-input-group-line) * -1
-    ) !important;
+  margin-left: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
 }
 [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"] 
 .x-input-group--line.x-input-group > .x-input-group__action {
-  margin-right: calc(
-      var(--x-size-border-width-inline-input-group-line) * -1
-    ) !important;
+  margin-right: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
 }
 .x-input-group--line .x-input-group > .x-input-group__action,
 .x-input-group--line.x-input-group > .x-input-group__action {
@@ -8537,13 +8529,6 @@
   --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
   --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
 }
-:root {
-  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
-  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
-  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
-}
 
 .x-button--pill.x-button,
 .x-button--pill .x-button {
@@ -8564,6 +8549,13 @@
   --x-color-border-button-ghost: transparent;
   --x-color-text-button-ghost: var(--x-color-base-lead);
 }
+:root {
+  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
+  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-top-right-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-bottom-right-button-pill: var(--x-size-border-radius-button-pill);
+  --x-size-border-radius-bottom-left-button-pill: var(--x-size-border-radius-button-pill);
+}
 :root {
   --x-color-background-button-ghost: transparent;
   --x-color-border-button-ghost: transparent;
@@ -8609,6 +8601,13 @@
   --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
   --x-size-line-height-button-default: var(--x-size-line-height-text);
 }
+: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);
+  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
+  --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-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8694,35 +8693,6 @@
     margin-right: var(--x-size-gap-button-default);
   }
 }
-: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);
-  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
-  --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-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);
-  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
-  --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);
-}
-
-.x-button--card.x-button,
-.x-button--card .x-button {
-  --x-size-border-radius-button-default: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-card);
-  --x-size-border-radius-top-right-button-default: var(
-    --x-size-border-radius-top-right-button-card
-  );
-  --x-size-border-radius-bottom-right-button-default: var(
-    --x-size-border-radius-bottom-right-button-card
-  );
-  --x-size-border-radius-bottom-left-button-default: var(
-    --x-size-border-radius-bottom-left-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);
@@ -8782,6 +8752,28 @@
 .x-badge-container {
   position: relative;
 }
+: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);
+  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
+  --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);
+}
+
+.x-button--card.x-button,
+.x-button--card .x-button {
+  --x-size-border-radius-button-default: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-card);
+  --x-size-border-radius-top-right-button-default: var(
+    --x-size-border-radius-top-right-button-card
+  );
+  --x-size-border-radius-bottom-right-button-default: var(
+    --x-size-border-radius-bottom-right-button-card
+  );
+  --x-size-border-radius-bottom-left-button-default: var(
+    --x-size-border-radius-bottom-left-button-card
+  );
+}
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;
@@ -8825,24 +8817,28 @@
   --x-size-border-width-base: 1px;
 }
 :root {
-  --x-size-gap-row-01: var(--x-size-base-01);
-  --x-size-gap-row-02: var(--x-size-base-02);
-  --x-size-gap-row-03: var(--x-size-base-03);
-  --x-size-gap-row-04: var(--x-size-base-04);
-  --x-size-gap-row-05: var(--x-size-base-05);
-  --x-size-gap-row-06: var(--x-size-base-06);
-  --x-size-gap-row-07: var(--x-size-base-07);
-  --x-size-gap-row-08: var(--x-size-base-08);
-  --x-size-gap-row-09: var(--x-size-base-09);
-  --x-size-gap-row-10: var(--x-size-base-10);
-  --x-size-gap-row-11: var(--x-size-base-11);
-  --x-size-gap-row-12: var(--x-size-base-12);
-  --x-size-gap-row-13: var(--x-size-base-13);
-  --x-size-gap-row-14: var(--x-size-base-14);
-  --x-size-gap-row-15: var(--x-size-base-15);
-  --x-size-gap-row-16: var(--x-size-base-16);
-  --x-size-gap-row-17: var(--x-size-base-17);
-  --x-size-gap-row-18: var(--x-size-base-18);
-  --x-size-gap-row-19: var(--x-size-base-19);
-  --x-size-gap-row-20: var(--x-size-base-20);
+  --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
+  );
 }

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

@@ -4,7 +4,7 @@
 
 ## setupDevtools() function
 
-> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
 > 
 
 Setups a plugin for the Vue's devtools adding: - [XEvent](./x-components.xevent.md)<!-- -->s timeline. Every event is recorded in time, and its payload and metadata can be inspected. - Wiring inspector. Events and its wires can be viewed and disabled.

package/js/components/animations/animate-clip-path/animate-clip-path.style.scss.js

@@ -10,7 +10,7 @@ var css = ".x-animate-clip-path--enter-active, .x-animate-clip-path--leave-activ
            const useBrowserInjector =
              (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
            const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/__w/x/x/packages/x-components/src/components/animations/animate-clip-path/animate-clip-path.style.scss',{source:css});
+           injector('/home/runner/work/x/x/packages/x-components/src/components/animations/animate-clip-path/animate-clip-path.style.scss',{source:css});
 
 export { css, css as default };
 //# sourceMappingURL=animate-clip-path.style.scss.js.map

package/js/components/animations/animate-scale/animate-scale.style.scss.js

@@ -10,7 +10,7 @@ var css = ".x-animate-scale--enter-active, .x-animate-scale--leave-active, .x-an
            const useBrowserInjector =
              (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
            const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/__w/x/x/packages/x-components/src/components/animations/animate-scale/animate-scale.style.scss',{source:css});
+           injector('/home/runner/work/x/x/packages/x-components/src/components/animations/animate-scale/animate-scale.style.scss',{source:css});
 
 export { css, css as default };
 //# sourceMappingURL=animate-scale.style.scss.js.map

package/js/components/animations/animate-translate/animate-translate.style.scss.js

@@ -10,7 +10,7 @@ var css = ".x-animate-translate--enter-active, .x-animate-translate--leave-activ
            const useBrowserInjector =
              (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
            const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/__w/x/x/packages/x-components/src/components/animations/animate-translate/animate-translate.style.scss',{source:css});
+           injector('/home/runner/work/x/x/packages/x-components/src/components/animations/animate-translate/animate-translate.style.scss',{source:css});
 
 export { css, css as default };
 //# sourceMappingURL=animate-translate.style.scss.js.map

package/js/components/animations/animate-width.vue.js

@@ -30,7 +30,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-d7caf02c";
+  const __vue_scope_id__ = "data-v-5122106f";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/animations/animate-width.vue_rollup-plugin-vue_styles.0.vue.js

@@ -1,6 +1,6 @@
 import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
 
-var css = ".x-animate-width--enter-active[data-v-d7caf02c], .x-animate-width--leave-active[data-v-d7caf02c] {\n  transition: width 0.3s ease-out;\n  overflow-x: hidden;\n}\n.x-animate-width--enter[data-v-d7caf02c], .x-animate-width--leave-to[data-v-d7caf02c] {\n  width: 0 !important;\n}";
+var css = ".x-animate-width--enter-active[data-v-5122106f], .x-animate-width--leave-active[data-v-5122106f] {\n  transition: width 0.3s ease-out;\n  overflow-x: hidden;\n}\n.x-animate-width--enter[data-v-5122106f], .x-animate-width--leave-to[data-v-5122106f] {\n  width: 0 !important;\n}";
            const isBrowser = /*#__PURE__*/ (function () {
              return (
                 Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
@@ -10,7 +10,7 @@ var css = ".x-animate-width--enter-active[data-v-d7caf02c], .x-animate-width--le
            const useBrowserInjector =
              (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
            const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/__w/x/x/packages/x-components/src/components/animations/animate-width.vue?rollup-plugin-vue=styles.0.css',{source:css});
+           injector('/home/runner/work/x/x/packages/x-components/src/components/animations/animate-width.vue?rollup-plugin-vue=styles.0.css',{source:css});
 
 export { css, css as default };
 //# sourceMappingURL=animate-width.vue_rollup-plugin-vue_styles.0.vue.js.map

package/js/components/animations/collapse-height.vue.js

@@ -37,7 +37,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-ac8a58de";
+  const __vue_scope_id__ = "data-v-a801a3a8";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */