@ganpatiinfo/gids-core-web 10.2.0 → 12.0.0

package/dist/css/index.css

@@ -1541,6 +1541,16 @@ gids-global-styles-start {
   	--gids-color-background-accent-5-bolder-default
   );
 }
+.gids-avatar--default {
+  background-color: var(--gids-color-background-canvas);
+  color: var(--gids-color-text-subtlest);
+}
+.gids-avatar--inverted-info {
+  background-color: var(--gids-color-background-information-bold-default);
+}
+.gids-avatar--inverted-warning {
+  background-color: var(--gids-color-background-warning-bold-default);
+}
 
 .gids-avatar:has(img) {
   background: none;
@@ -3392,6 +3402,9 @@ gids-overlay-provider {
   overflow-y: auto;
   overflow-x: hidden;
 }
+.gids-side-menu--height-full {
+  height: 100vh;
+}
 .gids-side-menu--inverted-brand {
   background-color: var(--gids-color-background-brand-bold-default);
 }
@@ -3822,37 +3835,58 @@ gids-popover {
   background-color: var(--gids-color-background-neutral-subtle-default);
   cursor: pointer;
 }
+.gids-list-item__divider {
+  width: 100%;
+}
 .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: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:active .gids-list-item__divider {
+  width: 0;
+}
 .gids-list-item--selected {
   background-color: var(--gids-color-background-selected-default);
 }
+.gids-list-item--selected .gids-list-item__divider {
+  width: 0;
+}
 .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: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--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 .gids-list-item__divider {
+  width: 0;
+}
 .gids-list-item--disabled:hover {
   background-color: var(--gids-color-background-disabled);
 }
@@ -4018,9 +4052,6 @@ gids-popover {
   	var(--gids-color-text-disabled)
   );
 }
-.gids-list-item__divider {
-  width: 100%;
-}
 
 .gids-menu {
   display: flex;
@@ -5516,6 +5547,7 @@ gids-popover {
 
 .gids-filter__menu {
   position: absolute;
+  inset-inline: 0;
   top: calc(100% + var(--gids-gap-050));
   z-index: 3;
   display: none;
@@ -5581,6 +5613,8 @@ gids-popover {
   gap: var(--gids-gap-100);
   padding: var(--gids-padding-vertical-edge-to-element-150) var(--gids-padding-horizontal-edge-to-element-150);
   color: var(--gids-color-text-accent-5);
+  white-space: nowrap;
+  flex-shrink: 0;
   cursor: pointer;
 }
 .gids-tab-item .gids-icon {
@@ -5597,6 +5631,7 @@ gids-popover {
   display: flex;
   justify-content: center;
   align-items: center;
+  flex: 1;
   gap: var(--gids-gap-150);
 }
 .gids-tab-item--full {
@@ -5755,6 +5790,8 @@ gids-popover {
   align-items: center;
   justify-content: flex-start;
   gap: var(--gids-gap-150);
+  overflow-y: hidden;
+  overflow-x: scroll;
 }
 .gids-tab--full {
   display: flex;
@@ -5766,6 +5803,491 @@ gids-popover {
   gap: 0;
 }
 
+.gids-expansion-body-list-item {
+  display: flex;
+  flex: 1;
+  gap: var(--gids-gap-400);
+  padding-bottom: var(--gids-padding-vertical-edge-to-element-300);
+  position: relative;
+  cursor: default;
+}
+.gids-expansion-body-list-item::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-color: var(--gids-color-border-default);
+  transition: background 0.3s ease-in-out;
+  z-index: 1;
+}
+.gids-expansion-body-list-item::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(to right, transparent 0%, transparent 25%, var(--gids-color-background-selected-pressed) 45%, var(--gids-color-background-selected-pressed) 55%, transparent 75%, transparent 100%);
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  z-index: 2;
+}
+.gids-expansion-body-list-item:has(.gids-expansion-body-list-item__subtitle:hover)::after {
+  background: linear-gradient(to right, var(--gids-color-border-default) 0%, var(--gids-color-border-default) 15%, var(--gids-color-background-selected-pressed) 45%, var(--gids-color-background-selected-pressed) 70%, var(--gids-color-border-default) 90%, var(--gids-color-border-default) 100%);
+}
+.gids-expansion-body-list-item:has(.gids-expansion-body-list-item__subtitle:hover)::before {
+  opacity: 1;
+}
+.gids-expansion-body-list-item__primary-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  flex: 1 0;
+  gap: var(--gids-gap-150);
+}
+.gids-expansion-body-list-item__primary-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gids-gap-200);
+}
+.gids-expansion-body-list-item__secondary-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+.gids-expansion-body-list-item__label {
+  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-subtle);
+  cursor: default;
+}
+.gids-expansion-body-list-item__subtitle {
+  margin: 0;
+  padding: 0;
+  appearance: none;
+  border: none;
+  background: none;
+  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);
+  cursor: pointer;
+}
+.gids-expansion-body-list-item__supporting-text {
+  margin: 0;
+  padding: 0;
+  appearance: none;
+  border: none;
+  background: none;
+  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-subtle);
+  padding: var(--gids-padding-vertical-edge-to-element-050) var(--gids-padding-horizontal-edge-to-element-100);
+  border-radius: var(--gids-border-radius-sm);
+  cursor: pointer;
+  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+.gids-expansion-body-list-item__supporting-text:hover {
+  background-color: var(--gids-color-background-brand-bold-hovered);
+  color: var(--gids-color-text-inverse);
+}
+.gids-expansion-body-list-item__supporting-text:active {
+  background-color: var(--gids-color-background-brand-bold-pressed);
+  color: var(--gids-color-text-inverse);
+}
+
+.gids-expansion-body-list {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: var(--gids-gap-400);
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+.gids-expansion {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: var(--gids-padding-vertical-edge-to-element-300) 0;
+}
+.gids-expansion:not(.gids-expansion--expanded):not([expanded])::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-color: var(--gids-color-border-default);
+  transition: background 0.3s ease-in-out;
+  z-index: 1;
+}
+.gids-expansion:not(.gids-expansion--expanded):not([expanded])::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(to right, transparent 0%, transparent 25%, var(--gids-color-background-selected-pressed) 45%, var(--gids-color-background-selected-pressed) 55%, transparent 75%, transparent 100%);
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  z-index: 2;
+}
+.gids-expansion:not(.gids-expansion--expanded):not([expanded]):has(.gids-expansion__container:hover):not([disabled=true]):not([disabled]):not(.gids-expansion__disabled)::after {
+  background: linear-gradient(to right, var(--gids-color-border-default) 0%, var(--gids-color-border-default) 15%, var(--gids-color-background-selected-pressed) 45%, var(--gids-color-background-selected-pressed) 70%, var(--gids-color-border-default) 90%, var(--gids-color-border-default) 100%);
+}
+.gids-expansion:not(.gids-expansion--expanded):not([expanded]):has(.gids-expansion__container:hover):not([disabled=true]):not([disabled]):not(.gids-expansion__disabled)::before {
+  opacity: 1;
+}
+.gids-expansion:not(.gids-expansion--expanded):not([expanded]):has(.gids-expansion__container:hover):not([disabled=true]):not([disabled]):not(.gids-expansion__disabled) .gids-expansion__level-h1 {
+  color: var(--gids-color-background-brand-bold-default);
+}
+.gids-expansion:not(.gids-expansion--expanded):not([expanded]):has(.gids-expansion__container:hover):not([disabled=true]):not([disabled]):not(.gids-expansion__disabled) .gids-expansion__level-h2 {
+  color: var(--gids-color-background-brand-bold-default);
+}
+.gids-expansion:not(.gids-expansion--expanded):not([expanded]):has(.gids-expansion__container:hover):not([disabled=true]):not([disabled]):not(.gids-expansion__disabled) .gids-expansion__level-h3 {
+  color: var(--gids-color-background-brand-bold-default);
+}
+.gids-expansion:not(.gids-expansion--expanded):not([expanded]):has(.gids-expansion__container:hover):not([disabled=true]):not([disabled]):not(.gids-expansion__disabled) .gids-icon {
+  --gidsIcon-color: var(--gids-color-background-brand-bold-default);
+}
+.gids-expansion__container {
+  margin: 0;
+  padding: 0;
+  appearance: none;
+  border: none;
+  background: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--gids-gap-050);
+  white-space: nowrap;
+  color: var(--gids-color-text-default);
+}
+.gids-expansion__container gids-icon,
+.gids-expansion__container .gids-icon,
+.gids-expansion__container GidsIcon,
+.gids-expansion__container svg {
+  display: inline-block;
+  transform: rotate3d(0, 0, 1, 0deg);
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: center center;
+  backface-visibility: hidden;
+}
+.gids-expansion__level-h1 {
+  font-family: var(--gids-typography-heading-medium__font-family);
+  font-size: var(--gids-typography-heading-medium__font-size);
+  font-weight: var(--gids-typography-heading-medium__font-weight);
+  letter-spacing: var(--gids-typography-heading-medium__letter-spacing);
+  line-height: var(--gids-typography-heading-medium__line-height);
+  text-transform: var(--gids-typography-heading-medium__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-heading-medium__font-variant-caps, inherit);
+}
+.gids-expansion__level-h2 {
+  font-family: var(--gids-typography-heading-small__font-family);
+  font-size: var(--gids-typography-heading-small__font-size);
+  font-weight: var(--gids-typography-heading-small__font-weight);
+  letter-spacing: var(--gids-typography-heading-small__letter-spacing);
+  line-height: var(--gids-typography-heading-small__line-height);
+  text-transform: var(--gids-typography-heading-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-heading-small__font-variant-caps, inherit);
+}
+.gids-expansion__level-h3 {
+  font-family: var(--gids-typography-heading-x-small__font-family);
+  font-size: var(--gids-typography-heading-x-small__font-size);
+  font-weight: var(--gids-typography-heading-x-small__font-weight);
+  letter-spacing: var(--gids-typography-heading-x-small__letter-spacing);
+  line-height: var(--gids-typography-heading-x-small__line-height);
+  text-transform: var(--gids-typography-heading-x-small__text-transform, inherit);
+  font-variant-caps: var(--gids-typography-heading-x-small__font-variant-caps, inherit);
+}
+.gids-expansion__body {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+  transform: scaleY(0);
+  transform-origin: top center;
+  opacity: 0;
+  visibility: hidden;
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, visibility 0.4s;
+  overflow: hidden;
+}
+.gids-expansion--expanded {
+  position: relative;
+  display: block;
+}
+.gids-expansion--expanded .gids-expansion__container gids-icon,
+.gids-expansion--expanded .gids-expansion__container .gids-icon,
+.gids-expansion--expanded .gids-expansion__container GidsIcon,
+.gids-expansion--expanded .gids-expansion__container svg {
+  transform: rotate3d(0, 0, 1, -180deg);
+}
+.gids-expansion--expanded .gids-expansion__body {
+  position: relative;
+  top: auto;
+  transform: scaleY(1);
+  opacity: 1;
+  visibility: visible;
+}
+.gids-expansion__content {
+  min-height: 0;
+  padding: var(--gids-padding-vertical-edge-to-element-500) 0 var(--gids-padding-horizontal-edge-to-element-500);
+}
+.gids-expansion__disabled {
+  color: var(--gids-color-text-disabled);
+  cursor: not-allowed;
+}
+.gids-expansion__disabled .gids-icon {
+  --gidsIcon-color: var(--gids-color-icon-disabled);
+}
+
+.gids-expansion-group {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.gids-basic-table-head {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--gids-elevation-surface-default);
+}
+.gids-basic-table-head--surface-hovered {
+  background-color: var(--gids-elevation-surface-hovered);
+}
+.gids-basic-table-head--surface-pressed {
+  background-color: var(--gids-elevation-surface-pressed);
+}
+.gids-basic-table-head__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-basic-table-head--border-side-top {
+  border-top: var(--gids-border-width-thin) solid var(--gids-color-border-default);
+}
+.gids-basic-table-head--border-side-bottom {
+  border-bottom: var(--gids-border-width-thin) solid var(--gids-color-border-default);
+}
+.gids-basic-table-head--border-side-left {
+  border-left: var(--gids-border-width-thin) solid var(--gids-color-border-default);
+}
+.gids-basic-table-head--border-side-right {
+  border-right: var(--gids-border-width-thin) solid var(--gids-color-border-default);
+}
+.gids-basic-table-head--border-radius-side-top-left {
+  border-top-left-radius: var(--gids-border-radius-lg);
+}
+.gids-basic-table-head--border-radius-side-bottom-left {
+  border-bottom-left-radius: var(--gids-border-radius-lg);
+}
+.gids-basic-table-head--border-radius-side-top-right {
+  border-top-right-radius: var(--gids-border-radius-lg);
+}
+.gids-basic-table-head--border-radius-side-bottom-right {
+  border-bottom-right-radius: var(--gids-border-radius-lg);
+}
+
+.gids-basic-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 {
+  width: auto;
+}
+.gids-basic-table-cell--text-alignment-left {
+  text-align: left;
+}
+.gids-basic-table-cell--text-alignment-right {
+  text-align: right;
+}
+.gids-basic-table-cell--text-alignment-center {
+  text-align: center;
+}
+.gids-basic-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 {
+  border-bottom: var(--gids-border-width-thin) solid var(--gids-color-border-default);
+}
+.gids-basic-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 {
+  border-right: var(--gids-border-width-thin) solid var(--gids-color-border-default);
+}
+.gids-basic-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 {
+  border-bottom-left-radius: var(--gids-border-radius-md);
+}
+.gids-basic-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 {
+  border-bottom-right-radius: var(--gids-border-radius-md);
+}
+.gids-basic-table-cell--appearance-default {
+  background-color: var(--gids-color-background-accent-5-subtler-default);
+  color: var(--gids-color-text-default);
+}
+.gids-basic-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 {
+  background-color: var(--gids-color-background-neutral-default);
+  color: var(--gids-color-text-default);
+}
+.gids-basic-table-cell--appearance-info {
+  background-color: var(--gids-color-background-accent-4-subtler-default);
+  color: var(--gids-color-text-information);
+}
+.gids-basic-table-cell--appearance-warning {
+  background-color: var(--gids-color-background-accent-2-subtler-default);
+  color: var(--gids-color-text-warning);
+}
+.gids-basic-table-cell--appearance-positive {
+  background-color: var(--gids-color-background-accent-3-subtler-default);
+  color: var(--gids-color-text-positive);
+}
+.gids-basic-table-cell--appearance-danger {
+  background-color: var(--gids-color-background-accent-1-subtler-default);
+  color: var(--gids-color-text-danger);
+}
+
+.gids-basic-table-row {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+.gids-basic-table-row--width-intrinsic {
+  width: auto;
+}
+
+.gids-basic-table-header {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+.gids-basic-table-header--width-intrinsic {
+  width: auto;
+}
+
+.gids-md-table {
+  width: 100%;
+}
+.gids-md-table__main-table {
+  border-collapse: separate;
+  border-spacing: 0;
+  overflow: hidden;
+  table-layout: fixed;
+}
+.gids-md-table__width-full {
+  width: 100%;
+}
+.gids-md-table__width-intrinsic {
+  width: auto;
+}
+.gids-md-table__outer-borders {
+  border: var(--gids-border-width-thin) solid var(--gids-color-border-default);
+}
+.gids-md-table__radius-top-left {
+  border-top-left-radius: var(--gids-border-radius-md);
+}
+.gids-md-table__radius-bottom-left {
+  border-bottom-left-radius: var(--gids-border-radius-md);
+}
+.gids-md-table__radius-top-right {
+  border-top-right-radius: var(--gids-border-radius-md);
+}
+.gids-md-table__radius-bottom-right {
+  border-bottom-right-radius: var(--gids-border-radius-md);
+}
+
+.gids-bs-table {
+  width: 100%;
+  border-collapse: separate;
+  overflow: hidden;
+}
+.gids-bs-table__scroll-container {
+  width: 100%;
+  max-height: var(--gidsBsTable-body-max-height, 300px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+}
+.gids-bs-table--main-table {
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+  table-layout: fixed;
+}
+.gids-bs-table--main-table thead,
+.gids-bs-table--main-table th,
+.gids-bs-table--main-table .gids-bs-table__thead {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+.gids-bs-table--main-table-width-intrinsic {
+  width: auto;
+}
+.gids-bs-table--width-intrinsic {
+  width: auto;
+}
+.gids-bs-table--outer-borders {
+  border: var(--gids-border-width-thin) solid var(--gids-color-border-default);
+}
+.gids-bs-table--radius-top-left {
+  border-top-left-radius: var(--gids-border-radius-md);
+}
+.gids-bs-table--radius-bottom-left {
+  border-bottom-left-radius: var(--gids-border-radius-md);
+}
+.gids-bs-table--radius-top-right {
+  border-top-right-radius: var(--gids-border-radius-md);
+}
+.gids-bs-table--radius-bottom-right {
+  border-bottom-right-radius: var(--gids-border-radius-md);
+}
+
+.gids-basic-table-body {
+  width: 100%;
+  overflow: hidden;
+}
+.gids-basic-table-body--width-intrinsic {
+  width: auto;
+}
+
 .gids-box-demo__container-with-text {
   border: 1px dashed var(--gids-color-border-brand-default);
 }