@gooddata/sdk-ui-kit 11.57.0-alpha.2 → 11.57.0-alpha.4

package/styles/css/main.css

@@ -235,7 +235,7 @@
   --gd-palette-primary-base-d06: #129cc6;
   --gd-palette-primary-base-d12: #0f86aa;
   --gd-palette-primary-base-darken20: #0c6884;
-  --gd-palette-primary-base-dimmed-darken03: #daf2fa;
+  --gd-palette-primary-base-dimmed-darken03: #daf3fa;
   --gd-palette-primary-base-lighten45: #dff5fc;
   --gd-palette-primary-base-mix15-white: rgba(220, 243, 251, 0.925);
   --gd-palette-primary-base-t02: rgba(20, 178, 226, 0.98);
@@ -288,12 +288,15 @@
   --gd-spacing-16px: 16px;
   --gd-spacing-34px: 34px;
   --gd-transition-all: all 0.25s ease-in-out;
+  --gd-geo-multi-layer-legend__section-header-height: 34px;
+  --gd-geo-multi-layer-legend__toggle-duration: 0.2s;
+  --gd-viz-tooltip-max-height: none;
+  --gd-avatar-background-color: var(--gd-palette-complementary-2);
   --gd-button-XXL: 55px;
   --gd-button-XL: 45px;
   --gd-button-L: 38px;
   --gd-button-M: 32px;
   --gd-button-S: 27px;
-  --gd-button-XS: 21px;
   --gd-icon-fill-color: var(--gd-palette-complementary-9);
   --gd-icon-background-color: var(--gd-palette-complementary-2);
   --gd-tabs-height-L: 56px;
@@ -313,6 +316,8 @@
   --gd-table-multi-line-line-height-large: 23px;
   --gd-table-dropdown-item-height: 28px;
   --gd-table-title-font-size: 24px;
+  --gd-toolbar-borderRadius: 2px;
+  --gd-tooltip-maxWidth: 300px;
 }
 
 .gd-ui-kit-button {
@@ -1923,7 +1928,11 @@
   padding: 5px 10px;
 }
 .gd-ui-kit-listbox__item-title {
+  display: block;
   width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 .gd-ui-kit-listbox__item-explanation {
@@ -2184,8 +2193,11 @@
   color: var(--gd-palette-complementary-5);
 }
 .gd-ui-kit-menu__item-title {
+  display: block;
   width: 100%;
   min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
@@ -2458,6 +2470,10 @@
 .gd-ui-kit-tooltip p + p {
   margin-top: 5px;
 }
+.gd-ui-kit-tooltip--defaultMaxWidth {
+  max-width: var(--gd-tooltip-maxWidth);
+  box-sizing: border-box;
+}
 .gd-ui-kit-tooltip--width-same-as-anchor {
   width: auto;
   box-sizing: border-box;
@@ -3999,6 +4015,9 @@
   padding: var(--gd-spacing-5px) 0;
   box-sizing: border-box;
 }
+.gd-ui-kit-grantee-row:hover {
+  background: var(--gd-palette-complementary-2);
+}
 .gd-ui-kit-grantee-row--pending {
   opacity: 0.6;
 }
@@ -4053,7 +4072,7 @@
 .gd-ui-kit-dialog-header {
   display: flex;
   align-items: center;
-  gap: var(--gd-spacing-15px);
+  gap: var(--gd-spacing-10px);
   margin-bottom: var(--gd-spacing-20px);
 }
 .gd-ui-kit-dialog-header__leading {
@@ -4061,6 +4080,12 @@
   align-items: center;
   flex-shrink: 0;
 }
+.gd-ui-kit-dialog-header__close {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-block: -4.5px;
+}
 .gd-ui-kit-dialog-header__title {
   flex: 1 1 auto;
   min-width: 0;
@@ -4072,8 +4097,8 @@
   white-space: nowrap;
 }
 .gd-ui-kit-dialog-header__title--size-default {
-  font-size: 18px;
-  line-height: 26px;
+  font-size: 17px;
+  line-height: 23px;
 }
 .gd-ui-kit-dialog-header__title--size-large {
   font-size: 20px;
@@ -4103,13 +4128,39 @@
   flex-direction: column;
   gap: var(--gd-spacing-10px);
 }
+.gd-ui-kit-object-share-dialog .gd-ui-kit-dialog-header {
+  margin-bottom: var(--gd-spacing-10px);
+}
+.gd-ui-kit-object-share-dialog__note {
+  margin-bottom: var(--gd-spacing-10px);
+  padding: var(--gd-spacing-5px) var(--gd-spacing-10px);
+  border-radius: 3px;
+  background: var(--gd-palette-primary-dimmed);
+  color: var(--gd-palette-primary-base);
+  font-size: 14px;
+  line-height: 20px;
+}
+.gd-ui-kit-object-share-dialog__note-prefix {
+  font-weight: 700;
+}
 .gd-ui-kit-object-share-dialog__grantees {
   display: flex;
   flex-direction: column;
+  padding-bottom: var(--gd-spacing-10px);
+}
+.gd-ui-kit-object-share-dialog__empty {
+  padding-block: var(--gd-spacing-10px);
+  color: var(--gd-palette-complementary-6);
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+}
+.gd-ui-kit-object-share-dialog__empty p {
+  margin: 0;
 }
 .gd-ui-kit-object-share-dialog__error {
   padding-block: var(--gd-spacing-20px);
-  color: var(--gd-palette-complementary-6, #94a1ad);
+  color: var(--gd-palette-complementary-6);
   font-size: 14px;
   text-align: center;
 }
@@ -4118,6 +4169,11 @@
   display: flex;
   flex-direction: column;
   gap: var(--gd-spacing-10px);
+}
+.gd-ui-kit-add-grantee-dialog .gd-ui-kit-dialog-header {
+  margin-bottom: var(--gd-spacing-10px);
+}
+.gd-ui-kit-add-grantee-dialog {
   padding-bottom: var(--gd-spacing-5px);
 }
 
@@ -4131,11 +4187,6 @@
   flex-direction: column;
   gap: var(--gd-spacing-5px);
 }
-.gd-ui-kit-grantee-async-picker__field-label {
-  font-size: 14px;
-  line-height: 21px;
-  color: var(--gd-palette-complementary-7);
-}
 .gd-ui-kit-grantee-async-picker__empty-state {
   min-height: 50px;
   display: flex;
@@ -4295,6 +4346,9 @@
   color: var(--gd-palette-complementary-5);
   cursor: default;
 }
+.gd-ui-kit-permission-menu__item-tooltip {
+  max-width: 220px;
+}
 .gd-ui-kit-permission-menu__item-label {
   flex: 1 1 auto;
   min-width: 0;
@@ -4545,6 +4599,514 @@
   opacity: 0.7;
 }
 
+.gd-ui-kit-toolbar {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  box-sizing: border-box;
+  padding: 8px;
+  border: 1px solid var(--gd-palette-complementary-3);
+  border-radius: var(--gd-button-borderRadius);
+  background-color: var(--gd-palette-complementary-0);
+  box-shadow: 0 2px 10px var(--gd-shadow-color);
+}
+
+.gd-ui-kit-toolbar-chevron {
+  display: inline-flex;
+  flex-shrink: 0;
+  transition: var(--gd-transition-all);
+}
+.gd-ui-kit-toolbar-chevron--isOpen {
+  transform: rotate(180deg);
+}
+
+.gd-ui-kit-toolbar-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  box-sizing: border-box;
+  height: 28px;
+  margin: 0;
+  padding: 0 4px;
+  border: 0;
+  border-radius: var(--gd-toolbar-borderRadius);
+  background-color: transparent;
+  font-family: var(--gd-font-family);
+  font-size: 14px;
+  line-height: normal;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  transition: var(--gd-transition-all);
+  --gd-icon-fill-color: var(--gd-palette-complementary-7);
+  color: var(--gd-palette-complementary-7);
+}
+.gd-ui-kit-toolbar-button:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--gd-palette-primary-base);
+}
+.gd-ui-kit-toolbar-button:not([aria-disabled=true]):hover {
+  --gd-icon-fill-color: var(--gd-palette-complementary-8);
+  color: var(--gd-palette-complementary-8);
+  background-color: var(--gd-palette-complementary-2);
+}
+.gd-ui-kit-toolbar-button:not([aria-disabled=true]):active, .gd-ui-kit-toolbar-button:not([aria-disabled=true]).gd-ui-kit-toolbar-button--isActive {
+  --gd-icon-fill-color: var(--gd-palette-complementary-8);
+  color: var(--gd-palette-complementary-8);
+  background-color: var(--gd-palette-complementary-4);
+}
+.gd-ui-kit-toolbar-button:not([aria-disabled=true]).gd-ui-kit-toolbar-button--isSelected {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+  color: var(--gd-palette-primary-base);
+  background-color: transparent;
+}
+.gd-ui-kit-toolbar-button:not([aria-disabled=true]).gd-ui-kit-toolbar-button--isSelected:hover {
+  --gd-icon-fill-color: var(--gd-palette-primary-base-d12);
+  color: var(--gd-palette-primary-base-d12);
+  background-color: var(--gd-palette-primary-dimmed);
+}
+.gd-ui-kit-toolbar-button:not([aria-disabled=true]).gd-ui-kit-toolbar-button--isSelected:active, .gd-ui-kit-toolbar-button:not([aria-disabled=true]).gd-ui-kit-toolbar-button--isSelected.gd-ui-kit-toolbar-button--isActive {
+  --gd-icon-fill-color: var(--gd-palette-primary-base-d12);
+  color: var(--gd-palette-primary-base-d12);
+  background-color: var(--gd-palette-primary-base-dimmed-darken03);
+}
+.gd-ui-kit-toolbar-button:not([aria-disabled=true]).gd-ui-kit-toolbar-button--isDestructive:hover {
+  --gd-icon-fill-color: var(--gd-palette-error-base);
+  color: var(--gd-palette-error-base);
+  background-color: var(--gd-palette-error-dimmed);
+}
+.gd-ui-kit-toolbar-button:not([aria-disabled=true]).gd-ui-kit-toolbar-button--isDestructive:active, .gd-ui-kit-toolbar-button:not([aria-disabled=true]).gd-ui-kit-toolbar-button--isDestructive.gd-ui-kit-toolbar-button--isActive {
+  --gd-icon-fill-color: var(--gd-palette-error-base-d10);
+  color: var(--gd-palette-error-base-d10);
+  background-color: var(--gd-palette-error-disabled);
+}
+.gd-ui-kit-toolbar-button:not([aria-disabled=true]).gd-ui-kit-toolbar-button--isDestructive.gd-ui-kit-toolbar-button--isSelected {
+  --gd-icon-fill-color: var(--gd-palette-error-base);
+  color: var(--gd-palette-error-base);
+  background-color: transparent;
+}
+.gd-ui-kit-toolbar-button:not([aria-disabled=true]).gd-ui-kit-toolbar-button--isDestructive.gd-ui-kit-toolbar-button--isSelected:hover {
+  --gd-icon-fill-color: var(--gd-palette-error-base);
+  color: var(--gd-palette-error-base);
+  background-color: var(--gd-palette-error-dimmed);
+}
+.gd-ui-kit-toolbar-button:not([aria-disabled=true]).gd-ui-kit-toolbar-button--isDestructive.gd-ui-kit-toolbar-button--isSelected:active, .gd-ui-kit-toolbar-button:not([aria-disabled=true]).gd-ui-kit-toolbar-button--isDestructive.gd-ui-kit-toolbar-button--isSelected.gd-ui-kit-toolbar-button--isActive {
+  --gd-icon-fill-color: var(--gd-palette-error-base-d10);
+  color: var(--gd-palette-error-base-d10);
+  background-color: var(--gd-palette-error-disabled);
+}
+.gd-ui-kit-toolbar-button[aria-disabled=true] {
+  --gd-icon-fill-color: var(--gd-palette-complementary-4);
+  color: var(--gd-palette-complementary-5);
+  background-color: transparent;
+  cursor: default;
+}
+.gd-ui-kit-toolbar-button__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.gd-ui-kit-toolbar-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  box-sizing: border-box;
+  height: 28px;
+  margin: 0;
+  padding: 0 4px;
+  border: 0;
+  border-radius: var(--gd-toolbar-borderRadius);
+  background-color: transparent;
+  font-family: var(--gd-font-family);
+  font-size: 14px;
+  line-height: normal;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  transition: var(--gd-transition-all);
+  --gd-icon-fill-color: var(--gd-palette-complementary-7);
+  color: var(--gd-palette-complementary-7);
+}
+.gd-ui-kit-toolbar-icon-button:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--gd-palette-primary-base);
+}
+.gd-ui-kit-toolbar-icon-button:not([aria-disabled=true]):hover {
+  --gd-icon-fill-color: var(--gd-palette-complementary-8);
+  color: var(--gd-palette-complementary-8);
+  background-color: var(--gd-palette-complementary-2);
+}
+.gd-ui-kit-toolbar-icon-button:not([aria-disabled=true]):active, .gd-ui-kit-toolbar-icon-button:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-button--isActive {
+  --gd-icon-fill-color: var(--gd-palette-complementary-8);
+  color: var(--gd-palette-complementary-8);
+  background-color: var(--gd-palette-complementary-4);
+}
+.gd-ui-kit-toolbar-icon-button:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-button--isSelected {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+  color: var(--gd-palette-primary-base);
+  background-color: transparent;
+}
+.gd-ui-kit-toolbar-icon-button:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-button--isSelected:hover {
+  --gd-icon-fill-color: var(--gd-palette-primary-base-d12);
+  color: var(--gd-palette-primary-base-d12);
+  background-color: var(--gd-palette-primary-dimmed);
+}
+.gd-ui-kit-toolbar-icon-button:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-button--isSelected:active, .gd-ui-kit-toolbar-icon-button:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-button--isSelected.gd-ui-kit-toolbar-icon-button--isActive {
+  --gd-icon-fill-color: var(--gd-palette-primary-base-d12);
+  color: var(--gd-palette-primary-base-d12);
+  background-color: var(--gd-palette-primary-base-dimmed-darken03);
+}
+.gd-ui-kit-toolbar-icon-button:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-button--isDestructive:hover {
+  --gd-icon-fill-color: var(--gd-palette-error-base);
+  color: var(--gd-palette-error-base);
+  background-color: var(--gd-palette-error-dimmed);
+}
+.gd-ui-kit-toolbar-icon-button:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-button--isDestructive:active, .gd-ui-kit-toolbar-icon-button:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-button--isDestructive.gd-ui-kit-toolbar-icon-button--isActive {
+  --gd-icon-fill-color: var(--gd-palette-error-base-d10);
+  color: var(--gd-palette-error-base-d10);
+  background-color: var(--gd-palette-error-disabled);
+}
+.gd-ui-kit-toolbar-icon-button:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-button--isDestructive.gd-ui-kit-toolbar-icon-button--isSelected {
+  --gd-icon-fill-color: var(--gd-palette-error-base);
+  color: var(--gd-palette-error-base);
+  background-color: transparent;
+}
+.gd-ui-kit-toolbar-icon-button:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-button--isDestructive.gd-ui-kit-toolbar-icon-button--isSelected:hover {
+  --gd-icon-fill-color: var(--gd-palette-error-base);
+  color: var(--gd-palette-error-base);
+  background-color: var(--gd-palette-error-dimmed);
+}
+.gd-ui-kit-toolbar-icon-button:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-button--isDestructive.gd-ui-kit-toolbar-icon-button--isSelected:active, .gd-ui-kit-toolbar-icon-button:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-button--isDestructive.gd-ui-kit-toolbar-icon-button--isSelected.gd-ui-kit-toolbar-icon-button--isActive {
+  --gd-icon-fill-color: var(--gd-palette-error-base-d10);
+  color: var(--gd-palette-error-base-d10);
+  background-color: var(--gd-palette-error-disabled);
+}
+.gd-ui-kit-toolbar-icon-button[aria-disabled=true] {
+  --gd-icon-fill-color: var(--gd-palette-complementary-4);
+  color: var(--gd-palette-complementary-5);
+  background-color: transparent;
+  cursor: default;
+}
+.gd-ui-kit-toolbar-icon-button {
+  position: relative;
+  flex-shrink: 0;
+}
+.gd-ui-kit-toolbar-icon-button--size-medium {
+  width: 28px;
+}
+.gd-ui-kit-toolbar-icon-button--size-small {
+  width: 14px;
+  height: 14px;
+  padding: 0;
+}
+.gd-ui-kit-toolbar-icon-button--size-small::before {
+  content: "";
+  position: absolute;
+  inset: -5px;
+}
+
+.gd-ui-kit-toolbar-icon-select {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  box-sizing: border-box;
+  height: 28px;
+  margin: 0;
+  padding: 0 4px;
+  border: 0;
+  border-radius: var(--gd-toolbar-borderRadius);
+  background-color: transparent;
+  font-family: var(--gd-font-family);
+  font-size: 14px;
+  line-height: normal;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  transition: var(--gd-transition-all);
+  --gd-icon-fill-color: var(--gd-palette-complementary-7);
+  color: var(--gd-palette-complementary-7);
+}
+.gd-ui-kit-toolbar-icon-select:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--gd-palette-primary-base);
+}
+.gd-ui-kit-toolbar-icon-select:not([aria-disabled=true]):hover {
+  --gd-icon-fill-color: var(--gd-palette-complementary-8);
+  color: var(--gd-palette-complementary-8);
+  background-color: var(--gd-palette-complementary-2);
+}
+.gd-ui-kit-toolbar-icon-select:not([aria-disabled=true]):active, .gd-ui-kit-toolbar-icon-select:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-select--isActive {
+  --gd-icon-fill-color: var(--gd-palette-complementary-8);
+  color: var(--gd-palette-complementary-8);
+  background-color: var(--gd-palette-complementary-4);
+}
+.gd-ui-kit-toolbar-icon-select:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-select--isSelected {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+  color: var(--gd-palette-primary-base);
+  background-color: transparent;
+}
+.gd-ui-kit-toolbar-icon-select:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-select--isSelected:hover {
+  --gd-icon-fill-color: var(--gd-palette-primary-base-d12);
+  color: var(--gd-palette-primary-base-d12);
+  background-color: var(--gd-palette-primary-dimmed);
+}
+.gd-ui-kit-toolbar-icon-select:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-select--isSelected:active, .gd-ui-kit-toolbar-icon-select:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-select--isSelected.gd-ui-kit-toolbar-icon-select--isActive {
+  --gd-icon-fill-color: var(--gd-palette-primary-base-d12);
+  color: var(--gd-palette-primary-base-d12);
+  background-color: var(--gd-palette-primary-base-dimmed-darken03);
+}
+.gd-ui-kit-toolbar-icon-select:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-select--isDestructive:hover {
+  --gd-icon-fill-color: var(--gd-palette-error-base);
+  color: var(--gd-palette-error-base);
+  background-color: var(--gd-palette-error-dimmed);
+}
+.gd-ui-kit-toolbar-icon-select:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-select--isDestructive:active, .gd-ui-kit-toolbar-icon-select:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-select--isDestructive.gd-ui-kit-toolbar-icon-select--isActive {
+  --gd-icon-fill-color: var(--gd-palette-error-base-d10);
+  color: var(--gd-palette-error-base-d10);
+  background-color: var(--gd-palette-error-disabled);
+}
+.gd-ui-kit-toolbar-icon-select:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-select--isDestructive.gd-ui-kit-toolbar-icon-select--isSelected {
+  --gd-icon-fill-color: var(--gd-palette-error-base);
+  color: var(--gd-palette-error-base);
+  background-color: transparent;
+}
+.gd-ui-kit-toolbar-icon-select:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-select--isDestructive.gd-ui-kit-toolbar-icon-select--isSelected:hover {
+  --gd-icon-fill-color: var(--gd-palette-error-base);
+  color: var(--gd-palette-error-base);
+  background-color: var(--gd-palette-error-dimmed);
+}
+.gd-ui-kit-toolbar-icon-select:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-select--isDestructive.gd-ui-kit-toolbar-icon-select--isSelected:active, .gd-ui-kit-toolbar-icon-select:not([aria-disabled=true]).gd-ui-kit-toolbar-icon-select--isDestructive.gd-ui-kit-toolbar-icon-select--isSelected.gd-ui-kit-toolbar-icon-select--isActive {
+  --gd-icon-fill-color: var(--gd-palette-error-base-d10);
+  color: var(--gd-palette-error-base-d10);
+  background-color: var(--gd-palette-error-disabled);
+}
+.gd-ui-kit-toolbar-icon-select[aria-disabled=true] {
+  --gd-icon-fill-color: var(--gd-palette-complementary-4);
+  color: var(--gd-palette-complementary-5);
+  background-color: transparent;
+  cursor: default;
+}
+.gd-ui-kit-toolbar-icon-select {
+  flex-shrink: 0;
+}
+
+.gd-ui-kit-toolbar-select {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  box-sizing: border-box;
+  height: 28px;
+  margin: 0;
+  padding: 0 4px;
+  border: 0;
+  border-radius: var(--gd-toolbar-borderRadius);
+  background-color: transparent;
+  font-family: var(--gd-font-family);
+  font-size: 14px;
+  line-height: normal;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  transition: var(--gd-transition-all);
+  --gd-icon-fill-color: var(--gd-palette-complementary-7);
+  color: var(--gd-palette-complementary-7);
+}
+.gd-ui-kit-toolbar-select:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--gd-palette-primary-base);
+}
+.gd-ui-kit-toolbar-select:not([aria-disabled=true]):hover {
+  --gd-icon-fill-color: var(--gd-palette-complementary-8);
+  color: var(--gd-palette-complementary-8);
+  background-color: var(--gd-palette-complementary-2);
+}
+.gd-ui-kit-toolbar-select:not([aria-disabled=true]):active, .gd-ui-kit-toolbar-select:not([aria-disabled=true]).gd-ui-kit-toolbar-select--isActive {
+  --gd-icon-fill-color: var(--gd-palette-complementary-8);
+  color: var(--gd-palette-complementary-8);
+  background-color: var(--gd-palette-complementary-4);
+}
+.gd-ui-kit-toolbar-select:not([aria-disabled=true]).gd-ui-kit-toolbar-select--isSelected {
+  --gd-icon-fill-color: var(--gd-palette-primary-base);
+  color: var(--gd-palette-primary-base);
+  background-color: transparent;
+}
+.gd-ui-kit-toolbar-select:not([aria-disabled=true]).gd-ui-kit-toolbar-select--isSelected:hover {
+  --gd-icon-fill-color: var(--gd-palette-primary-base-d12);
+  color: var(--gd-palette-primary-base-d12);
+  background-color: var(--gd-palette-primary-dimmed);
+}
+.gd-ui-kit-toolbar-select:not([aria-disabled=true]).gd-ui-kit-toolbar-select--isSelected:active, .gd-ui-kit-toolbar-select:not([aria-disabled=true]).gd-ui-kit-toolbar-select--isSelected.gd-ui-kit-toolbar-select--isActive {
+  --gd-icon-fill-color: var(--gd-palette-primary-base-d12);
+  color: var(--gd-palette-primary-base-d12);
+  background-color: var(--gd-palette-primary-base-dimmed-darken03);
+}
+.gd-ui-kit-toolbar-select:not([aria-disabled=true]).gd-ui-kit-toolbar-select--isDestructive:hover {
+  --gd-icon-fill-color: var(--gd-palette-error-base);
+  color: var(--gd-palette-error-base);
+  background-color: var(--gd-palette-error-dimmed);
+}
+.gd-ui-kit-toolbar-select:not([aria-disabled=true]).gd-ui-kit-toolbar-select--isDestructive:active, .gd-ui-kit-toolbar-select:not([aria-disabled=true]).gd-ui-kit-toolbar-select--isDestructive.gd-ui-kit-toolbar-select--isActive {
+  --gd-icon-fill-color: var(--gd-palette-error-base-d10);
+  color: var(--gd-palette-error-base-d10);
+  background-color: var(--gd-palette-error-disabled);
+}
+.gd-ui-kit-toolbar-select:not([aria-disabled=true]).gd-ui-kit-toolbar-select--isDestructive.gd-ui-kit-toolbar-select--isSelected {
+  --gd-icon-fill-color: var(--gd-palette-error-base);
+  color: var(--gd-palette-error-base);
+  background-color: transparent;
+}
+.gd-ui-kit-toolbar-select:not([aria-disabled=true]).gd-ui-kit-toolbar-select--isDestructive.gd-ui-kit-toolbar-select--isSelected:hover {
+  --gd-icon-fill-color: var(--gd-palette-error-base);
+  color: var(--gd-palette-error-base);
+  background-color: var(--gd-palette-error-dimmed);
+}
+.gd-ui-kit-toolbar-select:not([aria-disabled=true]).gd-ui-kit-toolbar-select--isDestructive.gd-ui-kit-toolbar-select--isSelected:active, .gd-ui-kit-toolbar-select:not([aria-disabled=true]).gd-ui-kit-toolbar-select--isDestructive.gd-ui-kit-toolbar-select--isSelected.gd-ui-kit-toolbar-select--isActive {
+  --gd-icon-fill-color: var(--gd-palette-error-base-d10);
+  color: var(--gd-palette-error-base-d10);
+  background-color: var(--gd-palette-error-disabled);
+}
+.gd-ui-kit-toolbar-select[aria-disabled=true] {
+  --gd-icon-fill-color: var(--gd-palette-complementary-4);
+  color: var(--gd-palette-complementary-5);
+  background-color: transparent;
+  cursor: default;
+}
+.gd-ui-kit-toolbar-select {
+  justify-content: flex-start;
+}
+.gd-ui-kit-toolbar-select--width-fixed {
+  width: 240px;
+}
+.gd-ui-kit-toolbar-select__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+}
+.gd-ui-kit-toolbar-select--isPlaceholder:not([aria-disabled=true]) .gd-ui-kit-toolbar-select__label {
+  color: var(--gd-palette-complementary-6);
+}
+
+.gd-ui-kit-toolbar-stepper {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  box-sizing: border-box;
+  height: 28px;
+  padding: 0 4px;
+}
+.gd-ui-kit-toolbar-stepper__value {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  box-sizing: border-box;
+  height: 28px;
+  margin: 0;
+  padding: 0 4px;
+  border: 0;
+  border-radius: var(--gd-toolbar-borderRadius);
+  background-color: transparent;
+  font-family: var(--gd-font-family);
+  font-size: 14px;
+  line-height: normal;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  transition: var(--gd-transition-all);
+  --gd-icon-fill-color: var(--gd-palette-complementary-7);
+  min-width: 0;
+  color: var(--gd-palette-complementary-7);
+  text-align: center;
+  cursor: default;
+}
+.gd-ui-kit-toolbar-stepper__value--isEditable {
+  width: calc(4.5ch + 2 * 4px);
+  text-align: center;
+  cursor: text;
+}
+.gd-ui-kit-toolbar-stepper__value--isEditable:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--gd-palette-primary-base);
+}
+.gd-ui-kit-toolbar-stepper__value--isEditable:not([aria-disabled=true]):hover {
+  color: var(--gd-palette-complementary-8);
+  background-color: var(--gd-palette-complementary-2);
+}
+.gd-ui-kit-toolbar-stepper__value--isEditable:not([aria-disabled=true]):active, .gd-ui-kit-toolbar-stepper__value--isEditable:not([aria-disabled=true]).gd-ui-kit-toolbar-stepper__value--isActive {
+  color: var(--gd-palette-complementary-8);
+  background-color: var(--gd-palette-complementary-4);
+}
+.gd-ui-kit-toolbar-stepper__value--isEditable[aria-disabled=true] {
+  color: var(--gd-palette-complementary-4);
+  cursor: default;
+}
+
+.gd-ui-kit-toolbar-segmented-control {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  height: 28px;
+}
+
+.gd-ui-kit-toolbar-divider {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: 1px;
+  height: 28px;
+  background-color: var(--gd-palette-complementary-3);
+}
+
+.gd-ui-kit-toolbar-color-swatch {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  overflow: hidden;
+}
+.gd-ui-kit-toolbar-color-swatch__fill {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  background-color: var(--gd-palette-complementary-0);
+}
+.gd-ui-kit-toolbar-color-swatch__transparent {
+  position: absolute;
+  inset: 0;
+  background: repeating-conic-gradient(var(--gd-palette-complementary-3) 0 25%, transparent 0 50%) 0 0/6px 6px;
+}
+.gd-ui-kit-toolbar-color-swatch__glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  font-family: var(--gd-font-family);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  color: currentColor;
+}
+.gd-ui-kit-toolbar-color-swatch__bar {
+  box-sizing: border-box;
+  width: 100%;
+  height: 5px;
+  border-radius: var(--gd-button-borderRadius);
+  background-color: var(--gd-palette-primary-base);
+}
+.gd-ui-kit-toolbar-color-swatch--hasBorder.gd-ui-kit-toolbar-color-swatch--variant-fill .gd-ui-kit-toolbar-color-swatch__fill {
+  box-shadow: inset 0 0 0 1px var(--gd-palette-complementary-5);
+}
+.gd-ui-kit-toolbar-color-swatch--hasBorder.gd-ui-kit-toolbar-color-swatch--variant-text .gd-ui-kit-toolbar-color-swatch__bar {
+  box-shadow: inset 0 0 0 1px var(--gd-palette-complementary-4);
+}
+
 [class^=gd-ui-kit-],
 [class*=" gd-ui-kit-"] {
   font-family: var(--gd-font-family);