@ganpatiinfo/gids-core-web 9.0.0 → 10.0.0

package/dist/css/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 * Start styles - any styles need to be below this 
 */
@@ -571,6 +572,42 @@ gids-global-styles-start {
   --gidsIcon-color: var(--gids-color-icon-accent-3);
 }
 
+.gids-chevron-button-control {
+  color: inherit;
+  background-color: transparent;
+  border: none;
+  margin: 0;
+  padding: 0;
+  text-align: inherit;
+  font: inherit;
+  border-radius: 0;
+  appearance: none;
+  display: inline-flex;
+  justify-content: center;
+  align-self: center;
+  border-radius: var(--gids-border-radius-full);
+  --gidsIcon-color: var(--gids-color-icon-default);
+  --gidsIcon-height: var(--gids-size-160);
+}
+.gids-chevron-button-control--bold {
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-chevron-button-control--small {
+  --gidsIcon-height: var(--gids-size-120);
+}
+.gids-chevron-button-control--large {
+  --gidsIcon-height: var(--gids-size-240);
+}
+.gids-chevron-button-control:not(:disabled):hover {
+  background-color: var(--gids-color-background-neutral-subtle-hovered);
+}
+.gids-chevron-button-control:not(:disabled):active {
+  background-color: var(--gids-color-background-neutral-subtle-pressed);
+}
+.gids-chevron-button-control:disabled .gids-icon {
+  --gidsIcon-color: var(--gids-color-icon-disabled);
+}
+
 /*
 * Components for public
 */
@@ -3810,7 +3847,7 @@ gids-popover {
 }
 .gids-list-item--disabled {
   background-color: var(--gids-color-background-disabled);
-  cursor: default;
+  cursor: not-allowed;
 }
 .gids-list-item--disabled:hover {
   background-color: var(--gids-color-background-disabled);
@@ -3856,6 +3893,7 @@ gids-popover {
   display: flex;
   color: var(--gids-color-text-default);
   align-self: stretch;
+  text-align: start;
 }
 .gids-list-item__leading-support-content {
   display: flex;
@@ -3877,6 +3915,7 @@ gids-popover {
   font-variant-caps: var(--gids-typography-paragraph-small__font-variant-caps, inherit);
   display: flex;
   color: var(--gids-color-text-subtlest);
+  text-align: start;
 }
 .gids-list-item__leading-content-paragraph-text {
   margin: 0;
@@ -3890,6 +3929,7 @@ gids-popover {
   font-variant-caps: var(--gids-typography-paragraph-small__font-variant-caps, inherit);
   display: flex;
   color: var(--gids-color-text-subtlest);
+  text-align: start;
 }
 .gids-list-item__trailing-content-container {
   display: flex;
@@ -3909,6 +3949,7 @@ gids-popover {
   font-variant-caps: var(--gids-typography-label-medium__font-variant-caps, inherit);
   display: flex;
   color: var(--gids-color-text-default);
+  text-align: end;
 }
 .gids-list-item__trailing-support-content {
   display: flex;
@@ -3930,6 +3971,7 @@ gids-popover {
   font-variant-caps: var(--gids-typography-paragraph-small__font-variant-caps, inherit);
   display: flex;
   color: var(--gids-color-text-subtlest);
+  text-align: end;
 }
 .gids-list-item__trailing-content-paragraph-text {
   margin: 0;
@@ -3943,6 +3985,7 @@ gids-popover {
   font-variant-caps: var(--gids-typography-paragraph-small__font-variant-caps, inherit);
   display: flex;
   color: var(--gids-color-text-subtlest);
+  text-align: end;
 }
 .gids-list-item__trailing-accessory-container {
   display: flex;
@@ -4026,6 +4069,49 @@ gids-popover {
   color: var(--gids-color-text-disabled);
 }
 
+.gids-chevron-button {
+  color: inherit;
+  background-color: transparent;
+  border: none;
+  margin: 0;
+  padding: 0;
+  text-align: inherit;
+  font: inherit;
+  border-radius: 0;
+  appearance: none;
+  display: inline-flex;
+  justify-content: center;
+  align-self: center;
+  border-radius: var(--gids-border-radius-full);
+  --gidsIcon-color: var(--gids-color-icon-default);
+  --gidsIcon-height: var(--gidsChevronButtonIcon-height);
+  --gidsChevronButtonIcon-height: var(--gids-size-120);
+}
+.gids-chevron-button--sm {
+  --gidsIcon-height: var(--gids-size-160);
+}
+.gids-chevron-button--md {
+  --gidsIcon-height: var(--gids-size-200);
+}
+.gids-chevron-button--lg {
+  --gidsIcon-height: var(--gids-size-240);
+}
+.gids-chevron-button:hover {
+  background-color: var(--gids-color-background-neutral-subtle-hovered);
+}
+.gids-chevron-button:active {
+  background-color: var(--gids-color-background-neutral-subtle-pressed);
+}
+.gids-chevron-button:disabled .gids-icon {
+  --gidsIcon-color: var(--gids-color-icon-disabled);
+}
+.gids-chevron-button:disabled:hover {
+  background-color: transparent;
+}
+.gids-chevron-button:disabled:active {
+  background-color: transparent;
+}
+
 .gids-dropdown-item {
   display: flex;
   align-items: self-start;
@@ -4058,8 +4144,1366 @@ gids-popover {
   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;
+}
+.gids-dropdown-menu-group--default {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 0;
+}
+.gids-dropdown-menu-group--loading {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.gids-dropdown-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 {
+  position: relative;
+}
+
+.gids-dropdown__menu {
+  position: absolute;
+  inset-inline: 0;
+  top: calc(100% + var(--gids-gap-050));
+  z-index: 3;
+  display: none;
+  flex-direction: column;
+  min-height: 55px;
+  max-height: 20rem;
+  overflow-x: hidden;
   overflow-y: auto;
+  background-color: var(--gids-elevation-surface-overlay-default);
+  box-shadow: var(--gids-elevation-shadow-overlay);
+  border-radius: var(--gids-border-radius-lg);
+}
+
+/* 🟢 ADD THIS: Prevents children from expanding the flex height */
+.gids-dropdown__menu > * {
+  flex-shrink: 0;
+}
+
+.gids-dropdown--expanded .gids-dropdown__menu {
+  display: flex;
+}
+
+.gids-dropdown__leading-icon {
+  display: flex;
+  align-items: center;
+}
+
+.gids-dropdown__accessory {
+  display: flex;
+  align-items: center;
+}
+
+.gids-calendar-cell {
+  --cell-width: var(--gids-size-400);
+  --cell-height: var(--gids-size-400);
+  --cell-aspect-ratio: auto;
+  margin: 0;
+  padding: 0;
+  appearance: none;
+  border: none;
+  background: none;
+  display: flex;
+  flex-direction: column;
+  width: var(--cell-width);
+  height: var(--cell-height);
+  aspect-ratio: var(--cell-aspect-ratio);
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  cursor: pointer;
+  border-radius: var(--gids-border-radius-full);
+  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);
+  color: var(--gids-color-text-subtle);
+  background-color: var(--gids-color-background-neutral-subtle-default);
+}
+.gids-calendar-cell--label-non-effective {
+  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);
+  color: var(--gids-color-text-default);
+}
+.gids-calendar-cell--default-effective:hover {
+  background-color: var(--gids-color-background-neutral-subtle-hovered);
+}
+.gids-calendar-cell--default-effective:active {
+  background-color: var(--gids-color-background-neutral-subtle-pressed);
+}
+.gids-calendar-cell--selected-effective:hover {
+  background-color: var(--gids-color-background-selected-bold-hovered);
+}
+.gids-calendar-cell--selected-effective:active {
+  background-color: var(--gids-color-background-selected-bold-pressed);
+}
+.gids-calendar-cell--today-effective:hover {
+  background-color: var(--gids-color-background-selected-hovered);
+}
+.gids-calendar-cell--today-effective:active {
+  background-color: var(--gids-color-background-selected-pressed);
+}
+.gids-calendar-cell--default-disabled {
+  cursor: not-allowed;
+  color: var(--gids-color-text-disabled);
+}
+.gids-calendar-cell--selected-disabled {
+  cursor: not-allowed;
+  color: var(--gids-color-text-disabled);
+  background-color: var(--gids-color-background-disabled);
+}
+.gids-calendar-cell--today-disabled {
+  cursor: not-allowed;
+  color: var(--gids-color-text-disabled);
+  border: none;
+  background-color: transparent;
+}
+.gids-calendar-cell--selected {
+  background-color: var(--gids-color-background-selected-bold-default);
+  color: var(--gids-color-text-inverse);
+}
+.gids-calendar-cell--today {
+  border: var(--gids-border-width-thick) solid var(--gids-color-border-selected);
+  background-color: var(--gids-color-background-selected-default);
+}
+.gids-calendar-cell--today-dot {
+  border: none;
+  background-color: var(--gids-color-background-selected-pressed);
+}
+.gids-calendar-cell--today-dot-effective:hover {
+  background-color: var(--gids-color-background-selected-default);
+}
+.gids-calendar-cell--today-dot-effective:active {
+  background-color: var(--gids-color-background-selected-default);
+}
+.gids-calendar-cell--today-dot-disabled {
+  cursor: not-allowed;
+  background-color: transparent;
+  color: var(--gids-color-text-disabled);
+  border: none;
+  background-color: transparent;
+}
+
+.gids-dot {
+  display: flex;
+  --gidsDotIcon-height: var(--gids-size-040);
+  --gidsIcon-height: var(--gidsDotIcon-height);
+  --gidsDotIcon-color: var(--gids-color-icon-subtle);
+  --gidsIcon-color: var(--gidsDotIcon-color);
+}
+.gids-dot--sm {
+  --gidsDotIcon-height: var(--gids-size-060);
+}
+.gids-dot--md {
+  --gidsDotIcon-height: var(--gids-size-080);
+}
+.gids-dot--lg {
+  --gidsDotIcon-height: var(--gids-size-100);
+}
+.gids-dot--xl {
+  --gidsDotIcon-height: var(--gids-size-120);
+}
+.gids-dot--2xl {
+  --gidsDotIcon-height: var(--gids-size-160);
+}
+.gids-dot--3xl {
+  --gidsDotIcon-height: var(--gids-size-200);
+}
+.gids-dot--subtle {
+  --gidsDotIcon-color: var(--gids-color-icon-subtle);
+}
+.gids-dot--static-inverse {
+  --gidsDotIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-dot--disabled {
+  --gidsDotIcon-color: var(--gids-color-icon-disabled);
+}
+
+.gids-dropdown-picker {
+  position: relative;
+}
+
+.gids-dropdown-picker__menu {
+  position: absolute;
+  inset-inline: 0;
+  top: calc(100% + var(--gids-gap-050));
+  z-index: 3;
+  display: none;
+  flex-direction: column;
+  align-self: stretch;
+  min-width: var(--gids-width-2-xs);
+  min-height: 55px;
+  max-height: 15rem;
   overflow-x: hidden;
+  overflow-y: auto;
+  background-color: var(--gids-elevation-surface-overlay-default);
+  box-shadow: var(--gids-elevation-shadow-overlay);
+  border-radius: var(--gids-border-radius-lg);
+}
+
+.gids-dropdown-picker__menu > * {
+  flex-shrink: 0;
+}
+
+.gids-dropdown-picker--expanded .gids-dropdown-picker__menu {
+  display: flex;
+}
+
+.gids-calendar-header-panel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  gap: var(--gids-gap-150);
+  width: 100%;
+}
+.gids-calendar-header-panel__main-container {
+  display: flex;
+  flex: 1 0 0;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  gap: var(--gids-gap-100);
+}
+.gids-calendar-header-panel__panel-value {
+  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);
+  color: var(--gids-color-text-default);
+  text-align: center;
+}
+.gids-calendar-header-panel__panel-value-disabled {
+  color: var(--gids-color-text-disabled);
+}
+
+.gids-calendar {
+  display: flex;
+  flex-direction: column;
+  background-color: transparent;
+  box-sizing: border-box;
+  padding: var(--gids-padding-vertical-edge-to-element-300) var(--gids-padding-horizontal-edge-to-element-300);
+  gap: var(--gids-gap-200);
+}
+.gids-calendar--width-fixed {
+  width: 100%;
+  max-width: var(--gids-width-xs);
+}
+.gids-calendar--width-intrinsic {
+  width: 100%;
+  max-width: 100%;
+}
+.gids-calendar--width-intrinsic .gids-calendar-cell {
+  --cell-width: 100%;
+  --cell-aspect-ratio: 1 / 1;
+}
+.gids-calendar__weekdays-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+  align-items: center;
+  width: 100%;
+}
+.gids-calendar__days-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--gids-gap-050);
+  justify-items: center;
+  align-items: center;
+  width: 100%;
+}
+
+.gids-page-title {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gids-gap-100);
+}
+.gids-page-title__heading {
+  font-family: var(--gids-typography-heading-x-large__font-family);
+  font-size: var(--gids-typography-heading-x-large__font-size);
+  font-weight: var(--gids-typography-heading-x-large__font-weight);
+  letter-spacing: var(--gids-typography-heading-x-large__letter-spacing);
+  line-height: var(--gids-typography-heading-x-large__line-height);
+  text-transform: var(--gids-typography-heading-x-large__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-heading-x-large__font-variant-caps, inherit);
+  flex: 1;
+  color: var(--gids-color-text-default);
+  margin: 0;
+}
+.gids-page-title__leading-accessory {
+  display: flex;
+  align-items: center;
+  gap: var(--gids-gap-100);
+}
+.gids-page-title__trailing-accessory {
+  display: flex;
+  align-items: center;
+  gap: var(--gids-gap-100);
+  margin-left: auto;
+  justify-content: flex-end;
+}
+
+.gids-chart-legend-item {
+  display: flex;
+  align-items: center;
+  gap: var(--gids-gap-100);
+  --gidsChartLegendItemIcon-color: var(--gids-color-icon-subtle);
+  --gidsIcon-color: var(--gidsChartLegendItemIcon-color);
+  --gidsIcon-height: var(--gids-size-080);
+}
+.gids-chart-legend-item--orientation-vertical {
+  display: flex;
+}
+.gids-chart-legend-item--series-2 {
+  --gidsChartLegendItemIcon-color: var(--gids-color-icon-warning);
+}
+.gids-chart-legend-item--series-3 {
+  --gidsChartLegendItemIcon-color: var(--gids-color-icon-danger);
+}
+.gids-chart-legend-item--series-4 {
+  --gidsChartLegendItemIcon-color: var(--gids-color-background-positive-bold-hovered);
+}
+.gids-chart-legend-item--series-5 {
+  --gidsChartLegendItemIcon-color: var(--gids-color-background-information-bold-default);
+}
+.gids-chart-legend-item--series-6 {
+  --gidsChartLegendItemIcon-color: rgb(238, 70, 188);
+}
+.gids-chart-legend-item__label {
+  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);
+  text-align: left;
+  color: var(--gids-color-text-subtlest);
+}
+.gids-chart-legend-item__dot-wrapper-vertical {
+  display: flex;
+  padding-top: var(--gids-padding-vertical-edge-to-element-075);
+}
+.gids-chart-legend-item__dot-wrapper-horizontal {
+  display: flex;
+  align-items: center;
+}
+
+.gids-chart-legend {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--gids-gap-150);
+}
+.gids-chart-legend--orientation-vertical {
+  flex-direction: column;
+  gap: var(--gids-gap-050);
+}
+
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.gids-line-chart {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+.gids-line-chart--breakpoint-mobile {
+  max-width: var(--gids-width-xs);
+}
+.gids-line-chart__main-container {
+  display: flex;
+  gap: var(--gids-gap-200);
+}
+.gids-line-chart__header {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+  margin-bottom: var(--gids-padding-vertical-edge-to-element-200);
+}
+.gids-line-chart__grid-layout {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: minmax(180px, 280px) auto auto;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+.gids-line-chart__y-axis-label {
+  grid-column: 1;
+  grid-row: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: var(--gids-padding-horizontal-edge-to-element-150);
+  font-family: var(--gids-typography-label-x-small__font-family);
+  font-size: var(--gids-typography-label-x-small__font-size);
+  font-weight: var(--gids-typography-label-x-small__font-weight);
+  letter-spacing: var(--gids-typography-label-x-small__letter-spacing);
+  line-height: var(--gids-typography-label-x-small__line-height);
+  text-transform: var(--gids-typography-label-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-x-small__font-variant-caps, inherit);
+  color: var(--gids-color-text-subtlest);
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  white-space: nowrap;
+}
+.gids-line-chart__chart-stage-container {
+  grid-column: 2;
+  grid-row: 1;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding-left: var(--gids-container-padding-desktop);
+  box-sizing: border-box;
+}
+.gids-line-chart__y-axis-scale-container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: calc(var(--gids-container-padding-desktop) - var(--gids-padding-horizontal-edge-to-element-100));
+  pointer-events: none;
+}
+.gids-line-chart__y-axis-scale-value {
+  position: absolute;
+  right: 0;
+  transform: translateY(50%);
+}
+.gids-line-chart__chart-stage {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-bottom: var(--gids-border-width-thin) solid var(--gids-color-border-default);
+  box-sizing: border-box;
+}
+.gids-line-chart__chart-vector {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.gids-line-chart__grid-line {
+  stroke: var(--gids-color-border-default);
+  stroke-width: 0.5;
+  fill: none;
+}
+.gids-line-chart__chart-area {
+  stroke: none;
+}
+.gids-line-chart__chart-line {
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+.gids-line-chart__chart-line.gids-line-chart__series-line-1 {
+  stroke: var(--gids-color-icon-subtle);
+}
+.gids-line-chart__chart-line.gids-line-chart__series-line-2 {
+  stroke: var(--gids-color-icon-warning);
+}
+.gids-line-chart__chart-line.gids-line-chart__series-line-3 {
+  stroke: var(--gids-color-icon-danger);
+}
+.gids-line-chart__gradient-start-0 {
+  stop-color: rgba(127, 86, 217, 0.09);
+  stop-opacity: 1;
+}
+.gids-line-chart__gradient-end-0 {
+  stop-color: rgba(127, 86, 217, 0.09);
+  stop-opacity: 0;
+}
+.gids-line-chart__gradient-start-1 {
+  stop-color: rgba(127, 86, 217, 0.1);
+  stop-opacity: 1;
+}
+.gids-line-chart__gradient-end-1 {
+  stop-color: rgba(127, 86, 217, 0.1);
+  stop-opacity: 0;
+}
+.gids-line-chart__gradient-start-2 {
+  stop-color: rgba(127, 86, 217, 0.12);
+  stop-opacity: 1;
+}
+.gids-line-chart__gradient-end-2 {
+  stop-color: rgba(127, 86, 217, 0.12);
+  stop-opacity: 0;
+}
+.gids-line-chart__x-axis-scale-container {
+  display: flex;
+  grid-column: 2;
+  grid-row: 2;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: var(--gids-container-padding-desktop);
+  padding-top: var(--gids-padding-vertical-edge-to-element-100);
+  box-sizing: border-box;
+}
+.gids-line-chart__x-axis-label {
+  grid-column: 2;
+  grid-row: 3;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: var(--gids-padding-vertical-edge-to-element-100);
+  font-family: var(--gids-typography-label-x-small__font-family);
+  font-size: var(--gids-typography-label-x-small__font-size);
+  font-weight: var(--gids-typography-label-x-small__font-weight);
+  letter-spacing: var(--gids-typography-label-x-small__letter-spacing);
+  line-height: var(--gids-typography-label-x-small__line-height);
+  text-transform: var(--gids-typography-label-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-x-small__font-variant-caps, inherit);
+  color: var(--gids-color-text-subtlest);
+  white-space: nowrap;
+}
+.gids-line-chart__scale-text {
+  font-family: var(--gids-typography-label-x-small__font-family);
+  font-size: var(--gids-typography-label-x-small__font-size);
+  font-weight: var(--gids-typography-label-x-small__font-weight);
+  letter-spacing: var(--gids-typography-label-x-small__letter-spacing);
+  line-height: var(--gids-typography-label-x-small__line-height);
+  text-transform: var(--gids-typography-label-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-x-small__font-variant-caps, inherit);
+  color: var(--gids-color-text-subtlest);
+  user-select: none;
+  white-space: nowrap;
+}
+.gids-line-chart__no-data {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--gids-padding-vertical-edge-to-element-300) var(--gids-padding-horizontal-edge-to-element-100);
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  color: var(--gids-color-text-subtlest);
+  border: var(--gids-border-width-thin) dashed var(--gids-color-border-default);
+  border-radius: var(--gids-border-radius-md);
+}
+
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.gids-pie-chart {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+.gids-pie-chart--breakpoint-mobile {
+  max-width: var(--gids-width-xs);
+}
+.gids-pie-chart__main-container {
+  display: inline-flex;
+  justify-content: center;
+  gap: var(--gids-gap-200);
+  width: 100%;
+  height: 100%;
+}
+.gids-pie-chart__chart-stage-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.gids-pie-chart {
+  /* Exact layout sizes mapping directly to the SVG container wrapper box */
+}
+.gids-pie-chart__svg-wrapper {
+  position: relative;
+  display: block;
+  flex-shrink: 0;
+}
+.gids-pie-chart__svg-wrapper--size-xxs {
+  width: 180px;
+  height: 180px;
+}
+.gids-pie-chart__svg-wrapper--size-xs {
+  width: 220px;
+  height: 220px;
+}
+.gids-pie-chart__svg-wrapper--size-sm {
+  width: 260px;
+  height: 260px;
+}
+.gids-pie-chart__svg-wrapper--size-md {
+  width: 300px;
+  height: 300px;
+}
+.gids-pie-chart__svg-wrapper--size-lg {
+  width: 340px;
+  height: 340px;
+}
+.gids-pie-chart__chart-vector {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.gids-pie-chart {
+  /* Donut background circle base frame track */
+}
+.gids-pie-chart__track-background {
+  fill: none;
+  stroke: var(--gids-color-background-neutral-default);
+  stroke-width: 12; /* Dictates the inner cutout hole ratio */
+}
+.gids-pie-chart__segment {
+  fill: none;
+  stroke-width: 12;
+  stroke-linecap: butt; /* Clean, flat dividers between consecutive segments */
+  transition: stroke-dashoffset 0.3s ease;
+  /* Up to 6 series design color hooks matching the layout screenshot */
+}
+.gids-pie-chart__segment.gids-pie-chart__segment-series-1 {
+  stroke: var(--gids-color-icon-subtle); /* Dark Navy / Slate */
+}
+.gids-pie-chart__segment.gids-pie-chart__segment-series-2 {
+  stroke: var(--gids-color-icon-warning); /* Vivid Orange */
+}
+.gids-pie-chart__segment.gids-pie-chart__segment-series-3 {
+  stroke: var(--gids-color-icon-danger); /* Dark Red */
+}
+.gids-pie-chart__segment.gids-pie-chart__segment-series-4 {
+  stroke: var(--gids-color-background-positive-bold-hovered); /* Mid Blue */
+}
+.gids-pie-chart__segment.gids-pie-chart__segment-series-5 {
+  stroke: var(--gids-color-background-information-bold-default); /* Teal Green */
+}
+.gids-pie-chart__segment.gids-pie-chart__segment-series-6 {
+  stroke: rgb(238, 70, 188); /* Soft Purple */
+}
+.gids-pie-chart__legend-container {
+  display: inline-flex;
+  align-items: flex-start;
+}
+.gids-pie-chart__no-data {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--gids-padding-vertical-edge-to-element-300) var(--gids-padding-horizontal-edge-to-element-100);
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  color: var(--gids-color-text-subtlest);
+  border: var(--gids-border-width-thin) dashed var(--gids-color-border-default);
+  border-radius: var(--gids-border-radius-md);
+}
+
+:host {
+  display: block;
+  box-sizing: border-box;
+}
+
+.gids-level-gauge {
+  display: block;
+  box-sizing: border-box;
+}
+.gids-level-gauge--breakpoint-mobile {
+  max-width: var(--gids-width-xs);
+}
+.gids-level-gauge__main-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.gids-level-gauge {
+  /* Square Aspect Ratios to support the full circular layout shapes */
+}
+.gids-level-gauge__svg-wrapper {
+  position: relative;
+  display: block;
+  flex-shrink: 0;
+}
+.gids-level-gauge__svg-wrapper--size-xxs {
+  width: 180px;
+  height: 180px;
+}
+.gids-level-gauge__svg-wrapper--size-xs {
+  width: 220px;
+  height: 220px;
+}
+.gids-level-gauge__svg-wrapper--size-sm {
+  width: 260px;
+  height: 260px;
+}
+.gids-level-gauge__svg-wrapper--size-md {
+  width: 300px;
+  height: 300px;
+}
+.gids-level-gauge__svg-wrapper--size-lg {
+  width: 340px;
+  height: 340px;
+}
+.gids-level-gauge__chart-vector {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.gids-level-gauge {
+  /* --- Faint, Low-Contrast Variant Tracks to match the screenshot --- */
+}
+.gids-level-gauge__main-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gids-gap-050);
+}
+.gids-level-gauge__main-container--variant-amber .gids-level-gauge__track-background {
+  stroke: rgb(248, 248, 248);
+}
+.gids-level-gauge__main-container--variant-burgundy .gids-level-gauge__track-background {
+  stroke: rgb(246, 243, 243);
+}
+.gids-level-gauge__main-container--variant-teal .gids-level-gauge__track-background {
+  stroke: rgb(232, 245, 250);
+}
+.gids-level-gauge__track-background {
+  fill: none;
+  stroke-width: 6;
+}
+.gids-level-gauge__segment {
+  fill: none;
+  stroke-width: 6;
+  stroke-linecap: round;
+  transition: stroke-dasharray 0.4s ease-out;
+}
+.gids-level-gauge__segment--variant-amber {
+  stroke: rgb(80, 82, 88);
+}
+.gids-level-gauge__segment--variant-burgundy {
+  stroke: rgb(132, 84, 95);
+}
+.gids-level-gauge__segment--variant-teal {
+  stroke: rgb(23, 60, 102);
+}
+.gids-level-gauge {
+  /* --- Centered Content Layout Rules --- */
+}
+.gids-level-gauge__center-content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  pointer-events: none;
+  gap: var(--gids-gap-025);
+}
+.gids-level-gauge__label-xxs {
+  font-family: var(--gids-typography-label-x-small__font-family);
+  font-size: var(--gids-typography-label-x-small__font-size);
+  font-weight: var(--gids-typography-label-x-small__font-weight);
+  letter-spacing: var(--gids-typography-label-x-small__letter-spacing);
+  line-height: var(--gids-typography-label-x-small__line-height);
+  text-transform: var(--gids-typography-label-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-x-small__font-variant-caps, inherit);
+}
+.gids-level-gauge__label-xs {
+  font-family: var(--gids-typography-label-x-small__font-family);
+  font-size: var(--gids-typography-label-x-small__font-size);
+  font-weight: var(--gids-typography-label-x-small__font-weight);
+  letter-spacing: var(--gids-typography-label-x-small__letter-spacing);
+  line-height: var(--gids-typography-label-x-small__line-height);
+  text-transform: var(--gids-typography-label-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-x-small__font-variant-caps, inherit);
+}
+.gids-level-gauge__label-sm {
+  font-family: var(--gids-typography-label-x-small__font-family);
+  font-size: var(--gids-typography-label-x-small__font-size);
+  font-weight: var(--gids-typography-label-x-small__font-weight);
+  letter-spacing: var(--gids-typography-label-x-small__letter-spacing);
+  line-height: var(--gids-typography-label-x-small__line-height);
+  text-transform: var(--gids-typography-label-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-x-small__font-variant-caps, inherit);
+}
+.gids-level-gauge__label-md {
+  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);
+}
+.gids-level-gauge__label-lg {
+  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);
+}
+.gids-level-gauge__label-common {
+  color: var(--gids-color-text-subtlest);
+}
+.gids-level-gauge__percentage-xxs {
+  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);
+}
+.gids-level-gauge__percentage-xs {
+  font-family: var(--gids-typography-display-x-small__font-family);
+  font-size: var(--gids-typography-display-x-small__font-size);
+  font-weight: var(--gids-typography-display-x-small__font-weight);
+  letter-spacing: var(--gids-typography-display-x-small__letter-spacing);
+  line-height: var(--gids-typography-display-x-small__line-height);
+  text-transform: var(--gids-typography-display-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-display-x-small__font-variant-caps, inherit);
+}
+.gids-level-gauge__percentage-sm {
+  font-family: var(--gids-typography-display-x-small__font-family);
+  font-size: var(--gids-typography-display-x-small__font-size);
+  font-weight: var(--gids-typography-display-x-small__font-weight);
+  letter-spacing: var(--gids-typography-display-x-small__letter-spacing);
+  line-height: var(--gids-typography-display-x-small__line-height);
+  text-transform: var(--gids-typography-display-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-display-x-small__font-variant-caps, inherit);
+}
+.gids-level-gauge__percentage-md {
+  font-family: var(--gids-typography-display-small__font-family);
+  font-size: var(--gids-typography-display-small__font-size);
+  font-weight: var(--gids-typography-display-small__font-weight);
+  letter-spacing: var(--gids-typography-display-small__letter-spacing);
+  line-height: var(--gids-typography-display-small__line-height);
+  text-transform: var(--gids-typography-display-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-display-small__font-variant-caps, inherit);
+}
+.gids-level-gauge__percentage-lg {
+  font-family: var(--gids-typography-display-small__font-family);
+  font-size: var(--gids-typography-display-small__font-size);
+  font-weight: var(--gids-typography-display-small__font-weight);
+  letter-spacing: var(--gids-typography-display-small__letter-spacing);
+  line-height: var(--gids-typography-display-small__line-height);
+  text-transform: var(--gids-typography-display-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-display-small__font-variant-caps, inherit);
+}
+.gids-level-gauge__percentage-common {
+  color: var(--gids-color-text-default);
+}
+.gids-level-gauge {
+  /* --- Underneath/Bottom External Label Style (xxs) --- */
+}
+.gids-level-gauge__bottom-content {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+}
+.gids-level-gauge__no-data {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--gids-padding-vertical-edge-to-element-300) var(--gids-padding-horizontal-edge-to-element-100);
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  color: var(--gids-color-text-subtlest);
+  border: var(--gids-border-width-thin) dashed var(--gids-color-border-default);
+  border-radius: var(--gids-border-radius-md);
+}
+
+:host {
+  display: block;
+  box-sizing: border-box;
+}
+
+.gids-progress-circle {
+  display: block;
+  box-sizing: border-box;
+}
+.gids-progress-circle--breakpoint-mobile {
+  max-width: var(--gids-width-xs);
+}
+.gids-progress-circle__main-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.gids-progress-circle {
+  /* Aspect-Ratio Box Sizing Bounds for Full Circle vs Half Circle Layout Profiles */
+}
+.gids-progress-circle__svg-wrapper {
+  position: relative;
+  display: block;
+  flex-shrink: 0;
+  /* Circle Layout Configurations (Square 1:1 Viewport) */
+}
+.gids-progress-circle__svg-wrapper--shape-circle--size-xxs {
+  width: 180px;
+  height: 180px;
+}
+.gids-progress-circle__svg-wrapper--shape-circle--size-xs {
+  width: 220px;
+  height: 220px;
+}
+.gids-progress-circle__svg-wrapper--shape-circle--size-sm {
+  width: 260px;
+  height: 260px;
+}
+.gids-progress-circle__svg-wrapper--shape-circle--size-md {
+  width: 300px;
+  height: 300px;
+}
+.gids-progress-circle__svg-wrapper--shape-circle--size-lg {
+  width: 340px;
+  height: 340px;
+}
+.gids-progress-circle__svg-wrapper {
+  /* Half-Circle Layout Configurations (Cut Half 2:1 Viewport) */
+}
+.gids-progress-circle__svg-wrapper--shape-half-circle--size-xxs {
+  width: 180px;
+  height: 144px;
+}
+.gids-progress-circle__svg-wrapper--shape-half-circle--size-xs {
+  width: 220px;
+  height: 130px;
+}
+.gids-progress-circle__svg-wrapper--shape-half-circle--size-sm {
+  width: 260px;
+  height: 152px;
+}
+.gids-progress-circle__svg-wrapper--shape-half-circle--size-md {
+  width: 300px;
+  height: 174px;
+}
+.gids-progress-circle__svg-wrapper--shape-half-circle--size-lg {
+  width: 340px;
+  height: 194px;
+}
+.gids-progress-circle__chart-vector {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.gids-progress-circle {
+  /* Faint uniform base track loop matching design screenshot */
+}
+.gids-progress-circle__track-background {
+  fill: none;
+  stroke: var(--gids-color-background-neutral-default);
+  stroke-width: 6;
+  stroke-linecap: round;
+}
+.gids-progress-circle {
+  /* Charcoal Active Arc fill line segment matching design screenshot */
+}
+.gids-progress-circle__segment {
+  fill: none;
+  stroke: var(--gids-color-text-brand);
+  stroke-width: 6;
+  stroke-linecap: round;
+  transition: stroke-dasharray 0.4s ease-out, stroke-dashoffset 0.4s ease-out;
+}
+.gids-progress-circle {
+  /* --- Inner Central Content Placement Rules --- */
+}
+.gids-progress-circle__center-content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  pointer-events: none;
+}
+.gids-progress-circle__shape-half-circle {
+  justify-content: flex-end;
+  align-items: center;
+  bottom: var(--gids-padding-vertical-edge-to-element-300);
+}
+.gids-progress-circle__label-xxs {
+  font-family: var(--gids-typography-label-x-small__font-family);
+  font-size: var(--gids-typography-label-x-small__font-size);
+  font-weight: var(--gids-typography-label-x-small__font-weight);
+  letter-spacing: var(--gids-typography-label-x-small__letter-spacing);
+  line-height: var(--gids-typography-label-x-small__line-height);
+  text-transform: var(--gids-typography-label-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-x-small__font-variant-caps, inherit);
+}
+.gids-progress-circle__label-xs {
+  font-family: var(--gids-typography-label-x-small__font-family);
+  font-size: var(--gids-typography-label-x-small__font-size);
+  font-weight: var(--gids-typography-label-x-small__font-weight);
+  letter-spacing: var(--gids-typography-label-x-small__letter-spacing);
+  line-height: var(--gids-typography-label-x-small__line-height);
+  text-transform: var(--gids-typography-label-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-x-small__font-variant-caps, inherit);
+}
+.gids-progress-circle__label-sm {
+  font-family: var(--gids-typography-label-x-small__font-family);
+  font-size: var(--gids-typography-label-x-small__font-size);
+  font-weight: var(--gids-typography-label-x-small__font-weight);
+  letter-spacing: var(--gids-typography-label-x-small__letter-spacing);
+  line-height: var(--gids-typography-label-x-small__line-height);
+  text-transform: var(--gids-typography-label-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-x-small__font-variant-caps, inherit);
+}
+.gids-progress-circle__label-md {
+  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);
+}
+.gids-progress-circle__label-lg {
+  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);
+}
+.gids-progress-circle__label-common {
+  color: var(--gids-color-text-subtlest);
+}
+.gids-progress-circle__percentage-xxs {
+  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);
+}
+.gids-progress-circle__percentage-xs {
+  font-family: var(--gids-typography-display-x-small__font-family);
+  font-size: var(--gids-typography-display-x-small__font-size);
+  font-weight: var(--gids-typography-display-x-small__font-weight);
+  letter-spacing: var(--gids-typography-display-x-small__letter-spacing);
+  line-height: var(--gids-typography-display-x-small__line-height);
+  text-transform: var(--gids-typography-display-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-display-x-small__font-variant-caps, inherit);
+}
+.gids-progress-circle__percentage-sm {
+  font-family: var(--gids-typography-display-x-small__font-family);
+  font-size: var(--gids-typography-display-x-small__font-size);
+  font-weight: var(--gids-typography-display-x-small__font-weight);
+  letter-spacing: var(--gids-typography-display-x-small__letter-spacing);
+  line-height: var(--gids-typography-display-x-small__line-height);
+  text-transform: var(--gids-typography-display-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-display-x-small__font-variant-caps, inherit);
+}
+.gids-progress-circle__percentage-md {
+  font-family: var(--gids-typography-display-small__font-family);
+  font-size: var(--gids-typography-display-small__font-size);
+  font-weight: var(--gids-typography-display-small__font-weight);
+  letter-spacing: var(--gids-typography-display-small__letter-spacing);
+  line-height: var(--gids-typography-display-small__line-height);
+  text-transform: var(--gids-typography-display-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-display-small__font-variant-caps, inherit);
+}
+.gids-progress-circle__percentage-lg {
+  font-family: var(--gids-typography-display-small__font-family);
+  font-size: var(--gids-typography-display-small__font-size);
+  font-weight: var(--gids-typography-display-small__font-weight);
+  letter-spacing: var(--gids-typography-display-small__letter-spacing);
+  line-height: var(--gids-typography-display-small__line-height);
+  text-transform: var(--gids-typography-display-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-display-small__font-variant-caps, inherit);
+}
+.gids-progress-circle__percentage-common {
+  color: var(--gids-color-text-default);
+}
+.gids-progress-circle {
+  /* --- External Stacked Bottom Content Text Rules (xxs uniquely) --- */
+}
+.gids-progress-circle__bottom-content {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+}
+.gids-progress-circle__no-data {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--gids-padding-vertical-edge-to-element-300) var(--gids-padding-horizontal-edge-to-element-100);
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  color: var(--gids-color-text-subtlest);
+  border: var(--gids-border-width-thin) dashed var(--gids-color-border-default);
+  border-radius: var(--gids-border-radius-md);
+}
+
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.gids-activity-gauge {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+.gids-activity-gauge--breakpoint-mobile {
+  max-width: var(--gids-width-xs);
+}
+.gids-activity-gauge__main-container {
+  display: inline-flex;
+  justify-content: center;
+  gap: var(--gids-gap-200);
+  width: 100%;
+  height: 100%;
+}
+.gids-activity-gauge__svg-wrapper {
+  position: relative;
+  display: block;
+  flex-shrink: 0;
+}
+.gids-activity-gauge--size-xxs {
+  width: 180px;
+  height: 180px;
+}
+.gids-activity-gauge--size-xs {
+  width: 220px;
+  height: 220px;
+}
+.gids-activity-gauge--size-sm {
+  width: 260px;
+  height: 260px;
+}
+.gids-activity-gauge--size-md {
+  width: 300px;
+  height: 300px;
+}
+.gids-activity-gauge--size-lg {
+  width: 340px;
+  height: 340px;
+}
+.gids-activity-gauge__chart-stage-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.gids-activity-gauge__chart-vector {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.gids-activity-gauge__track-background {
+  fill: none;
+  stroke: var(--gids-color-background-brand-subtlest-default);
+  stroke-linecap: round;
+}
+.gids-activity-gauge__segment {
+  fill: none;
+  stroke-linecap: round;
+  transition: stroke-dasharray 0.4s ease-out;
+}
+.gids-activity-gauge__segment.gids-activity-gauge__segment-series-1 {
+  stroke: var(--gids-color-icon-subtle);
+}
+.gids-activity-gauge__segment.gids-activity-gauge__segment-series-2 {
+  stroke: var(--gids-color-icon-warning);
+}
+.gids-activity-gauge__segment.gids-activity-gauge__segment-series-3 {
+  stroke: var(--gids-color-icon-danger);
+}
+.gids-activity-gauge__center-content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  pointer-events: none;
+}
+.gids-activity-gauge__label-xxs {
+  font-family: var(--gids-typography-label-x-small__font-family);
+  font-size: var(--gids-typography-label-x-small__font-size);
+  font-weight: var(--gids-typography-label-x-small__font-weight);
+  letter-spacing: var(--gids-typography-label-x-small__letter-spacing);
+  line-height: var(--gids-typography-label-x-small__line-height);
+  text-transform: var(--gids-typography-label-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-x-small__font-variant-caps, inherit);
+}
+.gids-activity-gauge__label-xs {
+  font-family: var(--gids-typography-label-x-small__font-family);
+  font-size: var(--gids-typography-label-x-small__font-size);
+  font-weight: var(--gids-typography-label-x-small__font-weight);
+  letter-spacing: var(--gids-typography-label-x-small__letter-spacing);
+  line-height: var(--gids-typography-label-x-small__line-height);
+  text-transform: var(--gids-typography-label-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-x-small__font-variant-caps, inherit);
+}
+.gids-activity-gauge__label-sm {
+  font-family: var(--gids-typography-label-x-small__font-family);
+  font-size: var(--gids-typography-label-x-small__font-size);
+  font-weight: var(--gids-typography-label-x-small__font-weight);
+  letter-spacing: var(--gids-typography-label-x-small__letter-spacing);
+  line-height: var(--gids-typography-label-x-small__line-height);
+  text-transform: var(--gids-typography-label-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-x-small__font-variant-caps, inherit);
+}
+.gids-activity-gauge__label-md {
+  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);
+}
+.gids-activity-gauge__label-lg {
+  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);
+}
+.gids-activity-gauge__label-common {
+  color: var(--gids-color-text-subtlest);
+}
+.gids-activity-gauge__value-xxs {
+  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);
+}
+.gids-activity-gauge__value-xs {
+  font-family: var(--gids-typography-display-x-small__font-family);
+  font-size: var(--gids-typography-display-x-small__font-size);
+  font-weight: var(--gids-typography-display-x-small__font-weight);
+  letter-spacing: var(--gids-typography-display-x-small__letter-spacing);
+  line-height: var(--gids-typography-display-x-small__line-height);
+  text-transform: var(--gids-typography-display-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-display-x-small__font-variant-caps, inherit);
+}
+.gids-activity-gauge__value-sm {
+  font-family: var(--gids-typography-display-x-small__font-family);
+  font-size: var(--gids-typography-display-x-small__font-size);
+  font-weight: var(--gids-typography-display-x-small__font-weight);
+  letter-spacing: var(--gids-typography-display-x-small__letter-spacing);
+  line-height: var(--gids-typography-display-x-small__line-height);
+  text-transform: var(--gids-typography-display-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-display-x-small__font-variant-caps, inherit);
+}
+.gids-activity-gauge__value-md {
+  font-family: var(--gids-typography-display-small__font-family);
+  font-size: var(--gids-typography-display-small__font-size);
+  font-weight: var(--gids-typography-display-small__font-weight);
+  letter-spacing: var(--gids-typography-display-small__letter-spacing);
+  line-height: var(--gids-typography-display-small__line-height);
+  text-transform: var(--gids-typography-display-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-display-small__font-variant-caps, inherit);
+}
+.gids-activity-gauge__value-lg {
+  font-family: var(--gids-typography-display-small__font-family);
+  font-size: var(--gids-typography-display-small__font-size);
+  font-weight: var(--gids-typography-display-small__font-weight);
+  letter-spacing: var(--gids-typography-display-small__letter-spacing);
+  line-height: var(--gids-typography-display-small__line-height);
+  text-transform: var(--gids-typography-display-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-display-small__font-variant-caps, inherit);
+}
+.gids-activity-gauge__value-common {
+  color: var(--gids-color-text-default);
+}
+.gids-activity-gauge__bottom-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+.gids-activity-gauge__no-data {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--gids-padding-vertical-edge-to-element-300) var(--gids-padding-horizontal-edge-to-element-100);
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  color: var(--gids-color-text-subtlest);
+  border: var(--gids-border-width-thin) dashed var(--gids-color-border-default);
+  border-radius: var(--gids-border-radius-md);
+}
+
+.gids-chart__no-data {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--gids-padding-vertical-edge-to-element-300) var(--gids-padding-horizontal-edge-to-element-100);
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  color: var(--gids-color-text-subtlest);
+  border: var(--gids-border-width-thin) dashed var(--gids-color-border-default);
+  border-radius: var(--gids-border-radius-md);
 }
 
 .gids-box-demo__container-with-text {