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

package/esm/utils/events.d.ts

@@ -2,6 +2,9 @@ import { type KeyboardEvent } from "react";
 /**
  * Checks if the given keyboard event is an action key = Enter or Space.
  *
+ * Both the produced character and the physical key are accepted, so it agrees with the navigation
+ * helpers in `@ui`, which match on `code`.
+ *
  * @param event - The keyboard event to check.
  * @returns `true` if the event is an action key, `false` otherwise.
  *

package/esm/utils/events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../src/utils/events.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,UAAW,aAAa,KAAG,OAElD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,UAAW,aAAa,KAAG,OAEjD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,UAAW,aAAa,KAAG,OAEjD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,UAAW,aAAa,KAAG,OAEjD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,UAAW,aAAa,KAAG,OAErD,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,UAAW,aAAa,KAAG,OASlD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,UAAW,aAAa,KAAG,OAElD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,UAAW,aAAa,KAAG,OAEhD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,UAAW,aAAa,KAAG,OAE/C,CAAC"}
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../src/utils/events.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,UAAW,aAAa,KAAG,OAElD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,UAAW,aAAa,KAAG,OAEjD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,UAAW,aAAa,KAAG,OAEjD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,UAAW,aAAa,KAAG,OAEjD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,UAAW,aAAa,KAAG,OAErD,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,UAAW,aAAa,KAAG,OASlD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,UAAW,aAAa,KAAG,OAElD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,UAAW,aAAa,KAAG,OAEhD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,UAAW,aAAa,KAAG,OAE/C,CAAC"}

package/esm/utils/events.js

@@ -2,13 +2,16 @@
 /**
  * Checks if the given keyboard event is an action key = Enter or Space.
  *
+ * Both the produced character and the physical key are accepted, so it agrees with the navigation
+ * helpers in `@ui`, which match on `code`.
+ *
  * @param event - The keyboard event to check.
  * @returns `true` if the event is an action key, `false` otherwise.
  *
  * @internal
  */
 export const isActionKey = (event) => {
-    return event.key === "Enter" || event.key === " ";
+    return event.key === "Enter" || event.key === " " || event.code === "Enter" || event.code === "Space";
 };
 /**
  * Checks if the given keyboard event is triggered by a Space key.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "11.57.0-alpha.3",
+  "version": "11.57.0-alpha.4",
   "description": "GoodData SDK - UI Building Components",
   "license": "MIT",
   "author": "GoodData Corporation",
@@ -79,11 +79,11 @@
     "unified": "^11.0.5",
     "uuid": "11.1.1",
     "yaml": "2.8.3",
-    "@gooddata/sdk-model": "11.57.0-alpha.3",
-    "@gooddata/sdk-backend-spi": "11.57.0-alpha.3",
-    "@gooddata/util": "11.57.0-alpha.3",
-    "@gooddata/sdk-ui-theme-provider": "11.57.0-alpha.3",
-    "@gooddata/sdk-ui": "11.57.0-alpha.3"
+    "@gooddata/sdk-model": "11.57.0-alpha.4",
+    "@gooddata/sdk-backend-spi": "11.57.0-alpha.4",
+    "@gooddata/sdk-ui-theme-provider": "11.57.0-alpha.4",
+    "@gooddata/sdk-ui": "11.57.0-alpha.4",
+    "@gooddata/util": "11.57.0-alpha.4"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "7.30.10",
@@ -111,13 +111,12 @@
     "eslint-plugin-no-barrel-files": "1.2.2",
     "eslint-plugin-no-only-tests": "3.3.0",
     "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-sonarjs": "3.0.6",
     "happy-dom": "20.12.0",
     "kefir": "3.8.8",
     "npm-run-all": "4.1.5",
     "oxfmt": "0.66.0",
-    "oxlint": "1.67.0",
+    "oxlint": "1.82.0",
     "oxlint-plugin-eslint": "1.82.0",
     "oxlint-tsgolint": "0.22.1",
     "raf": "3.4.1",
@@ -129,11 +128,11 @@
     "typescript": "7.0.2",
     "vitest": "4.1.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/eslint-config": "11.57.0-alpha.3",
-    "@gooddata/oxlint-config": "11.57.0-alpha.3",
-    "@gooddata/reference-workspace": "11.57.0-alpha.3",
-    "@gooddata/sdk-backend-mockingbird": "11.57.0-alpha.3",
-    "@gooddata/stylelint-config": "11.57.0-alpha.3"
+    "@gooddata/eslint-config": "11.57.0-alpha.4",
+    "@gooddata/sdk-backend-mockingbird": "11.57.0-alpha.4",
+    "@gooddata/oxlint-config": "11.57.0-alpha.4",
+    "@gooddata/stylelint-config": "11.57.0-alpha.4",
+    "@gooddata/reference-workspace": "11.57.0-alpha.4"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/@ui/UiAddGranteeDialog/UiAddGranteeDialog.scss

@@ -4,5 +4,13 @@
     display: flex;
     flex-direction: column;
     gap: var(--gd-spacing-10px);
+
+    // This card spaces its children with a gap of its own, which stacks with the shared
+    // header's bottom margin. Halve the margin so the two together come to the 20px the
+    // design puts between the header and the first content. Cards with no gap of their own
+    // (the confirm dialog, the report dialogs) keep the full margin and need no override.
+    .gd-ui-kit-dialog-header {
+        margin-bottom: var(--gd-spacing-10px);
+    }
     padding-bottom: var(--gd-spacing-5px);
 }

package/src/@ui/UiGranteeAsyncPicker/UiGranteeAsyncPicker.scss

@@ -9,12 +9,6 @@
         gap: var(--gd-spacing-5px);
     }
 
-    &__field-label {
-        font-size: 14px;
-        line-height: 21px;
-        color: var(--gd-palette-complementary-7);
-    }
-
     &__empty-state {
         min-height: 50px;
         display: flex;

package/src/@ui/UiGranteeRow/UiGranteeRow.scss

@@ -9,6 +9,11 @@
     padding: var(--gd-spacing-5px) 0;
     box-sizing: border-box;
 
+    // Row-wide hover highlight, the same one list items use elsewhere.
+    &:hover {
+        background: var(--gd-palette-complementary-2);
+    }
+
     // Muted while a change for this row is being saved (its controls are disabled too).
     &--pending {
         opacity: 0.6;

package/src/@ui/UiListbox/UiListbox.scss

@@ -81,7 +81,11 @@
     }
 
     &__item-title {
+        display: block;
         width: 100%;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
         white-space: nowrap;
     }
 

package/src/@ui/UiMenu/UiMenu.scss

@@ -201,8 +201,11 @@
     }
 
     &__item-title {
+        display: block;
         width: 100%;
         min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
         white-space: nowrap;
     }
 }

package/src/@ui/UiModalDialog/UiModalDialog.scss

@@ -32,7 +32,9 @@
 .gd-ui-kit-dialog-header {
     display: flex;
     align-items: center;
-    gap: var(--gd-spacing-15px);
+    // 10px between the leading slot (the back button) and the title, per the design.
+    // The title flexes, so this is also the minimum before the trailing close button.
+    gap: var(--gd-spacing-10px);
     margin-bottom: var(--gd-spacing-20px);
 
     &__leading {
@@ -41,6 +43,17 @@
         flex-shrink: 0;
     }
 
+    // The close button's 32px hit area is taller than the title's 23px line box. Left to
+    // stretch the row it would push the title down and the content below further away than
+    // the design places them, so pull the extra back at both ends. The target size itself
+    // is untouched: only the button's contribution to the row's height changes.
+    &__close {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+        margin-block: calc((23px - 32px) / 2);
+    }
+
     &__title {
         flex: 1 1 auto;
         min-width: 0;
@@ -52,8 +65,8 @@
         white-space: nowrap;
 
         &--size-default {
-            font-size: 18px;
-            line-height: 26px;
+            font-size: 17px;
+            line-height: 23px;
         }
 
         &--size-large {

package/src/@ui/UiObjectShareDialog/UiObjectShareDialog.scss

@@ -5,14 +5,53 @@
     flex-direction: column;
     gap: var(--gd-spacing-10px);
 
+    // This card spaces its children with a gap of its own, which stacks with the shared
+    // header's bottom margin. Halve the margin so the two together come to the 20px the
+    // design puts between the header and the first content. Cards with no gap of their own
+    // (the confirm dialog, the report dialogs) keep the full margin and need no override.
+    .gd-ui-kit-dialog-header {
+        margin-bottom: var(--gd-spacing-10px);
+    }
+
+    &__note {
+        // Stacks with the card's gap to set the note a design-standard 20px apart from the
+        // section below it, where the gap alone would leave it half that.
+        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;
+    }
+
+    &__note-prefix {
+        font-weight: 700;
+    }
+
     &__grantees {
         display: flex;
         flex-direction: column;
+        // Stacks with the card's gap to set the list 20px apart from the section that
+        // follows it, while the section heading above it keeps the tighter 10px.
+        padding-bottom: var(--gd-spacing-10px);
+    }
+
+    &__empty {
+        padding-block: var(--gd-spacing-10px);
+        color: var(--gd-palette-complementary-6);
+        font-size: 14px;
+        line-height: 20px;
+        text-align: center;
+
+        p {
+            margin: 0;
+        }
     }
 
     &__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;
     }

package/src/@ui/UiPermissionMenu/UiPermissionMenu.scss

@@ -30,9 +30,8 @@
         display: flex;
         align-items: stretch;
 
-        // Hover/focus highlight covers the full row (label button + adjacent
-        // tooltip-icon button), not just the label button. The two buttons
-        // are siblings — a partial highlight would look broken.
+        // Hover/focus highlight on the row wrapper, so it also covers the tooltip
+        // anchor wrapper a disabled row is nested in.
         &:hover,
         &:focus-within {
             background: var(--gd-palette-complementary-2);
@@ -70,6 +69,11 @@
         }
     }
 
+    // Explanations are sentences; keep them from stretching into one long line.
+    &__item-tooltip {
+        max-width: 220px;
+    }
+
     &__item-label {
         flex: 1 1 auto;
         min-width: 0;

package/src/@ui/UiToolbar/UiToolbar.scss

@@ -0,0 +1,15 @@
+// (C) 2026 GoodData Corporation
+
+@use "./toolbarItem";
+
+.gd-ui-kit-toolbar {
+    display: inline-flex;
+    align-items: center;
+    gap: toolbarItem.$toolbar-gap;
+    box-sizing: border-box;
+    padding: toolbarItem.$toolbar-padding;
+    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);
+}

package/src/@ui/UiToolbar/UiToolbarChevron.scss

@@ -0,0 +1,11 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-toolbar-chevron {
+    display: inline-flex;
+    flex-shrink: 0;
+    transition: var(--gd-transition-all);
+
+    &--isOpen {
+        transform: rotate(180deg);
+    }
+}

package/src/@ui/UiToolbar/toolbarItem.scss

@@ -0,0 +1,133 @@
+// (C) 2026 GoodData Corporation
+
+// Toolbar-only dimensions from the design library. They are not theme variables.
+$toolbar-item-size: 28px;
+$toolbar-item-padding: 4px;
+$toolbar-item-gap: 4px;
+$toolbar-padding: 8px;
+$toolbar-gap: 8px;
+$toolbar-icon-size-medium: 20px;
+$toolbar-icon-size-small: 14px;
+$toolbar-hit-area: 24px;
+
+@mixin toolbar-item-base {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: $toolbar-item-gap;
+    box-sizing: border-box;
+    height: $toolbar-item-size;
+    margin: 0;
+    padding: 0 $toolbar-item-padding;
+    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);
+}
+
+@mixin toolbar-focus-ring {
+    &:focus-visible {
+        box-shadow: inset 0 0 0 2px var(--gd-palette-primary-base);
+    }
+}
+
+// The toolbar colour ladder. `$root` is the block selector of the component.
+@mixin toolbar-item-ladder($root) {
+    --gd-icon-fill-color: var(--gd-palette-complementary-7);
+
+    color: var(--gd-palette-complementary-7);
+
+    @include toolbar-focus-ring;
+
+    &: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);
+        }
+
+        &:active,
+        &#{$root}--isActive {
+            --gd-icon-fill-color: var(--gd-palette-complementary-8);
+
+            color: var(--gd-palette-complementary-8);
+            background-color: var(--gd-palette-complementary-4);
+        }
+
+        &#{$root}--isSelected {
+            --gd-icon-fill-color: var(--gd-palette-primary-base);
+
+            color: var(--gd-palette-primary-base);
+            background-color: transparent;
+
+            &: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);
+            }
+
+            &:active,
+            &#{$root}--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);
+            }
+        }
+
+        &#{$root}--isDestructive {
+            &:hover {
+                --gd-icon-fill-color: var(--gd-palette-error-base);
+
+                color: var(--gd-palette-error-base);
+                background-color: var(--gd-palette-error-dimmed);
+            }
+
+            &:active,
+            &#{$root}--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);
+            }
+
+            &#{$root}--isSelected {
+                --gd-icon-fill-color: var(--gd-palette-error-base);
+
+                color: var(--gd-palette-error-base);
+                background-color: transparent;
+
+                &:hover {
+                    --gd-icon-fill-color: var(--gd-palette-error-base);
+
+                    color: var(--gd-palette-error-base);
+                    background-color: var(--gd-palette-error-dimmed);
+                }
+
+                &:active,
+                &#{$root}--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);
+                }
+            }
+        }
+    }
+
+    &[aria-disabled="true"] {
+        --gd-icon-fill-color: var(--gd-palette-complementary-4);
+
+        color: var(--gd-palette-complementary-5);
+        background-color: transparent;
+        cursor: default;
+    }
+}

package/src/@ui/UiToolbarButton/UiToolbarButton.scss

@@ -0,0 +1,15 @@
+// (C) 2026 GoodData Corporation
+
+@use "../UiToolbar/toolbarItem";
+
+.gd-ui-kit-toolbar-button {
+    $root: &;
+
+    @include toolbarItem.toolbar-item-base;
+    @include toolbarItem.toolbar-item-ladder($root);
+
+    &__label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}

package/src/@ui/UiToolbarColorSwatch/UiToolbarColorSwatch.scss

@@ -0,0 +1,66 @@
+// (C) 2026 GoodData Corporation
+
+@use "../UiToolbar/toolbarItem";
+
+.gd-ui-kit-toolbar-color-swatch {
+    $root: &;
+    $bar-height: 5px;
+    $glyph-size: 12px;
+
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    width: toolbarItem.$toolbar-icon-size-medium;
+    height: toolbarItem.$toolbar-icon-size-medium;
+    overflow: hidden;
+
+    &__fill {
+        position: relative;
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        background-color: var(--gd-palette-complementary-0);
+    }
+
+    &__transparent {
+        position: absolute;
+        inset: 0;
+        background: repeating-conic-gradient(var(--gd-palette-complementary-3) 0 25%, transparent 0 50%) 0 0 /
+            6px 6px;
+    }
+
+    &__glyph {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: $glyph-size;
+        height: $glyph-size;
+        font-family: var(--gd-font-family);
+        font-size: $glyph-size;
+        font-weight: 700;
+        line-height: 1;
+        color: currentColor;
+    }
+
+    &__bar {
+        box-sizing: border-box;
+        width: 100%;
+        height: $bar-height;
+        border-radius: var(--gd-button-borderRadius);
+        background-color: var(--gd-palette-primary-base);
+    }
+
+    &--hasBorder {
+        &#{$root}--variant-fill #{$root}__fill {
+            box-shadow: inset 0 0 0 1px var(--gd-palette-complementary-5);
+        }
+
+        &#{$root}--variant-text #{$root}__bar {
+            box-shadow: inset 0 0 0 1px var(--gd-palette-complementary-4);
+        }
+    }
+}

package/src/@ui/UiToolbarDivider/UiToolbarDivider.scss

@@ -0,0 +1,11 @@
+// (C) 2026 GoodData Corporation
+
+@use "../UiToolbar/toolbarItem";
+
+.gd-ui-kit-toolbar-divider {
+    flex-shrink: 0;
+    box-sizing: border-box;
+    width: 1px;
+    height: toolbarItem.$toolbar-item-size;
+    background-color: var(--gd-palette-complementary-3);
+}

package/src/@ui/UiToolbarIconButton/UiToolbarIconButton.scss

@@ -0,0 +1,30 @@
+// (C) 2026 GoodData Corporation
+
+@use "../UiToolbar/toolbarItem";
+
+.gd-ui-kit-toolbar-icon-button {
+    $root: &;
+
+    @include toolbarItem.toolbar-item-base;
+    @include toolbarItem.toolbar-item-ladder($root);
+
+    position: relative;
+    flex-shrink: 0;
+
+    &--size-medium {
+        width: toolbarItem.$toolbar-item-size;
+    }
+
+    &--size-small {
+        width: toolbarItem.$toolbar-icon-size-small;
+        height: toolbarItem.$toolbar-icon-size-small;
+        padding: 0;
+
+        // The visible box is 14px; the pointer target is widened to 24px.
+        &::before {
+            content: "";
+            position: absolute;
+            inset: calc((toolbarItem.$toolbar-icon-size-small - toolbarItem.$toolbar-hit-area) / 2);
+        }
+    }
+}

package/src/@ui/UiToolbarIconSelect/UiToolbarIconSelect.scss

@@ -0,0 +1,12 @@
+// (C) 2026 GoodData Corporation
+
+@use "../UiToolbar/toolbarItem";
+
+.gd-ui-kit-toolbar-icon-select {
+    $root: &;
+
+    @include toolbarItem.toolbar-item-base;
+    @include toolbarItem.toolbar-item-ladder($root);
+
+    flex-shrink: 0;
+}

package/src/@ui/UiToolbarSegmentedControl/UiToolbarSegmentedControl.scss

@@ -0,0 +1,10 @@
+// (C) 2026 GoodData Corporation
+
+@use "../UiToolbar/toolbarItem";
+
+.gd-ui-kit-toolbar-segmented-control {
+    display: inline-flex;
+    align-items: center;
+    gap: 0;
+    height: toolbarItem.$toolbar-item-size;
+}

package/src/@ui/UiToolbarSelect/UiToolbarSelect.scss

@@ -0,0 +1,29 @@
+// (C) 2026 GoodData Corporation
+
+@use "../UiToolbar/toolbarItem";
+
+.gd-ui-kit-toolbar-select {
+    $root: &;
+    $fixed-width: 240px;
+
+    @include toolbarItem.toolbar-item-base;
+    @include toolbarItem.toolbar-item-ladder($root);
+
+    justify-content: flex-start;
+
+    &--width-fixed {
+        width: $fixed-width;
+    }
+
+    &__label {
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-align: left;
+    }
+
+    &--isPlaceholder:not([aria-disabled="true"]) #{$root}__label {
+        color: var(--gd-palette-complementary-6);
+    }
+}

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;
+            }
+        }
+    }
+}