@ganpatiinfo/gids-core-web 13.0.0 → 14.0.0

package/dist/css/index.css

@@ -3456,6 +3456,7 @@ gids-overlay-provider {
 .gids-progress-bar {
   --gidsProgressBar-color-fill: var(--gids-color-icon-brand);
   --gidsProgressBar-animation-duration: 2s;
+  width: 100%;
   position: relative;
   height: var(--gids-size-040);
   background-color: var(--gids-color-background-neutral-default);
@@ -4603,7 +4604,7 @@ gids-popover {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-right: var(--gids-padding-horizontal-edge-to-element-150);
+  margin-right: var(--gids-padding-horizontal-edge-to-element-600);
   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);
@@ -4637,6 +4638,7 @@ gids-popover {
   position: absolute;
   right: 0;
   transform: translateY(50%);
+  margin-right: var(--gids-padding-horizontal-edge-to-element-100);
 }
 .gids-line-chart__chart-stage {
   position: relative;
@@ -4666,39 +4668,6 @@ gids-popover {
   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;
@@ -4706,7 +4675,8 @@ gids-popover {
   justify-content: space-between;
   align-items: center;
   padding-left: var(--gids-container-padding-desktop);
-  padding-top: var(--gids-padding-vertical-edge-to-element-100);
+  padding-top: var(--gids-padding-vertical-edge-to-element-200);
+  gap: var(--gids-gap-050);
   box-sizing: border-box;
 }
 .gids-line-chart__x-axis-label {
@@ -4750,6 +4720,12 @@ gids-popover {
   border: var(--gids-border-width-thin) dashed var(--gids-color-border-default);
   border-radius: var(--gids-border-radius-md);
 }
+.gids-line-chart__hover-dot {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  z-index: 20;
+}
 
 :host {
   display: block;
@@ -6112,80 +6088,90 @@ gids-popover {
   border-bottom-right-radius: var(--gids-border-radius-lg);
 }
 
-.gids-basic-table-cell {
+.gids-table-cell {
   background-color: transparent;
   padding: var(--gids-padding-vertical-edge-to-element-150) var(--gids-padding-horizontal-edge-to-element-150);
   white-space: nowrap;
   word-break: normal;
   overflow-wrap: normal;
 }
-.gids-basic-table-cell--width-intrinsic {
+.gids-table-cell--width-intrinsic {
   width: auto;
 }
-.gids-basic-table-cell--text-alignment-left {
+.gids-table-cell--text-alignment-left {
   text-align: left;
 }
-.gids-basic-table-cell--text-alignment-right {
+.gids-table-cell--text-alignment-right {
   text-align: right;
 }
-.gids-basic-table-cell--text-alignment-center {
+.gids-table-cell--text-alignment-center {
   text-align: center;
 }
-.gids-basic-table-cell--border-side-top {
+.gids-table-cell--border-side-top {
   border-top: var(--gids-border-width-thin) solid var(--gids-color-border-default);
 }
-.gids-basic-table-cell--border-side-bottom {
+.gids-table-cell--border-side-bottom {
   border-bottom: var(--gids-border-width-thin) solid var(--gids-color-border-default);
 }
-.gids-basic-table-cell--border-side-left {
+.gids-table-cell--border-side-left {
   border-left: var(--gids-border-width-thin) solid var(--gids-color-border-default);
 }
-.gids-basic-table-cell--border-side-right {
+.gids-table-cell--border-side-right {
   border-right: var(--gids-border-width-thin) solid var(--gids-color-border-default);
 }
-.gids-basic-table-cell--border-radius-side-top-left {
+.gids-table-cell--border-radius-side-top-left {
   border-top-left-radius: var(--gids-border-radius-md);
 }
-.gids-basic-table-cell--border-radius-side-bottom-left {
+.gids-table-cell--border-radius-side-bottom-left {
   border-bottom-left-radius: var(--gids-border-radius-md);
 }
-.gids-basic-table-cell--border-radius-side-top-right {
+.gids-table-cell--border-radius-side-top-right {
   border-top-right-radius: var(--gids-border-radius-md);
 }
-.gids-basic-table-cell--border-radius-side-bottom-right {
+.gids-table-cell--border-radius-side-bottom-right {
   border-bottom-right-radius: var(--gids-border-radius-md);
 }
-.gids-basic-table-cell--appearance-default {
+.gids-table-cell--appearance-default {
   background-color: var(--gids-color-background-accent-4-subtler-default);
   color: var(--gids-color-text-default);
 }
-.gids-basic-table-cell--appearance-primal {
+.gids-table-cell--appearance-primal {
   background-color: var(--gids-color-background-input-default);
   color: var(--gids-color-text-default);
 }
-.gids-basic-table-cell--appearance-neutral-default {
+.gids-table-cell--appearance-neutral-default {
   background-color: var(--gids-color-background-neutral-default);
   color: var(--gids-color-text-default);
 }
-.gids-basic-table-cell--appearance-info {
+.gids-table-cell--appearance-info {
   background-color: var(--gids-color-background-accent-3-subtle-default);
   color: var(--gids-color-text-information);
 }
-.gids-basic-table-cell--appearance-warning {
+.gids-table-cell--appearance-warning {
   background-color: var(--gids-color-background-accent-2-subtle-default);
   color: var(--gids-color-text-warning);
 }
-.gids-basic-table-cell--appearance-positive {
+.gids-table-cell--appearance-positive {
   background-color: var(--gids-color-background-accent-1-subtle-default);
   color: var(--gids-color-text-positive);
 }
-.gids-basic-table-cell--appearance-danger {
+.gids-table-cell--appearance-danger {
   background-color: var(--gids-color-background-accent-6-subtle-default);
   color: var(--gids-color-text-danger);
 }
-.gids-basic-table-cell__display-tags-container {
+.gids-table-cell__display-tags-container {
+  display: inline-flex;
+  gap: var(--gids-gap-100);
+}
+.gids-table-cell__primary-action-btn-container {
+  display: inline-flex;
+  gap: var(--gids-gap-100);
+  padding-right: var(--gids-padding-horizontal-edge-to-element-200);
+}
+.gids-table-cell__secondary-action-btn-container {
   display: inline-flex;
   gap: var(--gids-gap-100);
+  padding-left: var(--gids-padding-horizontal-edge-to-element-200);
 }
 
 .gids-basic-table-row {
@@ -6299,6 +6285,876 @@ gids-popover {
   width: auto;
 }
 
+.gids-advanced-tooltip {
+  position: fixed;
+  display: inline-flex;
+  width: fit-content;
+  height: fit-content;
+  z-index: 1001;
+  --gidsAdvancedTooltip-background: var(
+  	--gids-color-background-neutral-bold-default
+  );
+  --gidsAdvancedTooltip-label-color: var(--gids-color-text-inverse);
+  --gidsAdvancedTooltip-value-color: var(--gids-color-text-inverse);
+}
+.gids-advanced-tooltip--visible {
+  opacity: 1;
+}
+.gids-advanced-tooltip__content {
+  box-shadow: var(--gids-elevation-shadow-overlay);
+  background: var(--gidsAdvancedTooltip-background);
+  border-radius: var(--gids-border-radius-md);
+  padding: var(--gids-padding-vertical-edge-to-element-150) var(--gids-padding-horizontal-edge-to-element-150);
+  min-width: 140px;
+}
+.gids-advanced-tooltip__item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--gids-gap-200);
+}
+.gids-advanced-tooltip__item + .gids-advanced-tooltip__item {
+  margin-top: var(--gids-padding-vertical-edge-to-element-075);
+}
+.gids-advanced-tooltip__left {
+  display: flex;
+  align-items: center;
+  gap: var(--gids-gap-100);
+}
+.gids-advanced-tooltip__arrow {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: var(--gidsAdvancedTooltip-background);
+  backdrop-filter: calc(var(--gids-backdrop-blur-2-xl));
+  transform: rotate(45deg);
+}
+.gids-advanced-tooltip__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);
+  color: var(--gidsAdvancedTooltip-label-color);
+}
+.gids-advanced-tooltip__value {
+  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);
+  color: var(--gidsAdvancedTooltip-value-color);
+  white-space: nowrap;
+}
+
+.gids-matrix-table-body {
+  width: 100%;
+  overflow: hidden;
+}
+.gids-matrix-table-body--width-intrinsic {
+  width: auto;
+}
+
+.gids-matrix-table {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-collapse: separate;
+  overflow: hidden;
+}
+.gids-matrix-table__scroll-container {
+  width: 100%;
+  max-height: var(--gidsMatrixTable-body-max-height, 300px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+}
+.gids-matrix-table--main-table {
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+  table-layout: fixed;
+}
+.gids-matrix-table--main-table .gids-matrix-table__top-thead {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+.gids-matrix-table--main-table .gids-matrix-table__top-thead th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+.gids-matrix-table--main-table-width-intrinsic {
+  width: max-content;
+}
+.gids-matrix-table--width-intrinsic {
+  width: max-content;
+}
+.gids-matrix-table--outer-borders {
+  border: var(--gids-border-width-thin) solid var(--gids-color-border-default);
+}
+.gids-matrix-table--radius-top-left {
+  border-top-left-radius: var(--gids-border-radius-md);
+}
+.gids-matrix-table--radius-bottom-left {
+  border-bottom-left-radius: var(--gids-border-radius-md);
+}
+.gids-matrix-table--radius-top-right {
+  border-top-right-radius: var(--gids-border-radius-md);
+}
+.gids-matrix-table--radius-bottom-right {
+  border-bottom-right-radius: var(--gids-border-radius-md);
+}
+
+.gids-color-swatch {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  align-self: flex-start;
+  justify-self: flex-start;
+  gap: var(--gids-gap-150);
+}
+.gids-color-swatch--panel {
+  display: flex;
+}
+.gids-color-swatch--label-position-top {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+.gids-color-swatch--label-position-bottom {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+.gids-color-swatch--label-position-left {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.gids-color-swatch--panel-shape-square {
+  display: flex;
+}
+.gids-color-swatch--panel-shape-oval {
+  display: flex;
+  border-radius: var(--gids-border-radius-full);
+}
+.gids-color-swatch--panel-shape-circle {
+  display: flex;
+  border-radius: var(--gids-border-radius-full);
+}
+.gids-color-swatch--rectangle-panel-size-xs {
+  width: 30px;
+  height: 10px;
+}
+.gids-color-swatch--rectangle-panel-size-sm {
+  width: 40px;
+  height: 10px;
+}
+.gids-color-swatch--rectangle-panel-size-md {
+  width: 50px;
+  height: 20px;
+}
+.gids-color-swatch--rectangle-panel-size-lg {
+  width: 60px;
+  height: 30px;
+}
+.gids-color-swatch--rectangle-panel-size-xl {
+  width: 70px;
+  height: 40px;
+}
+.gids-color-swatch--rectangle-panel-size-2xl {
+  width: 80px;
+  height: 50px;
+}
+.gids-color-swatch--rectangle-panel-size-3xl {
+  width: 90px;
+  height: 60px;
+}
+.gids-color-swatch--rectangle-panel-size-4xl {
+  width: 100px;
+  height: 70px;
+}
+.gids-color-swatch--square-panel-size-xs {
+  width: 30px;
+  height: 30px;
+}
+.gids-color-swatch--square-panel-size-sm {
+  width: 40px;
+  height: 40px;
+}
+.gids-color-swatch--square-panel-size-md {
+  width: 50px;
+  height: 50px;
+}
+.gids-color-swatch--square-panel-size-lg {
+  width: 60px;
+  height: 60px;
+}
+.gids-color-swatch--square-panel-size-xl {
+  width: 70px;
+  height: 70px;
+}
+.gids-color-swatch--square-panel-size-2xl {
+  width: 80px;
+  height: 80px;
+}
+.gids-color-swatch--square-panel-size-3xl {
+  width: 90px;
+  height: 90px;
+}
+.gids-color-swatch--square-panel-size-4xl {
+  width: 100px;
+  height: 100px;
+}
+.gids-color-swatch--circle-panel-size-xs {
+  width: 30px;
+  height: 30px;
+}
+.gids-color-swatch--circle-panel-size-sm {
+  width: 40px;
+  height: 40px;
+}
+.gids-color-swatch--circle-panel-size-md {
+  width: 50px;
+  height: 50px;
+}
+.gids-color-swatch--circle-panel-size-lg {
+  width: 60px;
+  height: 60px;
+}
+.gids-color-swatch--circle-panel-size-xl {
+  width: 70px;
+  height: 70px;
+}
+.gids-color-swatch--circle-panel-size-2xl {
+  width: 80px;
+  height: 80px;
+}
+.gids-color-swatch--circle-panel-size-3xl {
+  width: 90px;
+  height: 90px;
+}
+.gids-color-swatch--circle-panel-size-4xl {
+  width: 100px;
+  height: 100px;
+}
+.gids-color-swatch--oval-panel-size-xs {
+  width: 30px;
+  height: 10px;
+}
+.gids-color-swatch--oval-panel-size-sm {
+  width: 40px;
+  height: 10px;
+}
+.gids-color-swatch--oval-panel-size-md {
+  width: 50px;
+  height: 20px;
+}
+.gids-color-swatch--oval-panel-size-lg {
+  width: 60px;
+  height: 30px;
+}
+.gids-color-swatch--oval-panel-size-xl {
+  width: 70px;
+  height: 40px;
+}
+.gids-color-swatch--oval-panel-size-2xl {
+  width: 80px;
+  height: 50px;
+}
+.gids-color-swatch--oval-panel-size-3xl {
+  width: 90px;
+  height: 60px;
+}
+.gids-color-swatch--oval-panel-size-4xl {
+  width: 100px;
+  height: 70px;
+}
+
+.gids-table-toolbar {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--gids-elevation-surface-default);
+}
+.gids-table-toolbar--surface-hovered {
+  background-color: var(--gids-elevation-surface-hovered);
+}
+.gids-table-toolbar--surface-pressed {
+  background-color: var(--gids-elevation-surface-pressed);
+}
+.gids-table-toolbar__children-container {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+.gids-table-toolbar__content-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: var(--gids-padding-vertical-edge-to-element-200);
+  padding: var(--gids-padding-vertical-edge-to-element-250) var(--gids-padding-horizontal-edge-to-element-300);
+}
+.gids-table-toolbar--border-side-top {
+  border-top: var(--gids-border-width-thin) solid var(--gids-color-border-default);
+}
+.gids-table-toolbar--border-side-bottom {
+  border-bottom: var(--gids-border-width-thin) solid var(--gids-color-border-default);
+}
+.gids-table-toolbar--border-side-left {
+  border-left: var(--gids-border-width-thin) solid var(--gids-color-border-default);
+}
+.gids-table-toolbar--border-side-right {
+  border-right: var(--gids-border-width-thin) solid var(--gids-color-border-default);
+}
+.gids-table-toolbar--border-radius-side-top-left {
+  border-top-left-radius: var(--gids-border-radius-lg);
+}
+.gids-table-toolbar--border-radius-side-bottom-left {
+  border-bottom-left-radius: var(--gids-border-radius-lg);
+}
+.gids-table-toolbar--border-radius-side-top-right {
+  border-top-right-radius: var(--gids-border-radius-lg);
+}
+.gids-table-toolbar--border-radius-side-bottom-right {
+  border-bottom-right-radius: var(--gids-border-radius-lg);
+}
+
+.gids-table-entry {
+  box-sizing: border-box;
+  /*
+   * Important for both native table usage and standalone usage.
+   * The entry must be allowed to become narrower than its
+   * content's intrinsic width.
+   */
+  min-width: 0;
+  max-width: 100%;
+  background-color: transparent;
+  padding: var(--gids-padding-vertical-edge-to-element-150) var(--gids-padding-horizontal-edge-to-element-150);
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: normal;
+}
+.gids-table-entry--main-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gids-gap-150);
+  /*
+   * The entry content is responsible for adapting
+   * to the available width.
+   */
+  min-width: 0;
+  max-width: 100%;
+  /*
+   * When the available width becomes smaller,
+   * content moves onto another line instead of
+   * forcing the cell/row wider.
+   */
+  flex-wrap: wrap;
+  /*
+   * Critical:
+   * Every direct child must be allowed to shrink.
+   */
+}
+.gids-table-entry--main-container > * {
+  min-width: 0;
+  max-width: 100%;
+}
+.gids-table-entry--entry-alignment-left {
+  justify-content: flex-start;
+}
+.gids-table-entry--entry-alignment-right {
+  justify-content: flex-end;
+}
+.gids-table-entry--text-alignment-left {
+  text-align: left;
+}
+.gids-table-entry--text-alignment-right {
+  text-align: right;
+}
+.gids-table-entry--text-alignment-center {
+  text-align: center;
+}
+.gids-table-entry--border-side-top {
+  border-top: var(--gids-border-width-thin) solid var(--gids-color-border-default);
+}
+.gids-table-entry--border-side-bottom {
+  border-bottom: var(--gids-border-width-thin) solid var(--gids-color-border-default);
+}
+.gids-table-entry--border-side-left {
+  border-left: var(--gids-border-width-thin) solid var(--gids-color-border-default);
+}
+.gids-table-entry--border-side-right {
+  border-right: var(--gids-border-width-thin) solid var(--gids-color-border-default);
+}
+.gids-table-entry--border-radius-side-top-left {
+  border-top-left-radius: var(--gids-border-radius-md);
+}
+.gids-table-entry--border-radius-side-bottom-left {
+  border-bottom-left-radius: var(--gids-border-radius-md);
+}
+.gids-table-entry--border-radius-side-top-right {
+  border-top-right-radius: var(--gids-border-radius-md);
+}
+.gids-table-entry--border-radius-side-bottom-right {
+  border-bottom-right-radius: var(--gids-border-radius-md);
+}
+.gids-table-entry--appearance-default {
+  background-color: var(--gids-color-background-accent-4-subtler-default);
+  color: var(--gids-color-text-default);
+}
+.gids-table-entry--appearance-primal {
+  background-color: var(--gids-color-background-input-default);
+  color: var(--gids-color-text-default);
+}
+.gids-table-entry--appearance-neutral-default {
+  background-color: var(--gids-color-background-neutral-default);
+  color: var(--gids-color-text-default);
+}
+.gids-table-entry--appearance-info {
+  background-color: var(--gids-color-background-accent-3-subtle-default);
+  color: var(--gids-color-text-information);
+}
+.gids-table-entry--appearance-warning {
+  background-color: var(--gids-color-background-accent-2-subtle-default);
+  color: var(--gids-color-text-warning);
+}
+.gids-table-entry--appearance-positive {
+  background-color: var(--gids-color-background-accent-1-subtle-default);
+  color: var(--gids-color-text-positive);
+}
+.gids-table-entry--appearance-danger {
+  background-color: var(--gids-color-background-accent-6-subtle-default);
+  color: var(--gids-color-text-danger);
+}
+.gids-table-entry__common-items-container-horizontal {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gids-gap-100);
+  min-width: 0;
+  max-width: 100%;
+  flex-wrap: wrap;
+}
+.gids-table-entry__common-items-container-vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gids-gap-100);
+  min-width: 0;
+  max-width: 100%;
+}
+.gids-table-entry__progress-bars-container-horizontal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gids-gap-100);
+  width: var(--gidsProgressBarContainer-min-width);
+  max-width: 100%;
+  min-width: 0;
+}
+.gids-table-entry__progress-bars-container-vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gids-gap-100);
+  width: var(--gidsProgressBarContainer-min-width);
+  max-width: 100%;
+  min-width: 0;
+}
+.gids-table-entry__leading-actions-container {
+  display: inline-flex;
+  gap: var(--gids-gap-100);
+  min-width: 0;
+  max-width: 100%;
+  flex-wrap: wrap;
+}
+.gids-table-entry__trailing-actions-container {
+  display: inline-flex;
+  gap: var(--gids-gap-100);
+  min-width: 0;
+  max-width: 100%;
+  flex-wrap: wrap;
+}
+.gids-table-entry__label {
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  word-break: normal;
+  white-space: normal;
+}
+
+.gids-table-row {
+  margin: 0;
+  padding: 0;
+}
+
+.gids-table-header {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.gids-table-body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.gids-table {
+  width: 100%;
+  min-width: 0;
+  border-collapse: separate;
+  overflow: hidden;
+}
+.gids-table__scroll-container {
+  width: 100%;
+  max-width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.gids-table__scroll-container--horizontal-scroll {
+  overflow-x: auto;
+}
+.gids-table__scroll-container--horizontal-scroll .gids-table--main-table {
+  width: max-content;
+  min-width: 100%;
+}
+.gids-table--main-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+}
+.gids-table--main-table thead,
+.gids-table--main-table th,
+.gids-table--main-table .gids-table__thead {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+.gids-table--outer-borders {
+  border: var(--gids-border-width-thin) solid var(--gids-color-border-default);
+}
+.gids-table--radius-top-left {
+  border-top-left-radius: var(--gids-border-radius-md);
+}
+.gids-table--radius-bottom-left {
+  border-bottom-left-radius: var(--gids-border-radius-md);
+}
+.gids-table--radius-top-right {
+  border-top-right-radius: var(--gids-border-radius-md);
+}
+.gids-table--radius-bottom-right {
+  border-bottom-right-radius: var(--gids-border-radius-md);
+}
+
+.gids-table-footer-control {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  width: 100%;
+  gap: var(--gids-gap-200);
+  padding: var(--gids-padding-vertical-edge-to-element-150) var(--gids-padding-horizontal-edge-to-element-150);
+}
+.gids-table-footer-control__main-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  width: 100%;
+  gap: var(--gids-gap-200);
+}
+.gids-table-footer-control__informative-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: var(--gids-gap-200);
+}
+.gids-table-footer-control__paginator-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+.gids-table-footer-control__bulk-status-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);
+  color: var(--gids-color-text-subtle);
+}
+.gids-table-footer-control__range-status-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);
+  color: var(--gids-color-text-subtlest);
+}
+
+.gids-paginator-item {
+  text-decoration: none;
+  appearance: none;
+  border: none;
+  background-color: unset;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.gids-paginator-item--circled {
+  border-radius: var(--gids-border-radius-full);
+}
+.gids-paginator-item--rounded {
+  border-radius: var(--gids-border-radius-sm);
+}
+.gids-paginator-item--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);
+  width: var(--gids-size-240);
+  height: var(--gids-size-240);
+}
+.gids-paginator-item--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);
+  width: var(--gids-size-280);
+  height: var(--gids-size-280);
+}
+.gids-paginator-item--lg {
+  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);
+  width: var(--gids-size-320);
+  height: var(--gids-size-320);
+}
+.gids-paginator-item--xl {
+  font-family: var(--gids-typography-label-large__font-family);
+  font-size: var(--gids-typography-label-large__font-size);
+  font-weight: var(--gids-typography-label-large__font-weight);
+  letter-spacing: var(--gids-typography-label-large__letter-spacing);
+  line-height: var(--gids-typography-label-large__line-height);
+  text-transform: var(--gids-typography-label-large__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-label-large__font-variant-caps, inherit);
+  width: var(--gids-size-360);
+  height: var(--gids-size-360);
+}
+.gids-paginator-item--default {
+  border: 0 none unset;
+  color: var(--gids-color-text-brand);
+  --gidsIcon-color: var(--gids-color-icon-brand);
+}
+.gids-paginator-item--default:hover {
+  background-color: var(--gids-color-background-brand-bold-hovered);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-text-inverse);
+}
+.gids-paginator-item--outlined {
+  border: var(--gids-border-width-thin) solid var(--gids-color-border-brand-default);
+  color: var(--gids-color-text-brand);
+  --gidsIcon-color: var(--gids-color-icon-brand);
+}
+.gids-paginator-item--outlined:hover {
+  background-color: var(--gids-color-background-brand-subtlest-hovered);
+}
+.gids-paginator-item--select-none-default {
+  border: 0 none unset;
+  color: var(--gids-color-text-default);
+  --gidsIcon-color: var(--gids-color-text-default);
+}
+.gids-paginator-item--select-none-default:hover {
+  background-color: var(--gids-color-background-accent-9-bolder-hovered);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-text-inverse);
+}
+.gids-paginator-item--select-default-default {
+  background-color: var(--gids-color-background-brand-bold-default);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-paginator-item--select-default-default:hover {
+  background-color: var(--gids-color-background-brand-bold-hovered);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-paginator-item--select-success-default {
+  background-color: var(--gids-color-background-accent-1-bolder-default);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-paginator-item--select-success-default:hover {
+  background-color: var(--gids-color-background-accent-1-bolder-hovered);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-paginator-item--select-warning-default {
+  background-color: var(--gids-color-background-accent-2-bolder-default);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-paginator-item--select-warning-default:hover {
+  background-color: var(--gids-color-background-accent-2-bolder-hovered);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-paginator-item--select-danger-default {
+  background-color: var(--gids-color-background-accent-6-bolder-default);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-paginator-item--select-danger-default:hover {
+  background-color: var(--gids-color-background-accent-6-bolder-hovered);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-paginator-item--select-info-default {
+  background-color: var(--gids-color-background-accent-3-bolder-default);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-paginator-item--select-info-default:hover {
+  background-color: var(--gids-color-background-accent-3-bolder-hovered);
+  color: var(--gids-color-text-inverse);
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-paginator-item--select-none-outlined {
+  border: var(--gids-border-width-thin) solid var(--gids-color-border-accent-9);
+  color: var(--gids-color-text-accent-9);
+  --gidsIcon-color: var(--gids-color-icon-accent-9);
+}
+.gids-paginator-item--select-none-outlined:hover {
+  background-color: var(--gids-color-background-accent-9-subtle-hovered);
+}
+.gids-paginator-item--select-default-outlined {
+  background-color: var(--gids-color-background-brand-subtlest-default);
+  color: var(--gids-color-text-brand);
+  border-color: var(--gids-color-border-brand-default);
+  --gidsIcon-color: var(--gids-color-icon-brand);
+}
+.gids-paginator-item--select-default-outlined:hover {
+  background-color: var(--gids-color-background-brand-subtlest-hovered);
+  color: var(--gids-color-text-brand);
+  --gidsIcon-color: var(--gids-color-icon-brand);
+}
+.gids-paginator-item--select-success-outlined {
+  background-color: var(--gids-color-background-accent-1-subtlest-default);
+  color: var(--gids-color-text-accent-1);
+  border-color: var(--gids-color-border-accent-1);
+  --gidsIcon-color: var(--gids-color-icon-accent-1);
+}
+.gids-paginator-item--select-success-outlined:hover {
+  background-color: var(--gids-color-background-accent-1-subtlest-hovered);
+}
+.gids-paginator-item--select-warning-outlined {
+  background-color: var(--gids-color-background-accent-2-subtlest-default);
+  color: var(--gids-color-text-accent-2);
+  border-color: var(--gids-color-border-accent-2);
+  --gidsIcon-color: var(--gids-color-icon-accent-2);
+}
+.gids-paginator-item--select-warning-outlined:hover {
+  background-color: var(--gids-color-background-accent-2-subtlest-hovered);
+}
+.gids-paginator-item--select-danger-outlined {
+  background-color: var(--gids-color-background-accent-6-subtlest-default);
+  color: var(--gids-color-text-accent-6);
+  border-color: var(--gids-color-border-accent-6);
+  --gidsIcon-color: var(--gids-color-text-accent-6);
+}
+.gids-paginator-item--select-danger-outlined:hover {
+  background-color: var(--gids-color-background-accent-6-subtlest-hovered);
+}
+.gids-paginator-item--select-info-outlined {
+  background-color: var(--gids-color-background-accent-3-subtlest-default);
+  color: var(--gids-color-text-accent-3);
+  border-color: var(--gids-color-border-accent-3);
+  --gidsIcon-color: var(--gids-color-text-accent-3);
+}
+.gids-paginator-item--select-info-outlined:hover {
+  background-color: var(--gids-color-background-accent-3-subtlest-hovered);
+}
+.gids-paginator-item--selected-disabled {
+  cursor: default;
+  border-color: var(--gids-color-text-disabled);
+  color: var(--gids-color-text-disabled);
+  background-color: var(--gids-color-background-disabled);
+  --gidsIcon-color: var(--gids-color-icon-disabled);
+}
+.gids-paginator-item--selected-disabled:hover {
+  background-color: var(--gids-color-background-disabled);
+  color: var(--gids-color-text-disabled);
+  --gidsIcon-color: var(--gids-color-icon-disabled);
+}
+.gids-paginator-item--disabled {
+  cursor: default;
+  border-color: var(--gids-color-text-disabled);
+  color: var(--gids-color-text-disabled);
+  --gidsIcon-color: var(--gids-color-icon-disabled);
+}
+.gids-paginator-item--disabled:hover {
+  background-color: unset;
+  color: var(--gids-color-text-disabled);
+  --gidsIcon-color: var(--gids-color-icon-disabled);
+}
+
+.gids-paginator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+}
+.gids-paginator__items {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gids-gap-050);
+}
+.gids-paginator__shaped-items {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gids-gap-150);
+}
+
+.gids-table-footer {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
 .gids-box-demo__container-with-text {
   border: 1px dashed var(--gids-color-border-brand-default);
 }