@gooddata/sdk-ui-kit 10.24.0-alpha.8 → 10.24.0

package/styles/css/main.css

@@ -196,7 +196,9 @@
   --gd-icon-fill-color: var(--gd-palette-complementary-9);
 }
 
-.gd-ui-kit-button {
+.gd-ui-kit-button,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete {
   font-family: var(--gd-font-family);
   gap: var(--gd-spacing-5px);
   border-radius: var(--gd-button-borderRadius);
@@ -214,25 +216,97 @@
    * Variant
    */
 }
-.gd-ui-kit-button:disabled {
+.gd-ui-kit-button:disabled,
+.gd-ui-kit-chip__trigger:disabled,
+.gd-ui-kit-chip__delete:disabled {
   cursor: default;
 }
-.gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout):active .gd-ui-kit-button__text {
+.gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-button, .gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__label, .gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__tag,
+.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-button,
+.gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-button,
+.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__label,
+.gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__label,
+.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__tag,
+.gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__tag {
   padding-top: 1px;
 }
-.gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout):active .gd-ui-kit-button__icon {
+.gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-button, .gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-before, .gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-chevron, .gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-lock, .gd-ui-kit-button:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-delete,
+.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-button,
+.gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-button,
+.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-before,
+.gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-before,
+.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-chevron,
+.gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-chevron,
+.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-lock,
+.gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-lock,
+.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-delete,
+.gd-ui-kit-chip__delete:not(.gd-ui-kit-button:disabled, .gd-ui-kit-button--variant-tertiary, .gd-ui-kit-button--variant-popout,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete):active .gd-ui-kit-chip__icon-delete {
   padding-top: 1px;
 }
-.gd-ui-kit-button__text {
+.gd-ui-kit-button__text,
+.gd-ui-kit-chip__label,
+.gd-ui-kit-chip__tag {
   transition: var(--gd-transition-all);
 }
-.gd-ui-kit-button__icon {
+.gd-ui-kit-button__icon,
+.gd-ui-kit-chip__icon-before,
+.gd-ui-kit-chip__icon-chevron,
+.gd-ui-kit-chip__icon-lock,
+.gd-ui-kit-chip__icon-delete {
   display: flex;
   align-items: center;
   justify-content: center;
   transition: var(--gd-transition-all);
 }
-.gd-ui-kit-button--isLoading .gd-ui-kit-button__icon {
+.gd-ui-kit-button--isLoading .gd-ui-kit-button, .gd-ui-kit-button--isLoading .gd-ui-kit-chip__icon-before, .gd-ui-kit-button--isLoading .gd-ui-kit-chip__icon-chevron, .gd-ui-kit-button--isLoading .gd-ui-kit-chip__icon-lock, .gd-ui-kit-button--isLoading .gd-ui-kit-chip__icon-delete {
   animation: rotate 1s infinite steps(30);
 }
 .gd-ui-kit-button--size-small {
@@ -241,10 +315,10 @@
   font-size: 12px;
   line-height: 14px;
 }
-.gd-ui-kit-button--size-small.gd-ui-kit-button--iconPosition-left {
+.gd-ui-kit-button--size-small.gd-ui-kit-button-left {
   padding-left: var(--gd-spacing-7px);
 }
-.gd-ui-kit-button--size-small.gd-ui-kit-button--iconPosition-right {
+.gd-ui-kit-button--size-small.gd-ui-kit-button-right {
   padding-right: var(--gd-spacing-7px);
 }
 .gd-ui-kit-button--size-medium {
@@ -253,10 +327,10 @@
   font-size: 14px;
   line-height: 16px;
 }
-.gd-ui-kit-button--size-medium.gd-ui-kit-button--iconPosition-left {
+.gd-ui-kit-button--size-medium.gd-ui-kit-button-left {
   padding-left: var(--gd-spacing-10px);
 }
-.gd-ui-kit-button--size-medium.gd-ui-kit-button--iconPosition-right {
+.gd-ui-kit-button--size-medium.gd-ui-kit-button-right {
   padding-right: var(--gd-spacing-10px);
 }
 .gd-ui-kit-button--size-large {
@@ -265,10 +339,10 @@
   font-size: 16px;
   line-height: 18px;
 }
-.gd-ui-kit-button--size-large.gd-ui-kit-button--iconPosition-left {
+.gd-ui-kit-button--size-large.gd-ui-kit-button-left {
   padding-left: var(--gd-spacing-15px);
 }
-.gd-ui-kit-button--size-large.gd-ui-kit-button--iconPosition-right {
+.gd-ui-kit-button--size-large.gd-ui-kit-button-right {
   padding-right: var(--gd-spacing-15px);
 }
 .gd-ui-kit-button--variant-primary {
@@ -327,30 +401,64 @@
   background: var(--gd-palette-complementary-0);
   box-shadow: none;
 }
-.gd-ui-kit-button--variant-tertiary {
+.gd-ui-kit-button--variant-tertiary,
+.gd-ui-kit-chip__trigger,
+.gd-ui-kit-chip__delete {
   --gd-icon-fill-color: var(--gd-palette-complementary-5);
   color: var(--gd-palette-complementary-7);
   text-decoration: underline;
   background-color: transparent;
   border-color: transparent;
 }
-.gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled):focus {
+.gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled,
+.gd-ui-kit-chip__trigger:disabled,
+.gd-ui-kit-chip__delete:disabled):focus,
+.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button--variant-tertiary:disabled,
+.gd-ui-kit-chip__trigger:disabled,
+.gd-ui-kit-chip__delete:disabled):focus,
+.gd-ui-kit-chip__delete:not(.gd-ui-kit-button--variant-tertiary:disabled,
+.gd-ui-kit-chip__trigger:disabled,
+.gd-ui-kit-chip__delete:disabled):focus {
   --gd-icon-fill-color: var(--gd-palette-primary-base);
   color: var(--gd-palette-complementary-8);
 }
-.gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled):hover {
+.gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled,
+.gd-ui-kit-chip__trigger:disabled,
+.gd-ui-kit-chip__delete:disabled):hover,
+.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button--variant-tertiary:disabled,
+.gd-ui-kit-chip__trigger:disabled,
+.gd-ui-kit-chip__delete:disabled):hover,
+.gd-ui-kit-chip__delete:not(.gd-ui-kit-button--variant-tertiary:disabled,
+.gd-ui-kit-chip__trigger:disabled,
+.gd-ui-kit-chip__delete:disabled):hover {
   --gd-icon-fill-color: var(--gd-palette-primary-base);
   color: var(--gd-palette-complementary-8);
 }
-.gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled):active {
+.gd-ui-kit-button--variant-tertiary:not(.gd-ui-kit-button--variant-tertiary:disabled,
+.gd-ui-kit-chip__trigger:disabled,
+.gd-ui-kit-chip__delete:disabled):active,
+.gd-ui-kit-chip__trigger:not(.gd-ui-kit-button--variant-tertiary:disabled,
+.gd-ui-kit-chip__trigger:disabled,
+.gd-ui-kit-chip__delete:disabled):active,
+.gd-ui-kit-chip__delete:not(.gd-ui-kit-button--variant-tertiary:disabled,
+.gd-ui-kit-chip__trigger:disabled,
+.gd-ui-kit-chip__delete:disabled):active {
   --gd-icon-fill-color: var(--gd-palette-primary-base);
   color: var(--gd-palette-complementary-8);
 }
-.gd-ui-kit-button--variant-tertiary:disabled {
+.gd-ui-kit-button--variant-tertiary:disabled,
+.gd-ui-kit-chip__trigger:disabled,
+.gd-ui-kit-chip__delete:disabled {
   color: var(--gd-palette-complementary-5);
   text-decoration: none;
 }
-.gd-ui-kit-button--variant-tertiary.gd-ui-kit-button--size-small, .gd-ui-kit-button--variant-tertiary.gd-ui-kit-button--size-medium, .gd-ui-kit-button--variant-tertiary.gd-ui-kit-button--size-large {
+.gd-ui-kit-button--variant-tertiary.gd-ui-kit-button-small, .gd-ui-kit-button--variant-tertiary.gd-ui-kit-button-medium, .gd-ui-kit-button--variant-tertiary.gd-ui-kit-button-large,
+.gd-ui-kit-button-small.gd-ui-kit-chip__trigger,
+.gd-ui-kit-button-small.gd-ui-kit-chip__delete,
+.gd-ui-kit-button-medium.gd-ui-kit-chip__trigger,
+.gd-ui-kit-button-medium.gd-ui-kit-chip__delete,
+.gd-ui-kit-button-large.gd-ui-kit-chip__trigger,
+.gd-ui-kit-button-large.gd-ui-kit-chip__delete {
   padding: 0;
   height: auto;
 }
@@ -374,7 +482,7 @@
 .gd-ui-kit-button--variant-popout:disabled {
   color: var(--gd-palette-complementary-5);
 }
-.gd-ui-kit-button--variant-popout.gd-ui-kit-button--size-small, .gd-ui-kit-button--variant-popout.gd-ui-kit-button--size-medium, .gd-ui-kit-button--variant-popout.gd-ui-kit-button--size-large {
+.gd-ui-kit-button--variant-popout.gd-ui-kit-button-small, .gd-ui-kit-button--variant-popout.gd-ui-kit-button-medium, .gd-ui-kit-button--variant-popout.gd-ui-kit-button-large {
   padding: 0;
   height: auto;
 }
@@ -570,10 +678,128 @@
   width: 100%;
 }
 
-div {
-  outline: none;
+.gd-ui-kit-chip {
+  height: 27px;
+  max-width: 245px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  position: relative;
+  border-radius: 20px;
+  border: 1px solid var(--gd-palette-complementary-4);
+}
+.gd-ui-kit-chip:has(.gd-ui-kit-chip__trigger:hover) {
+  border-color: var(--gd-palette-complementary-4);
+}
+.gd-ui-kit-chip:has(.gd-ui-kit-chip__trigger:hover)::after {
+  content: "";
+  border-radius: inherit;
+  box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-complementary-5-t40) inset;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+}
+.gd-ui-kit-chip:has(.gd-ui-kit-chip__trigger:hover) .gd-ui-kit-chip__trigger {
+  background-color: var(--gd-palette-complementary-2);
+}
+.gd-ui-kit-chip:has(.gd-ui-kit-chip__trigger:hover) .gd-ui-kit-chip__trigger--isDeletable {
+  border-right: 1px solid var(--gd-palette-complementary-4);
+}
+.gd-ui-kit-chip:has(.gd-ui-kit-chip__trigger:hover):has(.gd-ui-kit-chip__trigger--isLocked:hover)::after {
+  content: none;
+}
+.gd-ui-kit-chip:has(.gd-ui-kit-chip__trigger:hover):has(.gd-ui-kit-chip__trigger--isLocked:hover) .gd-ui-kit-chip__trigger--isLocked {
+  border: none;
+  background-color: var(--gd-palette-complementary-0);
+}
+.gd-ui-kit-chip:has(.gd-ui-kit-chip__delete:hover) {
+  border-color: var(--gd-palette-error-base-t50);
+  background-color: var(--gd-palette-error-lightest);
+}
+.gd-ui-kit-chip:has(.gd-ui-kit-chip__delete:hover)::after {
+  content: "";
+  border-radius: inherit;
+  box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-error-base-t50) inset;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+}
+.gd-ui-kit-chip:has(.gd-ui-kit-chip__delete:hover) .gd-ui-kit-chip__trigger {
+  border-color: var(--gd-palette-error-base-t50);
+  border-right: 1px solid var(--gd-palette-error-base-t50);
+}
+.gd-ui-kit-chip:has(.gd-ui-kit-chip__delete:hover) .gd-ui-kit-chip__trigger--isActive {
+  background-color: var(--gd-palette-error-lightest);
+}
+.gd-ui-kit-chip:has(.gd-ui-kit-chip__delete:hover) .gd-ui-kit-chip__delete svg {
+  --gd-icon-fill-color: var(--gd-palette-error-base);
+}
+.gd-ui-kit-chip__trigger, .gd-ui-kit-chip__delete {
+  height: 100%;
+  min-width: 0;
+  flex-shrink: 1;
+  gap: 0;
+  text-decoration: none;
+  padding: 0 10px;
+  border: none;
+}
+.gd-ui-kit-chip__trigger {
+  border-radius: 20px 0 0 20px;
+  border-right: 1px solid transparent;
+}
+.gd-ui-kit-chip__trigger--isActive {
+  color: var(--gd-palette-complementary-8);
+  background-color: var(--gd-palette-complementary-2);
+  border-right: 1px solid var(--gd-palette-complementary-4);
+}
+.gd-ui-kit-chip__trigger--isLocked {
+  cursor: default;
+  color: var(--gd-palette-complementary-7);
+  border-radius: 20px;
+}
+.gd-ui-kit-chip__trigger--isLocked:disabled {
+  background-color: var(--gd-palette-complementary-0);
+  color: var(--gd-palette-complementary-7);
+  border: none;
+}
+.gd-ui-kit-chip__trigger:not(.gd-ui-kit-chip__trigger--isDeletable) {
+  border-radius: 20px;
+  border: none;
+}
+.gd-ui-kit-chip__delete {
+  flex-shrink: 0;
+  border-radius: 0 20px 20px 0;
+  padding: 0 7px 0 5px;
+}
+.gd-ui-kit-chip__label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.gd-ui-kit-chip__icon-before {
+  margin-right: 5px;
+}
+.gd-ui-kit-chip__icon-chevron {
+  display: none;
+  margin-left: 5px;
+}
+.gd-ui-kit-chip:hover .gd-ui-kit-chip__icon-chevron, .gd-ui-kit-chip:active .gd-ui-kit-chip__icon-chevron {
+  display: flex;
+}
+.gd-ui-kit-chip__icon-chevron--isActive {
+  display: flex;
+}
+.gd-ui-kit-chip__icon-lock {
+  margin-left: 5px;
 }
-
 .gd-heading-1 {
   color: var(--gd-palette-complementary-8, #464e56);
   font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
@@ -1550,7 +1776,6 @@ div {
   align-items: center;
   padding: 5px 14px;
   border: 1px solid transparent;
-  outline: 0;
   font: 400 14px/20px gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
   white-space: nowrap;
   vertical-align: middle;
@@ -1696,6 +1921,10 @@ div {
 .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:hover .gd-button-icon {
   color: var(--gd-palette-primary-base, #14b2e2);
 }
+.gd-button-primary:focus-visible,
+.gd-button-secondary:focus-visible, .gd-button-positive:focus-visible, .gd-button-negative:focus-visible, .gd-button-action:focus-visible, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:focus-visible, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:focus-visible {
+  transition: none;
+}
 [class*=gd-icon-].gd-button-primary,
 [class*=gd-icon-].gd-button-secondary, [class*=gd-icon-].gd-button-positive, [class*=gd-icon-].gd-button-negative, [class*=gd-icon-].gd-button-action, [class*=gd-icon-].gd-button-link.gd-button-icon-only, [class*=gd-icon-].gd-button-icon-only.gd-button-link-dimmed {
   padding-left: 37px;
@@ -2013,9 +2242,7 @@ div {
 .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:active .gd-button-icon {
   color: var(--gd-palette-primary-base-d06, #129cc6);
 }
-.gd-button-link.gd-button-icon-only[class*=gd-icon-]:focus::before, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:focus::before,
-.gd-button-link.gd-button-icon-only[class*=gd-icon-]:focus .gd-button-icon,
-.gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:focus .gd-button-icon, .gd-button-link.gd-button-icon-only[class*=gd-icon-]:hover::before, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:hover::before,
+.gd-button-link.gd-button-icon-only[class*=gd-icon-]:hover::before, .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:hover::before,
 .gd-button-link.gd-button-icon-only[class*=gd-icon-]:hover .gd-button-icon,
 .gd-button-icon-only[class*=gd-icon-].gd-button-link-dimmed:hover .gd-button-icon {
   color: var(--gd-palette-primary-base, #14b2e2);
@@ -2032,11 +2259,6 @@ div {
 :not(button).gd-button-link, :not(button).gd-button-link-dimmed {
   line-height: 0.8;
 }
-:not(button).gd-button-link:focus, :not(button).gd-button-link-dimmed:focus {
-  outline: none;
-  box-shadow: none;
-  border-color: transparent;
-}
 
 .button-dropdown {
   font-weight: 400;
@@ -2675,7 +2897,6 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   --rdp-accent-color-dart: none;
   --rdp-background-color-dark: none;
   --rdp-accent-color-dark: none;
-  --rdp-outline: none;
   position: absolute;
   padding: 18px 15px 15px;
   background: var(--gd-palette-complementary-0, #fff);
@@ -2935,7 +3156,6 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   position: relative;
   z-index: 2;
   padding: 20px;
-  outline: 0;
   max-width: 600px;
   border-style: solid;
   border-color: var(--gd-modal-borderColor, var(--gd-palette-complementary-3, #dde4eb));
@@ -2963,7 +3183,6 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   z-index: 5;
   top: 14px;
   right: 14px;
-  outline: none;
 }
 .gd-dialog:not(.gd-dropdown) .gd-dialog-close::before,
 .gd-dialog:not(.gd-dropdown) .gd-dialog-close.gd-button-link::before,
@@ -3231,11 +3450,6 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
 .overlay.gd-dialog.conversion-touch-point-dialog .hubspot-form textarea.hs-input:hover {
   border-color: #b1c1d1;
 }
-.overlay.gd-dialog.conversion-touch-point-dialog .hubspot-form textarea.hs-input:focus {
-  outline: 0;
-  border-color: var(--gd-palette-primary-base, #14b2e2);
-  box-shadow: inset 0 1px 1px 0 rgba(31, 53, 74, 0.2);
-}
 .overlay.gd-dialog.conversion-touch-point-dialog .hubspot-form .hs-form-radio-display {
   position: relative;
   display: inline-block;
@@ -3301,7 +3515,6 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   align-items: center;
   padding: 5px 14px;
   border: 1px solid rgba(0, 0, 0, 0.1);
-  outline: 0;
   border-radius: var(--gd-button-borderRadius, 3px);
   box-shadow: var(--gd-button-dropShadow, 1px 1px 0) var(--gd-shadow-color-from-theme, rgba(20, 56, 93, 0.09));
   font: 700 14px/20px gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
@@ -3336,7 +3549,6 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
 .gd-input {
   position: relative;
   display: block;
-  outline: 0;
 }
 
 .gd-input-wrapper,
@@ -3363,15 +3575,6 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
   font-size: 14px;
   font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
   font-weight: 200;
-  -moz-transition-property: all;
-  -webkit-transition-property: all;
-  transition-property: all;
-  -moz-transition-duration: 0.25s;
-  -webkit-transition-duration: 0.25s;
-  transition-duration: 0.25s;
-  -moz-transition-timing-function: ease-in-out;
-  -webkit-transition-timing-function: ease-in-out;
-  transition-timing-function: ease-in-out;
   border-radius: 3px;
   box-shadow: inset 0 1px 1px 0 rgba(31, 53, 74, 0.15);
 }
@@ -3449,10 +3652,13 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
 }
 .gd-input-field:focus,
 .input-text:focus {
-  outline: 0;
-  border-color: var(--gd-palette-primary-base, #14b2e2);
   box-shadow: inset 0 1px 1px 0 rgba(31, 53, 74, 0.2);
 }
+.gd-input-field:focus-visible,
+.input-text:focus-visible {
+  box-shadow: none;
+  outline-color: var(--gd-palette-primary-base, #14b2e2);
+}
 .gd-input-field:disabled, .gd-input-field:disabled:hover, .gd-input-field.disabled, .gd-input-field.disabled:hover,
 .input-text:disabled,
 .input-text:disabled:hover,
@@ -3473,7 +3679,6 @@ a.gd-button-link:hover .gd-button-text, a.gd-button-link-dimmed:hover .gd-button
 
 textarea.gd-input, textarea.input-text {
   height: auto;
-  outline: 0;
 }
 
 /* Searchfield
@@ -3586,18 +3791,28 @@ textarea.gd-input, textarea.input-text {
 
 /* Input states
    ========================================================================== */
-.has-error .gd-input-field {
+.has-error .gd-input-field,
+.has-error .input-text {
   color: var(--gd-palette-complementary-8, #464e56);
-  border-color: var(--gd-palette-error-base-t50, rgba(229, 77, 66, 0.5));
-  box-shadow: inset 0 0 2px 0 var(--gd-palette-error-base-t70d20, rgba(170, 33, 23, 0.3));
+  border-color: var(--gd-palette-error-base, #e54d42);
+  box-shadow: none;
+}
+.has-error .gd-input-field:focus-visible,
+.has-error .input-text:focus-visible {
+  outline-color: var(--gd-palette-error-base, #e54d42);
 }
 .has-error .gd-input-icon {
   color: var(--gd-palette-error-base, #e54d42);
 }
 
-.has-warning .gd-input-field {
-  border-color: var(--gd-palette-warning-base, #fada23);
-  box-shadow: inset 0 0 2px 0 var(--gd-palette-warning-base-t70d20, rgba(179, 153, 4, 0.3));
+.has-warning .gd-input-field,
+.has-warning .input-text {
+  border-color: var(--gd-palette-warning-base-from-theme, #f18600);
+  box-shadow: none;
+}
+.has-warning .gd-input-field:focus-visible,
+.has-warning .input-text:focus-visible {
+  outline-color: var(--gd-palette-warning-base-from-theme, #f18600);
 }
 
 /* Input label
@@ -3712,7 +3927,7 @@ textarea.gd-input, textarea.input-text {
 .gd-input-with-suffix.has-error .gd-input-field,
 .gd-input-with-suffix.has-error .gd-input-field ~ .gd-input-prefix,
 .gd-input-with-suffix.has-error .gd-input-field ~ .gd-input-suffix {
-  border-color: var(--gd-palette-error-base-t50, rgba(229, 77, 66, 0.5));
+  border-color: var(--gd-palette-error-base, #e54d42);
 }
 
 .gd-input-with-prefix .gd-input-field {
@@ -3740,15 +3955,6 @@ textarea.gd-input, textarea.input-text {
   font-size: 14px;
   font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
   font-weight: 200;
-  -moz-transition-property: all;
-  -webkit-transition-property: all;
-  transition-property: all;
-  -moz-transition-duration: 0.25s;
-  -webkit-transition-duration: 0.25s;
-  transition-duration: 0.25s;
-  -moz-transition-timing-function: ease-in-out;
-  -webkit-transition-timing-function: ease-in-out;
-  transition-timing-function: ease-in-out;
   color: var(--gd-palette-complementary-6-from-theme, #b0beca);
   min-width: 30px;
   text-align: center;
@@ -3847,7 +4053,6 @@ textarea.gd-input, textarea.input-text {
 .input-radio-label input,
 .input-checkbox-label input {
   position: absolute;
-  outline: 0;
   opacity: 0;
 }
 .input-radio-label input:checked ~ .input-label-text::before,
@@ -3879,6 +4084,17 @@ textarea.gd-input, textarea.input-text {
   background-color: var(--gd-palette-complementary-4, #ccd8e2);
 }
 
+.input-radio-label input[type=checkbox]:focus-visible + ::before,
+.input-radio-label input[type=radio]:focus-visible + ::before,
+.input-checkbox-label input[type=checkbox]:focus-visible + ::before,
+.input-checkbox-label input[type=radio]:focus-visible + ::before,
+.input-checkbox-toggle input[type=checkbox]:focus-visible + ::before,
+.input-checkbox-toggle input[type=radio]:focus-visible + ::before {
+  outline: 2px solid var(--gd-palette-primary-base, #14b2e2);
+  outline-offset: 2px;
+  transition: none;
+}
+
 .input-radio-label .input-label-text::before {
   border-radius: 50%;
 }
@@ -3921,7 +4137,6 @@ textarea.gd-input, textarea.input-text {
 
 .input-checkbox-toggle input {
   position: absolute;
-  outline: 0;
   opacity: 0;
 }
 .input-checkbox-toggle input:disabled ~ .input-label-text, .input-checkbox-toggle input.disabled ~ .input-label-text {
@@ -4054,7 +4269,6 @@ textarea.gd-input, textarea.input-text {
 }
 .gd-measure-custom-format-dialog-body .gd-measure-custom-format-dialog-content .gd-measure-format-button {
   display: flex;
-  outline: none;
   color: var(--gd-palette-complementary-6, #94a1ad);
   cursor: pointer;
   user-select: none;
@@ -4747,9 +4961,6 @@ span.CodeMirror-selectedtext {
   border-color: var(--gd-palette-primary-base, #14b2e2);
   box-shadow: inset 0 1px 1px 0 rgba(31, 53, 74, 0.15);
 }
-.gd-input-syntax-highlighting-input .CodeMirror-vscrollbar:focus {
-  outline: 0;
-}
 .gd-input-syntax-highlighting-input .CodeMirror-empty {
   color: var(--gd-palette-complementary-5, #b0beca);
 }
@@ -5618,7 +5829,8 @@ span.CodeMirror-selectedtext {
   background-color: var(--gd-palette-primary-dimmed, #e8f7fc);
 }
 .gd-list-item:focus-visible {
-  outline: auto;
+  outline: revert;
+  outline-offset: -2px;
 }
 .gd-list-item.gd-menu-item-remove:hover {
   color: var(--gd-palette-error-base, #e54d42);
@@ -5817,7 +6029,7 @@ span.CodeMirror-selectedtext {
   border: none;
 }
 .gd-infinite-list .public_fixedDataTable_main:focus-visible {
-  outline: auto;
+  outline: revert;
 }
 .gd-infinite-list .public_Scrollbar_main, .gd-infinite-list .public_Scrollbar_main.public_Scrollbar_mainActive {
   border-color: transparent;
@@ -6150,9 +6362,6 @@ span.CodeMirror-selectedtext {
   font-size: 14px;
   text-align: center;
 }
-.gd-tab:focus-visible {
-  outline: auto;
-}
 .gd-tab:hover {
   color: var(--gd-palette-complementary-8-from-theme, var(--gd-palette-complementary-9, #000));
   border-bottom: 3px solid var(--gd-palette-complementary-3, #dde4eb);
@@ -6207,7 +6416,7 @@ span.CodeMirror-selectedtext {
 .gd-header-logo.active {
   cursor: default;
 }
-.gd-header-logo:not(.active):hover, .gd-header-logo:not(.active):focus, .gd-header-logo:not(.active):active {
+.gd-header-logo:not(.active):hover {
   opacity: 0.6;
 }
 .gd-header-logo img {
@@ -6978,8 +7187,7 @@ a.gd-list-help-menu-item.gd-list-item:focus {
   font-weight: bold;
 }
 .gd-list-item.gd-project-list-item:focus-visible {
-  border: none;
-  outline: auto;
+  outline: revert;
 }
 
 .gd-header-account-dropdown {
@@ -6993,7 +7201,7 @@ a.gd-list-help-menu-item.gd-list-item:focus {
   font-weight: 400;
 }
 .gd-header-account-dropdown .gd-list a.gd-list-item:focus-visible {
-  outline: auto;
+  outline: revert;
   text-decoration: none;
 }
 .gd-header-account-dropdown .gd-list a.gd-list-item:focus {
@@ -7281,9 +7489,6 @@ button.gd-button-primary.gd-upsell-button:active {
   transform-origin: 0 0;
   -moz-appearance: none;
 }
-.gd-header-badge-button:focus {
-  outline: 0;
-}
 
 .gd-header-button {
   cursor: pointer;
@@ -7646,13 +7851,6 @@ button.gd-button-primary.gd-upsell-button:active {
   font-family: gdcustomfont, avenir, "Helvetica Neue", arial, sans-serif;
   line-height: 1.5;
 }
-.gd-overlay-content button,
-.gd-overlay-content input,
-.gd-overlay-content optgroup,
-.gd-overlay-content select,
-.gd-overlay-content textarea {
-  outline: 0;
-}
 .gd-overlay-content *,
 .gd-overlay-content *::before,
 .gd-overlay-content *::after {
@@ -8201,7 +8399,6 @@ button.gd-button-primary.gd-upsell-button:active {
 .color-picker-cell {
   flex: 1;
   padding: 1px;
-  outline: none;
   cursor: pointer;
 }
 .color-picker-cell::before {
@@ -9164,7 +9361,7 @@ button.gd-button-primary.gd-upsell-button:active {
 .gd-share-dialog-content-select .gd-share-dialog__control--is-focused,
 .gd-share-dialog-content-select .gd-share-dialog__control--is-focused:hover {
   border-color: var(--gd-palette-primary-base, #14b2e2);
-  outline: 0;
+  outline: revert;
   box-shadow: inset 0 1px 1px 0 rgba(31, 53, 74, 0.2);
 }
 .gd-share-dialog-content-select .gd-share-dialog__control--is-disabled {
@@ -9200,7 +9397,6 @@ button.gd-button-primary.gd-upsell-button:active {
   border-color: var(--gd-palette-primary-base, #14b2e2);
   border-top: 1px solid var(--gd-palette-complementary-3, #dde4eb);
   margin-top: -2px;
-  outline: 0;
   box-shadow: 0 0 1px 0 rgba(31, 53, 74, 0.8) inset;
   color: var(--gd-palette-complementary-8, #464e56);
   background-color: var(--gd-palette-complementary-0, #fff);
@@ -9506,7 +9702,6 @@ button.gd-button-primary.gd-upsell-button:active {
   border: none;
   background-color: transparent;
   resize: none;
-  outline: 0;
   line-height: 18px;
   font-size: 12px;
   letter-spacing: 0;
@@ -10171,6 +10366,11 @@ input[type=search]::-webkit-search-cancel-button {
   flex-shrink: 1;
 }
 
+.gd-invertable-select-list .gd-invertable-select-all-checkbox:focus-visible,
+.gd-invertable-select-list .gd-list-item:focus-visible {
+  outline-offset: -2px;
+}
+
 .gd-invertable-select-all-checkbox {
   display: flex;
   justify-content: flex-start;
@@ -10591,19 +10791,16 @@ input[type=search]::-webkit-search-cancel-button {
   color: var(--gd-palette-complementary-7, #6d7680);
   border: none;
   resize: none;
-  outline: none;
   box-sizing: border-box;
 }
 .gd-rich-text-content textarea::placeholder {
   color: var(--gd-palette-complementary-6, #94a1ad);
 }
-.gd-rich-text-content .gd-rich-text-metric-value {
-  font-weight: bold;
-}
 .gd-rich-text-content .gd-rich-text-metric-empty {
   color: var(--gd-palette-complementary-8, #464e56);
 }
-.gd-rich-text-content .gd-rich-text-metric-error {
+.gd-rich-text-content .gd-rich-text-metric-error,
+.gd-rich-text-content .gd-rich-text-metric-multiple {
   color: var(--gd-palette-error-base, #e54d42);
 }
 
@@ -10695,7 +10892,8 @@ input[type=search]::-webkit-search-cancel-button {
 .gd-recurrence-form .gd-input-component {
   margin-bottom: 20px;
 }
-.gd-recurrence-form .gd-input-component label {
+.gd-recurrence-form .gd-input-component label,
+.gd-recurrence-form .gd-input-component .gd-label {
   min-width: 100px;
 }
 .gd-recurrence-form .gd-recurrence-form-datetime {
@@ -10703,10 +10901,13 @@ input[type=search]::-webkit-search-cancel-button {
   flex-direction: row;
   align-items: center;
 }
-.gd-recurrence-form .gd-recurrence-form-datetime > :not(:first-of-type),
+.gd-recurrence-form .gd-recurrence-form-datetime > :not(:first-of-type):not(.gd-label),
 .gd-recurrence-form .gd-recurrence-form-datetime > :not(:last-of-type) {
   margin-right: 10px;
 }
+.gd-recurrence-form .gd-recurrence-form-datetime .gd-label {
+  margin-right: 0;
+}
 .gd-recurrence-form .gd-recurrence-form-datetime input,
 .gd-recurrence-form .gd-recurrence-form-datetime button {
   height: 28px;
@@ -10727,12 +10928,12 @@ input[type=search]::-webkit-search-cancel-button {
 .gd-recurrence-form .gd-recurrence-form-repeat-inner {
   display: flex;
   gap: 10px;
-  align-items: center;
+  align-items: flex-start;
 }
 .gd-recurrence-form .gd-recurrence-form-repeat {
   display: flex;
   flex-direction: row;
-  align-items: center;
+  align-items: flex-start;
 }
 .gd-recurrence-form .gd-recurrence-form-repeat > :not(:first-of-type),
 .gd-recurrence-form .gd-recurrence-form-repeat > :not(:last-of-type) {
@@ -10751,13 +10952,20 @@ input[type=search]::-webkit-search-cancel-button {
   max-width: 128px;
   height: 28px;
 }
+.gd-recurrence-form .gd-recurrence-form-repeat .gd-recurrence-form-cron .gd-recurrence-form-cron-help,
 .gd-recurrence-form .gd-recurrence-form-repeat .gd-recurrence-form-cron .gd-recurrence-form-cron-error-message {
-  color: #e54d42;
   font-size: 12px;
   font-style: normal;
   font-weight: 400;
   line-height: 13px;
 }
+.gd-recurrence-form .gd-recurrence-form-repeat .gd-recurrence-form-cron .gd-recurrence-form-cron-help,
+.gd-recurrence-form .gd-recurrence-form-repeat .gd-recurrence-form-cron .gd-recurrence-form-cron-help a {
+  color: var(--gd-palette-complementary-6, #94a1ad);
+}
+.gd-recurrence-form .gd-recurrence-form-repeat .gd-recurrence-form-cron .gd-recurrence-form-cron-error-message {
+  color: #e54d42;
+}
 .gd-recurrence-form .gd-recurrence-form-repeat .gd-recurrence-form-cron-icon {
   display: flex;
   align-items: center;