@ganpatiinfo/gids-core-web 8.2.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
 */
@@ -856,6 +893,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 +1055,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 +3007,7 @@ gids-field {
   display: flex;
   align-items: flex-start;
   gap: var(--gids-gap-200);
+  width: 100%;
 }
 .gids-heading__content-container {
   display: flex;
@@ -3587,6 +3657,1855 @@ gids-overflow-container::after {
   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: not-allowed;
+}
+.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;
+  text-align: start;
+}
+.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);
+  text-align: start;
+}
+.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);
+  text-align: start;
+}
+.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);
+  text-align: end;
+}
+.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);
+  text-align: end;
+}
+.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);
+  text-align: end;
+}
+.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-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;
+  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;
+}
+.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 {
   border: 1px dashed var(--gids-color-border-brand-default);
 }