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

package/src/@ui/defaultTheme.scss

@@ -344,5 +344,6 @@
     --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;
 }

package/src/@ui/index.scss

@@ -53,6 +53,16 @@
 @use "./UiGranteeRowControls/UiGranteeRowControls.scss";
 @use "./UiToast/UiToast.scss";
 @use "./UiConfigEditor/UiConfigEditor.scss";
+@use "./UiToolbar/UiToolbar.scss";
+@use "./UiToolbar/UiToolbarChevron.scss";
+@use "./UiToolbarButton/UiToolbarButton.scss";
+@use "./UiToolbarIconButton/UiToolbarIconButton.scss";
+@use "./UiToolbarIconSelect/UiToolbarIconSelect.scss";
+@use "./UiToolbarSelect/UiToolbarSelect.scss";
+@use "./UiToolbarStepper/UiToolbarStepper.scss";
+@use "./UiToolbarSegmentedControl/UiToolbarSegmentedControl.scss";
+@use "./UiToolbarDivider/UiToolbarDivider.scss";
+@use "./UiToolbarColorSwatch/UiToolbarColorSwatch.scss";
 
 // `--gd-font-family` is a `:root` variable only; there is no global `body` font
 // declaration. Apply it once to every kit root so standalone components don't

package/styles/css/main.css

@@ -316,6 +316,7 @@
   --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;
 }
 
@@ -1927,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 {
@@ -2188,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;
 }
 
@@ -4007,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;
 }
@@ -4061,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 {
@@ -4069,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;
@@ -4080,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;
@@ -4111,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;
 }
@@ -4126,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);
 }
 
@@ -4139,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;
@@ -4303,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;
@@ -4553,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);