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

package/design-system/option-list-bottom.css

@@ -41,7 +41,8 @@
   --x-number-font-weight-option-list-button-bottom: var(--x-number-font-weight-base-regular);
   --x-number-font-weight-option-list-button-bottom-selected: var(
     --x-number-font-weight-base-regular
-  ); }
+  );
+}
 
 .x-option-list--bottom.x-option-list,
 .x-option-list--bottom .x-option-list {
@@ -79,49 +80,52 @@
   --x-size-font-option-list-button-default: var(--x-size-font-option-list-button-bottom);
   --x-number-font-weight-option-list-button-default: var(
     --x-number-font-weight-option-list-button-bottom
-  ); }
-  .x-option-list--bottom.x-option-list .x-option-list__item.x-option-list__item--is-selected,
-  .x-option-list--bottom .x-option-list .x-option-list__item.x-option-list__item--is-selected {
-    --x-color-text-option-list-button-default-selected: var(
-      --x-color-text-option-list-button-bottom-selected
-    );
-    --x-color-text-option-list-button-default-selected-hover: var(
-      --x-color-text-option-list-button-bottom-selected-hover
-    );
-    --x-color-border-option-list-item-default-selected: var(
-      --x-color-border-option-list-item-bottom-selected
-    );
-    --x-color-border-top-option-list-item-default-selected: var(
-      --x-color-border-top-option-list-item-bottom-selected
-    );
-    --x-color-border-right-option-list-item-default-selected: var(
-      --x-color-border-top-option-list-item-bottom-selected
-    );
-    --x-color-border-bottom-option-list-item-default-selected: var(
-      --x-color-border-bottom-option-list-item-bottom-selected
-    );
-    --x-color-border-left-option-list-item-default-selected: var(
-      --x-color-border-top-option-list-item-bottom-selected
-    );
-    --x-size-border-width-top-option-list-item-default: var(
-      --x-size-border-width-top-option-list-item-bottom-selected
-    );
-    --x-size-border-width-right-option-list-item-default: var(
-      --x-size-border-width-right-option-list-item-bottom-selected
-    );
-    --x-size-border-width-bottom-option-list-item-default: var(
-      --x-size-border-width-bottom-option-list-item-bottom-selected
-    );
-    --x-size-border-width-left-option-list-item-default: var(
-      --x-size-border-width-left-option-list-item-bottom-selected
-    );
-    --x-number-font-weight-option-list-button-default-selected: var(
-      --x-number-font-weight-option-list-button-bottom-selected
-    ); }
-  .x-option-list--bottom.x-option-list .x-option-list__item:last-child,
-  .x-option-list--bottom .x-option-list .x-option-list__item:last-child {
-    --x-size-border-width-option-list-item-default: inherit;
-    --x-size-border-width-top-option-list-item-default: inherit;
-    --x-size-border-width-right-option-list-item-default: inherit;
-    --x-size-border-width-bottom-option-list-item-default: inherit;
-    --x-size-border-width-left-option-list-item-default: inherit; }
+  );
+}
+.x-option-list--bottom.x-option-list .x-option-list__item.x-option-list__item--is-selected,
+.x-option-list--bottom .x-option-list .x-option-list__item.x-option-list__item--is-selected {
+  --x-color-text-option-list-button-default-selected: var(
+    --x-color-text-option-list-button-bottom-selected
+  );
+  --x-color-text-option-list-button-default-selected-hover: var(
+    --x-color-text-option-list-button-bottom-selected-hover
+  );
+  --x-color-border-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-bottom-selected
+  );
+  --x-color-border-top-option-list-item-default-selected: var(
+    --x-color-border-top-option-list-item-bottom-selected
+  );
+  --x-color-border-right-option-list-item-default-selected: var(
+    --x-color-border-top-option-list-item-bottom-selected
+  );
+  --x-color-border-bottom-option-list-item-default-selected: var(
+    --x-color-border-bottom-option-list-item-bottom-selected
+  );
+  --x-color-border-left-option-list-item-default-selected: var(
+    --x-color-border-top-option-list-item-bottom-selected
+  );
+  --x-size-border-width-top-option-list-item-default: var(
+    --x-size-border-width-top-option-list-item-bottom-selected
+  );
+  --x-size-border-width-right-option-list-item-default: var(
+    --x-size-border-width-right-option-list-item-bottom-selected
+  );
+  --x-size-border-width-bottom-option-list-item-default: var(
+    --x-size-border-width-bottom-option-list-item-bottom-selected
+  );
+  --x-size-border-width-left-option-list-item-default: var(
+    --x-size-border-width-left-option-list-item-bottom-selected
+  );
+  --x-number-font-weight-option-list-button-default-selected: var(
+    --x-number-font-weight-option-list-button-bottom-selected
+  );
+}
+.x-option-list--bottom.x-option-list .x-option-list__item:last-child,
+.x-option-list--bottom .x-option-list .x-option-list__item:last-child {
+  --x-size-border-width-option-list-item-default: inherit;
+  --x-size-border-width-top-option-list-item-default: inherit;
+  --x-size-border-width-right-option-list-item-default: inherit;
+  --x-size-border-width-bottom-option-list-item-default: inherit;
+  --x-size-border-width-left-option-list-item-default: inherit;
+}

package/design-system/option-list-default.css

@@ -76,7 +76,8 @@
   --x-font-decoration-option-list-button-default-hover: underline;
   --x-size-font-option-list-button-default: var(--x-size-font-text);
   --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); }
+  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
+}
 
 .x-option-list {
   display: inline-flex;
@@ -85,95 +86,107 @@
   box-sizing: border-box;
   list-style-type: none;
   margin: 0;
-  padding: 0; }
-  [dir="ltr"] .x-option-list__item {
-    border-right-width: var(--x-size-border-width-right-option-list-item-default); }
-  [dir="rtl"] .x-option-list__item {
-    border-left-width: var(--x-size-border-width-right-option-list-item-default); }
-  [dir="ltr"] .x-option-list__item {
-    border-left-width: var(--x-size-border-width-left-option-list-item-default); }
-  [dir="rtl"] .x-option-list__item {
-    border-right-width: var(--x-size-border-width-left-option-list-item-default); }
-  .x-option-list__item {
-    border-top-color: var(--x-color-border-top-option-list-item-default);
-    border-right-color: var(--x-color-border-right-option-list-item-default);
-    border-bottom-color: var(--x-color-border-bottom-option-list-item-default);
-    border-left-color: var(--x-color-border-left-option-list-item-default);
-    border-style: solid;
-    border-top-width: var(--x-size-border-width-top-option-list-item-default);
-    border-bottom-width: var(--x-size-border-width-bottom-option-list-item-default); }
-    .x-option-list__item.x-option-list__item--is-selected {
-      --x-color-border-option-list-item-default: var(
-        --x-color-border-option-list-item-default-selected
-      );
-      --x-color-border-top-option-list-item-default: var(
-        --x-color-border-top-option-list-item-default-selected
-      );
-      --x-color-border-right-option-list-item-default: var(
-        --x-color-border-right-option-list-item-default-selected
-      );
-      --x-color-border-bottom-option-list-item-default: var(
-        --x-color-border-bottom-option-list-item-default-selected
-      );
-      --x-color-border-left-option-list-item-default: var(
-        --x-color-border-left-option-list-item-default-selected
-      );
-      --x-size-border-width-top-option-list-item-default: var(
-        --x-size-border-width-top-option-list-item-default-selected
-      );
-      --x-size-border-width-right-option-list-item-default: var(
-        --x-size-border-width-right-option-list-item-default-selected
-      );
-      --x-size-border-width-bottom-option-list-item-default: var(
-        --x-size-border-width-bottom-option-list-item-default-selected
-      );
-      --x-size-border-width-left-option-list-item-default: var(
-        --x-size-border-width-left-option-list-item-default-selected
-      ); }
-      .x-option-list__item.x-option-list__item--is-selected .x-button {
-        --x-color-background-button-default: var(
-          --x-color-background-option-list-button-default-selected
-        );
-        --x-color-border-button-default: var(--x-color-border-option-list-button-default-selected);
-        --x-color-text-button-default: var(--x-color-text-option-list-button-default-selected);
-        --x-number-font-weight-option-list-button-default: var(
-          --x-number-font-weight-option-list-button-default-selected
-        ); }
-        .x-option-list__item.x-option-list__item--is-selected .x-button:hover {
-          --x-color-background-button-default: var(
-            --x-color-background-option-list-button-default-selected-hover
-          );
-          --x-color-border-button-default: var(
-            --x-color-border-option-list-button-default-selected-hover
-          );
-          --x-color-text-button-default: var(
-            --x-color-text-option-list-button-default-selected-hover
-          ); }
-    .x-option-list__item:last-child {
-      --x-size-border-width-option-list-item-default: 0;
-      --x-size-border-width-top-option-list-item-default: 0;
-      --x-size-border-width-right-option-list-item-default: 0;
-      --x-size-border-width-bottom-option-list-item-default: 0;
-      --x-size-border-width-left-option-list-item-default: 0; }
-    .x-option-list__item .x-button {
-      --x-color-background-button-default: var(--x-color-background-option-list-button-default);
-      --x-color-border-button-default: var(--x-color-border-option-list-button-default);
-      --x-color-text-button-default: var(--x-color-text-option-list-button-default);
-      min-height: auto;
-      --x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
-      --x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
-      --x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
-      --x-size-padding-bottom-button-default: var(
-        --x-size-padding-bottom-option-list-button-default
-      );
-      --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
-      --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
-      --x-size-font-button-default: var(--x-size-font-option-list-button-default); }
-      .x-option-list__item .x-button:hover {
-        --x-color-background-button-default: var(
-          --x-color-background-option-list-button-default-hover
-        );
-        --x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
-        --x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
-        -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
-                text-decoration: var(--x-font-decoration-option-list-button-default-hover); }
+  padding: 0;
+}
+[dir="ltr"] .x-option-list__item {
+  border-right-width: var(--x-size-border-width-right-option-list-item-default);
+}
+[dir="rtl"] .x-option-list__item {
+  border-left-width: var(--x-size-border-width-right-option-list-item-default);
+}
+[dir="ltr"] .x-option-list__item {
+  border-left-width: var(--x-size-border-width-left-option-list-item-default);
+}
+[dir="rtl"] .x-option-list__item {
+  border-right-width: var(--x-size-border-width-left-option-list-item-default);
+}
+.x-option-list__item {
+  border-top-color: var(--x-color-border-top-option-list-item-default);
+  border-right-color: var(--x-color-border-right-option-list-item-default);
+  border-bottom-color: var(--x-color-border-bottom-option-list-item-default);
+  border-left-color: var(--x-color-border-left-option-list-item-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-option-list-item-default);
+  border-bottom-width: var(--x-size-border-width-bottom-option-list-item-default);
+}
+.x-option-list__item.x-option-list__item--is-selected {
+  --x-color-border-option-list-item-default: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-top-option-list-item-default: var(
+    --x-color-border-top-option-list-item-default-selected
+  );
+  --x-color-border-right-option-list-item-default: var(
+    --x-color-border-right-option-list-item-default-selected
+  );
+  --x-color-border-bottom-option-list-item-default: var(
+    --x-color-border-bottom-option-list-item-default-selected
+  );
+  --x-color-border-left-option-list-item-default: var(
+    --x-color-border-left-option-list-item-default-selected
+  );
+  --x-size-border-width-top-option-list-item-default: var(
+    --x-size-border-width-top-option-list-item-default-selected
+  );
+  --x-size-border-width-right-option-list-item-default: var(
+    --x-size-border-width-right-option-list-item-default-selected
+  );
+  --x-size-border-width-bottom-option-list-item-default: var(
+    --x-size-border-width-bottom-option-list-item-default-selected
+  );
+  --x-size-border-width-left-option-list-item-default: var(
+    --x-size-border-width-left-option-list-item-default-selected
+  );
+}
+.x-option-list__item.x-option-list__item--is-selected .x-button {
+  --x-color-background-button-default: var(
+    --x-color-background-option-list-button-default-selected
+  );
+  --x-color-border-button-default: var(--x-color-border-option-list-button-default-selected);
+  --x-color-text-button-default: var(--x-color-text-option-list-button-default-selected);
+  --x-number-font-weight-option-list-button-default: var(
+    --x-number-font-weight-option-list-button-default-selected
+  );
+}
+.x-option-list__item.x-option-list__item--is-selected .x-button:hover {
+  --x-color-background-button-default: var(
+    --x-color-background-option-list-button-default-selected-hover
+  );
+  --x-color-border-button-default: var(
+    --x-color-border-option-list-button-default-selected-hover
+  );
+  --x-color-text-button-default: var(
+    --x-color-text-option-list-button-default-selected-hover
+  );
+}
+.x-option-list__item:last-child {
+  --x-size-border-width-option-list-item-default: 0;
+  --x-size-border-width-top-option-list-item-default: 0;
+  --x-size-border-width-right-option-list-item-default: 0;
+  --x-size-border-width-bottom-option-list-item-default: 0;
+  --x-size-border-width-left-option-list-item-default: 0;
+}
+.x-option-list__item .x-button {
+  --x-color-background-button-default: var(--x-color-background-option-list-button-default);
+  --x-color-border-button-default: var(--x-color-border-option-list-button-default);
+  --x-color-text-button-default: var(--x-color-text-option-list-button-default);
+  min-height: auto;
+  --x-size-padding-button-default: var(--x-size-padding-option-list-button-default);
+  --x-size-padding-top-button-default: var(--x-size-padding-top-option-list-button-default);
+  --x-size-padding-right-button-default: var(--x-size-padding-right-option-list-button-default);
+  --x-size-padding-bottom-button-default: var(
+    --x-size-padding-bottom-option-list-button-default
+  );
+  --x-size-padding-left-button-default: var(--x-size-padding-left-option-list-button-default);
+  --x-number-font-weight-button-default: var(--x-number-font-weight-option-list-button-default);
+  --x-size-font-button-default: var(--x-size-font-option-list-button-default);
+}
+.x-option-list__item .x-button:hover {
+  --x-color-background-button-default: var(
+    --x-color-background-option-list-button-default-hover
+  );
+  --x-color-border-button-default: var(--x-color-border-option-list-button-default-hover);
+  --x-color-text-button-default: var(--x-color-text-option-list-button-default-hover);
+  -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
+          text-decoration: var(--x-font-decoration-option-list-button-default-hover);
+}

package/design-system/picture-card.css

@@ -3,11 +3,13 @@
   --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-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); }
+  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
+}

package/design-system/picture-colored.css

@@ -2,13 +2,18 @@
   --x-color-background-picture-colored: var(--x-color-base-neutral-95);
   --x-mix-blend-mode-picture-colored: multiply;
   --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
-  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored); }
+  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
+}
 
 .x-picture--colored.x-picture {
-  --x-color-background-picture-default: var(--x-color-background-picture-colored); }
-  .x-picture--colored.x-picture .x-picture__image {
-    --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-colored); }
-  .x-picture--colored.x-picture .x-picture--fallback {
-    --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-fallback-colored); }
-  .x-picture--colored.x-picture .x-picture--placeholder {
-    --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored); }
+  --x-color-background-picture-default: var(--x-color-background-picture-colored);
+}
+.x-picture--colored.x-picture .x-picture__image {
+  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-colored);
+}
+.x-picture--colored.x-picture .x-picture--fallback {
+  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-fallback-colored);
+}
+.x-picture--colored.x-picture .x-picture--placeholder {
+  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
+}

package/design-system/picture-cover.css

@@ -1,17 +1,20 @@
 :root {
   --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
-  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5); }
+  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
+}
 
 .x-picture--cover.x-picture {
-  position: relative; }
+  position: relative;
+}
 
 .x-result:hover .x-picture--cover:after,
 .x-picture--cover:hover:after {
-  content: '';
+  content: "";
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   background: linear-gradient(to bottom, var(--x-color-background-picture-cover-hover-from) 50%, var(--x-color-background-picture-cover-hover-to) 100%);
   width: 100%;
-  height: 100%; }
+  height: 100%;
+}

package/design-system/picture-default.css

@@ -14,30 +14,39 @@
   --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
   --x-mix-blend-mode-picture-default: none;
   --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
-  --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default); }
+  --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
+}
 
 .x-picture {
   display: block;
   overflow: hidden;
   border-radius: var(--x-size-border-radius-top-picture-default) var(--x-size-border-radius-right-picture-default) var(--x-size-border-radius-bottom-picture-default) var(--x-size-border-radius-left-picture-default);
-  background: var(--x-color-background-picture-default); }
-  .x-picture__image {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: var(--x-object-fit-picture-default);
-    mix-blend-mode: var(--x-mix-blend-mode-picture-default); }
-    .x-picture__image--fallback {
-      --x-object-fit-picture-default: var(--x-object-fit-picture-fallback-default);
-      --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-fallback-default); }
-      .x-picture__image--fallback > rect {
-        fill: var(--x-color-fill-picture-fallback-rect-default); }
-      .x-picture__image--fallback > path {
-        fill: var(--x-color-fill-picture-fallback-path-default); }
-    .x-picture__image--placeholder {
-      --x-object-fit-picture-default: var(--x-object-fit-picture-placeholder-default);
-      --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-default); }
-      .x-picture__image--placeholder > rect {
-        fill: var(--x-color-fill-picture-placeholder-rect-default); }
-      .x-picture__image--placeholder > path {
-        fill: var(--x-color-fill-picture-placeholder-path-default); }
+  background: var(--x-color-background-picture-default);
+}
+.x-picture__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--x-object-fit-picture-default);
+  mix-blend-mode: var(--x-mix-blend-mode-picture-default);
+}
+.x-picture__image--fallback {
+  --x-object-fit-picture-default: var(--x-object-fit-picture-fallback-default);
+  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-fallback-default);
+}
+.x-picture__image--fallback > rect {
+  fill: var(--x-color-fill-picture-fallback-rect-default);
+}
+.x-picture__image--fallback > path {
+  fill: var(--x-color-fill-picture-fallback-path-default);
+}
+.x-picture__image--placeholder {
+  --x-object-fit-picture-default: var(--x-object-fit-picture-placeholder-default);
+  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-default);
+}
+.x-picture__image--placeholder > rect {
+  fill: var(--x-color-fill-picture-placeholder-rect-default);
+}
+.x-picture__image--placeholder > path {
+  fill: var(--x-color-fill-picture-placeholder-path-default);
+}

package/design-system/picture-fixed-ratio.css

@@ -1,25 +1,32 @@
 :root {
-  --x-number-aspect-ratio-picture: 1; }
+  --x-number-aspect-ratio-picture: 1;
+}
 
 [dir="ltr"] .x-picture--fixed-ratio.x-picture {
-  padding-left: 0; }
+  padding-left: 0;
+}
 
 [dir="rtl"] .x-picture--fixed-ratio.x-picture {
-  padding-right: 0; }
+  padding-right: 0;
+}
 
 [dir="ltr"] .x-picture--fixed-ratio.x-picture {
-  padding-right: 0; }
+  padding-right: 0;
+}
 
 [dir="rtl"] .x-picture--fixed-ratio.x-picture {
-  padding-left: 0; }
+  padding-left: 0;
+}
 
 .x-picture--fixed-ratio.x-picture {
   position: relative;
   height: 0;
   padding-top: calc(var(--x-number-aspect-ratio-picture) * 100%);
   padding-bottom: 0;
-  width: 100%; }
-  .x-picture--fixed-ratio.x-picture .x-picture__image {
-    position: absolute;
-    top: 0;
-    left: 0; }
+  width: 100%;
+}
+.x-picture--fixed-ratio.x-picture .x-picture__image {
+  position: absolute;
+  top: 0;
+  left: 0;
+}

package/design-system/progress-bar-progress-bar.css

@@ -5,9 +5,9 @@
   --x-color-border-progress-bar-default: var(--x-color-background-progress-bar-default);
   --x-color-background-progress-bar-line-default: var(--x-color-base-neutral-10);
   --x-size-border-radius-progress-bar-default: var(--x-size-border-radius-base-pill);
-  --x-size-border-width-progress-bar-default: 0; }
+  --x-size-border-width-progress-bar-default: 0;
+}
 
-@use 'sass:string';
 .x-progress-bar {
   display: inline-block;
   overflow: hidden;
@@ -15,9 +15,11 @@
   border-color: var(--x-color-border-progress-bar-default);
   border-style: solid;
   border-width: var(--x-size-border-width-progress-bar-default);
-  border-radius: var(--x-size-border-radius-progress-bar-default); }
-  .x-progress-bar__line {
-    height: var(--x-size-height-progress-bar-line-default);
-    width: var(--x-size-width-progress-bar-line-default);
-    border-radius: var(--x-size-border-radius-progress-bar-default);
-    background-color: var(--x-color-background-progress-bar-line-default); }
+  border-radius: var(--x-size-border-radius-progress-bar-default);
+}
+.x-progress-bar__line {
+  height: var(--x-size-height-progress-bar-line-default);
+  width: var(--x-size-width-progress-bar-line-default);
+  border-radius: var(--x-size-border-radius-progress-bar-default);
+  background-color: var(--x-color-background-progress-bar-line-default);
+}

package/design-system/result-card.css

@@ -1,6 +1,8 @@
 :root {
-  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s); }
+  --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
+}
 
 .x-result.x-result--card {
   overflow: hidden;
-  --x-size-border-radius-result-default: var(--x-size-border-radius-result-card); }
+  --x-size-border-radius-result-default: var(--x-size-border-radius-result-card);
+}

package/design-system/result-default.css

@@ -13,7 +13,8 @@
   --x-size-border-width-result-default: 0;
   --x-size-border-width-result-picture-default: 0;
   --x-size-border-width-result-overlay-default: 0;
-  --x-size-border-width-result-description-default: 0; }
+  --x-size-border-width-result-description-default: 0;
+}
 
 .x-result {
   display: grid;
@@ -26,34 +27,42 @@
   gap: var(--x-size-gap-result-default);
   border-style: solid;
   border-width: var(--x-size-border-width-result-default);
-  border-radius: var(--x-size-border-radius-result-default); }
-  .x-result > * {
-    min-width: 0; }
-  .x-result__picture {
-    grid-column: result;
-    grid-row: picture;
-    border-color: var(--x-color-border-result-picture-default);
-    padding: var(--x-size-padding-result-picture-default);
-    border-style: solid;
-    border-width: var(--x-size-border-width-result-picture-default); }
-  .x-result__overlay {
-    grid-column: result;
-    grid-row: overlay;
-    z-index: 1;
-    border-color: var(--x-color-border-result-overlay-default);
-    padding: var(--x-size-padding-result-overlay-default);
-    border-style: solid;
-    border-width: var(--x-size-border-width-result-overlay-default);
-    opacity: 0; }
-  .x-result__description {
-    grid-column: result;
-    grid-row: description;
-    border-color: var(--x-color-border-result-description-default);
-    padding: var(--x-size-padding-result-description-default);
-    border-style: solid;
-    border-width: var(--x-size-border-width-result-description-default); }
-  .x-result:hover .x-result__overlay {
-    opacity: 1; }
-  @media (hover: none) {
-    .x-result .x-result__overlay {
-      opacity: 1; } }
+  border-radius: var(--x-size-border-radius-result-default);
+}
+.x-result > * {
+  min-width: 0;
+}
+.x-result__picture {
+  grid-column: result;
+  grid-row: picture;
+  border-color: var(--x-color-border-result-picture-default);
+  padding: var(--x-size-padding-result-picture-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-result-picture-default);
+}
+.x-result__overlay {
+  grid-column: result;
+  grid-row: overlay;
+  z-index: 1;
+  border-color: var(--x-color-border-result-overlay-default);
+  padding: var(--x-size-padding-result-overlay-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-result-overlay-default);
+  opacity: 0;
+}
+.x-result__description {
+  grid-column: result;
+  grid-row: description;
+  border-color: var(--x-color-border-result-description-default);
+  padding: var(--x-size-padding-result-description-default);
+  border-style: solid;
+  border-width: var(--x-size-border-width-result-description-default);
+}
+.x-result:hover .x-result__overlay {
+  opacity: 1;
+}
+@media (hover: none) {
+  .x-result .x-result__overlay {
+    opacity: 1;
+  }
+}