@ganpatiinfo/gids-core-web 17.0.0 → 19.0.0

package/dist/css/index.css

@@ -10,6 +10,148 @@ gids-global-styles-start {
   box-sizing: border-box;
 }
 
+.gids-carousel-control {
+  display: flex;
+  align-items: center;
+  gap: var(--gids-gap-100);
+  --gidsCarouselControl-accent: var(
+  	--gids-color-background-neutral-bold-default
+  );
+  --gidsIcon-color: var(--gids-color-icon-inverse);
+}
+.gids-carousel-control__control {
+  margin: 0;
+  padding: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--gidsCarouselControlBtn-height, 100%);
+  flex-shrink: 0;
+  height: var(--gidsCarouselControlBtn-height, 100%);
+  border-radius: var(--gids-border-radius-full);
+  background-color: var(--gidsCarouselControl-accent);
+  cursor: pointer;
+  transition: transform 180ms ease;
+}
+.gids-carousel-control__control:hover:not(:disabled) {
+  transform: scale(1.06);
+  background-color: var(--gids-color-background-neutral-bold-hovered);
+}
+.gids-carousel-control__control:active:not(:disabled) {
+  transform: scale(0.96);
+  background-color: var(--gids-color-background-neutral-bold-pressed);
+}
+.gids-carousel-control__control:focus-visible:not(:disabled) {
+  outline: var(--gids-border-width-focused) solid var(--gidsCarouselControl-accent);
+  outline-offset: 3px;
+}
+.gids-carousel-control__disabled {
+  --gidsCarouselControl-accent: var(--gids-color-background-disabled);
+  --gidsIcon-color: var(--gids-color-icon-disabled);
+  cursor: not-allowed;
+}
+.gids-carousel-control--xs {
+  --gidsCarouselControlBtn-height: var(--gids-size-200);
+}
+.gids-carousel-control--sm {
+  --gidsCarouselControlBtn-height: var(--gids-size-280);
+}
+.gids-carousel-control--md {
+  --gidsCarouselControlBtn-height: var(--gids-size-360);
+}
+.gids-carousel-control--lg {
+  --gidsCarouselControlBtn-height: var(--gids-size-480);
+}
+.gids-carousel-control--xl {
+  --gidsCarouselControlBtn-height: var(--gids-size-520);
+}
+
+.gids-carousel-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gids-gap-100);
+}
+
+.gids-carousel-pagination-item {
+  padding: 0;
+  border: 0;
+  margin: 0;
+  background-color: transparent;
+  --gidsCarouselPaginationItem-accent: var(
+  	--gids-color-background-accent-4-bolder-default
+  );
+  --gidsCarouselPaginationItem-width: var(--gids-size-040);
+  --gidsCarouselPaginationItem-height: var(--gids-size-040);
+  width: var(--gidsCarouselPaginationItem-width);
+  height: var(--gidsCarouselPaginationItem-height);
+  background-color: var(--gidsCarouselPaginationItem-accent);
+  border-radius: 50%;
+  opacity: 0.25;
+  cursor: pointer;
+  transition: width 300ms ease, background-color 300ms ease, opacity 300ms ease, border-radius 300ms ease;
+}
+.gids-carousel-pagination-item:hover {
+  opacity: 0.55;
+}
+.gids-carousel-pagination-item:focus-visible {
+  outline: var(--gids-border-width-focused) solid var(--gids-carousel-accent);
+  outline-offset: 3px;
+}
+.gids-carousel-pagination-item--active {
+  --gidsCarouselPaginationItem-width: var(--gids-size-160);
+  --gidsCarouselPaginationItem-accent: var(
+  	--gids-color-background-neutral-bold-default
+  );
+  border-radius: var(--gids-border-radius-full);
+  opacity: 1;
+}
+.gids-carousel-pagination-item--sm {
+  --gidsCarouselPaginationItem-width: var(--gids-size-060);
+  --gidsCarouselPaginationItem-height: var(--gids-size-060);
+}
+.gids-carousel-pagination-item--md {
+  --gidsCarouselPaginationItem-width: var(--gids-size-080);
+  --gidsCarouselPaginationItem-height: var(--gids-size-080);
+}
+.gids-carousel-pagination-item--lg {
+  --gidsCarouselPaginationItem-width: var(--gids-size-100);
+  --gidsCarouselPaginationItem-height: var(--gids-size-100);
+}
+.gids-carousel-pagination-item--xl {
+  --gidsCarouselPaginationItem-width: var(--gids-size-120);
+  --gidsCarouselPaginationItem-height: var(--gids-size-120);
+}
+.gids-carousel-pagination-item--active-sm {
+  --gidsCarouselPaginationItem-width: var(--gids-size-200);
+  --gidsCarouselPaginationItem-height: var(--gids-size-060);
+}
+.gids-carousel-pagination-item--active-md {
+  --gidsCarouselPaginationItem-width: var(--gids-size-240);
+  --gidsCarouselPaginationItem-height: var(--gids-size-080);
+}
+.gids-carousel-pagination-item--active-lg {
+  --gidsCarouselPaginationItem-width: var(--gids-size-280);
+  --gidsCarouselPaginationItem-height: var(--gids-size-100);
+}
+.gids-carousel-pagination-item--active-xl {
+  --gidsCarouselPaginationItem-width: var(--gids-size-320);
+  --gidsCarouselPaginationItem-height: var(--gids-size-120);
+}
+
+/*
+* ---------------------------------------------------------
+* REDUCED MOTION
+* ---------------------------------------------------------
+*/
+@media (prefers-reduced-motion: reduce) {
+  .gids-carousel-pagination-item {
+    transition: none;
+  }
+}
 .gids-checkbox-control {
   --gidsCheckbox-border: var(--gids-color-border-input);
   --gidsCheckbox-background: var(--gids-color-background-input-default);
@@ -2621,6 +2763,81 @@ gids-global-styles-start {
   color: var(--gids-color-text-disabled);
 }
 
+.gids-ecosystem-card {
+  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);
+  --gidsEcosystemCardBg-color: var(
+  	--gids-color-background-information-bold-default
+  );
+  --gidsEcosystemCardLabel-color: var(--gids-color-text-default);
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--gids-border-radius-lg);
+  border: var(--gids-border-width-thin) solid var(--gidsEcosystemCardBg-color);
+  padding: var(--gids-padding-vertical-edge-to-element-200) var(--gids-padding-horizontal-edge-to-element-200);
+  background-color: color-mix(in srgb, var(--gidsEcosystemCardBg-color) 25%, transparent);
+  color: var(--gidsEcosystemCardLabel-color);
+}
+
+.gids-ecosystem-icon {
+  --gidsEcosystemIcon-color: var(--gids-color-icon-inverse);
+  --gidsEcosystemIconEcosystem-color: var(
+  	--gids-color-background-accent-4-bolder-default
+  );
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--gids-padding-vertical-edge-to-element-100) var(--gids-padding-horizontal-edge-to-element-100);
+  border-radius: var(--gids-border-radius-md);
+  background-color: var(--gidsEcosystemIconEcosystem-color);
+  --gidsIcon-color: var(--gidsEcosystemIcon-color);
+}
+.gids-ecosystem-icon:not([data-appearance=subtle]) {
+  box-shadow: var(--gids-elevation-shadow-raised);
+}
+.gids-ecosystem-icon--appearance-brand {
+  --gidsEcosystemIcon-color: var(--gids-color-icon-inverse);
+  --gidsEcosystemIconEcosystem-color: var(
+  	--gids-color-background-brand-bold-default
+  );
+}
+.gids-ecosystem-icon--appearance-subtle {
+  --gidsEcosystemIcon-color: var(--gids-color-icon-default);
+  --gidsEcosystemIconEcosystem-color: transparent;
+}
+.gids-ecosystem-icon--appearance-positive {
+  --gidsEcosystemIcon-color: var(--gids-color-icon-inverse);
+  --gidsEcosystemIconEcosystem-color: var(
+  	--gids-color-background-accent-1-bolder-default
+  );
+}
+.gids-ecosystem-icon--appearance-information {
+  --gidsEcosystemIcon-color: var(--gids-color-icon-inverse);
+  --gidsEcosystemIconEcosystem-color: var(
+  	--gids-color-background-accent-3-bolder-default
+  );
+}
+.gids-ecosystem-icon--appearance-warning {
+  --gidsEcosystemIcon-color: var(--gids-color-icon-inverse);
+  --gidsEcosystemIconEcosystem-color: var(
+  	--gids-color-background-accent-2-bolder-default
+  );
+}
+.gids-ecosystem-icon--appearance-danger {
+  --gidsEcosystemIcon-color: var(--gids-color-icon-inverse);
+  --gidsEcosystemIconEcosystem-color: var(
+  	--gids-color-background-accent-6-bolder-default
+  );
+}
+
 .gids-edit-button {
   margin: 0;
   padding: 0;
@@ -5629,6 +5846,152 @@ button.gids-input-tag--bold:not(:disabled):active {
   white-space: nowrap;
 }
 
+.gids-bento-card {
+  --gidsBentoCard-bg-gradient: linear-gradient(
+  	210deg,
+  	var(--gids-color-background-accent-4-bolder-default) 0%,
+  	var(--gids-color-background-accent-4-subtle-default) 100%
+  );
+  --gidsBentoCardText-color-primary: var(--gids-color-text-inverse);
+  --gidsBentoCardText-color-secondary: var(--gids-color-text-inverse);
+  --gidsBentoCardText-color-tertiary: var(--gids-color-text-inverse);
+  display: flex;
+  flex-direction: column;
+  max-width: var(--gids-width-2-xs);
+  padding: var(--gids-padding-vertical-edge-to-element-200) var(--gids-padding-horizontal-edge-to-element-150);
+  background: var(--gidsBentoCard-bg-gradient);
+  border-radius: var(--gids-border-radius-lg);
+}
+.gids-bento-card:not([data-appearance=subtle]) {
+  box-shadow: var(--gids-elevation-shadow-overlay);
+}
+.gids-bento-card--accessory-slot-gapping {
+  gap: var(--gids-gap-600);
+}
+.gids-bento-card__default-slot-gapping {
+  gap: var(--gids-gap-500);
+}
+.gids-bento-card__content {
+  display: flex;
+  flex-direction: column;
+}
+.gids-bento-card__header {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: var(--gids-gap-100);
+}
+.gids-bento-card__header-row {
+  flex-direction: row;
+}
+.gids-bento-card__icon {
+  --gidsIcon-color: var(--gidsBentoCardText-color-primary);
+}
+.gids-bento-card__texts-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gids-gap-100);
+}
+.gids-bento-card__heading {
+  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);
+  color: var(--gidsBentoCardText-color-primary);
+}
+.gids-bento-card__title {
+  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(--gidsBentoCardText-color-primary);
+}
+.gids-bento-card__supporting {
+  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(--gidsBentoCardText-color-secondary);
+}
+.gids-bento-card__description {
+  margin: 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);
+  color: var(--gidsBentoCardText-color-tertiary);
+}
+.gids-bento-card__image-wrapper {
+  display: block;
+  width: 100%;
+  height: 160px;
+}
+.gids-bento-card__image-wrapper img {
+  display: block;
+  object-fit: contain;
+  width: 100%;
+  height: 160px;
+}
+.gids-bento-card__footer {
+  display: flex;
+  flex-direction: column;
+}
+.gids-bento-card--appearance-subtle {
+  --gidsBentoCard-bg-gradient: transparent;
+  --gidsBentoCardText-color-primary: var(--gids-color-text-default);
+  --gidsBentoCardText-color-secondary: var(--gids-color-text-default);
+  --gidsBentoCardText-color-tertiary: var(--gids-color-text-subtlest);
+}
+.gids-bento-card--appearance-positive {
+  --gidsBentoCard-bg-gradient: linear-gradient(
+  	210deg,
+  	var(--gids-color-background-accent-1-bolder-default) 0%,
+  	var(--gids-color-background-accent-1-subtle-default) 100%
+  );
+}
+.gids-bento-card--appearance-warning {
+  --gidsBentoCard-bg-gradient: linear-gradient(
+  	210deg,
+  	var(--gids-color-background-accent-2-bolder-default) 0%,
+  	var(--gids-color-background-accent-2-subtle-default) 100%
+  );
+}
+.gids-bento-card--appearance-information {
+  --gidsBentoCard-bg-gradient: linear-gradient(
+  	210deg,
+  	var(--gids-color-background-accent-3-bolder-default) 0%,
+  	var(--gids-color-background-accent-3-subtle-default) 100%
+  );
+}
+.gids-bento-card--appearance-danger {
+  --gidsBentoCard-bg-gradient: linear-gradient(
+  	210deg,
+  	var(--gids-color-background-accent-6-bolder-default) 0%,
+  	var(--gids-color-background-accent-6-subtle-default) 100%
+  );
+  --gidsBentoCardText-color-tertiary: var(--gids-color-text-subtle);
+}
+.gids-bento-card--appearance-brand {
+  --gidsBentoCard-bg-gradient: linear-gradient(
+  	210deg,
+  	var(--gids-color-background-brand-boldest-default) 0%,
+  	var(--gids-color-background-brand-bold-default) 100%
+  );
+}
+
 .gids-calendar {
   display: flex;
   flex-direction: column;
@@ -5696,6 +6059,395 @@ button.gids-input-tag--bold:not(:disabled):active {
   color: var(--gids-color-text-disabled);
 }
 
+.gids-carousel {
+  display: block;
+  width: 100%;
+  --gidsCarousel-accent: var(
+  	--gids-color-background-brand-bold-default,
+  	currentColor
+  );
+  --gidsCarousel-text: var(--gids-color-text-information, currentColor);
+  --gidsCarousel-surface: transparent;
+  /*
+   * ---------------------------------------------------------
+   * 3D CAROUSEL DIMENSIONS
+   * ---------------------------------------------------------
+   */
+  --gidsCarouselCard-width: 320px;
+  --gidsCarouselCard-height: 430px;
+  /*
+   * Space required for the information rendered underneath
+   * the card.
+   */
+  --gidsCarouselInfo-space: 52px;
+  /*
+   * Extra vertical breathing room for the 3D projection.
+   */
+  --gidsCarouselVertical-space: 80px;
+  /*
+   * Distance between the CENTER of adjacent cards.
+   */
+  --gidsCarousel-step: 360px;
+  /*
+   * ---------------------------------------------------------
+   * CONTAINER
+   * ---------------------------------------------------------
+   */
+}
+.gids-carousel__container {
+  position: relative;
+  width: 100%;
+  /*
+   * Do not clip the 3D card or the information underneath.
+   */
+  overflow: visible;
+}
+.gids-carousel {
+  /*
+   * ---------------------------------------------------------
+   * VIEWPORT
+   * ---------------------------------------------------------
+   */
+}
+.gids-carousel__viewport {
+  position: relative;
+  width: 100%;
+  /*
+   * Height is derived from the actual carousel dimensions
+   * instead of being hardcoded.
+   *
+   * card
+   * + information underneath
+   * + vertical breathing room
+   */
+  min-height: calc(var(--gidsCarouselCard-height) + var(--gidsCarouselInfo-space) + var(--gidsCarouselVertical-space));
+  padding-block: 40px;
+  box-sizing: border-box;
+  overflow: visible;
+  cursor: grab;
+  touch-action: pan-y;
+  user-select: none;
+  -webkit-user-select: none;
+  outline: none;
+}
+.gids-carousel__viewport:focus-visible {
+  outline: 2px solid var(--gidsCarousel-accent);
+  outline-offset: -2px;
+}
+.gids-carousel__viewport--dragging {
+  cursor: grabbing;
+}
+.gids-carousel__viewport--dragging .gids-carousel__slide,
+.gids-carousel__viewport--dragging .gids-carousel__card {
+  transition: none;
+}
+.gids-carousel {
+  /*
+   * ---------------------------------------------------------
+   * 3D STAGE
+   * ---------------------------------------------------------
+   */
+}
+.gids-carousel__stage {
+  position: relative;
+  width: 100%;
+  /*
+   * Reserve room for both the card and its information.
+   */
+  min-height: calc(var(--gidsCarouselCard-height) + var(--gidsCarouselInfo-space) + var(--gidsCarouselVertical-space));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  perspective: 1200px;
+  perspective-origin: 50% 50%;
+  transform-style: preserve-3d;
+}
+.gids-carousel {
+  /*
+   * ---------------------------------------------------------
+   * SLIDE
+   * ---------------------------------------------------------
+   */
+}
+.gids-carousel__slide {
+  position: absolute;
+  /*
+   * The stage is now taller because it reserves space for
+   * the text. Move the slide's reference point upward by
+   * half of that additional information space so the CARD
+   * itself stays in exactly the same vertical position.
+   */
+  top: calc(50% - var(--gidsCarouselInfo-space) / 2);
+  left: 50%;
+  width: var(--gidsCarouselCard-width);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  transform: translate3d(calc(-50% + var(--gidsCarousel-x)), -50%, var(--gidsCarousel-z)) rotateY(var(--gidsCarousel-rotate-y)) scale(var(--gidsCarousel-scale));
+  transform-origin: center center;
+  transform-style: preserve-3d;
+  transition: transform 750ms cubic-bezier(0.16, 1, 0.3, 1), opacity 500ms ease;
+  will-change: transform, opacity;
+  backface-visibility: hidden;
+}
+.gids-carousel {
+  /*
+   * ---------------------------------------------------------
+   * CARD
+   * ---------------------------------------------------------
+   */
+}
+.gids-carousel__card {
+  position: relative;
+  width: 100%;
+  height: var(--gidsCarouselCard-height);
+  overflow: hidden;
+  border-radius: var(--gidsBorderRadius-300, 16px);
+  background: var(--gidsCarousel-surface);
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  transition: box-shadow 600ms ease, filter 600ms ease;
+}
+.gids-carousel__card--dragging {
+  transition: none;
+}
+.gids-carousel {
+  /*
+   * ---------------------------------------------------------
+   * ACTIVE CARD
+   * ---------------------------------------------------------
+   */
+}
+.gids-carousel__slide--active .gids-carousel__card {
+  box-shadow: none;
+  filter: none;
+}
+.gids-carousel__slide--active .gids-carousel__slide-info {
+  opacity: 1;
+  transform: translateY(0);
+}
+.gids-carousel {
+  /*
+   * ---------------------------------------------------------
+   * IMAGE / LINK
+   * ---------------------------------------------------------
+   */
+}
+.gids-carousel__slide-link {
+  display: block;
+  width: 100%;
+  height: 100%;
+  color: inherit;
+  text-decoration: none;
+  outline: none;
+}
+.gids-carousel__slide-link:focus-visible {
+  outline: var(--gids-border-width-focused) solid var(--gidsCarousel-accent);
+  outline-offset: -2px;
+}
+.gids-carousel__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-position: center;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+.gids-carousel__image-placeholder {
+  width: 100%;
+  height: 100%;
+  background: var(--gidsCarousel-surface);
+}
+.gids-carousel {
+  /*
+   * ---------------------------------------------------------
+   * SLIDE INFORMATION
+   * ---------------------------------------------------------
+   */
+}
+.gids-carousel__slide-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--gids-gap-075);
+  /*
+   * Explicitly reserve the space that this content needs.
+   */
+  min-height: var(--gidsCarouselInfo-space);
+  padding-top: var(--gids-padding-vertical-edge-to-element-200);
+  box-sizing: border-box;
+  color: var(--gidsCarousel-text);
+  opacity: 0.72;
+  transform: translateY(4px);
+  transition: opacity 450ms ease, transform 450ms ease;
+}
+.gids-carousel__slide-number {
+  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(--gidsCarousel-accent);
+}
+.gids-carousel__slide-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);
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.gids-carousel {
+  /*
+   * ---------------------------------------------------------
+   * CONTROLS
+   * ---------------------------------------------------------
+   */
+}
+.gids-carousel__controls {
+  position: absolute;
+  right: var(--gids-padding-horizontal-edge-to-element-300);
+  bottom: var(--gids-padding-vertical-edge-to-element-300);
+  z-index: 200;
+}
+.gids-carousel {
+  /*
+   * ---------------------------------------------------------
+   * PAGINATION
+   * ---------------------------------------------------------
+   */
+}
+.gids-carousel__pagination {
+  margin-top: var(--gids-padding-vertical-edge-to-element-250);
+}
+.gids-carousel {
+  /*
+   * ---------------------------------------------------------
+   * TABLET
+   * ---------------------------------------------------------
+   */
+}
+@media (max-width: 1024px) {
+  .gids-carousel {
+    --gidsCarouselCard-width: 250px;
+    --gidsCarouselCard-height: 350px;
+    --gidsCarouselInfo-space: 52px;
+    --gidsCarouselVertical-space: 72px;
+    --gidsCarousel-step: 285px;
+  }
+  .gids-carousel__stage {
+    perspective: 1050px;
+  }
+}
+.gids-carousel {
+  /*
+   * ---------------------------------------------------------
+   * MOBILE
+   * ---------------------------------------------------------
+   */
+}
+@media (max-width: 767px) {
+  .gids-carousel {
+    --gidsCarouselCard-width: 190px;
+    --gidsCarouselCard-height: 275px;
+    --gidsCarouselInfo-space: 48px;
+    --gidsCarouselVertical-space: 64px;
+    --gidsCarousel-step: 215px;
+  }
+  .gids-carousel__stage {
+    perspective: 900px;
+  }
+  .gids-carousel__slide-info {
+    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);
+    gap: var(--gids-gap-050);
+  }
+  .gids-carousel__slide-number {
+    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-carousel__slide-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);
+  }
+  .gids-carousel .gids-carousel-control {
+    right: var(--gids-padding-horizontal-edge-to-element-200);
+    bottom: var(--gids-padding-horizontal-edge-to-element-200);
+  }
+  .gids-carousel .gids-carousel-control__control {
+    width: var(--gids-size-360);
+    height: var(--gids-size-360);
+  }
+}
+.gids-carousel {
+  /*
+   * ---------------------------------------------------------
+   * SMALL MOBILE
+   * ---------------------------------------------------------
+   */
+}
+@media (max-width: 480px) {
+  .gids-carousel {
+    --gidsCarouselCard-width: 155px;
+    --gidsCarouselCard-height: 225px;
+    --gidsCarouselInfo-space: 44px;
+    --gidsCarouselVertical-space: 56px;
+    --gidsCarousel-step: 175px;
+  }
+  .gids-carousel__stage {
+    perspective: 800px;
+  }
+  .gids-carousel__card {
+    border-radius: var(--gids-border-radius-lg);
+  }
+  .gids-carousel__slide-info {
+    padding-top: var(--gids-padding-horizontal-edge-to-element-100);
+  }
+  .gids-carousel__slide-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);
+  }
+}
+.gids-carousel {
+  /*
+   * ---------------------------------------------------------
+   * REDUCED MOTION
+   * ---------------------------------------------------------
+   */
+}
+@media (prefers-reduced-motion: reduce) {
+  .gids-carousel__slide, .gids-carousel__card, .gids-carousel__slide-info, .gids-carousel__control {
+    transition: none;
+  }
+}
+
 .gids-chart__no-data {
   display: flex;
   align-items: center;
@@ -6222,6 +6974,43 @@ gids-field {
   display: flex;
 }
 
+gids-flyout-panel {
+  --gidsFlyoutPanel-background: var(--gids-elevation-surface-overlay-default);
+  --gidsFlyoutPanel-text-color: var(--gids-color-text-default);
+  --gidsFlyoutPanel-padding: var(--gids-padding-vertical-edge-to-element-200)
+  	var(--gids-padding-horizontal-edge-to-element-300);
+  --gidsFlyoutPanel-border-radius: var(--gids-border-radius-lg);
+  --gidsFlyoutPanel-shadow: var(--gids-elevation-shadow-overlay);
+  --gidsFloatingElement-background: var(--gidsFlyoutPanel-background);
+}
+
+[part=flyout-panel] {
+  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(--gidsFlyoutPanel-background);
+  color: var(--gidsFlyoutPanel-text-color);
+  border-radius: var(--gidsFlyoutPanel-border-radius);
+  box-shadow: var(--gidsFlyoutPanel-shadow);
+  z-index: 1000;
+  opacity: 0;
+  pointer-events: none;
+  outline: none;
+}
+[part=flyout-panel]:focus {
+  outline: none;
+}
+[part=flyout-panel].gids-flyout-panel--visible {
+  pointer-events: initial;
+  opacity: 1;
+}
+
 .gids-header-navigation {
   display: flex;
   gap: var(--gids-gap-200);
@@ -6470,7 +7259,6 @@ gids-field {
   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);
@@ -7464,9 +8252,6 @@ gids-popover {
 .gids-profile--expanded .gids-profile__dropdown-menu-container {
   display: flex;
 }
-.gids-profile--expanded .gids-profile__chevron {
-  transform: rotate(180deg);
-}
 
 .gids-profile-menu .gids-divider {
   width: 100%;
@@ -8251,6 +9036,61 @@ gids-tooltip {
   color: var(--gids-color-text-subtlest);
 }
 
+.gids-icon-marker {
+  --gidsIconMarker-color: var(--gids-color-icon-accent-4);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--gids-padding-vertical-edge-to-element-150);
+  box-sizing: border-box;
+  position: relative;
+  z-index: 0;
+  --gidsIcon-color: var(--gidsIconMarker-color);
+  color: var(--gidsIconMarker-color);
+  /* Make sure the icon renders strictly on top of the background ring */
+}
+.gids-icon-marker > * {
+  position: relative;
+  z-index: 1;
+}
+.gids-icon-marker {
+  /* The isolated gradient ring */
+}
+.gids-icon-marker::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--gids-border-radius-full);
+  padding: 3.5px; /* This defines your border thickness */
+  /* The magic combo: draws the gradient only in the padding/border area */
+  background: linear-gradient(135deg, var(--gidsIconMarker-color) 30%, color-mix(in srgb, var(--gidsIconMarker-color) 20%, transparent) 100%);
+  /* 1. WebKit Vendor Prefix (Safari / Older Chrome) */
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  /* 2. Standard CSS Properties (Clears the linter warning) */
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+}
+.gids-icon-marker {
+  /* Theme states mapping */
+}
+.gids-icon-marker--appearance-brand {
+  --gidsIconMarker-color: var(--gids-color-icon-brand);
+}
+.gids-icon-marker--appearance-positive {
+  --gidsIconMarker-color: var(--gids-color-icon-accent-1);
+}
+.gids-icon-marker--appearance-information {
+  --gidsIconMarker-color: var(--gids-color-icon-accent-3);
+}
+.gids-icon-marker--appearance-warning {
+  --gidsIconMarker-color: var(--gids-color-icon-accent-2);
+}
+.gids-icon-marker--appearance-danger {
+  --gidsIconMarker-color: var(--gids-color-icon-accent-6);
+}
+
 .gids-box-demo__container-with-text {
   border: 1px dashed var(--gids-color-border-brand-default);
 }