@genexus/mercury 0.9.4 → 0.9.8

package/dist/mercury.scss

@@ -480,6 +480,9 @@
 @mixin item-gap() {
   gap: var(--item__gap--regular);
 }
+@mixin item-column-gap() {
+  column-gap: var(--item__gap--regular);
+}
 @mixin item-padding() {
   padding-block: var(--item__padding-block);
   padding-inline: var(--item__padding-inline);
@@ -816,11 +819,33 @@
   }
 }
 
+// ----------------------
+// Spinner
+// ----------------------
+
+@mixin spinner($size) {
+  width: $size;
+  height: $size;
+  border: calc($size / 5) solid var(--mer-color__tinted-blue--50);
+  border-top: calc($size / 5) solid var(--mer-color__primary-blue--300);
+  border-radius: 50%;
+  animation: spin var(--mer-timing--regular) linear infinite;
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+
 /// @group UtilityClasses
 /// @param {String} $elevation-01-selector [".elevation-01"] -
 /// @param {String} $elevation-02-selector [".elevation-02"] -
 /// @param {String} $elevation-03-selector [".elevation-03"] -
-@mixin utilities-background(
+@mixin utilities-elevation(
   $elevation-01-selector: ".elevation-01",
   $elevation-02-selector: ".elevation-02",
   $elevation-03-selector: ".elevation-03"
@@ -1198,6 +1223,7 @@
   --mer-border-color__primary--active: var(--mer-accent__primary--active);
   --mer-border-color__primary--disabled: var(--mer-accent__primary--disabled);
   --mer-border-color__primary--focused: var(--mer-color__neutral-gray--200);
+  --mer-border-color__dim: var(--mer-color__neutral-gray--550);
   --mer-border-color__error: var(--mer-color__message-red--100);
   --mer-border-color__warning: var(--mer-color__message-yellow--100);
   --mer-border-color__success: var(--mer-color__message-green--100);
@@ -1290,7 +1316,7 @@
   // -------------------------------------------------------------
 
   // fixed values
-  --label__font-size: var(--mer-font__size--3xs);
+  --label__font-size: var(--mer-font__size--2xs);
   --label__font-weight: var(--mer-font__weight--semi-bold);
   --label__line-height: var(--mer-line-height--regular);
   --label__border-width: 1.2px;
@@ -1659,7 +1685,7 @@
   --mer-text__neutral: var(--mer-color__neutral-gray--300);
   --mer-text__highlighted: var(--mer-color__neutral-gray--100);
   --mer-text__success: var(--mer-color__message-green--100);
-  --mer-text__error: var(--mer-color__message-green--100);
+  --mer-text__error: var(--mer-color__message-red--100);
   --mer-text__warning: var(--mer-color__message-yellow--100);
   --mer-text__complementary: var(--mer-color__neutral-gray--450);
   --mer-text__bright: var(
@@ -1983,6 +2009,9 @@
 @mixin item-gap() {
   gap: var(--item__gap--regular);
 }
+@mixin item-column-gap() {
+  column-gap: var(--item__gap--regular);
+}
 @mixin item-padding() {
   padding-block: var(--item__padding-block);
   padding-inline: var(--item__padding-inline);
@@ -2319,6 +2348,28 @@
   }
 }
 
+// ----------------------
+// Spinner
+// ----------------------
+
+@mixin spinner($size) {
+  width: $size;
+  height: $size;
+  border: calc($size / 5) solid var(--mer-color__tinted-blue--50);
+  border-top: calc($size / 5) solid var(--mer-color__primary-blue--300);
+  border-radius: 50%;
+  animation: spin var(--mer-timing--regular) linear infinite;
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+
 
 /// @group Label
 /// @param {String} $label-selector [".label"] -
@@ -4528,6 +4579,9 @@
 @mixin item-gap() {
   gap: var(--item__gap--regular);
 }
+@mixin item-column-gap() {
+  column-gap: var(--item__gap--regular);
+}
 @mixin item-padding() {
   padding-block: var(--item__padding-block);
   padding-inline: var(--item__padding-inline);
@@ -4864,6 +4918,28 @@
   }
 }
 
+// ----------------------
+// Spinner
+// ----------------------
+
+@mixin spinner($size) {
+  width: $size;
+  height: $size;
+  border: calc($size / 5) solid var(--mer-color__tinted-blue--50);
+  border-top: calc($size / 5) solid var(--mer-color__primary-blue--300);
+  border-radius: 50%;
+  animation: spin var(--mer-timing--regular) linear infinite;
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+
 
 %combo-box {
   --ch-combo-box-separation-y: var(--mer-spacing--3xs);
@@ -5435,6 +5511,7 @@
     @include item-border-radius();
     @include item-font();
     @include item-padding();
+    @include item-column-gap();
 
     &--disabled {
       @include item-colors-disabled();
@@ -5786,197 +5863,1231 @@
     padding: var(--mer-spacing--xs);
     border-inline-start: 1px solid var(--mer-border-color__on-surface);
   }
-
-  // Remove left border in the first cell of each row
-  tr > td:first-child,
-  tr > th:first-child {
-    border-inline-start: unset;
+
+  // Remove left border in the first cell of each row
+  tr > td:first-child,
+  tr > th:first-child {
+    border-inline-start: unset;
+  }
+
+  thead > tr,
+  tbody > tr:nth-child(2n) {
+    background-color: var(--mer-color__neutral-gray--700);
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //                  Code
+  // - - - - - - - - - - - - - - - - - - - -
+  .code-block-container {
+    position: relative;
+  }
+
+  .code-block-header {
+    display: grid;
+    grid-auto-columns: max-content;
+    grid-auto-flow: column;
+    justify-content: flex-end;
+    position: absolute;
+    inset-block-start: var(--mer-spacing--md);
+    inset-inline-end: var(--mer-spacing--xs);
+    padding: 6px;
+    background-color: var(--mer-surface__elevation--01);
+    border-radius: var(--mer-border__radius--xs);
+  }
+
+  .button-copy-code {
+    inline-size: 18px;
+    block-size: 18px;
+
+    &::before {
+      content: "";
+      display: grid;
+      inline-size: 100%;
+      block-size: 100%;
+      -webkit-mask: no-repeat center / 100%
+        var(--icon__system_copy_primary--enabled);
+      background-color: currentColor;
+    }
+
+    &:focus-visible {
+      outline: 1px solid currentColor;
+    }
+  }
+
+  // Multiline code
+  ch-code {
+    // Override inline border-radius
+    border: 1px solid var(--mer-border-color__on-surface);
+    border-radius: 4px;
+    padding: var(--mer-spacing--md);
+
+    // & > .code-block__header {
+    //   display: grid;
+    //   grid-template-columns: 1fr max-content;
+    //   align-items: center;
+    //   padding-inline: var(--mer-spacing--md);
+    //   padding-block: var(--mer-spacing--xs);
+    //   background-color: var(--surface--alternative);
+    // }
+
+    // & > .code-block__content {
+    //   // Override inline padding
+    //
+    // }
+  }
+
+  @include code($selector: "ch-code");
+
+  // Inline code
+  code {
+    padding-block: var(--mer-spacing--3xs);
+    padding-inline: var(--mer-spacing--2xs);
+    background-color: var(--mer-elevation__bg-color--01);
+    border-radius: 2px;
+    font-size: calc(1em - 2px);
+  }
+
+  img {
+    display: inline-block;
+    max-inline-size: 25%;
+  }
+
+  // Don't add margin-block-start in the first element of the markdown
+  :host > :first-child,
+  ch-theme + * {
+    margin-block-start: 0px;
+  }
+
+  // Don't add margin-block-end in the last element of the markdown
+  :host > :last-child {
+    margin-block-end: 0px;
+  }
+}
+
+%navigation-list {
+  --ch-navigation-list-item__tooltip-separation-x: var(--mer-spacing--2xs);
+
+  --ch-navigation-list-item-custom-padding-inline-start: calc(
+    var(--mer-spacing--xs) + var(--mer-spacing--3xs)
+  );
+  --ch-navigation-list-item-gap: var(--mer-spacing--xs);
+  --ch-navigation-list-item-expand-collapse-duration: 200ms;
+
+  --ch-navigation-list-item__image-size: 20px;
+  --ch-navigation-list-item__expandable-button-size: 20px;
+  --ch-navigation-list-item__expandable-button-image-size: calc(
+    var(--mer-spacing--md) - var(--mer-spacing--3xs)
+  );
+
+  color: var(--item__color);
+
+  &-item-action {
+    padding-block: var(--mer-spacing--xs);
+    padding-inline-end: var(--mer-spacing--xs);
+  }
+
+  &-item-tooltip {
+    padding-block: var(--mer-spacing--2xs);
+    padding-inline: var(--mer-spacing--xs);
+    background-color: var(--mer-color__neutral-gray--800);
+    border-radius: var(--mer-border__radius--sm);
+    color: var(--mer-color__neutral-gray--300);
+    font-size: var(--mer-font__size--xs);
+  }
+
+  &-item-action {
+    &--focus-visible {
+      outline: 1px solid;
+      outline-offset: -1px;
+    }
+  }
+
+  &-item-button {
+    &--hover {
+      color: var(--item__color--hover);
+    }
+  }
+
+  &-item-link {
+    &--selected {
+      background-color: var(--item__bg-color--selected-hover);
+    }
+
+    &--hover-not-selected {
+      background-color: var(--item__bg-color--hover);
+    }
+  }
+}
+
+@mixin navigation-list(
+  $navigation-list-selector: ".navigation-list",
+  $item-action-selector: ".navigation-list::part(item__action)",
+  $item-button-selector: ".navigation-list::part(item__button)",
+  $item-link-not-selected-selector:
+    ".navigation-list::part(item__link not-selected)",
+  $item-link-selected-selector: ".navigation-list::part(item__link selected)",
+  $item-tooltip-selector: ".navigation-list::part(item__caption tooltip)"
+) {
+  #{$navigation-list-selector} {
+    @extend %navigation-list;
+  }
+
+  #{$item-action-selector} {
+    @extend %navigation-list-item-action;
+
+    &:focus-visible {
+      @extend %navigation-list-item-action--focus-visible;
+    }
+  }
+
+  #{$item-button-selector}:hover {
+    @extend %navigation-list-item-button--hover;
+  }
+
+  #{$item-link-selected-selector} {
+    @extend %navigation-list-item-link--selected;
+  }
+
+  #{$item-link-not-selected-selector}:hover {
+    @extend %navigation-list-item-link--hover-not-selected;
+  }
+
+  #{$item-tooltip-selector} {
+    @extend %navigation-list-item-tooltip;
+  }
+}
+
+@mixin typography-reset() {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    font: unset;
+    margin: 0;
+    padding: 0;
+    color: unset;
+  }
+}
+
+@mixin button-reset() {
+  :where(button, a) {
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+
+    // Disallow selecting the text
+    user-select: none;
+
+    // Avoid zooming on double tap on iOS devices
+    touch-action: manipulation;
+
+    // Allow user drag
+    // -webkit-user-drag: element;
+
+    cursor: pointer;
+  }
+
+  button:disabled {
+    pointer-events: none;
+  }
+}
+
+@mixin input-reset() {
+  input,
+  select,
+  textarea {
+    padding: 0;
+    margin: 0;
+    background-color: unset;
+    border: unset;
+    color: unset;
+    font: unset;
+    outline: unset;
+  }
+}
+
+@mixin other-reset() {
+  hr {
+    block-size: 1px;
+    margin: unset;
+    padding: unset;
+    border: unset;
+    background-color: currentColor;
+  }
+
+  fieldset,
+  legend {
+    padding: 0;
+    margin: 0;
+  }
+
+  img {
+    display: block;
+  }
+}
+
+@mixin box-sizing() {
+  *,
+  ::after,
+  ::before {
+    box-sizing: border-box;
+  }
+}
+
+@mixin button-common-styles() {
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  justify-content: center;
+}
+
+@mixin label-common-styles() {
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  grid-template-rows: auto; // Necessary to avoid creating additional rows and then adding additional gap at the bottom of the label
+  align-items: center;
+}
+
+@mixin document-common-styles() {
+  display: grid;
+  grid-template-rows: 1fr;
+  min-block-size: 100dvh;
+  margin: 0;
+}
+
+// - - - - - - - - - - - - - - - - - - - -
+//    Icons | Mask & Background
+// - - - - - - - - - - - - - - - - - - - -
+
+// Icon mask styles
+@mixin icon-mask-common-styles(
+  $inline-size: var(--icon-size),
+  $block-size: var(--icon-size),
+  $mask-size: var(--icon-mask-size)
+) {
+  content: "";
+  display: block;
+  inline-size: $inline-size;
+  block-size: $block-size;
+  -webkit-mask: no-repeat center / $mask-size var(--icon-path);
+  background-color: currentColor;
+}
+
+// Icon background styles
+@mixin icon-background-common-styles(
+  $inline-size: var(--icon-size),
+  $block-size: var(--icon-size),
+  $background-size: var(--icon-background-size)
+) {
+  content: "";
+  display: block;
+  inline-size: $inline-size;
+  block-size: $block-size;
+  background: no-repeat center / $background-size var(--icon-path);
+}
+
+// - - - - - - - - - - - - - - - - - - - -
+//    Icons | Gap
+// - - - - - - - - - - - - - - - - - - - -
+
+@mixin icon-and-text-styles($gap) {
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  gap: $gap;
+}
+
+// - - - - - - - - - - - - - - - - - - - -
+//    Ellipsis
+// - - - - - - - - - - - - - - - - - - - -
+
+@mixin ellipsis() {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+%ellipsis {
+  @include ellipsis();
+}
+
+
+// ----------------------
+// Focus
+// ----------------------
+@mixin focus-outline() {
+  outline: var(--focus__outline-width) var(--focus__outline-style)
+    var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+@mixin focus-border() {
+  border-color: var(--borders-un-border-color__focused);
+}
+
+// ----------------------
+// Scrollbar Styles
+// ----------------------
+@mixin scrollbar-styles() {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb__bg-color)
+    var(--scrollbar-track__bg-color);
+
+  //scrollbar
+  &::-webkit-scrollbar {
+    width: var(--scrollbar__size);
+    height: var(--scrollbar__size);
+  }
+
+  // track
+  &::-webkit-scrollbar-track {
+    background-color: var(--scrollbar-track__bg-color);
+    border-radius: var(--scrollbar-track__border-radius);
+  }
+
+  // thumb
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb__bg-color);
+    border-radius: var(--scrollbar-thumb__border-radius);
+  }
+
+  // corner
+  &::-webkit-scrollbar-corner {
+    background: var(--scrollbar-corner__bg);
+  }
+}
+
+// ----------------------
+// Scrollbar Components
+// ----------------------
+@mixin scrollbar-components() {
+  :host(.ch-scrollable),
+  .ch-scrollable,
+  .scrollable {
+    @include scrollbar-styles();
+  }
+}
+
+// ----------------------
+// Control
+// ----------------------
+
+// Colors
+@mixin control-colors-enabled() {
+  background-color: var(--control__bg-color);
+  color: var(--control__color);
+  --ch-placeholder-color: var(--control-placeholder__color);
+  // enabled border color is defined in control-border()
+}
+@mixin control-colors-hover() {
+  --control__border-color: var(--control__border-color--hover);
+}
+@mixin control-colors-disabled() {
+  --control__bg-color: var(--control__background-color--disabled);
+  --control__border-color: var(--control__border-color--disabled);
+  --control__color: var(--control__color--disabled);
+  --ch-placeholder-color: var(--control-placeholder__color--disabled);
+}
+@mixin control-colors-error() {
+  --control__border-color: var(--control__border-color--error);
+}
+// Border
+@mixin control-border() {
+  border-width: var(--control__border-width);
+  border-style: var(--control__border-style);
+  border-color: var(--control__border-color);
+  border-radius: var(--control__border-radius);
+}
+@mixin control-remove-border() {
+  // This resets the border applied
+  // (for controls inside the property grid)
+  --control__border-width: 0;
+  --control__border-color: transparent;
+  --control__border-radius: 0;
+}
+// Font
+@mixin control-font-weight-regular() {
+  font-weight: var(--control__font-weight--regular);
+}
+@mixin control-font-weight-semi-bold() {
+  font-weight: var(--control__font-weight--semi-bold);
+}
+// Font Size
+@mixin control-font-size-small() {
+  font-size: var(--control__font-size--small);
+  line-height: var(--control__line-height);
+}
+@mixin control-font-size-regular() {
+  font-size: var(--control__font-size--regular);
+  line-height: var(--control__line-height);
+}
+// Height
+@mixin control-height-regular() {
+  block-size: var(--control__height);
+  // to be removed (TODO)
+  // fixed block-size comes with some issues.
+}
+// Padding
+@mixin control-padding-inline() {
+  padding-inline: var(--control__padding-inline);
+}
+@mixin control-padding-block() {
+  padding-block: var(--control__padding-block);
+}
+@mixin control-padding-inline-block() {
+  padding-block: var(--control__padding-block);
+  padding-inline: var(--control__padding-inline);
+}
+// Placeholder
+@mixin control-placeholder() {
+  color: var(--control-placeholder__color);
+  font-style: var(--control-placeholder__font-style);
+}
+
+// ----------------------
+// Control Tiny
+// ----------------------
+
+@mixin control-tiny-size() {
+  block-size: var(--control-tiny__size);
+  inline-size: var(--control-tiny__size);
+}
+@mixin control-tiny-border() {
+  border-width: var(--control__border-width);
+  border-style: var(--control__border-style);
+  border-color: var(--control__border-color);
+  border-radius: var(--control__border-radius);
+}
+@mixin control-tiny-border-hover() {
+  --control__border-color: var(--control__border-color--hover);
+}
+@mixin control-tiny-border-disabled() {
+  --control__border-color: var(--control__border-color--disabled);
+}
+@mixin control-tiny-border-error() {
+  --control__border-color: var(--control__border-color--error);
+}
+
+// ----------------------
+// Items Container
+// ----------------------
+
+@mixin items-container-border() {
+  border-style: var(--items-container__border-style);
+  border-width: var(--items-container__border-width);
+}
+@mixin items-container-border-radius() {
+  border-radius: var(--items-container__border-radius);
+}
+@mixin items-container-colors() {
+  background-color: var(--items-container__bg-color);
+  border-color: var(--items-container__border-color);
+}
+@mixin items-container-padding() {
+  padding-block: var(--items-container__padding-block);
+  padding-inline: var(--items-container__padding-inline);
+}
+@mixin items-container-dropdown() {
+  box-shadow: var(--items-container__box-shadow);
+}
+@mixin items-container-gap() {
+  gap: var(--items-container__gap);
+}
+@mixin items-container-gap-small() {
+  gap: var(--items-container__gap--small);
+}
+@mixin items-container-max-height() {
+  max-block-size: var(--items-container__max-block-size);
+}
+@mixin items-container-separator() {
+  block-size: var(--items-container-separator__block-size);
+  inline-size: var(--items-container-separator__inline-size);
+  background-color: var(--items-container-separator__bg-color);
+}
+
+// ------------------------------------
+// Single Item (Every item except grid)
+// ------------------------------------
+
+@mixin item-colors-enabled() {
+  background-color: var(--item__bg-color);
+  border-color: var(--item__border-color);
+  color: var(--item__color);
+}
+@mixin item-colors-hover() {
+  --item__bg-color: var(--item__bg-color--hover);
+  --item__border-color: var(--item__border-color--hover);
+  --item__color: var(--item__color--hover);
+}
+@mixin item-colors-selected() {
+  --item__bg-color: var(--item__bg-color--selected);
+  --item__border-color: var(--item__border-color--selected);
+  --item__color: var(--item__color--selected);
+}
+@mixin item-colors-selected-hover() {
+  --item__bg-color: var(--item__bg-color--selected-hover);
+  --item__border-color: var(--item__border-color--selected-hover);
+  --item__color: var(--item__color--selected-hover);
+}
+@mixin item-colors-disabled() {
+  --item__bg-color: var(--item__bg-color--disabled);
+  --item__border-color: var(--item__border-color--disabled);
+  --item__color: var(--item__color--disabled);
+}
+@mixin item-border() {
+  border: var(--item__border-width) var(--item__border-style)
+    var(--item__border-color);
+}
+@mixin item-border-block-end() {
+  border-block-end: var(--item__border-width) var(--item__border-style)
+    var(--item__border-color);
+}
+@mixin item-border-radius() {
+  border-radius: var(--item__border-radius);
+}
+@mixin item-gap() {
+  gap: var(--item__gap--regular);
+}
+@mixin item-column-gap() {
+  column-gap: var(--item__gap--regular);
+}
+@mixin item-padding() {
+  padding-block: var(--item__padding-block);
+  padding-inline: var(--item__padding-inline);
+}
+@mixin item-padding-block() {
+  padding-block: var(--item__padding-inline);
+}
+@mixin item-padding-inline() {
+  padding-inline: var(--item__padding-inline);
+}
+@mixin item-height-regular() {
+  block-size: var(--item__height--regular);
+}
+@mixin item-height-large() {
+  block-size: var(--item__height--large);
+}
+@mixin item-font() {
+  line-height: var(--item__line-height);
+  font-size: var(--item__font-size);
+  font-weight: var(--item__font-weight);
+}
+@mixin item-font-size-small() {
+  --item__font-size: var(--item__font-size--small);
+}
+@mixin item-font-header() {
+  // item header font-size and line-height has to be the same as
+  // item font-size and line-height in order for the computed height
+  // to be the same.
+  line-height: var(--item__line-height);
+  font-size: var(--item__font-size);
+  font-weight: var(--item-header__font-weight);
+}
+
+// ---------------------------------
+// Grid Item
+// ---------------------------------
+
+// Row
+@mixin grid-row-colors-enabled() {
+  background-color: var(--item__bg-color);
+  color: var(--item__color);
+}
+@mixin grid-row-colors-highlighted() {
+  --item__bg-color: var(--item__bg-color--hover);
+  --item__color: var(--item__color--hover);
+}
+@mixin grid-row-colors-selected() {
+  --item__bg-color: var(--item__bg-color--selected);
+  --item__color: var(--item__color--selected);
+}
+@mixin grid-row-dragging() {
+  box-shadow: var(--mer-box-shadow--01);
+}
+@mixin grid-cell-border-inline-block() {
+  // this mixin uses the box-shadow property, but it looks
+  // as a border to the user.
+  box-shadow: var(--grid-cell__box-shadow-inline-block);
+}
+@mixin grid-cell-padding-inline() {
+  padding-inline: var(--grid-cell__padding-block);
+}
+@mixin grid-cell-padding-block() {
+  padding-block: var(--grid-cell__padding-block);
+}
+@mixin grid-cell-padding-inline-block() {
+  padding-block: var(--grid-cell__padding-block);
+  padding-inline: var(--grid-cell__padding-inline);
+}
+@mixin grid-cell-remove-padding() {
+  // we should redefine '--grid-cell__padding-inline' here because when a control
+  // is inside a a tabular-grid-cell the cell padding-inline value is required to
+  // be applied on the control padding-inline.
+  padding-block: 0;
+  padding-inline: 0;
+}
+@mixin grid-rowset-legend-padding-block() {
+  padding-block-start: var(--mer-spacing--2xs);
+  padding-block-end: var(--mer-spacing--2xs);
+}
+@mixin grid-rowset-legend-colors-enabled() {
+  --grid-rowset-legend__bg-color: var(--mer-surface__elevation--02);
+  background-color: var(--grid-rowset-legend__bg-color);
+}
+@mixin grid-rowset-legend-colors-hover() {
+  --grid-rowset-legend__bg-color: var(--mer-surface__elevation--03);
+}
+@mixin grid-rowset-legend-colors-active() {
+  --grid-rowset-legend__bg-color: var(--mer-surface__elevation--02);
+}
+
+// ----------------------
+// Tab Caption (Button)
+// ----------------------
+@mixin tab-button-border-block() {
+  border-block: var(--tab-caption__border-width)
+    var(--tab-caption__border-style) var(--tab-caption__border-color);
+}
+@mixin tab-button-border-block-end() {
+  border-block-end: var(--tab-caption__border-width)
+    var(--tab-caption__border-style) var(--tab-caption__border-color);
+}
+@mixin tab-button-border-block-start() {
+  border-block-start: var(--tab-caption__border-width)
+    var(--tab-caption__border-style) var(--tab-caption__border-color);
+}
+@mixin tab-button-font() {
+  font-size: var(--tab-caption__font-size);
+  font-weight: var(--tab-caption__font-weight);
+}
+@mixin tab-button-gap() {
+  gap: var(--tab-caption__gap);
+}
+@mixin tab-button-colors-enabled() {
+  background-color: var(--tab-caption__bg-color);
+  color: var(--tab-caption__color);
+  border-color: var(--tab-caption__border-color);
+}
+@mixin tab-button-colors-hover() {
+  --tab-caption__bg-color: var(--tab-caption__bg-color--hover);
+  // color remains the same
+  // border-color remains the same
+}
+@mixin tab-button-colors-disabled() {
+  --tab-caption__bg-color: var(--tab-caption__bg-color--disabled);
+  --tab-caption__color: var(--mer-text__primary--disabled);
+  --tab-caption__border-color--selected-inline: var(
+    --mer-border-color__primary--disabled
+  );
+  --tab-caption__border-color--selected-stack: var(
+    --mer-surface__elevation--02
+  );
+}
+@mixin tab-button-colors-selected-inline() {
+  --tab-caption__bg-color: var(--tab-caption__bg-color--selected-inline);
+  --tab-caption__color: var(--tab-caption__color--selected);
+  --tab-caption__border-color: var(
+    --tab-caption__border-color--selected-inline
+  );
+}
+@mixin tab-button-colors-selected-stack() {
+  --tab-caption__bg-color: var(--tab-caption__bg-color--selected-stack);
+  --tab-caption__color: var(--tab-caption__color--selected);
+  --tab-caption__border-color: var(--tab-caption__border-color--selected-stack);
+}
+@mixin tab-button-padding-inline() {
+  padding-block: var(--tab-caption__padding-block);
+  padding-inline: var(--tab-caption__padding-inline);
+}
+@mixin tab-button-padding-stack() {
+  padding-block: var(--tab-caption__padding-block);
+  padding-inline: var(--tab-caption__padding-inline);
+}
+
+// ----------------------
+// Label
+// ----------------------
+
+@mixin label-font() {
+  color: var(--label__color);
+  font-weight: var(--label__font-weight);
+  font-size: var(--label__font-size);
+  line-height: var(--label__line-height);
+}
+@mixin label-gap-block() {
+  gap: var(--label__gap--block);
+}
+@mixin label-gap-inline() {
+  gap: var(--label__gap--inline);
+}
+@mixin label-color-hover() {
+  --label__color: var(--label__color--hover);
+}
+@mixin label-color-disabled() {
+  --label__color: var(--label__color--disabled);
+}
+
+// ----------------------
+// Window
+// ----------------------
+
+// TODO: This styles should better be applied on the ch-window ?
+%window-styles {
+  border: var(--window__border);
+  border-radius: var(--window__border-radius);
+  padding: var(---window__padding);
+  background-color: var(--window__bg-color);
+  box-shadow: var(--mer-box-shadow--01);
+}
+
+// ----------------------
+// Dropdown
+// ----------------------
+
+@mixin dropdown-styles() {
+  box-shadow: var(--mer-box-shadow--01);
+  border-radius: var(--mer-border__radius--sm);
+}
+
+// ----------------------
+// Pseudo Dialog Footer
+// ----------------------
+
+@mixin control-footer-base() {
+  --control-footer-justify-content: end;
+  padding-block-start: var(--mer-spacing--xs);
+  display: flex;
+  justify-content: var(--control-footer-justify-content);
+  align-items: center;
+}
+@mixin control-footer-border() {
+  border-block-start: var(--mer-border__width--sm) solid
+    var(--mer-border-color__on-elevation--01);
+}
+@mixin control-footer(
+  $selector: ".control-footer",
+  $with-border-selector: ".control-footer-with-border",
+  $justify-start-selector: ".control-footer-start",
+  $justify-center-selector: ".control-footer-center",
+  $justify-space-between-selector: ".control-footer-space-between",
+  $with-border: true
+) {
+  #{$selector},
+  #{$with-border-selector} {
+    @include control-footer-base();
+  }
+  #{$justify-start-selector} {
+    --control-footer-justify-content: start;
+  }
+  #{$justify-center-selector} {
+    --control-footer-justify-content: center;
+  }
+  #{$justify-space-between-selector} {
+    --control-footer-justify-content: space-between;
+  }
+  @if $with-border {
+    #{$with-border-selector} {
+      @include control-footer-border();
+    }
+  }
+}
+
+// ----------------------
+// Pseudo Dialog Header
+// ----------------------
+
+@mixin control-header-base() {
+  padding-block-end: var(--mer-spacing--md);
+}
+@mixin control-header-border() {
+  border-block-end: var(--mer-border__width--sm) solid
+    var(--mer-border-color__on-elevation--01);
+}
+@mixin control-header(
+  $selector: ".control-header",
+  $with-border-selector: ".control-header-with-border",
+  $with-border: true
+) {
+  #{$selector},
+  #{$with-border-selector} {
+    @include control-header-base();
+  }
+  @if $with-border {
+    #{$with-border-selector} {
+      @include control-header-border();
+    }
+  }
+}
+
+// ----------------------
+// Body Spacing
+// ----------------------
+
+// This custom properties define the block and inline spacing of containers.
+// i.e.: dialog, layout, etc..
+
+%spacing-body {
+  padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end);
+  padding-inline: var(--spacing-body-inline-start)
+    var(--spacing-body-inline-end);
+}
+
+%spacing-body-block {
+  padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end);
+}
+%spacing-body-block-start {
+  padding-block-start: var(--spacing-body-block-start);
+}
+%spacing-body-block-end {
+  padding-block-end: var(--spacing-body-block-end);
+}
+
+%spacing-body-inline {
+  padding-inline: var(--spacing-body-inline-start)
+    var(--spacing-body-inline-end);
+}
+%spacing-body-inline-start {
+  padding-inline-start: var(--spacing-body-inline-start);
+}
+%spacing-body-inline-end {
+  padding-inline-end: var(--spacing-body-inline-end);
+}
+
+@mixin spacing-body(
+  $body-selector: ".spacing-body",
+  $body-block-selector: ".spacing-body-block",
+  $body-block-start-selector: ".spacing-body-block-start",
+  $body-block-end-selector: ".spacing-body-block-end",
+  $body-inline-selector: ".spacing-body-inline",
+  $body-inline-start-selector: ".spacing-body-inline-start",
+  $body-inline-end-selector: ".spacing-body-inline-end"
+) {
+  #{$body-selector} {
+    @extend %spacing-body;
+  }
+  // block
+  #{$body-block-selector} {
+    @extend %spacing-body-block;
+  }
+  #{$body-block-start-selector} {
+    @extend %spacing-body-block-start;
   }
-
-  thead > tr,
-  tbody > tr:nth-child(2n) {
-    background-color: var(--mer-color__neutral-gray--700);
+  #{$body-block-end-selector} {
+    @extend %spacing-body-block-end;
   }
-
-  // - - - - - - - - - - - - - - - - - - - -
-  //                  Code
-  // - - - - - - - - - - - - - - - - - - - -
-  .code-block-container {
-    position: relative;
+  // inline
+  #{$body-inline-selector} {
+    @extend %spacing-body-inline;
   }
-
-  .code-block-header {
-    display: grid;
-    grid-auto-columns: max-content;
-    grid-auto-flow: column;
-    justify-content: flex-end;
-    position: absolute;
-    inset-block-start: var(--mer-spacing--md);
-    inset-inline-end: var(--mer-spacing--xs);
-    padding: 6px;
-    background-color: var(--mer-surface__elevation--01);
-    border-radius: var(--mer-border__radius--xs);
+  #{$body-inline-start-selector} {
+    @extend %spacing-body-inline-start;
   }
+  #{$body-inline-end-selector} {
+    @extend %spacing-body-inline-end;
+  }
+}
 
-  .button-copy-code {
-    inline-size: 18px;
-    block-size: 18px;
+// ----------------------
+// Spinner
+// ----------------------
 
-    &::before {
-      content: "";
-      display: grid;
-      inline-size: 100%;
-      block-size: 100%;
-      -webkit-mask: no-repeat center / 100%
-        var(--icon__system_copy_primary--enabled);
-      background-color: currentColor;
-    }
+@mixin spinner($size) {
+  width: $size;
+  height: $size;
+  border: calc($size / 5) solid var(--mer-color__tinted-blue--50);
+  border-top: calc($size / 5) solid var(--mer-color__primary-blue--300);
+  border-radius: 50%;
+  animation: spin var(--mer-timing--regular) linear infinite;
 
-    &:focus-visible {
-      outline: 1px solid currentColor;
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
     }
   }
+}
 
-  // Multiline code
-  ch-code {
-    // Override inline border-radius
-    border: 1px solid var(--mer-border-color__on-surface);
-    border-radius: 4px;
-    padding: var(--mer-spacing--md);
 
-    // & > .code-block__header {
-    //   display: grid;
-    //   grid-template-columns: 1fr max-content;
-    //   align-items: center;
-    //   padding-inline: var(--mer-spacing--md);
-    //   padding-block: var(--mer-spacing--xs);
-    //   background-color: var(--surface--alternative);
-    // }
+%pills__container {
+  --pills-container__display: flex;
+  flex-wrap: wrap;
+  display: var(--pills-container__display);
+  gap: var(--mer-spacing--md);
+}
 
-    // & > .code-block__content {
-    //   // Override inline padding
-    //
-    // }
-  }
+%pill {
+  // chameleon custom vars (do not edit the --ch-* vars names)
+  --ch-pills-separation-y: var(--mer-spacing--3xs);
+  --ch-pills-item-gap: var(--mer-spacing--xs);
+  --ch-pills-item__image-size: var(--mer-spacing--md);
+  --ch-pills-item__background-image-size: 100%;
+  --ch-pills-group__expandable-button-size: var(--mer-spacing--md);
+  --ch-pills-group__expandable-button-image-size: var(--mer-spacing--sm);
 
-  @include code($selector: "ch-code");
+  // "control" tokens overrides
+  --control__border-radius: var(--mer-spacing--md);
+  --control__padding-inline: var(--mer-spacing--sm);
 
-  // Inline code
-  code {
-    padding-block: var(--mer-spacing--3xs);
-    padding-inline: var(--mer-spacing--2xs);
-    background-color: var(--mer-elevation__bg-color--01);
-    border-radius: 2px;
-    font-size: calc(1em - 2px);
-  }
+  @include control-border();
+  @include control-colors-enabled();
+  @include control-font-weight-semi-bold();
+  @include control-font-size-regular();
+  @include control-padding-inline-block();
 
-  img {
-    display: inline-block;
-    max-inline-size: 25%;
+  // states
+  &--enabled {
+    --control__border-color: var(--mer-border-color__dim);
+    --control__bg-color: transparent;
+    --control__color: var(--mer-text__neutral);
   }
+  &--processing {
+    --control__border-color: var(--mer-color__tinted-blue--50);
+    --control__bg-color: var(--mer-color__tinted-blue--8);
+    --control__color: var(--mer-accent__primary);
 
-  // Don't add margin-block-start in the first element of the markdown
-  :host > :first-child,
-  ch-theme + * {
-    margin-block-start: 0px;
-  }
+    // custom processing icon
+    $size: 12px;
+    --status-circle-color: transparent;
+    --status-circle-size: $size;
+    --status-circle-inset-inline-start: 14px;
 
-  // Don't add margin-block-end in the last element of the markdown
-  :host > :last-child {
-    margin-block-end: 0px;
+    &::before {
+      // override left
+      inset-inline-start: 14px;
+      @include spinner($size);
+    }
+  }
+  &--success {
+    --control__border-color: var(--mer-color__tinted-green--60);
+    --control__bg-color: var(--mer-color__tinted-green--5);
+    --control__color: var(--mer-text__success);
+  }
+  &--warning {
+    --control__border-color: var(--mer-color__tinted-yellow--60);
+    --control__bg-color: var(--mer-color__tinted-yellow--5);
+    --control__color: var(--mer-text__warning);
+  }
+  &--error {
+    --control__border-color: var(--mer-color__tinted-red--60);
+    --control__bg-color: var(--mer-color__tinted-red--5);
+    --control__color: var(--mer-text__error);
   }
-}
-
-%navigation-list {
-  --ch-navigation-list-item__tooltip-separation-x: var(--mer-spacing--2xs);
-
-  --ch-navigation-list-item-custom-padding-inline-start: calc(
-    var(--mer-spacing--xs) + var(--mer-spacing--3xs)
-  );
-  --ch-navigation-list-item-gap: var(--mer-spacing--xs);
-  --ch-navigation-list-item-expand-collapse-duration: 200ms;
-
-  --ch-navigation-list-item__image-size: 20px;
-  --ch-navigation-list-item__expandable-button-size: 20px;
-  --ch-navigation-list-item__expandable-button-image-size: calc(
-    var(--mer-spacing--md) - var(--mer-spacing--3xs)
-  );
-
-  color: var(--item__color);
 
-  &-item-action {
-    padding-block: var(--mer-spacing--xs);
-    padding-inline-end: var(--mer-spacing--xs);
+  &--disabled {
+    @include control-colors-disabled();
   }
 
-  &-item-tooltip {
-    padding-block: var(--mer-spacing--2xs);
-    padding-inline: var(--mer-spacing--xs);
-    background-color: var(--mer-color__neutral-gray--800);
-    border-radius: var(--mer-border__radius--sm);
-    color: var(--mer-color__neutral-gray--300);
-    font-size: var(--mer-font__size--xs);
+  &:focus {
+    @include focus-outline();
   }
 
-  &-item-action {
-    &--focus-visible {
-      outline: 1px solid;
-      outline-offset: -1px;
-    }
+  &:hover {
+    @include control-colors-hover();
   }
 
-  &-item-button {
-    &--hover {
-      color: var(--item__color--hover);
+  // items
+  &__item {
+    @include item-colors-enabled();
+    @include item-border();
+    @include item-border-radius();
+    @include item-font();
+    @include item-padding();
+
+    &--with-icon {
+      padding-inline-start: var(--mer-spacing--xl);
+      background-repeat: no-repeat;
+      background-size: var(--mer-icon__box--md);
+      background-position: 8px center;
     }
-  }
 
-  &-item-link {
-    &--selected {
-      background-color: var(--item__bg-color--selected-hover);
+    &--enabled {
+      background-image: var(--icon__states_pill-filled_highlighted--enabled);
+    }
+    &--processing {
+      background-image: var(--icon__states_pill-filled_primary--enabled);
+    }
+    &--success {
+      background-image: var(--icon__states_pill-filled_success--enabled);
+    }
+    &--warning {
+      background-image: var(--icon__states_pill-filled_warning--enabled);
+    }
+    &--error {
+      background-image: var(--icon__states_pill-filled_error--enabled);
     }
 
-    &--hover-not-selected {
-      background-color: var(--item__bg-color--hover);
+    &--selected {
+      @include item-colors-selected();
     }
   }
 }
 
-@mixin navigation-list(
-  $navigation-list-selector: ".navigation-list",
-  $item-action-selector: ".navigation-list::part(item__action)",
-  $item-button-selector: ".navigation-list::part(item__button)",
-  $item-link-not-selected-selector:
-    ".navigation-list::part(item__link not-selected)",
-  $item-link-selected-selector: ".navigation-list::part(item__link selected)",
-  $item-tooltip-selector: ".navigation-list::part(item__caption tooltip)"
+%icon-styles {
+  // custom icon styles
+  --status-circle-color: var(--control__color);
+  --status-circle-size: 6px;
+  --status-circle-inset-inline-start: 17px;
+
+  position: relative;
+  padding-inline-start: 36px;
+  &::before {
+    content: "";
+    position: absolute;
+    background-color: var(--status-circle-color);
+    inset-inline-start: var(--status-circle-inset-inline-start);
+    block-size: var(--status-circle-size);
+    inline-size: var(--status-circle-size);
+    display: inline-block;
+    border-radius: 50%;
+  }
+}
+
+/// @group Pills
+/// @param {String} $pills-container-selector [".pills-container"]
+/// @param {String} $pill-selector [".pill"]
+/// @param {String} $pill--enabled-selector [".pill[part='enabled']"]
+/// @param {String} $pill--processing-selector [".pill[part='processing']"]
+/// @param {String} $pill--success-selector [".pill[part='success']"]
+/// @param {String} $pill--error-selector [".pill[part='error']"]
+/// @param {String} $pill--warning-selector [".pill[part='warning']"]
+/// @param {String} $pills__placeholder-selector [".pills::part(placeholder)"]
+/// @param {String} $window-selector [".pill::part(window)"]
+/// @param {String} $item-selector [".pill::part(item)"]
+/// @param {String} $item--enabled-selector [".pill::part(item enabled)"]
+/// @param {String} $item--processing-selector [".pill::part(item processing)"]
+/// @param {String} $item--success-selector [".pill::part(item success)"]
+/// @param {String} $item--error-selector [".pill::part(item error)"]
+/// @param {String} $item--warning-selector [".pill::part(item warning)"]
+/// @param {String} $item--disabled-selector [".pill::part(item disabled)"]
+/// @param {String} $item--selected-selector [".pill::part(item selected)"]
+/// @param {Boolean} $add--disabled [true]
+/// @param {Boolean} $add--placeholder [true]
+/// @param {Boolean} $add--placeholder-var [true]
+/// @param {Boolean} $add--error [true]
+@mixin pills(
+  $pills-container-selector: ".pills-container",
+  $pill-selector: ".pill",
+  $pill--enabled-selector: ".pill[part='enabled']",
+  $pill--disabled-selector: ".pill[disabled]",
+  $pill--processing-selector: ".pill[part='processing']",
+  $pill--success-selector: ".pill[part='success']",
+  $pill--error-selector: ".pill[part='error']",
+  $pill--warning-selector: ".pill[part='warning']",
+  $pills__placeholder-selector: ".pills::part(placeholder)",
+  $window-selector: ".pill::part(window)",
+  $item-selector: ".pill::part(item)",
+  $item--enabled-selector: ".pill::part(item enabled)",
+  $item--processing-selector: ".pill::part(item processing)",
+  $item--success-selector: ".pill::part(item success)",
+  $item--error-selector: ".pill::part(item error)",
+  $item--warning-selector: ".pill::part(item warning)",
+  $item--disabled-selector: ".pill::part(item disabled)",
+  $item--selected-selector: ".pill::part(item selected)",
+  $add--icon: true,
+  $add--disabled: true,
+  $add--placeholder: true,
+  $add--placeholder-var: true
 ) {
-  #{$navigation-list-selector} {
-    @extend %navigation-list;
+  #{$pills-container-selector} {
+    @extend %pills__container;
   }
 
-  #{$item-action-selector} {
-    @extend %navigation-list-item-action;
+  #{$pill-selector} {
+    @extend %pill;
+  }
+  @if $add--icon {
+    #{$pill-selector} {
+      @extend %icon-styles;
+    }
+  }
 
-    &:focus-visible {
-      @extend %navigation-list-item-action--focus-visible;
+  #{$pill--enabled-selector} {
+    @extend %pill--enabled;
+  }
+  #{$pill--disabled-selector} {
+    @extend %pill--disabled;
+  }
+  #{$pill--processing-selector} {
+    @extend %pill--processing;
+  }
+  #{$pill--success-selector} {
+    @extend %pill--success;
+  }
+  #{$pill--error-selector} {
+    @extend %pill--error;
+  }
+  #{$pill--warning-selector} {
+    @extend %pill--warning;
+  }
+
+  @if $add--placeholder {
+    #{$pills__placeholder-selector} {
+      @include control-placeholder();
     }
   }
 
-  #{$item-button-selector}:hover {
-    @extend %navigation-list-item-button--hover;
+  @if $add--disabled {
+    #{$item--disabled-selector} {
+      @include item-colors-disabled();
+    }
   }
 
-  #{$item-link-selected-selector} {
-    @extend %navigation-list-item-link--selected;
+  // - - - - - - - - - - - - - - - - - - - -
+  //                 Window
+  // - - - - - - - - - - - - - - - - - - - -
+
+  #{$window-selector} {
+    @include items-container-colors();
+    @include items-container-padding();
+    @include items-container-dropdown();
+    @include items-container-gap();
+    @include items-container-max-height();
+    @include items-container-border-radius();
+    --items-container__border-radius: var(--mer-border__radius--lg);
+    // TODO: define a items-container-border-radius-sm() and a
+    // items-container-border-radius-md(); since container radius
+    // of the pills is greater than the other containers:
+    // combo-box, list-box, etc...
   }
 
-  #{$item-link-not-selected-selector}:hover {
-    @extend %navigation-list-item-link--hover-not-selected;
+  // - - - - - - - - - - - - - - - - - - - -
+  //                  Item
+  // - - - - - - - - - - - - - - - - - - - -
+
+  #{$item-selector} {
+    @extend %pill__item;
+  }
+  #{$item--selected-selector} {
+    @extend %pill__item--selected;
   }
 
-  #{$item-tooltip-selector} {
-    @extend %navigation-list-item-tooltip;
+  @if $add--icon {
+    // custom states
+    #{$item--enabled-selector} {
+      @extend %pill__item--enabled;
+      @extend %pill__item--with-icon;
+    }
+    #{$item--processing-selector} {
+      @extend %pill__item--processing;
+      @extend %pill__item--with-icon;
+    }
+    #{$item--success-selector} {
+      @extend %pill__item--success;
+      @extend %pill__item--with-icon;
+    }
+    #{$item--warning-selector} {
+      @extend %pill__item--warning;
+      @extend %pill__item--with-icon;
+    }
+    #{$item--error-selector} {
+      @extend %pill__item--error;
+      @extend %pill__item--with-icon;
+    }
   }
 }
 
@@ -8820,6 +9931,7 @@
   $list-box: true,
   $markdown-viewer: true,
   $navigation-list: true,
+  $pills: true,
   $radio-group: true,
   $segmented-control: true,
   $sidebar: true,
@@ -12506,6 +13618,15 @@
   --icon__system_dark-mode_primary--hover: url('#{$icons-path}system/light/dark-mode.svg#primary--hover'); 
   --icon__system_dark-mode_primary--active: url('#{$icons-path}system/light/dark-mode.svg#primary--active'); 
   --icon__system_dark-mode_primary--disabled: url('#{$icons-path}system/light/dark-mode.svg#primary--disabled'); 
+  --icon__system_cut_on-surface--enabled: url('#{$icons-path}system/light/cut.svg#on-surface--enabled'); 
+  --icon__system_cut_on-surface--hover: url('#{$icons-path}system/light/cut.svg#on-surface--hover'); 
+  --icon__system_cut_on-surface--active: url('#{$icons-path}system/light/cut.svg#on-surface--active'); 
+  --icon__system_cut_on-surface--disabled: url('#{$icons-path}system/light/cut.svg#on-surface--disabled'); 
+  --icon__system_cut_on-elevation--enabled: url('#{$icons-path}system/light/cut.svg#on-elevation--enabled'); 
+  --icon__system_cut_primary--enabled: url('#{$icons-path}system/light/cut.svg#primary--enabled'); 
+  --icon__system_cut_primary--hover: url('#{$icons-path}system/light/cut.svg#primary--hover'); 
+  --icon__system_cut_primary--active: url('#{$icons-path}system/light/cut.svg#primary--active'); 
+  --icon__system_cut_primary--disabled: url('#{$icons-path}system/light/cut.svg#primary--disabled'); 
   --icon__system_copy_on-surface--enabled: url('#{$icons-path}system/light/copy.svg#on-surface--enabled'); 
   --icon__system_copy_on-surface--hover: url('#{$icons-path}system/light/copy.svg#on-surface--hover'); 
   --icon__system_copy_on-surface--active: url('#{$icons-path}system/light/copy.svg#on-surface--active'); 
@@ -12542,6 +13663,15 @@
   --icon__system_check_primary--hover: url('#{$icons-path}system/light/check.svg#primary--hover'); 
   --icon__system_check_primary--active: url('#{$icons-path}system/light/check.svg#primary--active'); 
   --icon__system_check_primary--disabled: url('#{$icons-path}system/light/check.svg#primary--disabled'); 
+  --icon__system_card_on-surface--enabled: url('#{$icons-path}system/light/card.svg#on-surface--enabled'); 
+  --icon__system_card_on-surface--hover: url('#{$icons-path}system/light/card.svg#on-surface--hover'); 
+  --icon__system_card_on-surface--active: url('#{$icons-path}system/light/card.svg#on-surface--active'); 
+  --icon__system_card_on-surface--disabled: url('#{$icons-path}system/light/card.svg#on-surface--disabled'); 
+  --icon__system_card_on-elevation--enabled: url('#{$icons-path}system/light/card.svg#on-elevation--enabled'); 
+  --icon__system_card_primary--enabled: url('#{$icons-path}system/light/card.svg#primary--enabled'); 
+  --icon__system_card_primary--hover: url('#{$icons-path}system/light/card.svg#primary--hover'); 
+  --icon__system_card_primary--active: url('#{$icons-path}system/light/card.svg#primary--active'); 
+  --icon__system_card_primary--disabled: url('#{$icons-path}system/light/card.svg#primary--disabled'); 
   --icon__system_card-variant_on-surface--enabled: url('#{$icons-path}system/light/card-variant.svg#on-surface--enabled'); 
   --icon__system_card-variant_on-surface--hover: url('#{$icons-path}system/light/card-variant.svg#on-surface--hover'); 
   --icon__system_card-variant_on-surface--active: url('#{$icons-path}system/light/card-variant.svg#on-surface--active'); 
@@ -12623,24 +13753,6 @@
   --icon__system_add-circle_primary--hover: url('#{$icons-path}system/light/add-circle.svg#primary--hover'); 
   --icon__system_add-circle_primary--active: url('#{$icons-path}system/light/add-circle.svg#primary--active'); 
   --icon__system_add-circle_primary--disabled: url('#{$icons-path}system/light/add-circle.svg#primary--disabled'); 
-  --icon__system_Cut_on-surface--enabled: url('#{$icons-path}system/light/Cut.svg#on-surface--enabled'); 
-  --icon__system_Cut_on-surface--hover: url('#{$icons-path}system/light/Cut.svg#on-surface--hover'); 
-  --icon__system_Cut_on-surface--active: url('#{$icons-path}system/light/Cut.svg#on-surface--active'); 
-  --icon__system_Cut_on-surface--disabled: url('#{$icons-path}system/light/Cut.svg#on-surface--disabled'); 
-  --icon__system_Cut_on-elevation--enabled: url('#{$icons-path}system/light/Cut.svg#on-elevation--enabled'); 
-  --icon__system_Cut_primary--enabled: url('#{$icons-path}system/light/Cut.svg#primary--enabled'); 
-  --icon__system_Cut_primary--hover: url('#{$icons-path}system/light/Cut.svg#primary--hover'); 
-  --icon__system_Cut_primary--active: url('#{$icons-path}system/light/Cut.svg#primary--active'); 
-  --icon__system_Cut_primary--disabled: url('#{$icons-path}system/light/Cut.svg#primary--disabled'); 
-  --icon__system_Card_on-surface--enabled: url('#{$icons-path}system/light/Card.svg#on-surface--enabled'); 
-  --icon__system_Card_on-surface--hover: url('#{$icons-path}system/light/Card.svg#on-surface--hover'); 
-  --icon__system_Card_on-surface--active: url('#{$icons-path}system/light/Card.svg#on-surface--active'); 
-  --icon__system_Card_on-surface--disabled: url('#{$icons-path}system/light/Card.svg#on-surface--disabled'); 
-  --icon__system_Card_on-elevation--enabled: url('#{$icons-path}system/light/Card.svg#on-elevation--enabled'); 
-  --icon__system_Card_primary--enabled: url('#{$icons-path}system/light/Card.svg#primary--enabled'); 
-  --icon__system_Card_primary--hover: url('#{$icons-path}system/light/Card.svg#primary--hover'); 
-  --icon__system_Card_primary--active: url('#{$icons-path}system/light/Card.svg#primary--active'); 
-  --icon__system_Card_primary--disabled: url('#{$icons-path}system/light/Card.svg#primary--disabled'); 
   --icon__system_Assistant_on-surface--enabled: url('#{$icons-path}system/light/Assistant.svg#on-surface--enabled'); 
   --icon__system_Assistant_on-surface--hover: url('#{$icons-path}system/light/Assistant.svg#on-surface--hover'); 
   --icon__system_Assistant_on-surface--active: url('#{$icons-path}system/light/Assistant.svg#on-surface--active'); 
@@ -13163,6 +14275,15 @@
   --icon__system_dark-mode_primary--hover: url('#{$icons-path}system/dark/dark-mode.svg#primary--hover'); 
   --icon__system_dark-mode_primary--active: url('#{$icons-path}system/dark/dark-mode.svg#primary--active'); 
   --icon__system_dark-mode_primary--disabled: url('#{$icons-path}system/dark/dark-mode.svg#primary--disabled'); 
+  --icon__system_cut_on-surface--enabled: url('#{$icons-path}system/dark/cut.svg#on-surface--enabled'); 
+  --icon__system_cut_on-surface--hover: url('#{$icons-path}system/dark/cut.svg#on-surface--hover'); 
+  --icon__system_cut_on-surface--active: url('#{$icons-path}system/dark/cut.svg#on-surface--active'); 
+  --icon__system_cut_on-surface--disabled: url('#{$icons-path}system/dark/cut.svg#on-surface--disabled'); 
+  --icon__system_cut_on-elevation--enabled: url('#{$icons-path}system/dark/cut.svg#on-elevation--enabled'); 
+  --icon__system_cut_primary--enabled: url('#{$icons-path}system/dark/cut.svg#primary--enabled'); 
+  --icon__system_cut_primary--hover: url('#{$icons-path}system/dark/cut.svg#primary--hover'); 
+  --icon__system_cut_primary--active: url('#{$icons-path}system/dark/cut.svg#primary--active'); 
+  --icon__system_cut_primary--disabled: url('#{$icons-path}system/dark/cut.svg#primary--disabled'); 
   --icon__system_copy_on-surface--enabled: url('#{$icons-path}system/dark/copy.svg#on-surface--enabled'); 
   --icon__system_copy_on-surface--hover: url('#{$icons-path}system/dark/copy.svg#on-surface--hover'); 
   --icon__system_copy_on-surface--active: url('#{$icons-path}system/dark/copy.svg#on-surface--active'); 
@@ -13199,6 +14320,15 @@
   --icon__system_check_primary--hover: url('#{$icons-path}system/dark/check.svg#primary--hover'); 
   --icon__system_check_primary--active: url('#{$icons-path}system/dark/check.svg#primary--active'); 
   --icon__system_check_primary--disabled: url('#{$icons-path}system/dark/check.svg#primary--disabled'); 
+  --icon__system_card_on-surface--enabled: url('#{$icons-path}system/dark/card.svg#on-surface--enabled'); 
+  --icon__system_card_on-surface--hover: url('#{$icons-path}system/dark/card.svg#on-surface--hover'); 
+  --icon__system_card_on-surface--active: url('#{$icons-path}system/dark/card.svg#on-surface--active'); 
+  --icon__system_card_on-surface--disabled: url('#{$icons-path}system/dark/card.svg#on-surface--disabled'); 
+  --icon__system_card_on-elevation--enabled: url('#{$icons-path}system/dark/card.svg#on-elevation--enabled'); 
+  --icon__system_card_primary--enabled: url('#{$icons-path}system/dark/card.svg#primary--enabled'); 
+  --icon__system_card_primary--hover: url('#{$icons-path}system/dark/card.svg#primary--hover'); 
+  --icon__system_card_primary--active: url('#{$icons-path}system/dark/card.svg#primary--active'); 
+  --icon__system_card_primary--disabled: url('#{$icons-path}system/dark/card.svg#primary--disabled'); 
   --icon__system_card-variant_on-surface--enabled: url('#{$icons-path}system/dark/card-variant.svg#on-surface--enabled'); 
   --icon__system_card-variant_on-surface--hover: url('#{$icons-path}system/dark/card-variant.svg#on-surface--hover'); 
   --icon__system_card-variant_on-surface--active: url('#{$icons-path}system/dark/card-variant.svg#on-surface--active'); 
@@ -13280,24 +14410,6 @@
   --icon__system_add-circle_primary--hover: url('#{$icons-path}system/dark/add-circle.svg#primary--hover'); 
   --icon__system_add-circle_primary--active: url('#{$icons-path}system/dark/add-circle.svg#primary--active'); 
   --icon__system_add-circle_primary--disabled: url('#{$icons-path}system/dark/add-circle.svg#primary--disabled'); 
-  --icon__system_Cut_on-surface--enabled: url('#{$icons-path}system/dark/Cut.svg#on-surface--enabled'); 
-  --icon__system_Cut_on-surface--hover: url('#{$icons-path}system/dark/Cut.svg#on-surface--hover'); 
-  --icon__system_Cut_on-surface--active: url('#{$icons-path}system/dark/Cut.svg#on-surface--active'); 
-  --icon__system_Cut_on-surface--disabled: url('#{$icons-path}system/dark/Cut.svg#on-surface--disabled'); 
-  --icon__system_Cut_on-elevation--enabled: url('#{$icons-path}system/dark/Cut.svg#on-elevation--enabled'); 
-  --icon__system_Cut_primary--enabled: url('#{$icons-path}system/dark/Cut.svg#primary--enabled'); 
-  --icon__system_Cut_primary--hover: url('#{$icons-path}system/dark/Cut.svg#primary--hover'); 
-  --icon__system_Cut_primary--active: url('#{$icons-path}system/dark/Cut.svg#primary--active'); 
-  --icon__system_Cut_primary--disabled: url('#{$icons-path}system/dark/Cut.svg#primary--disabled'); 
-  --icon__system_Card_on-surface--enabled: url('#{$icons-path}system/dark/Card.svg#on-surface--enabled'); 
-  --icon__system_Card_on-surface--hover: url('#{$icons-path}system/dark/Card.svg#on-surface--hover'); 
-  --icon__system_Card_on-surface--active: url('#{$icons-path}system/dark/Card.svg#on-surface--active'); 
-  --icon__system_Card_on-surface--disabled: url('#{$icons-path}system/dark/Card.svg#on-surface--disabled'); 
-  --icon__system_Card_on-elevation--enabled: url('#{$icons-path}system/dark/Card.svg#on-elevation--enabled'); 
-  --icon__system_Card_primary--enabled: url('#{$icons-path}system/dark/Card.svg#primary--enabled'); 
-  --icon__system_Card_primary--hover: url('#{$icons-path}system/dark/Card.svg#primary--hover'); 
-  --icon__system_Card_primary--active: url('#{$icons-path}system/dark/Card.svg#primary--active'); 
-  --icon__system_Card_primary--disabled: url('#{$icons-path}system/dark/Card.svg#primary--disabled'); 
   --icon__system_Assistant_on-surface--enabled: url('#{$icons-path}system/dark/Assistant.svg#on-surface--enabled'); 
   --icon__system_Assistant_on-surface--hover: url('#{$icons-path}system/dark/Assistant.svg#on-surface--hover'); 
   --icon__system_Assistant_on-surface--active: url('#{$icons-path}system/dark/Assistant.svg#on-surface--active'); 
@@ -13311,6 +14423,57 @@
   }
   
 
+  /* =================================
+  LIGHT CUSTOM PROPERTIES
+  ================================= */
+
+  :root.light {
+  /*states*/
+  --icon__states_pill-outlined_primary--enabled: url('#{$icons-path}states/light/pill-outlined.svg#primary--enabled'); 
+  --icon__states_pill-outlined_primary--hover: url('#{$icons-path}states/light/pill-outlined.svg#primary--hover'); 
+  --icon__states_pill-outlined_primary--active: url('#{$icons-path}states/light/pill-outlined.svg#primary--active'); 
+  --icon__states_pill-outlined_primary--disabled: url('#{$icons-path}states/light/pill-outlined.svg#primary--disabled'); 
+  --icon__states_pill-outlined_error--enabled: url('#{$icons-path}states/light/pill-outlined.svg#error--enabled'); 
+  --icon__states_pill-outlined_warning--enabled: url('#{$icons-path}states/light/pill-outlined.svg#warning--enabled'); 
+  --icon__states_pill-outlined_success--enabled: url('#{$icons-path}states/light/pill-outlined.svg#success--enabled'); 
+  --icon__states_pill-outlined_highlighted--enabled: url('#{$icons-path}states/light/pill-outlined.svg#highlighted--enabled'); 
+  --icon__states_pill-filled_primary--enabled: url('#{$icons-path}states/light/pill-filled.svg#primary--enabled'); 
+  --icon__states_pill-filled_primary--hover: url('#{$icons-path}states/light/pill-filled.svg#primary--hover'); 
+  --icon__states_pill-filled_primary--active: url('#{$icons-path}states/light/pill-filled.svg#primary--active'); 
+  --icon__states_pill-filled_primary--disabled: url('#{$icons-path}states/light/pill-filled.svg#primary--disabled'); 
+  --icon__states_pill-filled_error--enabled: url('#{$icons-path}states/light/pill-filled.svg#error--enabled'); 
+  --icon__states_pill-filled_warning--enabled: url('#{$icons-path}states/light/pill-filled.svg#warning--enabled'); 
+  --icon__states_pill-filled_success--enabled: url('#{$icons-path}states/light/pill-filled.svg#success--enabled'); 
+  --icon__states_pill-filled_highlighted--enabled: url('#{$icons-path}states/light/pill-filled.svg#highlighted--enabled'); 
+
+  }
+
+  /* =================================
+  DARK CUSTOM PROPERTIES
+  ================================= */
+
+  :root.dark {
+  /*states*/
+  --icon__states_pill-outlined_primary--enabled: url('#{$icons-path}states/dark/pill-outlined.svg#primary--enabled'); 
+  --icon__states_pill-outlined_primary--hover: url('#{$icons-path}states/dark/pill-outlined.svg#primary--hover'); 
+  --icon__states_pill-outlined_primary--active: url('#{$icons-path}states/dark/pill-outlined.svg#primary--active'); 
+  --icon__states_pill-outlined_primary--disabled: url('#{$icons-path}states/dark/pill-outlined.svg#primary--disabled'); 
+  --icon__states_pill-outlined_error--enabled: url('#{$icons-path}states/dark/pill-outlined.svg#error--enabled'); 
+  --icon__states_pill-outlined_warning--enabled: url('#{$icons-path}states/dark/pill-outlined.svg#warning--enabled'); 
+  --icon__states_pill-outlined_success--enabled: url('#{$icons-path}states/dark/pill-outlined.svg#success--enabled'); 
+  --icon__states_pill-outlined_highlighted--enabled: url('#{$icons-path}states/dark/pill-outlined.svg#highlighted--enabled'); 
+  --icon__states_pill-filled_primary--enabled: url('#{$icons-path}states/dark/pill-filled.svg#primary--enabled'); 
+  --icon__states_pill-filled_primary--hover: url('#{$icons-path}states/dark/pill-filled.svg#primary--hover'); 
+  --icon__states_pill-filled_primary--active: url('#{$icons-path}states/dark/pill-filled.svg#primary--active'); 
+  --icon__states_pill-filled_primary--disabled: url('#{$icons-path}states/dark/pill-filled.svg#primary--disabled'); 
+  --icon__states_pill-filled_error--enabled: url('#{$icons-path}states/dark/pill-filled.svg#error--enabled'); 
+  --icon__states_pill-filled_warning--enabled: url('#{$icons-path}states/dark/pill-filled.svg#warning--enabled'); 
+  --icon__states_pill-filled_success--enabled: url('#{$icons-path}states/dark/pill-filled.svg#success--enabled'); 
+  --icon__states_pill-filled_highlighted--enabled: url('#{$icons-path}states/dark/pill-filled.svg#highlighted--enabled'); 
+
+  }
+  
+
   /* =================================
   LIGHT CUSTOM PROPERTIES
   ================================= */
@@ -17030,7 +18193,7 @@
     }
 
     @if $utility-classes {
-      @include utilities-background();
+      @include utilities-elevation();
     }
 
     @if $layout-classes {
@@ -17104,6 +18267,10 @@
     @include navigation-list();
   }
 
+  @if $pills {
+    @include pills($add--icon: $icons-variables);
+  }
+
   @if $radio-group {
     @include radio-group();
   }
@@ -17206,6 +18373,7 @@
   $list-box: false,
   $markdown-viewer: false,
   $navigation-list: false,
+  $pills: false,
   $radio-group: false,
   $segmented-control: false,
   $sidebar: false,
@@ -17276,6 +18444,7 @@
     $list-box: $list-box,
     $markdown-viewer: $markdown-viewer,
     $navigation-list: $navigation-list,
+    $pills: $pills,
     $radio-group: $radio-group,
     $segmented-control: $segmented-control,
     $sidebar: $sidebar,