@empathyco/x-components 3.0.0-alpha.52 → 3.0.0-alpha.53

package/design-system/dropdown-card.css

@@ -9,7 +9,8 @@
   --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
   --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
   --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card); }
+  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+}
 
 .x-dropdown--card {
   --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
@@ -38,4 +39,5 @@
   );
   --x-size-border-width-left-dropdown-list-default: var(
     --x-size-border-width-left-dropdown-list-card
-  ); }
+  );
+}

package/design-system/dropdown-default.css

@@ -69,137 +69,174 @@
   --x-size-gap-dropdown-item-default: var(--x-size-base-03);
   --x-string-box-shadow-dropdown-default: none;
   --x-string-overflow-dropdown-toggle-default: hidden;
-  --x-string-overflow-dropdown-list-default: hidden; }
+  --x-string-overflow-dropdown-list-default: hidden;
+}
 
-@use 'sass:string';
 .x-dropdown {
   box-sizing: border-box;
   position: relative;
   font-size: var(--x-size-font-dropdown-default);
   font-family: var(--x-font-family-dropdown-default);
   font-weight: var(--x-number-font-weight-dropdown-default);
-  line-height: var(--x-size-line-height-dropdown-default); }
-  [dir="ltr"] .x-dropdown__toggle {
-    border-right-width: var(--x-size-border-width-right-dropdown-toggle-default); }
-  [dir="rtl"] .x-dropdown__toggle {
-    border-left-width: var(--x-size-border-width-right-dropdown-toggle-default); }
-  [dir="ltr"] .x-dropdown__toggle {
-    border-left-width: var(--x-size-border-width-left-dropdown-toggle-default); }
-  [dir="rtl"] .x-dropdown__toggle {
-    border-right-width: var(--x-size-border-width-left-dropdown-toggle-default); }
-  [dir="ltr"] .x-dropdown__toggle {
-    padding-right: var(--x-size-padding-right-dropdown-toggle-default); }
-  [dir="rtl"] .x-dropdown__toggle {
-    padding-left: var(--x-size-padding-right-dropdown-toggle-default); }
-  [dir="ltr"] .x-dropdown__toggle {
-    padding-left: var(--x-size-padding-left-dropdown-toggle-default); }
-  [dir="rtl"] .x-dropdown__toggle {
-    padding-right: var(--x-size-padding-left-dropdown-toggle-default); }
+  line-height: var(--x-size-line-height-dropdown-default);
+}
+[dir="ltr"] .x-dropdown__toggle {
+  border-right-width: var(--x-size-border-width-right-dropdown-toggle-default);
+}
+[dir="rtl"] .x-dropdown__toggle {
+  border-left-width: var(--x-size-border-width-right-dropdown-toggle-default);
+}
+[dir="ltr"] .x-dropdown__toggle {
+  border-left-width: var(--x-size-border-width-left-dropdown-toggle-default);
+}
+[dir="rtl"] .x-dropdown__toggle {
+  border-right-width: var(--x-size-border-width-left-dropdown-toggle-default);
+}
+[dir="ltr"] .x-dropdown__toggle {
+  padding-right: var(--x-size-padding-right-dropdown-toggle-default);
+}
+[dir="rtl"] .x-dropdown__toggle {
+  padding-left: var(--x-size-padding-right-dropdown-toggle-default);
+}
+[dir="ltr"] .x-dropdown__toggle {
+  padding-left: var(--x-size-padding-left-dropdown-toggle-default);
+}
+[dir="rtl"] .x-dropdown__toggle {
+  padding-right: var(--x-size-padding-left-dropdown-toggle-default);
+}
+.x-dropdown__toggle {
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-dropdown-toggle-default);
+  border-bottom-width: var(--x-size-border-width-bottom-dropdown-toggle-default);
+  border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
+  background: var(--x-color-background-dropdown-toggle-default);
+  color: var(--x-color-text-dropdown-toggle-default);
+  border-color: var(--x-color-border-dropdown-toggle-default);
+  padding-top: var(--x-size-padding-top-dropdown-toggle-default);
+  padding-bottom: var(--x-size-padding-bottom-dropdown-toggle-default);
+  gap: var(--x-size-gap-dropdown-item-default);
+  width: var(--x-size-width-dropdown-toggle-default);
+  display: flex;
+  flex-flow: row nowrap;
+  margin: 0;
+  cursor: pointer;
+  overflow: var(--x-string-overflow-dropdown-toggle-default);
+  box-shadow: var(--x-string-box-shadow-dropdown-default);
+}
+@media not all and (min-resolution: 0.001dpcm) {
   .x-dropdown__toggle {
-    border-style: solid;
-    border-top-width: var(--x-size-border-width-top-dropdown-toggle-default);
-    border-bottom-width: var(--x-size-border-width-bottom-dropdown-toggle-default);
-    border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
-    background: var(--x-color-background-dropdown-toggle-default);
-    color: var(--x-color-text-dropdown-toggle-default);
-    border-color: var(--x-color-border-dropdown-toggle-default);
-    padding-top: var(--x-size-padding-top-dropdown-toggle-default);
-    padding-bottom: var(--x-size-padding-bottom-dropdown-toggle-default);
-    gap: var(--x-size-gap-dropdown-item-default);
-    width: var(--x-size-width-dropdown-toggle-default);
-    display: flex;
-    flex-flow: row nowrap;
-    margin: 0;
-    cursor: pointer;
-    overflow: var(--x-string-overflow-dropdown-toggle-default);
-    box-shadow: var(--x-string-box-shadow-dropdown-default); }
-    @media not all and (min-resolution: 0.001dpcm) {
-      .x-dropdown__toggle {
-        gap: 0; }
-        .x-dropdown__toggle > *:not(:last-child) {
-          margin-right: var(--x-size-gap-dropdown-item-default); } }
-    [dir="ltr"] .x-dropdown__toggle * + .x-icon:last-child {
-      margin-left: auto; }
-    [dir="rtl"] .x-dropdown__toggle * + .x-icon:last-child {
-      margin-right: auto; }
-  .x-dropdown__toggle-selected-value {
-    color: var(--x-color-text-dropdown-toggle-default-selected); }
-  [dir="ltr"] .x-dropdown__items-list {
-    border-right-width: var(--x-size-border-width-right-dropdown-list-default); }
-  [dir="rtl"] .x-dropdown__items-list {
-    border-left-width: var(--x-size-border-width-right-dropdown-list-default); }
-  [dir="ltr"] .x-dropdown__items-list {
-    border-left-width: var(--x-size-border-width-left-dropdown-list-default); }
-  [dir="rtl"] .x-dropdown__items-list {
-    border-right-width: var(--x-size-border-width-left-dropdown-list-default); }
-  .x-dropdown__items-list {
-    background: var(--x-color-background-dropdown-default);
-    box-sizing: border-box;
-    min-width: var(--x-size-min-width-dropdown-list-default);
-    position: absolute;
-    top: calc(100% + var(--x-size-gap-dropdown-default));
-    overflow: var(--x-string-overflow-dropdown-list-default);
-    border-color: var(--x-color-border-dropdown-list-default);
-    border-top-width: var(--x-size-border-width-top-dropdown-list-default);
-    border-bottom-width: var(--x-size-border-width-bottom-dropdown-list-default);
-    border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
-    border-style: solid;
-    margin: 0;
-    padding: 0;
-    box-shadow: var(--x-string-box-shadow-dropdown-default);
-    z-index: 1; }
-    .x-dropdown__items-list:before, .x-dropdown__items-list:after {
-      content: '';
-      display: block;
-      height: var(--x-size-padding-vertical-dropdown-list-default); }
-  [dir="ltr"] .x-dropdown__item {
-    padding-left: var(--x-size-padding-left-dropdown-item-default); }
-  [dir="rtl"] .x-dropdown__item {
-    padding-right: var(--x-size-padding-left-dropdown-item-default); }
-  [dir="ltr"] .x-dropdown__item {
-    padding-right: var(--x-size-padding-right-dropdown-item-default); }
-  [dir="rtl"] .x-dropdown__item {
-    padding-left: var(--x-size-padding-right-dropdown-item-default); }
+    gap: 0;
+  }
+  .x-dropdown__toggle > *:not(:last-child) {
+    margin-right: var(--x-size-gap-dropdown-item-default);
+  }
+}
+[dir="ltr"] .x-dropdown__toggle * + .x-icon:last-child {
+  margin-left: auto;
+}
+[dir="rtl"] .x-dropdown__toggle * + .x-icon:last-child {
+  margin-right: auto;
+}
+.x-dropdown__toggle-selected-value {
+  color: var(--x-color-text-dropdown-toggle-default-selected);
+}
+[dir="ltr"] .x-dropdown__items-list {
+  border-right-width: var(--x-size-border-width-right-dropdown-list-default);
+}
+[dir="rtl"] .x-dropdown__items-list {
+  border-left-width: var(--x-size-border-width-right-dropdown-list-default);
+}
+[dir="ltr"] .x-dropdown__items-list {
+  border-left-width: var(--x-size-border-width-left-dropdown-list-default);
+}
+[dir="rtl"] .x-dropdown__items-list {
+  border-right-width: var(--x-size-border-width-left-dropdown-list-default);
+}
+.x-dropdown__items-list {
+  background: var(--x-color-background-dropdown-default);
+  box-sizing: border-box;
+  min-width: var(--x-size-min-width-dropdown-list-default);
+  position: absolute;
+  top: calc(100% + var(--x-size-gap-dropdown-default));
+  overflow: var(--x-string-overflow-dropdown-list-default);
+  border-color: var(--x-color-border-dropdown-list-default);
+  border-top-width: var(--x-size-border-width-top-dropdown-list-default);
+  border-bottom-width: var(--x-size-border-width-bottom-dropdown-list-default);
+  border-radius: var(--x-size-border-radius-top-left-dropdown-default) var(--x-size-border-radius-top-right-dropdown-default) var(--x-size-border-radius-bottom-right-dropdown-default) var(--x-size-border-radius-bottom-left-dropdown-default);
+  border-style: solid;
+  margin: 0;
+  padding: 0;
+  box-shadow: var(--x-string-box-shadow-dropdown-default);
+  z-index: 1;
+}
+.x-dropdown__items-list:before, .x-dropdown__items-list:after {
+  content: "";
+  display: block;
+  height: var(--x-size-padding-vertical-dropdown-list-default);
+}
+[dir="ltr"] .x-dropdown__item {
+  padding-left: var(--x-size-padding-left-dropdown-item-default);
+}
+[dir="rtl"] .x-dropdown__item {
+  padding-right: var(--x-size-padding-left-dropdown-item-default);
+}
+[dir="ltr"] .x-dropdown__item {
+  padding-right: var(--x-size-padding-right-dropdown-item-default);
+}
+[dir="rtl"] .x-dropdown__item {
+  padding-left: var(--x-size-padding-right-dropdown-item-default);
+}
+.x-dropdown__item {
+  background: var(--x-color-background-dropdown-default);
+  padding-top: var(--x-size-padding-top-dropdown-item-default);
+  padding-bottom: var(--x-size-padding-bottom-dropdown-item-default);
+  gap: var(--x-size-gap-dropdown-item-default);
+  border: none;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  text-align: left;
+  width: 100%;
+  margin: 0;
+  white-space: nowrap;
+  cursor: pointer;
+}
+@media not all and (min-resolution: 0.001dpcm) {
   .x-dropdown__item {
-    background: var(--x-color-background-dropdown-default);
-    padding-top: var(--x-size-padding-top-dropdown-item-default);
-    padding-bottom: var(--x-size-padding-bottom-dropdown-item-default);
-    gap: var(--x-size-gap-dropdown-item-default);
-    border: none;
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: flex-start;
-    text-align: left;
-    width: 100%;
-    margin: 0;
-    white-space: nowrap;
-    cursor: pointer; }
-    @media not all and (min-resolution: 0.001dpcm) {
-      .x-dropdown__item {
-        gap: 0; }
-        .x-dropdown__item > *:not(:last-child) {
-          margin-right: var(--x-size-gap-dropdown-item-default); } }
-    .x-dropdown__item:hover, .x-dropdown__item--is-highlighted {
-      color: var(--x-color-text-dropdown-item-default-hover);
-      background-color: var(--x-color-background-dropdown-item-default-hover);
-      font-weight: var(--x-number-font-weight-dropdown-item-default-hover);
-      -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
-              text-decoration: var(--x-font-decoration-dropdown-item-default-hover); }
-    .x-dropdown__item--is-selected {
-      color: var(--x-color-text-dropdown-item-default-selected);
-      background-color: var(--x-color-background-dropdown-item-default-selected);
-      font-weight: var(--x-number-font-weight-dropdown-item-default-selected);
-      -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
-              text-decoration: var(--x-font-decoration-dropdown-item-default-selected); }
-    [dir="ltr"] .x-dropdown__item * + .x-icon:last-child {
-      margin-left: auto; }
-    [dir="rtl"] .x-dropdown__item * + .x-icon:last-child {
-      margin-right: auto; }
-  .x-dropdown--is-open {
-    --x-color-background-dropdown-toggle-default: var(
-      --x-color-background-dropdown-toggle-open-default
-    ); }
-  [dir="ltr"] .x-dropdown--right .x-dropdown__items-list {
-    right: 0; }
-  [dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
-    left: 0; }
+    gap: 0;
+  }
+  .x-dropdown__item > *:not(:last-child) {
+    margin-right: var(--x-size-gap-dropdown-item-default);
+  }
+}
+.x-dropdown__item:hover, .x-dropdown__item--is-highlighted {
+  color: var(--x-color-text-dropdown-item-default-hover);
+  background-color: var(--x-color-background-dropdown-item-default-hover);
+  font-weight: var(--x-number-font-weight-dropdown-item-default-hover);
+  -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
+          text-decoration: var(--x-font-decoration-dropdown-item-default-hover);
+}
+.x-dropdown__item--is-selected {
+  color: var(--x-color-text-dropdown-item-default-selected);
+  background-color: var(--x-color-background-dropdown-item-default-selected);
+  font-weight: var(--x-number-font-weight-dropdown-item-default-selected);
+  -webkit-text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
+          text-decoration: var(--x-font-decoration-dropdown-item-default-selected);
+}
+[dir="ltr"] .x-dropdown__item * + .x-icon:last-child {
+  margin-left: auto;
+}
+[dir="rtl"] .x-dropdown__item * + .x-icon:last-child {
+  margin-right: auto;
+}
+.x-dropdown--is-open {
+  --x-color-background-dropdown-toggle-default: var(
+    --x-color-background-dropdown-toggle-open-default
+  );
+}
+[dir="ltr"] .x-dropdown--right .x-dropdown__items-list {
+  right: 0;
+}
+[dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
+  left: 0;
+}

package/design-system/dropdown-l.css

@@ -1,5 +1,7 @@
 :root {
-  --x-size-width-dropdown-l: 202px; }
+  --x-size-width-dropdown-l: 202px;
+}
 
 .x-dropdown.x-dropdown--l {
-  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l); }
+  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
+}

package/design-system/dropdown-line.css

@@ -20,7 +20,8 @@
   --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-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);
@@ -58,4 +59,5 @@
   );
   --x-size-border-width-left-dropdown-list-default: var(
     --x-size-border-width-left-dropdown-list-line
-  ); }
+  );
+}

package/design-system/dropdown-m.css

@@ -1,5 +1,7 @@
 :root {
-  --x-size-width-dropdown-m: 130px; }
+  --x-size-width-dropdown-m: 130px;
+}
 
 .x-dropdown.x-dropdown--m {
-  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m); }
+  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
+}

package/design-system/dropdown-pill.css

@@ -4,7 +4,8 @@
   --x-size-border-width-top-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
   --x-size-border-width-right-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
   --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); }
+  --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
+}
 
 .x-dropdown--pill {
   --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-pill);
@@ -38,4 +39,5 @@
   );
   --x-size-border-width-left-dropdown-list-default: var(
     --x-size-border-width-left-dropdown-list-pill
-  ); }
+  );
+}

package/design-system/dropdown-s.css

@@ -1,5 +1,7 @@
 :root {
-  --x-size-width-dropdown-s: 74px; }
+  --x-size-width-dropdown-s: 74px;
+}
 
 .x-dropdown.x-dropdown--s {
-  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s); }
+  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s);
+}

package/design-system/dropdown-xl.css

@@ -1,5 +1,7 @@
 :root {
-  --x-size-width-dropdown-xl: 282px; }
+  --x-size-width-dropdown-xl: 282px;
+}
 
 .x-dropdown.x-dropdown--xl {
-  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl); }
+  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-xl);
+}

package/design-system/facet-card.css

@@ -8,7 +8,8 @@
   --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-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
+}
 
 .x-facet--card.x-facet,
 .x-facet--card .x-facet {
@@ -21,4 +22,5 @@
   --x-size-padding-top-facet-header-default: var(--x-size-padding-top-facet-header-card);
   --x-size-padding-right-facet-header-default: var(--x-size-padding-right-facet-header-card);
   --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); }
+  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-card);
+}

package/design-system/facet-default.css

@@ -29,17 +29,25 @@
   --x-font-family-facet-default: var(--x-font-family-title3);
   --x-size-font-facet-default: var(--x-size-font-title3);
   --x-number-font-weight-facet-default: var(--x-number-font-weight-title3);
-  --x-size-line-height-facet-default: var(--x-size-line-height-title3); }
+  --x-size-line-height-facet-default: var(--x-size-line-height-title3);
+}
 
-@use 'sass:string';
 [dir="ltr"] .x-facet {
-  border-right-width: var(--x-size-border-width-right-facet-default); }
+  border-right-width: var(--x-size-border-width-right-facet-default);
+}
+
 [dir="rtl"] .x-facet {
-  border-left-width: var(--x-size-border-width-right-facet-default); }
+  border-left-width: var(--x-size-border-width-right-facet-default);
+}
+
 [dir="ltr"] .x-facet {
-  border-left-width: var(--x-size-border-width-left-facet-default); }
+  border-left-width: var(--x-size-border-width-left-facet-default);
+}
+
 [dir="rtl"] .x-facet {
-  border-right-width: var(--x-size-border-width-left-facet-default); }
+  border-right-width: var(--x-size-border-width-left-facet-default);
+}
+
 .x-facet {
   display: flex;
   flex-flow: column nowrap;
@@ -50,53 +58,70 @@
   border-style: solid;
   border-top-width: var(--x-size-border-width-top-facet-default);
   border-bottom-width: var(--x-size-border-width-bottom-facet-default);
-  border-radius: var(--x-size-border-radius-top-left-facet-default) var(--x-size-border-radius-top-right-facet-default) var(--x-size-border-radius-bottom-right-facet-default) var(--x-size-border-radius-bottom-left-facet-default); }
-  [dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
-    text-align: left; }
-  [dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
-    text-align: right; }
-  [dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
-    padding-left: var(--x-size-padding-left-facet-header-default); }
-  [dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
-    padding-right: var(--x-size-padding-left-facet-header-default); }
-  [dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
-    padding-right: var(--x-size-padding-right-facet-header-default); }
-  [dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
-    padding-left: var(--x-size-padding-right-facet-header-default); }
-  [dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
-    border-right-width: var(--x-size-border-width-right-facet-header-default); }
-  [dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
-    border-left-width: var(--x-size-border-width-right-facet-header-default); }
-  [dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
-    border-left-width: var(--x-size-border-width-left-facet-header-default); }
-  [dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
-    border-right-width: var(--x-size-border-width-left-facet-header-default); }
+  border-radius: var(--x-size-border-radius-top-left-facet-default) var(--x-size-border-radius-top-right-facet-default) var(--x-size-border-radius-bottom-right-facet-default) var(--x-size-border-radius-bottom-left-facet-default);
+}
+[dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
+  text-align: left;
+}
+[dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
+  text-align: right;
+}
+[dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
+  padding-left: var(--x-size-padding-left-facet-header-default);
+}
+[dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
+  padding-right: var(--x-size-padding-left-facet-header-default);
+}
+[dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
+  padding-right: var(--x-size-padding-right-facet-header-default);
+}
+[dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
+  padding-left: var(--x-size-padding-right-facet-header-default);
+}
+[dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
+  border-right-width: var(--x-size-border-width-right-facet-header-default);
+}
+[dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
+  border-left-width: var(--x-size-border-width-right-facet-header-default);
+}
+[dir="ltr"] .x-facet > *:first-child,[dir="ltr"]  .x-facet__header {
+  border-left-width: var(--x-size-border-width-left-facet-header-default);
+}
+[dir="rtl"] .x-facet > *:first-child,[dir="rtl"]  .x-facet__header {
+  border-right-width: var(--x-size-border-width-left-facet-header-default);
+}
+.x-facet > *:first-child, .x-facet__header {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: stretch;
+  align-items: flex-start;
+  box-sizing: border-box;
+  background-color: var(--x-color-background-facet-header-default);
+  border-color: var(--x-color-border-facet-header-default);
+  color: var(--x-color-text-facet-default);
+  gap: var(--x-size-gap-facet-header-default);
+  padding-top: var(--x-size-padding-top-facet-header-default);
+  padding-bottom: var(--x-size-padding-bottom-facet-header-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-facet-header-default);
+  border-bottom-width: var(--x-size-border-width-bottom-facet-header-default);
+  font-family: var(--x-font-family-facet-default);
+  font-size: var(--x-size-font-facet-default);
+  font-weight: var(--x-number-font-weight-facet-default);
+  line-height: var(--x-size-line-height-facet-default);
+}
+@media not all and (min-resolution: 0.001dpcm) {
   .x-facet > *:first-child, .x-facet__header {
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: stretch;
-    align-items: flex-start;
-    box-sizing: border-box;
-    background-color: var(--x-color-background-facet-header-default);
-    border-color: var(--x-color-border-facet-header-default);
-    color: var(--x-color-text-facet-default);
-    gap: var(--x-size-gap-facet-header-default);
-    padding-top: var(--x-size-padding-top-facet-header-default);
-    padding-bottom: var(--x-size-padding-bottom-facet-header-default);
-    border-style: solid;
-    border-top-width: var(--x-size-border-width-top-facet-header-default);
-    border-bottom-width: var(--x-size-border-width-bottom-facet-header-default);
-    font-family: var(--x-font-family-facet-default);
-    font-size: var(--x-size-font-facet-default);
-    font-weight: var(--x-number-font-weight-facet-default);
-    line-height: var(--x-size-line-height-facet-default); }
-    @media not all and (min-resolution: 0.001dpcm) {
-      .x-facet > *:first-child, .x-facet__header {
-        gap: 0; }
-        .x-facet > *:first-child > *:not(:last-child), .x-facet__header > *:not(:last-child) {
-          margin-right: var(--x-size-gap-facet-header-default); } }
-    .x-facet > *:first-child .x-icon, .x-facet__header .x-icon {
-      --x-size-height-icon: var(--x-size-line-height-facet-default);
-      --x-size-width-icon: var(--x-size-line-height-facet-default); }
-      .x-facet > *:first-child .x-icon:last-child:not(:first-child), .x-facet__header .x-icon:last-child:not(:first-child) {
-        margin-left: auto; }
+    gap: 0;
+  }
+  .x-facet > *:first-child > *:not(:last-child), .x-facet__header > *:not(:last-child) {
+    margin-right: var(--x-size-gap-facet-header-default);
+  }
+}
+.x-facet > *:first-child .x-icon, .x-facet__header .x-icon {
+  --x-size-height-icon: var(--x-size-line-height-facet-default);
+  --x-size-width-icon: var(--x-size-line-height-facet-default);
+}
+.x-facet > *:first-child .x-icon:last-child:not(:first-child), .x-facet__header .x-icon:last-child:not(:first-child) {
+  margin-left: auto;
+}

package/design-system/facet-line.css

@@ -4,7 +4,8 @@
   --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-size-border-width-left-facet-header-line: 0;
+}
 
 .x-facet--line.x-facet,
 .x-facet--line .x-facet {
@@ -13,4 +14,5 @@
   --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); }
+  --x-size-border-width-left-facet-header-default: var(--x-size-border-width-left-facet-header-line);
+}

package/design-system/facet-outlined.css

@@ -9,7 +9,8 @@
   --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
   --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
   --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); }
+  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+}
 
 .x-facet--outlined.x-facet,
 .x-facet--outlined .x-facet {
@@ -23,4 +24,5 @@
   --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); }
+  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
+}