@empathyco/x-components 3.0.0-alpha.346 → 3.0.0-alpha.348

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.348](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.347...@empathyco/x-components@3.0.0-alpha.348) (2023-04-13)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.347](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.346...@empathyco/x-components@3.0.0-alpha.347) (2023-04-12)
+
+### Features
+
+- **design-system:** deprecate old DS filters (#1121)
+  ([dd9690d](https://github.com/empathyco/x/commit/dd9690d5f59ae39e6c7f1a29f542732c03221cfe)),
+  closes [EX-8152](https://searchbroker.atlassian.net/browse/EX-8152)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.346](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.345...@empathyco/x-components@3.0.0-alpha.346) (2023-04-12)
 
 ### Features

package/design-system/default-theme.css

@@ -473,151 +473,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-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 {
-  padding-left: var(--x-size-padding-left-filter-default);
-}
-
-[dir="rtl"] .x-filter {
-  padding-right: var(--x-size-padding-left-filter-default);
-}
-
-[dir="ltr"] .x-filter {
-  padding-right: var(--x-size-padding-right-filter-default);
-}
-
-[dir="rtl"] .x-filter {
-  padding-left: var(--x-size-padding-right-filter-default);
-}
-
-[dir="ltr"] .x-filter {
-  border-right-width: var(--x-size-border-width-right-filter-default);
-}
-
-[dir="rtl"] .x-filter {
-  border-left-width: var(--x-size-border-width-right-filter-default);
-}
-
-[dir="ltr"] .x-filter {
-  border-left-width: var(--x-size-border-width-left-filter-default);
-}
-
-[dir="rtl"] .x-filter {
-  border-right-width: var(--x-size-border-width-left-filter-default);
-}
-
-.x-filter {
-  display: inline-flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  box-sizing: border-box;
-  text-align: left;
-  gap: var(--x-size-gap-filter-default);
-  padding-top: var(--x-size-padding-top-filter-default);
-  padding-bottom: var(--x-size-padding-bottom-filter-default);
-  background-color: var(--x-color-background-filter-default);
-  border-color: var(--x-color-border-filter-default);
-  color: var(--x-color-text-filter-default);
-  border-style: solid;
-  border-top-width: var(--x-size-border-width-top-filter-default);
-  border-bottom-width: var(--x-size-border-width-bottom-filter-default);
-  border-radius: var(--x-size-border-radius-top-left-filter-default) var(--x-size-border-radius-top-right-filter-default) var(--x-size-border-radius-bottom-right-filter-default) var(--x-size-border-radius-bottom-left-filter-default);
-  font-family: var(--x-font-family-filter-default);
-  font-size: var(--x-size-font-filter-default);
-  font-weight: var(--x-number-font-weight-filter-default);
-  line-height: var(--x-size-line-height-filter-default);
-  cursor: pointer;
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-filter {
-    gap: 0;
-  }
-  .x-filter > *:not(:last-child) {
-    margin-right: var(--x-size-gap-filter-default);
-  }
-}
-.x-filter > * {
-  flex: 0 0 auto;
-}
-.x-filter__label {
-  flex: 0 1 auto;
-}
-.x-filter__count {
-  font-weight: var(--x-number-font-weight-filter-count-default);
-}
-.x-filter--is-selected {
-  --x-color-background-filter-default: var(--x-color-background-filter-default-selected);
-  --x-color-border-filter-default: var(--x-color-border-filter-default-selected);
-  --x-color-text-filter-default: var(--x-color-text-filter-default-selected);
-  --x-number-font-weight-filter-default: var(--x-number-font-weight-filter-default-selected);
-  --x-number-font-weight-filter-count-default: var(
-    --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-size-padding-grid: 0;
   --x-size-gap-grid: var(--x-size-base-03);

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

@@ -286,6 +286,157 @@
   --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-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 {
+  padding-right: var(--x-size-padding-right-filter-default);
+}
+
+[dir="rtl"] .x-filter,[dir="rtl"]  .x-facet-filter {
+  padding-left: var(--x-size-padding-right-filter-default);
+}
+
+[dir="ltr"] .x-filter,[dir="ltr"]  .x-facet-filter {
+  border-right-width: var(--x-size-border-width-right-filter-default);
+}
+
+[dir="rtl"] .x-filter,[dir="rtl"]  .x-facet-filter {
+  border-left-width: var(--x-size-border-width-right-filter-default);
+}
+
+[dir="ltr"] .x-filter,[dir="ltr"]  .x-facet-filter {
+  border-left-width: var(--x-size-border-width-left-filter-default);
+}
+
+[dir="rtl"] .x-filter,[dir="rtl"]  .x-facet-filter {
+  border-right-width: var(--x-size-border-width-left-filter-default);
+}
+
+.x-filter, .x-facet-filter {
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  box-sizing: border-box;
+  text-align: left;
+  gap: var(--x-size-gap-filter-default);
+  padding-top: var(--x-size-padding-top-filter-default);
+  padding-bottom: var(--x-size-padding-bottom-filter-default);
+  background-color: var(--x-color-background-filter-default);
+  border-color: var(--x-color-border-filter-default);
+  color: var(--x-color-text-filter-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-filter-default);
+  border-bottom-width: var(--x-size-border-width-bottom-filter-default);
+  border-radius: var(--x-size-border-radius-top-left-filter-default) var(--x-size-border-radius-top-right-filter-default) var(--x-size-border-radius-bottom-right-filter-default) var(--x-size-border-radius-bottom-left-filter-default);
+  font-family: var(--x-font-family-filter-default);
+  font-size: var(--x-size-font-filter-default);
+  font-weight: var(--x-number-font-weight-filter-default);
+  line-height: var(--x-size-line-height-filter-default);
+  cursor: pointer;
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-filter, .x-facet-filter {
+    gap: 0;
+  }
+  .x-filter > *:not(:last-child), .x-facet-filter > *:not(:last-child) {
+    margin-right: var(--x-size-gap-filter-default);
+  }
+}
+.x-filter > *, .x-facet-filter > * {
+  flex: 0 0 auto;
+}
+.x-filter__label, .x-facet-filter__label {
+  flex: 0 1 auto;
+}
+.x-filter__count, .x-facet-filter__count {
+  font-weight: var(--x-number-font-weight-filter-count-default);
+}
+.x-filter--is-selected, .x-filter.x-selected, .x-facet-filter--is-selected, .x-facet-filter.x-selected {
+  --x-color-background-filter-default: var(--x-color-background-filter-default-selected);
+  --x-color-border-filter-default: var(--x-color-border-filter-default-selected);
+  --x-color-text-filter-default: var(--x-color-text-filter-default-selected);
+  --x-number-font-weight-filter-default: var(--x-number-font-weight-filter-default-selected);
+  --x-number-font-weight-filter-count-default: var(
+    --x-number-font-weight-filter-count-default-selected
+  );
+}
+:root {
+  --x-size-margin-filter-children: 0;
+  --x-size-padding-top-filter-children: 0;
+  --x-size-padding-right-filter-children: 0;
+  --x-size-padding-bottom-filter-children: 0;
+  --x-size-padding-left-filter-children: var(--x-size-base-05);
+}
+
+.x-hierarchical-filter-container {
+  list-style: none;
+}
+[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-left: var(--x-size-padding-left-filter-children);
+}
+[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-right: var(--x-size-padding-left-filter-children);
+}
+[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-right: var(--x-size-padding-right-filter-children);
+}
+[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  padding-left: var(--x-size-padding-right-filter-children);
+}
+.x-hierarchical-filter-container .x-hierarchical-filter__children, .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
+  margin: var(--x-size-margin-filter-children);
+  padding-top: var(--x-size-padding-top-filter-children);
+  padding-bottom: var(--x-size-padding-bottom-filter-children);
+}
+.x-hierarchical-filter-container .x-hierarchical-filter-container,
+.x-hierarchical-filter-container .x-filter, .x-hierarchical-filter-container .x-facet-filter {
+  width: 100%;
+}
+.x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
+.x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
+.x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
+.x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
+  margin-left: auto;
+}
 :root {
   --x-color-stroke-icon-default: currentColor;
   --x-color-fill-icon-default: none;

package/design-system/full-theme.css

@@ -448,6 +448,9 @@
 .x-dropdown.x-dropdown--xl {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
 }
+:root {
+  --x-size-width-dropdown-xl: 282px;
+}
 .x-facet--card.x-facet,
 .x-facet--card .x-facet {
   --x-size-border-radius-facet-default: var(--x-size-border-radius-facet-card);
@@ -618,20 +621,6 @@
   --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--outlined.x-facet,
-.x-facet--outlined .x-facet {
-  --x-color-border-facet-default: var(--x-color-border-facet-outlined);
-  --x-size-border-width-facet-default: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-top-facet-default: var(--x-size-border-width-top-facet-outlined);
-  --x-size-border-width-right-facet-default: var(--x-size-border-width-right-facet-outlined);
-  --x-size-border-width-bottom-facet-default: var(--x-size-border-width-bottom-facet-outlined);
-  --x-size-border-width-left-facet-default: var(--x-size-border-width-left-facet-outlined);
-  --x-size-padding-facet-header-default: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-top-facet-header-default: var(--x-size-padding-top-facet-header-outlined);
-  --x-size-padding-right-facet-header-default: var(--x-size-padding-right-facet-header-outlined);
-  --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-outlined);
-  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
-}
 :root {
   --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
   --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
@@ -645,145 +634,6 @@
   --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
   --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
 }
-[dir="ltr"] .x-filter {
-  padding-left: var(--x-size-padding-left-filter-default);
-}
-[dir="rtl"] .x-filter {
-  padding-right: var(--x-size-padding-left-filter-default);
-}
-[dir="ltr"] .x-filter {
-  padding-right: var(--x-size-padding-right-filter-default);
-}
-[dir="rtl"] .x-filter {
-  padding-left: var(--x-size-padding-right-filter-default);
-}
-[dir="ltr"] .x-filter {
-  border-right-width: var(--x-size-border-width-right-filter-default);
-}
-[dir="rtl"] .x-filter {
-  border-left-width: var(--x-size-border-width-right-filter-default);
-}
-[dir="ltr"] .x-filter {
-  border-left-width: var(--x-size-border-width-left-filter-default);
-}
-[dir="rtl"] .x-filter {
-  border-right-width: var(--x-size-border-width-left-filter-default);
-}
-.x-filter {
-  display: inline-flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  box-sizing: border-box;
-  text-align: left;
-  gap: var(--x-size-gap-filter-default);
-  padding-top: var(--x-size-padding-top-filter-default);
-  padding-bottom: var(--x-size-padding-bottom-filter-default);
-  background-color: var(--x-color-background-filter-default);
-  border-color: var(--x-color-border-filter-default);
-  color: var(--x-color-text-filter-default);
-  border-style: solid;
-  border-top-width: var(--x-size-border-width-top-filter-default);
-  border-bottom-width: var(--x-size-border-width-bottom-filter-default);
-  border-radius: var(--x-size-border-radius-top-left-filter-default) var(--x-size-border-radius-top-right-filter-default) var(--x-size-border-radius-bottom-right-filter-default) var(--x-size-border-radius-bottom-left-filter-default);
-  font-family: var(--x-font-family-filter-default);
-  font-size: var(--x-size-font-filter-default);
-  font-weight: var(--x-number-font-weight-filter-default);
-  line-height: var(--x-size-line-height-filter-default);
-  cursor: pointer;
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-filter {
-    gap: 0;
-  }
-  .x-filter > *:not(:last-child) {
-    margin-right: var(--x-size-gap-filter-default);
-  }
-}
-.x-filter > * {
-  flex: 0 0 auto;
-}
-.x-filter__label {
-  flex: 0 1 auto;
-}
-.x-filter__count {
-  font-weight: var(--x-number-font-weight-filter-count-default);
-}
-.x-filter--is-selected {
-  --x-color-background-filter-default: var(--x-color-background-filter-default-selected);
-  --x-color-border-filter-default: var(--x-color-border-filter-default-selected);
-  --x-color-text-filter-default: var(--x-color-text-filter-default-selected);
-  --x-number-font-weight-filter-default: var(--x-number-font-weight-filter-default-selected);
-  --x-number-font-weight-filter-count-default: var(
-    --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);
-}
-.x-hierarchical-filter-container {
-  list-style: none;
-}
-[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-left: var(--x-size-padding-left-filter-children);
-}
-[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-right: var(--x-size-padding-left-filter-children);
-}
-[dir="ltr"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="ltr"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-right: var(--x-size-padding-right-filter-children);
-}
-[dir="rtl"] .x-hierarchical-filter-container .x-hierarchical-filter__children,[dir="rtl"]  .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  padding-left: var(--x-size-padding-right-filter-children);
-}
-.x-hierarchical-filter-container .x-hierarchical-filter__children, .x-hierarchical-filter-container .x-hierarchical-filter__children.x-list {
-  margin: var(--x-size-margin-filter-children);
-  padding-top: var(--x-size-padding-top-filter-children);
-  padding-bottom: var(--x-size-padding-bottom-filter-children);
-}
-.x-hierarchical-filter-container .x-hierarchical-filter-container,
-.x-hierarchical-filter-container .x-filter {
-  width: 100%;
-}
-:root {
-  --x-size-margin-filter-children: 0;
-  --x-size-padding-top-filter-children: 0;
-  --x-size-padding-right-filter-children: 0;
-  --x-size-padding-bottom-filter-children: 0;
-  --x-size-padding-left-filter-children: var(--x-size-base-05);
-}
-.x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
-.x-filter--justified .x-filter > *:last-child:not(.x-filter__label) {
-  margin-left: auto;
-}
 .x-grid-list {
   margin: 0;
   display: grid;
@@ -5666,6 +5516,17 @@
   position: sticky !important;
 }
 
-:root {
-  --x-size-width-dropdown-xl: 282px;
+.x-facet--outlined.x-facet,
+.x-facet--outlined .x-facet {
+  --x-color-border-facet-default: var(--x-color-border-facet-outlined);
+  --x-size-border-width-facet-default: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-top-facet-default: var(--x-size-border-width-top-facet-outlined);
+  --x-size-border-width-right-facet-default: var(--x-size-border-width-right-facet-outlined);
+  --x-size-border-width-bottom-facet-default: var(--x-size-border-width-bottom-facet-outlined);
+  --x-size-border-width-left-facet-default: var(--x-size-border-width-left-facet-outlined);
+  --x-size-padding-facet-header-default: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-top-facet-header-default: var(--x-size-padding-top-facet-header-outlined);
+  --x-size-padding-right-facet-header-default: var(--x-size-padding-right-facet-header-outlined);
+  --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-outlined);
+  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
 }

package/docs/API-reference/components/common/animations/x-components.animate-width.md

@@ -25,15 +25,15 @@ Used as a prop in an animatable component:
 </template>
 
 <script>
-import AnimateWidth from "@empathyco/x-components/js/components/animations/animate-width.vue";
-
-export default {
-  data() {
-    return {
-      AnimateWidth
-    };
-  }
-};
+  import AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue';
+
+  export default {
+    data() {
+      return {
+        AnimateWidth
+      };
+    }
+  };
 </script>
 ```
 
@@ -50,14 +50,14 @@ Used as a regular Transition:
 </template>
 
 <script>
-import AnimateWidth from "@empathyco/x-components/js/components/animations/animate-width.vue";
-
-export default {
-  data() {
-    return {
-      visible: true
-    };
-  }
-};
+  import AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue';
+
+  export default {
+    data() {
+      return {
+        visible: true
+      };
+    }
+  };
 </script>
 ```

package/docs/API-reference/components/common/animations/x-components.fade.md

@@ -35,17 +35,17 @@ Wrapping a component:
   </div>
 </template>
 <script>
-import { Fade } from "@empathyco/x-components";
-export default {
-  name: "FadeAnimationDemo",
-  components: {
-    Fade
-  },
-  data() {
-    return {
-      shouldRender: false
-    };
-  }
-};
+  import { Fade } from '@empathyco/x-components';
+  export default {
+    name: 'FadeAnimationDemo',
+    components: {
+      Fade
+    },
+    data() {
+      return {
+        shouldRender: false
+      };
+    }
+  };
 </script>
 ```