@ganpatiinfo/gids-core-web 8.1.0 → 9.0.0

package/dist/css/index.css

@@ -856,6 +856,37 @@ gids-global-styles-start {
 .gids-button--destructive:not(:disabled):not(.gids-button--primary) {
   --gidsButton-color-icon: var(--gids-color-icon-danger);
 }
+.gids-button--positive {
+  --gidsButton-color-default-text: var(--gids-color-text-positive);
+  --gidsButton-color-default-border: var(--gids-color-border-positive);
+  --gidsButton-color-default-bg: var(
+  	--gids-color-background-positive-default
+  );
+  --gidsButton-color-default-bg-hovered: var(
+  	--gids-color-background-positive-hovered
+  );
+  --gidsButton-color-default-bg-pressed: var(
+  	--gids-color-background-positive-pressed
+  );
+  --gidsButton-color-primary-bg: var(
+  	--gids-color-background-positive-bold-default
+  );
+  --gidsButton-color-primary-bg-hovered: var(
+  	--gids-color-background-positive-bold-hovered
+  );
+  --gidsButton-color-primary-bg-pressed: var(
+  	--gids-color-background-positive-bold-pressed
+  );
+  --gidsButton-color-subtle-bg-hovered: var(
+  	--gids-color-background-positive-hovered
+  );
+  --gidsButton-color-subtle-bg-pressed: var(
+  	--gids-color-background-positive-pressed
+  );
+}
+.gids-button--positive:not(:disabled):not(.gids-button--primary) {
+  --gidsButton-color-icon: var(--gids-color-icon-positive);
+}
 
 .gids-divider {
   border: none;
@@ -987,6 +1018,7 @@ gids-global-styles-start {
 }
 
 .gids-icon {
+  color: var(--gidsIcon-color, var(--gids-color-icon-default));
   fill: var(--gidsIcon-color, var(--gids-color-icon-default));
   width: auto;
   height: var(--gidsIcon-height, 100%);
@@ -2938,6 +2970,7 @@ gids-field {
   display: flex;
   align-items: flex-start;
   gap: var(--gids-gap-200);
+  width: 100%;
 }
 .gids-heading__content-container {
   display: flex;
@@ -3366,6 +3399,669 @@ gids-overlay-provider {
   --gidsDivider-color: var(--gids-color-border-inverse);
 }
 
+.gids-progress-bar {
+  --gidsProgressBar-color-fill: var(--gids-color-icon-brand);
+  --gidsProgressBar-animation-duration: 2s;
+  position: relative;
+  height: var(--gids-size-040);
+  background-color: var(--gids-color-background-neutral-default);
+  border-radius: var(--gids-border-radius-full);
+  overflow: hidden;
+  container-type: inline-size;
+}
+.gids-progress-bar:not(:where(.gids-progress-bar--indeterminate, .gids-progress-bar--no-end-cap))::before, .gids-progress-bar:not(:where(.gids-progress-bar--indeterminate, .gids-progress-bar--no-end-cap))::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  height: 100%;
+  aspect-ratio: 1/1;
+  background-color: var(--gidsProgressBar-color-fill);
+  border-radius: 50%;
+}
+.gids-progress-bar:not(:where(.gids-progress-bar--indeterminate, .gids-progress-bar--no-end-cap))::before {
+  left: 0;
+}
+.gids-progress-bar:not(:where(.gids-progress-bar--indeterminate, .gids-progress-bar--no-end-cap))::after {
+  right: 0;
+}
+.gids-progress-bar__fill {
+  height: 100%;
+  background-color: var(--gidsProgressBar-color-fill);
+  border-radius: var(--gids-border-radius-full);
+  transition: width 0.3s ease;
+}
+.gids-progress-bar--positive {
+  --gidsProgressBar-color-fill: var(--gids-color-icon-positive);
+}
+.gids-progress-bar--warning {
+  --gidsProgressBar-color-fill: var(--gids-color-icon-warning);
+}
+.gids-progress-bar--danger {
+  --gidsProgressBar-color-fill: var(--gids-color-icon-danger);
+}
+.gids-progress-bar--indeterminate .gids-progress-bar__fill {
+  width: 30cqw;
+  animation-name: gids-progress-bar-indeterminate;
+  animation-duration: var(--gidsProgressBar-animation-duration);
+  animation-timing-function: cubic-bezier(0.92, 0, 0.58, 1);
+  animation-iteration-count: infinite;
+}
+.gids-progress-bar--sm {
+  height: var(--gids-size-020);
+}
+.gids-progress-bar--lg {
+  height: var(--gids-size-080);
+}
+.gids-progress-bar--xl {
+  height: var(--gids-size-120);
+}
+.gids-progress-bar--2xl {
+  height: var(--gids-size-160);
+}
+@keyframes gids-progress-bar-indeterminate {
+  0% {
+    width: 15cqw;
+    transform: translateX(-15cqw);
+  }
+  20% {
+    transform: translateX(0cqw);
+  }
+  70% {
+    width: 30cqw;
+  }
+  100% {
+    transform: translateX(120cqw);
+  }
+}
+
+.gids-feedback-block {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  hyphens: auto;
+}
+.gids-feedback-block__inner-container {
+  flex: 1;
+  max-width: var(--gids-width-xs);
+}
+.gids-feedback-block__image-container {
+  margin-inline: auto;
+  max-width: 160px;
+  margin-bottom: var(--gids-gap-100);
+}
+.gids-feedback-block__image-container img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+.gids-feedback-block__title {
+  text-align: center;
+  color: var(--gids-color-text-default);
+  margin: auto var(--gids-padding-horizontal-edge-to-element-300);
+}
+.gids-feedback-block__title > strong {
+  font-family: var(--gids-typography-heading-x-small__font-family);
+  font-size: var(--gids-typography-heading-x-small__font-size);
+  font-weight: var(--gids-typography-heading-x-small__font-weight);
+  letter-spacing: var(--gids-typography-heading-x-small__letter-spacing);
+  line-height: var(--gids-typography-heading-x-small__line-height);
+  text-transform: var(--gids-typography-heading-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-heading-x-small__font-variant-caps, inherit);
+}
+.gids-feedback-block__supporting-text {
+  font-family: var(--gids-typography-paragraph-medium__font-family);
+  font-size: var(--gids-typography-paragraph-medium__font-size);
+  font-weight: var(--gids-typography-paragraph-medium__font-weight);
+  letter-spacing: var(--gids-typography-paragraph-medium__letter-spacing);
+  line-height: var(--gids-typography-paragraph-medium__line-height);
+  text-transform: var(--gids-typography-paragraph-medium__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-paragraph-medium__font-variant-caps, inherit);
+  text-align: center;
+  color: var(--gids-color-text-subtlest);
+  margin-inline: var(--gids-padding-horizontal-edge-to-element-300);
+}
+
+gids-overflow-container {
+  display: block;
+  position: relative;
+  height: 100%;
+  background-color: var(--gids-elevation-surface-default);
+  overflow: hidden;
+}
+
+gids-overflow-container::before {
+  content: "";
+  position: absolute;
+  top: -20px;
+  box-shadow: var(--gids-elevation-shadow-overlay);
+  width: 100%;
+  height: 20px;
+  opacity: var(--gidsOverflowContainer-before-opacity, 0);
+}
+
+gids-overflow-container::after {
+  content: "";
+  position: absolute;
+  bottom: -20px;
+  box-shadow: var(--gids-elevation-shadow-overlay);
+  width: 100%;
+  height: 20px;
+  opacity: var(--gidsOverflowContainer-after-opacity, 0);
+}
+
+.gids-overflow-container__text-area {
+  overflow: auto;
+  height: 100%;
+  padding: var(--gidsOverflowContainer-padding-vertical, var(--gids-padding-vertical-edge-to-element-300)) var(--gidsOverflowContainer-padding-horizontal, var(--gids-padding-horizontal-edge-to-element-300));
+}
+
+.gids-accordion-item-header {
+  color: var(--gids-color-text-default);
+  background-color: var(--gids-color-background-input-default);
+  border-style: solid;
+  border-color: var(--gids-color-border-default);
+  border-radius: var(--gids-border-radius-md);
+  border-width: var(--gids-border-width-thin);
+  padding: calc(var(--gids-padding-vertical-edge-to-element-200) - var(--gids-border-width-thin)) calc(var(--gids-padding-horizontal-edge-to-element-200) - var(--gids-border-width-thin));
+}
+.gids-accordion-item-header:focus-visible {
+  outline: var(--gids-border-width-thick) solid var(--gids-color-border-focused);
+  outline-offset: var(--gids-border-width-thick);
+}
+.gids-accordion-item-header {
+  list-style-type: none;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gids-gap-200);
+}
+.gids-accordion-item-header__content {
+  font-family: var(--gids-typography-label-medium__font-family);
+  font-size: var(--gids-typography-label-medium__font-size);
+  font-weight: var(--gids-typography-label-medium__font-weight);
+  letter-spacing: var(--gids-typography-label-medium__letter-spacing);
+  line-height: var(--gids-typography-label-medium__line-height);
+  text-transform: var(--gids-typography-label-medium__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-medium__font-variant-caps, inherit);
+  margin-top: max(0px, (var(--gids-size-240) - var(--gids-typography-label-medium__line-height) * var(--gids-typography-label-medium__font-szie)) / 2);
+  flex-grow: 1;
+}
+.gids-accordion-item-header__indicator {
+  margin-top: max(0px, -1 * (var(--gids-size-240) - var(--gids-typography-label-medium__line-height) * var(--gids-typography-label-medium__font-szie)) / 2);
+  flex-shrink: 0;
+  transition: transform 0.3s;
+}
+.gids-accordion-item[open] > .gids-accordion-item-header .gids-accordion-item-header__indicator {
+  transform: rotate(180deg);
+}
+
+.gids-accordion-item-content {
+  font-family: var(--gids-typography-paragraph-small__font-family);
+  font-size: var(--gids-typography-paragraph-small__font-size);
+  font-weight: var(--gids-typography-paragraph-small__font-weight);
+  letter-spacing: var(--gids-typography-paragraph-small__letter-spacing);
+  line-height: var(--gids-typography-paragraph-small__line-height);
+  text-transform: var(--gids-typography-paragraph-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-paragraph-small__font-variant-caps, inherit);
+  color: var(--gids-color-text-default);
+  background-color: var(--gids-color-background-input-default);
+  border-style: solid;
+  border-color: var(--gids-color-border-default);
+  border-radius: var(--gids-border-radius-md);
+  border-width: var(--gids-border-width-thin);
+  padding: calc(var(--gids-padding-vertical-edge-to-element-200) - var(--gids-border-width-thin)) calc(var(--gids-padding-horizontal-edge-to-element-200) - var(--gids-border-width-thin));
+}
+@supports not selector(::details-content::before) {
+  .gids-accordion-item-content {
+    margin-top: var(--gids-gap-050);
+  }
+}
+
+.gids-accordion > * + * {
+  margin-top: var(--gids-gap-150);
+}
+
+gids-tooltip {
+  --gidsTooltip-background: var(--gids-color-background-neutral-bold-default);
+  --gidsTooltip-text-color: var(--gids-color-text-inverse);
+  --gidsTooltip-padding: var(--gids-padding-vertical-edge-to-element-100)
+  	var(--gids-padding-horizontal-edge-to-element-200);
+  --gidsTooltip-border-radius: var(--gids-border-radius-sm);
+  --gidsTooltip-tip-border-radius: 2px;
+  --gidsTooltip-tip-size: 12px;
+  --gidsFloatingElement-background: var(--gidsTooltip-background);
+  --gidsFloatingElement-tip-border-radius: var(--gidsTooltip-tip-border-radius);
+}
+
+[part=tooltip] {
+  font-family: var(--gids-typography-label-small__font-family);
+  font-size: var(--gids-typography-label-small__font-size);
+  font-weight: var(--gids-typography-label-small__font-weight);
+  letter-spacing: var(--gids-typography-label-small__letter-spacing);
+  line-height: var(--gids-typography-label-small__line-height);
+  text-transform: var(--gids-typography-label-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-small__font-variant-caps, inherit);
+  position: absolute;
+  display: inline-block;
+  hyphens: auto;
+  background-color: var(--gidsTooltip-background);
+  color: var(--gidsTooltip-text-color);
+  padding: var(--gidsTooltip-padding);
+  border-radius: var(--gidsTooltip-border-radius);
+  z-index: 1000;
+  opacity: 0;
+  pointer-events: none;
+}
+[part=tooltip].gids-tooltip--visible {
+  pointer-events: initial;
+  opacity: 1;
+}
+
+[part=tooltip] span#arrow {
+  position: absolute;
+  height: var(--gidsTooltip-tip-size);
+  width: var(--gidsTooltip-tip-size);
+}
+
+gids-popover {
+  --gidsPopover-background: var(--gids-elevation-surface-overlay-default);
+  --gidsPopover-text-color: var(--gids-color-text-default);
+  --gidsPopover-padding: var(--gids-padding-vertical-edge-to-element-200)
+  	var(--gids-padding-horizontal-edge-to-element-300);
+  --gidsPopover-border-radius: var(--gids-border-radius-lg);
+  --gidsPopover-tip-border-radius: 2px;
+  --gidsPopover-tip-size: 12px;
+  --gidsPopover-shadow: var(--gids-elevation-shadow-overlay);
+  --gidsFloatingElement-background: var(--gidsPopover-background);
+  --gidsFloatingElement-tip-border-radius: var(--gidsPopover-tip-border-radius);
+}
+
+[part=popover] {
+  font-family: var(--gids-typography-label-small__font-family);
+  font-size: var(--gids-typography-label-small__font-size);
+  font-weight: var(--gids-typography-label-small__font-weight);
+  letter-spacing: var(--gids-typography-label-small__letter-spacing);
+  line-height: var(--gids-typography-label-small__line-height);
+  text-transform: var(--gids-typography-label-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-small__font-variant-caps, inherit);
+  position: absolute;
+  display: inline-block;
+  background-color: var(--gidsPopover-background);
+  color: var(--gidsPopover-text-color);
+  border-radius: var(--gidsPopover-border-radius);
+  box-shadow: var(--gidsPopover-shadow);
+  z-index: 1000;
+  opacity: 0;
+  pointer-events: none;
+  outline: none;
+}
+[part=popover]:focus {
+  outline: none;
+}
+[part=popover].gids-popover--visible {
+  pointer-events: initial;
+  opacity: 1;
+}
+
+[part=popover] span#arrow {
+  position: absolute;
+  height: var(--gidsPopover-tip-size);
+  width: var(--gidsPopover-tip-size);
+  background-color: var(--gidsPopover-background);
+}
+
+.gids-edit-button {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  appearance: none;
+  cursor: pointer;
+  --gidsEditButton-icon-height: var(--gids-size-240);
+  --gidsEditButton-color-icon: var(--gids-color-icon-default);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  --gidsIcon-color: var(--gidsEditButton-color-icon);
+  text-decoration: none;
+}
+.gids-edit-button .gids-icon, .gids-edit-button ::slotted(.gids-icon) {
+  --gidsIcon-color: var(--gidsEditButton-color-icon);
+}
+.gids-edit-button {
+  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
+  will-change: transform;
+}
+.gids-edit-button:hover {
+  transform: scale(1.12);
+}
+.gids-edit-button:active {
+  transform: scale(0.96);
+}
+.gids-edit-button {
+  /******* SIZE MODIFIERS ********/
+}
+.gids-edit-button--xs {
+  --gidsEditButton-icon-height: var(--gids-size-120);
+}
+.gids-edit-button--sm {
+  --gidsEditButton-icon-height: var(--gids-size-160);
+}
+.gids-edit-button--lg {
+  --gidsEditButton-icon-height: var(--gids-size-240);
+}
+.gids-edit-button__add {
+  --gidsEditButton-color-icon: var(--gids-color-icon-positive);
+}
+.gids-edit-button__remove {
+  --gidsEditButton-color-icon: var(--gids-color-icon-danger);
+}
+.gids-edit-button__disabled {
+  --gidsEditButton-color-icon: var(--gids-color-icon-disabled);
+  cursor: default;
+}
+.gids-edit-button__disabled:hover {
+  transform: none;
+}
+.gids-edit-button__disabled:active {
+  transform: none;
+}
+
+.gids-list-item {
+  margin: 0;
+  padding: 0;
+  appearance: none;
+  border: none;
+  background: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  width: 100%;
+  border-radius: var(--gids-border-radius-lg);
+  background-color: var(--gids-color-background-neutral-subtle-default);
+  cursor: pointer;
+}
+.gids-list-item:hover {
+  background-color: var(--gids-color-background-neutral-subtle-hovered);
+}
+.gids-list-item:hover .gids-list-item__divider {
+  width: 0;
+}
+.gids-list-item:active {
+  background-color: var(--gids-color-background-neutral-subtle-pressed);
+}
+.gids-list-item:active .gids-list-item__divider {
+  width: 0;
+}
+.gids-list-item--selected {
+  background-color: var(--gids-color-background-selected-default);
+}
+.gids-list-item--selected:hover {
+  background-color: var(--gids-color-background-selected-hovered);
+}
+.gids-list-item--selected:hover .gids-list-item__divider {
+  width: 0;
+}
+.gids-list-item--selected:active {
+  background-color: var(--gids-color-background-selected-pressed);
+}
+.gids-list-item--selected:active .gids-list-item__divider {
+  width: 0;
+}
+.gids-list-item--disabled {
+  background-color: var(--gids-color-background-disabled);
+  cursor: default;
+}
+.gids-list-item--disabled:hover {
+  background-color: var(--gids-color-background-disabled);
+}
+.gids-list-item--disabled:hover .gids-list-item__divider {
+  width: 0;
+}
+.gids-list-item--disabled:active {
+  background-color: var(--gids-color-background-disabled);
+}
+.gids-list-item--disabled:active .gids-list-item__divider {
+  width: 0;
+}
+.gids-list-item__main-container {
+  display: flex;
+  padding: var(--gids-padding-vertical-edge-to-element-150) var(--gids-padding-horizontal-edge-to-element-200);
+  align-items: center;
+  gap: var(--gids-gap-200);
+  align-self: stretch;
+}
+.gids-list-item__middle-content-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 0 0;
+}
+.gids-list-item__leading-content-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: var(--gids-gap-025);
+  flex: 1 0 0;
+}
+.gids-list-item__leading-content-label {
+  font-family: var(--gids-typography-label-medium__font-family);
+  font-size: var(--gids-typography-label-medium__font-size);
+  font-weight: var(--gids-typography-label-medium__font-weight);
+  letter-spacing: var(--gids-typography-label-medium__letter-spacing);
+  line-height: var(--gids-typography-label-medium__line-height);
+  text-transform: var(--gids-typography-label-medium__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-medium__font-variant-caps, inherit);
+  display: flex;
+  color: var(--gids-color-text-default);
+  align-self: stretch;
+}
+.gids-list-item__leading-support-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  align-self: stretch;
+  gap: var(--gids-gap-025);
+}
+.gids-list-item__leading-content-supporting-text {
+  margin: 0;
+  padding: 0;
+  font-family: var(--gids-typography-paragraph-small__font-family);
+  font-size: var(--gids-typography-paragraph-small__font-size);
+  font-weight: var(--gids-typography-paragraph-small__font-weight);
+  letter-spacing: var(--gids-typography-paragraph-small__letter-spacing);
+  line-height: var(--gids-typography-paragraph-small__line-height);
+  text-transform: var(--gids-typography-paragraph-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-paragraph-small__font-variant-caps, inherit);
+  display: flex;
+  color: var(--gids-color-text-subtlest);
+}
+.gids-list-item__leading-content-paragraph-text {
+  margin: 0;
+  padding: 0;
+  font-family: var(--gids-typography-paragraph-small__font-family);
+  font-size: var(--gids-typography-paragraph-small__font-size);
+  font-weight: var(--gids-typography-paragraph-small__font-weight);
+  letter-spacing: var(--gids-typography-paragraph-small__letter-spacing);
+  line-height: var(--gids-typography-paragraph-small__line-height);
+  text-transform: var(--gids-typography-paragraph-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-paragraph-small__font-variant-caps, inherit);
+  display: flex;
+  color: var(--gids-color-text-subtlest);
+}
+.gids-list-item__trailing-content-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+  gap: var(--gids-gap-025);
+  flex: 1 0 0;
+}
+.gids-list-item__trailing-content-label {
+  font-family: var(--gids-typography-label-medium__font-family);
+  font-size: var(--gids-typography-label-medium__font-size);
+  font-weight: var(--gids-typography-label-medium__font-weight);
+  letter-spacing: var(--gids-typography-label-medium__letter-spacing);
+  line-height: var(--gids-typography-label-medium__line-height);
+  text-transform: var(--gids-typography-label-medium__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-medium__font-variant-caps, inherit);
+  display: flex;
+  color: var(--gids-color-text-default);
+}
+.gids-list-item__trailing-support-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+  align-self: stretch;
+  gap: var(--gids-gap-025);
+}
+.gids-list-item__trailing-content-supporting-text {
+  margin: 0;
+  padding: 0;
+  font-family: var(--gids-typography-paragraph-small__font-family);
+  font-size: var(--gids-typography-paragraph-small__font-size);
+  font-weight: var(--gids-typography-paragraph-small__font-weight);
+  letter-spacing: var(--gids-typography-paragraph-small__letter-spacing);
+  line-height: var(--gids-typography-paragraph-small__line-height);
+  text-transform: var(--gids-typography-paragraph-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-paragraph-small__font-variant-caps, inherit);
+  display: flex;
+  color: var(--gids-color-text-subtlest);
+}
+.gids-list-item__trailing-content-paragraph-text {
+  margin: 0;
+  padding: 0;
+  font-family: var(--gids-typography-paragraph-small__font-family);
+  font-size: var(--gids-typography-paragraph-small__font-size);
+  font-weight: var(--gids-typography-paragraph-small__font-weight);
+  letter-spacing: var(--gids-typography-paragraph-small__letter-spacing);
+  line-height: var(--gids-typography-paragraph-small__line-height);
+  text-transform: var(--gids-typography-paragraph-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-paragraph-small__font-variant-caps, inherit);
+  display: flex;
+  color: var(--gids-color-text-subtlest);
+}
+.gids-list-item__trailing-accessory-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  --gidsIcon-color: var(
+  	--gidsTrailingAccessoryIcon-color,
+  	var(--gids-color-icon-default)
+  );
+}
+.gids-list-item__leading-accessory-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  --gidsIcon-color: var(
+  	--gidsLeadingAccessoryIcon-color,
+  	var(--gids-color-icon-default)
+  );
+}
+.gids-list-item__text-content-disabled {
+  color: var(--gids-color-text-disabled);
+}
+.gids-list-item__accessory-content-disabled {
+  --gidsIcon-color: var(
+  	--gidsAccessoryIconDisabled-color,
+  	var(--gids-color-text-disabled)
+  );
+}
+.gids-list-item__divider {
+  width: 100%;
+}
+
+.gids-menu {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  gap: var(--gids-gap-200);
+}
+.gids-menu__children {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  gap: var(--gids-gap-100);
+}
+
+.gids-menu-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  background-color: var(--gids-elevation-surface-overlay-default);
+  box-shadow: var(--gids-elevation-shadow-overlay);
+  border-radius: var(--gids-border-radius-lg);
+  padding: var(--gids-padding-vertical-edge-to-element-200) var(--gids-padding-horizontal-edge-to-element-200);
+  gap: var(--gids-gap-300);
+}
+.gids-menu-group--default {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 0;
+}
+.gids-menu-group--loading {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.gids-menu-group--no-options {
+  font-family: var(--gids-typography-label-small__font-family);
+  font-size: var(--gids-typography-label-small__font-size);
+  font-weight: var(--gids-typography-label-small__font-weight);
+  letter-spacing: var(--gids-typography-label-small__letter-spacing);
+  line-height: var(--gids-typography-label-small__line-height);
+  text-transform: var(--gids-typography-label-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-small__font-variant-caps, inherit);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--gids-color-text-disabled);
+}
+
+.gids-dropdown-item {
+  display: flex;
+  align-items: self-start;
+  width: 100%;
+}
+
+.gids-dropdown-menu {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  gap: var(--gids-gap-200);
+}
+.gids-dropdown-menu__children {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  gap: var(--gids-gap-100);
+}
+
+.gids-dropdown-menu-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  background-color: var(--gids-elevation-surface-overlay-default);
+  box-shadow: var(--gids-elevation-shadow-overlay);
+  border-radius: var(--gids-border-radius-lg);
+  padding: var(--gids-padding-vertical-edge-to-element-200) var(--gids-padding-horizontal-edge-to-element-200);
+  gap: var(--gids-gap-300);
+  flex: 1 0 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
 .gids-box-demo__container-with-text {
   border: 1px dashed var(--gids-color-border-brand-default);
 }