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

package/src/@ui/UiToolbarStepper/UiToolbarStepper.scss

@@ -0,0 +1,53 @@
+// (C) 2026 GoodData Corporation
+
+@use "../UiToolbar/toolbarItem";
+
+.gd-ui-kit-toolbar-stepper {
+    $root: &;
+
+    display: inline-flex;
+    align-items: center;
+    gap: toolbarItem.$toolbar-item-gap;
+    box-sizing: border-box;
+    height: toolbarItem.$toolbar-item-size;
+    padding: 0 toolbarItem.$toolbar-item-padding;
+
+    &__value {
+        @include toolbarItem.toolbar-item-base;
+
+        --gd-icon-fill-color: var(--gd-palette-complementary-7);
+
+        min-width: 0;
+        color: var(--gd-palette-complementary-7);
+        text-align: center;
+        cursor: default;
+
+        &--isEditable {
+            // A constant width so the toolbar does not move while the value is typed or stepped.
+            // Fits four characters: percentages up to "100%" and whole numbers up to four digits.
+            width: calc(4.5ch + 2 * #{toolbarItem.$toolbar-item-padding});
+            text-align: center;
+            cursor: text;
+
+            @include toolbarItem.toolbar-focus-ring;
+
+            &:not([aria-disabled="true"]) {
+                &:hover {
+                    color: var(--gd-palette-complementary-8);
+                    background-color: var(--gd-palette-complementary-2);
+                }
+
+                &:active,
+                &#{$root}__value--isActive {
+                    color: var(--gd-palette-complementary-8);
+                    background-color: var(--gd-palette-complementary-4);
+                }
+            }
+
+            &[aria-disabled="true"] {
+                color: var(--gd-palette-complementary-4);
+                cursor: default;
+            }
+        }
+    }
+}

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