@gooddata/sdk-ui-kit 11.55.0-alpha.1 → 11.55.0-alpha.3

package/esm/sdk-ui-kit.d.ts

@@ -87,6 +87,7 @@ import { OnError } from '@gooddata/sdk-ui';
 import { OnLoadingChanged } from '@gooddata/sdk-ui';
 import { ParameterValue } from '@gooddata/sdk-model';
 import { Placement } from '@floating-ui/react';
+import { PointerEvent as PointerEvent_2 } from 'react';
 import { PrimitiveType } from 'react-intl';
 import { PropsWithChildren } from 'react';
 import { PropsWithoutRef } from 'react';
@@ -2720,7 +2721,7 @@ export declare function IconTreeMap({ className, width, height, color, ariaHidde
 /**
  * @internal
  */
-export declare type IconType = "aiAgent" | "aiAgentDisabled" | "brain" | "brainDisabled" | "check" | "checkCircle" | "certification" | "plus" | "plusCircle" | "sync" | "alert" | "alertPaused" | "close" | "cross" | "edit" | "crossCircle" | "question" | "chevronUp" | "chevronRight" | "chevronDown" | "chevronLeft" | "date" | "navigateUp" | "navigateDown" | "navigateRight" | "navigateLeft" | "download" | "slack" | "expand" | "exclamationCircle" | "infoCircle" | "book" | "visible" | "invisible" | "lock" | "unlock" | "ai" | "aiFill" | "drawer" | "drawerEmpty" | "prohibited" | "dropDown" | "dropRight" | "clock" | "clockPaused" | "questionMark" | "upload" | "expandRectangle" | "file" | "number" | "code" | "user" | "userPlus" | "users" | "magic" | "tab" | "pauseCircle" | "filter" | "timer" | "mail" | "envelope" | "copy" | "rain" | "earth" | "geoCollection" | "geoCollectionUpload" | "minimize" | "shrink" | "copyright" | "ellipsis" | "pencil" | "folder" | "folderSmall" | "folderPlus" | "trash" | "arrowUp" | "arrowRight" | "arrowDown" | "arrowLeft" | "undo" | "redo" | "trendDown" | "trendUp" | "save" | "minus" | "minusCircle" | "percent" | "enter" | "enterRight" | "money" | "ghost" | "warning" | "home" | "settings" | "search" | "university" | "building" | "printer" | "picture" | "visualization" | "dashboard" | "metric" | "fact" | "ldmAttribute" | "ldmKey" | "ldmLabel" | "sharp" | "attribute" | "horn" | "cw" | "ccw" | "table" | "directionColumn" | "directionRow" | "header" | "genai" | "genai2" | "explainai" | "hiddenForAi" | "box" | "ellipsisVertical" | "list" | "drillTo" | "hierarchy" | "history" | "history2" | "thumbsUp" | "thumbsDown" | "send" | "visualizationArea" | "visualizationTable" | "visualizationTreemap" | "visualizationScatter" | "visualizationDonut" | "visualizationHeadline" | "visualizationColumn" | "visualizationLine" | "visualizationPyramid" | "visualizationFunnel" | "visualizationHeatmap" | "visualizationBubble" | "visualizationPie" | "visualizationBar" | "visualizationCombo" | "visualizationBullet" | "visualizationWaterfall" | "visualizationDependencywheel" | "visualizationSankey" | "visualizationPushpin" | "visualizationRepeater" | "visualizationXirr" | "link" | "externalLink" | "click" | "fileXlsx" | "filePptx" | "filePdf" | "fileImage" | "fileCsvFormatted" | "fileCsvRaw" | "aiDocument" | "recommendation" | "streamUp" | "streamDown" | "stream" | "density" | "parameter" | "pin" | "unpin" | "speechBubble" | "pieChart" | "timezone";
+export declare type IconType = "aiAgent" | "aiAgentDisabled" | "brain" | "brainDisabled" | "check" | "checkCircle" | "certification" | "plus" | "plusCircle" | "sync" | "alert" | "alertPaused" | "close" | "cross" | "edit" | "crossCircle" | "question" | "chevronUp" | "chevronRight" | "chevronDown" | "chevronLeft" | "date" | "navigateUp" | "navigateDown" | "navigateRight" | "navigateLeft" | "download" | "slack" | "expand" | "exclamationCircle" | "infoCircle" | "book" | "visible" | "invisible" | "lock" | "unlock" | "ai" | "aiFill" | "drawer" | "drawerEmpty" | "prohibited" | "dropDown" | "dropRight" | "clock" | "clockPaused" | "questionMark" | "upload" | "expandRectangle" | "file" | "number" | "code" | "user" | "userPlus" | "users" | "magic" | "tab" | "pauseCircle" | "filter" | "timer" | "mail" | "envelope" | "copy" | "rain" | "earth" | "geoCollection" | "geoCollectionUpload" | "minimize" | "shrink" | "copyright" | "ellipsis" | "pencil" | "folder" | "folderSmall" | "folderPlus" | "trash" | "arrowUp" | "arrowRight" | "arrowDown" | "arrowLeft" | "undo" | "redo" | "trendDown" | "trendUp" | "save" | "minus" | "minusCircle" | "percent" | "enter" | "enterRight" | "money" | "ghost" | "warning" | "home" | "settings" | "search" | "university" | "building" | "printer" | "picture" | "visualization" | "dashboard" | "metric" | "fact" | "ldmAttribute" | "ldmKey" | "ldmLabel" | "sharp" | "attribute" | "horn" | "cw" | "ccw" | "table" | "directionColumn" | "directionRow" | "alignLeft" | "alignCenter" | "alignRight" | "alignTop" | "alignMiddle" | "alignBottom" | "imageContain" | "imageCover" | "imageFill" | "header" | "genai" | "genai2" | "explainai" | "hiddenForAi" | "box" | "ellipsisVertical" | "list" | "drillTo" | "hierarchy" | "history" | "history2" | "thumbsUp" | "thumbsDown" | "send" | "visualizationArea" | "visualizationTable" | "visualizationTreemap" | "visualizationScatter" | "visualizationDonut" | "visualizationHeadline" | "visualizationColumn" | "visualizationLine" | "visualizationPyramid" | "visualizationFunnel" | "visualizationHeatmap" | "visualizationBubble" | "visualizationPie" | "visualizationBar" | "visualizationCombo" | "visualizationBullet" | "visualizationWaterfall" | "visualizationDependencywheel" | "visualizationSankey" | "visualizationPushpin" | "visualizationRepeater" | "visualizationXirr" | "link" | "externalLink" | "click" | "fileXlsx" | "filePptx" | "filePdf" | "fileImage" | "fileCsvFormatted" | "fileCsvRaw" | "aiDocument" | "recommendation" | "streamUp" | "streamDown" | "stream" | "density" | "parameter" | "pin" | "unpin" | "speechBubble" | "pieChart" | "timezone";
 
 /**
  * @internal
@@ -5349,6 +5350,17 @@ export declare interface IParameterPickerProps {
     onCancel: () => void;
 }
 
+/**
+ * @internal
+ */
+export declare interface IPointerTrackHandlers {
+    onPointerDown: (event: PointerEvent_2<HTMLElement>) => void;
+    onPointerMove: (event: PointerEvent_2<HTMLElement>) => void;
+    onPointerUp: (event: PointerEvent_2<HTMLElement>) => void;
+    onPointerCancel: (event: PointerEvent_2<HTMLElement>) => void;
+    onLostPointerCapture: (event: PointerEvent_2<HTMLElement>) => void;
+}
+
 /**
  * @internal
  */
@@ -7048,6 +7060,9 @@ export declare interface IUiChipAccessibilityConfig extends IAccessibilityConfig
     deleteAriaLabel?: string;
     deleteAriaDescribedBy?: string;
     iconBeforeAriaLabel?: string;
+    iconAfterAriaLabel?: string;
+    actionAriaLabel?: string;
+    actionAriaDescribedBy?: string;
 }
 
 /**
@@ -7057,23 +7072,103 @@ export declare interface IUiChipProps {
     label: string;
     tag?: string;
     isDeletable?: boolean;
+    isActionable?: boolean;
     isActive?: boolean;
     isLocked?: boolean;
     isExpandable?: boolean;
     isDisabled?: boolean;
     maxWidth?: number;
+    iconAction?: IconType;
     iconBefore?: IconType;
     iconAfter?: IconType;
     iconColor?: ThemeColor | "currentColor";
+    variant?: "normal" | "inactive";
     onClick?: () => void;
     onDelete?: () => void;
     onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
     onDeleteKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+    onAction?: () => void;
+    onActionKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
     accessibilityConfig?: IUiChipAccessibilityConfig;
     dataTestId?: string;
     buttonRef?: MutableRefObject<HTMLButtonElement>;
     renderChipContent?: (content: ReactNode) => ReactNode;
-    renderDeleteButton?: (button: ReactNode) => ReactNode;
+    renderActionButton?: (button: ReactNode) => ReactNode;
+}
+
+/**
+ * What every picker takes, whichever way it reports the color it gathers.
+ *
+ * @internal
+ */
+export declare interface IUiColorPickerBaseProps {
+    /**
+     * The color to start from. The picker follows it when it changes.
+     *
+     * @remarks
+     * Never feed the picker the color it just reported: read in again it loses the hue that a gray,
+     * black or white cannot carry, and the handle jumps off the wheel mid-drag. A caller applying
+     * changes live should hold the color it seeds the picker with apart from the one it stores.
+     */
+    initialRgbColor: IUiColorPickerRgb | IUiColorPickerRgba;
+    /**
+     * Adds an opacity control and lets the reported color carry one.
+     *
+     * @remarks
+     * Off by default: a consumer that stores a color without an opacity would drop the one the user
+     * had set, without saying so.
+     */
+    supportsAlpha?: boolean;
+}
+
+/**
+ * A picker that gathers a color and reports it once, when confirmed.
+ *
+ * @internal
+ */
+export declare interface IUiColorPickerCommitProps extends IUiColorPickerBaseProps {
+    onSubmit: (color: IUiColorPickerRgba) => void;
+    /**
+     * Dismisses the picker, leaving the color as it was.
+     */
+    onCancel: () => void;
+    onChange?: never;
+}
+
+/**
+ * A picker that reports every change as it is made, and so has nothing to confirm or take back: the
+ * color is already applied, and going back from it is the caller's to offer.
+ *
+ * @internal
+ */
+export declare interface IUiColorPickerLiveProps extends IUiColorPickerBaseProps {
+    onChange: (color: IUiColorPickerRgba) => void;
+    onSubmit?: never;
+}
+
+/**
+ * @internal
+ */
+export declare type IUiColorPickerProps = IUiColorPickerCommitProps | IUiColorPickerLiveProps;
+
+/**
+ * Channels, each 0 to 255.
+ *
+ * @internal
+ */
+export declare interface IUiColorPickerRgb {
+    r: number;
+    g: number;
+    b: number;
+}
+
+/**
+ * Channels, each 0 to 255, with opacity from 0 (transparent) to 1 (opaque).
+ *
+ * @internal
+ */
+export declare interface IUiColorPickerRgba extends IUiColorPickerRgb {
+    a: number;
 }
 
 /** @internal */
@@ -7686,6 +7781,23 @@ export declare interface IUiFloatingElementProps {
     strategy?: Strategy;
     offset?: OffsetOptions;
     autoFlip?: boolean;
+    /**
+     * Whether the floating element may slide over its anchor to stay in view.
+     *
+     * @remarks
+     * By default it only slides along the side it is placed on. An anchor taller than the viewport
+     * has room on neither side, which leaves the element off the screen.
+     */
+    allowOverlapAnchor?: boolean;
+    /**
+     * Element the floating element is kept inside of, instead of the window.
+     *
+     * @remarks
+     * The portal puts it outside whatever the anchor scrolls in, so by default only the window
+     * constrains it. Pass the element rather than its rect, so the position is measured again as
+     * the element moves.
+     */
+    overflowBoundary?: Element;
     closeOnOutsideClick?: boolean;
     closeOnEscape?: boolean;
     closeOnParentScroll?: boolean;
@@ -9629,6 +9741,8 @@ export declare interface IUseFloatingPositionOptions {
     strategy?: Strategy;
     offset?: OffsetOptions;
     autoFlip?: boolean;
+    allowOverlapAnchor?: boolean;
+    overflowBoundary?: Element;
     fallbackPlacements?: Placement[];
     arrowRef?: RefObject<SVGSVGElement | null>;
     customMiddleware?: Middleware[];
@@ -11020,7 +11134,12 @@ export declare function UiCheckbox({ checked, onChange, preventDefault, stopProp
 /**
  * @internal
  */
-export declare function UiChip({ label, tag, isDeletable, isActive, isLocked, isExpandable, isDisabled, maxWidth, iconBefore, iconAfter, iconColor, onClick, onDelete, onKeyDown, onDeleteKeyDown, accessibilityConfig, dataTestId, buttonRef, renderChipContent, renderDeleteButton }: IUiChipProps): JSX.Element;
+export declare function UiChip({ label, tag, isDeletable, isActionable, isActive, isLocked, isExpandable, isDisabled, maxWidth, iconBefore, iconAfter, iconColor, onClick, onKeyDown, onDelete, onDeleteKeyDown, onAction, onActionKeyDown, accessibilityConfig, dataTestId, buttonRef, iconAction, variant, renderChipContent, renderActionButton }: IUiChipProps): JSX.Element;
+
+/**
+ * @internal
+ */
+export declare function UiColorPicker(props: IUiColorPickerProps): JSX.Element;
 
 /**
  * A composable combobox component that enables users to select from a filtered list of options.
@@ -11225,7 +11344,7 @@ export declare function UiErrorPage({ title, description, dataTestId, accessibil
  *
  * @internal
  */
-export declare function UiFloatingElement({ children, anchor, isOpen, onClose, placement, alignPoints, strategy, offset, autoFlip, closeOnOutsideClick, closeOnEscape, closeOnParentScroll, closeOnMouseDrag, ignoreClicksOn, shouldCloseOnClick, zIndex: zIndexProp, className, contentClassName, style, width, maxWidth, maxHeight, accessibilityConfig, onPlacementChange }: IUiFloatingElementProps): JSX.Element | null;
+export declare function UiFloatingElement({ children, anchor, isOpen, onClose, placement, alignPoints, strategy, offset, autoFlip, allowOverlapAnchor, overflowBoundary, closeOnOutsideClick, closeOnEscape, closeOnParentScroll, closeOnMouseDrag, ignoreClicksOn, shouldCloseOnClick, zIndex: zIndexProp, className, contentClassName, style, width, maxWidth, maxHeight, accessibilityConfig, onPlacementChange }: IUiFloatingElementProps): JSX.Element | null;
 
 /**
  * `UiFloatingElement` plus the kit's canonical popup chrome (background,
@@ -11874,7 +11993,7 @@ export declare function useFileSelection({ rules, multiple, onValidateFile, onFi
  *
  * @internal
  */
-export declare function useFloatingPosition({ isOpen, onOpenChange, placement: placementProp, alignPoints, strategy, offset: offsetProp, autoFlip, fallbackPlacements: fallbackPlacementsProp, arrowRef, customMiddleware, maxWidth, maxHeight, zIndex: zIndexProp, shiftPadding }: IUseFloatingPositionOptions): IUseFloatingPositionResult;
+export declare function useFloatingPosition({ isOpen, onOpenChange, placement: placementProp, alignPoints, strategy, offset: offsetProp, autoFlip, allowOverlapAnchor, overflowBoundary, fallbackPlacements: fallbackPlacementsProp, arrowRef, customMiddleware, maxWidth, maxHeight, zIndex: zIndexProp, shiftPadding }: IUseFloatingPositionOptions): IUseFloatingPositionResult;
 
 /**
  * @internal
@@ -12065,6 +12184,18 @@ export declare const useOverlayZIndex: (uuid: string) => number | undefined;
  */
 export declare function useOverlayZIndexWithRegister(): number;
 
+/**
+ * Follows a press and everything it drags through.
+ *
+ * @remarks
+ * The handlers must be spread on the element the gesture is measured against: they report
+ * `currentTarget`, and a caller that reads a child's or a parent's size instead will place the value
+ * somewhere the pointer is not.
+ *
+ * @internal
+ */
+export declare function usePointerTrack(track: (event: PointerEvent_2<HTMLElement>) => void): IPointerTrackHandlers;
+
 /**
  * Hook to consume responsive context.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "11.55.0-alpha.1",
+  "version": "11.55.0-alpha.3",
   "description": "GoodData SDK - UI Building Components",
   "license": "MIT",
   "author": "GoodData Corporation",
@@ -51,7 +51,7 @@
     "@lezer/highlight": "~1.2.3",
     "@tanstack/react-virtual": "^3.11.1",
     "@types/mdast": "^4.0.4",
-    "@types/unist": "^3.0.3",
+    "@types/unist": "3.0.3",
     "classnames": "2.5.1",
     "copy-to-clipboard": "^3.3.3",
     "cron-parser": "5.9.0",
@@ -78,11 +78,11 @@
     "unified": "^11.0.5",
     "uuid": "11.1.1",
     "yaml": "2.8.3",
-    "@gooddata/sdk-backend-spi": "11.55.0-alpha.1",
-    "@gooddata/sdk-model": "11.55.0-alpha.1",
-    "@gooddata/sdk-ui-theme-provider": "11.55.0-alpha.1",
-    "@gooddata/util": "11.55.0-alpha.1",
-    "@gooddata/sdk-ui": "11.55.0-alpha.1"
+    "@gooddata/sdk-backend-spi": "11.55.0-alpha.3",
+    "@gooddata/sdk-model": "11.55.0-alpha.3",
+    "@gooddata/sdk-ui": "11.55.0-alpha.3",
+    "@gooddata/sdk-ui-theme-provider": "11.55.0-alpha.3",
+    "@gooddata/util": "11.55.0-alpha.3"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "7.30.10",
@@ -106,10 +106,8 @@
     "@vitest/eslint-plugin": "1.6.19",
     "dependency-cruiser": "17.3.10",
     "eslint": "^9.39.2",
-    "eslint-import-resolver-typescript": "4.4.4",
     "eslint-plugin-headers": "1.3.3",
     "eslint-plugin-import-esm": "1.2.1",
-    "eslint-plugin-import-x": "4.16.1",
     "eslint-plugin-jsdoc": "62.1.0",
     "eslint-plugin-no-barrel-files": "1.2.2",
     "eslint-plugin-no-only-tests": "3.3.0",
@@ -120,7 +118,7 @@
     "kefir": "3.8.8",
     "npm-run-all": "4.1.5",
     "oxfmt": "0.52.0",
-    "oxlint": "1.51.0",
+    "oxlint": "1.57.0",
     "oxlint-tsgolint": "0.15.0",
     "raf": "3.4.1",
     "react": "19.1.1",
@@ -131,11 +129,11 @@
     "typescript": "5.9.3",
     "vitest": "4.1.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/eslint-config": "11.55.0-alpha.1",
-    "@gooddata/oxlint-config": "11.55.0-alpha.1",
-    "@gooddata/reference-workspace": "11.55.0-alpha.1",
-    "@gooddata/sdk-backend-mockingbird": "11.55.0-alpha.1",
-    "@gooddata/stylelint-config": "11.55.0-alpha.1"
+    "@gooddata/eslint-config": "11.55.0-alpha.3",
+    "@gooddata/reference-workspace": "11.55.0-alpha.3",
+    "@gooddata/oxlint-config": "11.55.0-alpha.3",
+    "@gooddata/sdk-backend-mockingbird": "11.55.0-alpha.3",
+    "@gooddata/stylelint-config": "11.55.0-alpha.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/@ui/UiChip/UiChip.scss

@@ -7,9 +7,13 @@ $box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-complement
 
 $active-background-color: var(--gd-palette-complementary-2);
 
-$action-border-color: var(--gd-palette-error-base-t50);
-$action-background-color: var(--gd-palette-error-lightest);
-$action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-error-base-t50) inset;
+$delete-border-color: var(--gd-palette-error-base-t50);
+$delete-background-color: var(--gd-palette-error-lightest);
+$delete-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-error-base-t50) inset;
+
+$action-border-color: var(--gd-palette-complementary-4);
+$action-background-color: var(--gd-palette-complementary-2);
+$action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-complementary-5-t40) inset;
 
 .gd-ui-kit-chip {
     $root: &;
@@ -50,6 +54,15 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
         #{$root}__trigger--isDeletable:not(:disabled) {
             border-right: 1px solid $border-color;
         }
+        #{$root}__trigger--isDeletable#{$root}__trigger--variant-inactive:not(:disabled) {
+            border-right: 1px dashed $border-color;
+        }
+        #{$root}__trigger--isActionable:not(:disabled) {
+            border-right: 1px solid $border-color;
+        }
+        #{$root}__trigger--isActionable#{$root}__trigger--variant-inactive:not(:disabled) {
+            border-right: 1px dashed $border-color;
+        }
 
         &:has(#{$root}__trigger--isLocked:hover) {
             &::after {
@@ -64,45 +77,94 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
     }
 
     &:has(#{$root}__delete:hover) {
+        border-color: $delete-border-color;
+        background-color: $delete-background-color;
+
+        &::after {
+            box-shadow: $delete-box-shadow;
+        }
+
+        #{$root}__trigger:not(#{$root}__trigger--isLocked:disabled) {
+            border-color: $delete-border-color;
+            border-right: 1px solid $delete-border-color;
+        }
+        #{$root}__trigger#{$root}__trigger--variant-inactive:not(#{$root}__trigger--isLocked:disabled) {
+            border-right: 1px dashed $delete-border-color;
+        }
+
+        #{$root}__trigger--isActive {
+            background-color: $delete-background-color;
+        }
+    }
+
+    &:has(#{$root}__action:hover) {
         border-color: $action-border-color;
         background-color: $action-background-color;
 
         &::after {
-            content: "";
-            border-radius: inherit;
             box-shadow: $action-box-shadow;
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            left: 0;
-            top: 0;
-            pointer-events: none;
         }
 
         #{$root}__trigger:not(#{$root}__trigger--isLocked:disabled) {
             border-color: $action-border-color;
             border-right: 1px solid $action-border-color;
         }
+        #{$root}__trigger#{$root}__trigger--variant-inactive:not(#{$root}__trigger--isLocked:disabled) {
+            border-right: 1px dashed $action-border-color;
+        }
 
         #{$root}__trigger--isActive {
             background-color: $action-background-color;
         }
+    }
+
+    &:has(#{$root}__delete:hover),
+    &:has(#{$root}__action:hover) {
+        &::after {
+            content: "";
+            border-radius: inherit;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            top: 0;
+            pointer-events: none;
+        }
 
         #{$root}__delete {
             color: var(--gd-palette-error-base);
         }
+        #{$root}__action {
+            color: var(--gd-palette-complementary-2);
+        }
+    }
+
+    &--variant-inactive {
+        border-style: dashed;
     }
 
     #{$root}__trigger--isDeletable {
         border-right: 1px solid transparent;
     }
-
+    #{$root}__trigger--isDeletable#{$root}__trigger--variant-inactive {
+        border-right: 1px dashed transparent;
+    }
     #{$root}__trigger--hasIconAfter#{$root}__trigger--isDeletable {
         padding-right: 3px;
     }
+    #{$root}__trigger--isActionable {
+        border-right: 1px solid transparent;
+    }
+    #{$root}__trigger--isActionable#{$root}__trigger--variant-inactive {
+        border-right: 1px dashed transparent;
+    }
+    #{$root}__trigger--hasIconAfter#{$root}__trigger--isActionable {
+        padding-right: 3px;
+    }
 
     &__trigger,
-    &__delete {
+    &__delete,
+    &__action {
         color: var(--gd-palette-complementary-7);
         background-color: transparent;
         border-radius: var(--gd-button-borderRadius);
@@ -129,11 +191,19 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
         border-radius: $border-radius 0 0 $border-radius;
         border-right: 1px solid transparent;
 
+        &--variant-inactive {
+            border-right: 1px dashed transparent;
+            color: var(--gd-palette-complementary-6);
+        }
+
         &--isActive {
             color: var(--gd-palette-complementary-8);
             background-color: $active-background-color;
             border-right: 1px solid $border-color;
         }
+        &--isActive#{$root}__trigger--variant-inactive {
+            border-right: 1px dashed $border-color;
+        }
 
         &--isLocked {
             cursor: default;
@@ -147,7 +217,7 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
             }
         }
 
-        &:not(&:disabled) {
+        &:not(&:disabled):not(#{$root}__trigger--variant-inactive) {
             &:hover,
             &:focus,
             &:active {
@@ -159,7 +229,7 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
             }
         }
 
-        &:not(&--isDeletable) {
+        &:not(&--isDeletable):not(&--isActionable) {
             border-radius: $border-radius;
             border: none;
         }
@@ -183,6 +253,24 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
         }
     }
 
+    &__action {
+        flex-shrink: 0;
+        border-radius: 0 $border-radius $border-radius 0;
+        padding: 0 7px 0 3px;
+
+        &:not(&:disabled) {
+            &:hover,
+            &:focus,
+            &:active {
+                svg {
+                    color: var(--gd-palette-complementary-2);
+                }
+
+                color: var(--gd-palette-complementary-8);
+            }
+        }
+    }
+
     &__label {
         transition: var(--gd-transition-all);
         white-space: nowrap;
@@ -242,4 +330,11 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
         justify-content: center;
         transition: var(--gd-transition-all);
     }
+
+    &__icon-action {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: var(--gd-transition-all);
+    }
 }

package/src/@ui/UiColorPicker/UiColorPicker.scss

@@ -0,0 +1,120 @@
+// (C) 2007-2026 GoodData Corporation
+
+.gd-ui-kit-color-picker {
+    --color-picker-handle: 14px;
+
+    width: 200px;
+    padding: 15px;
+}
+
+// Hue runs around the wheel and saturation out from the middle, which the geometry in UiColorWheel.tsx
+// reads back. The two agree only because the conic gradient starts where the screen angle is
+// measured from - at 3 o'clock, running clockwise - so a gradient position is a hue is an angle.
+//
+// Painted at a fixed lightness, not the one being edited: at either extreme every hue renders the
+// same white or black, and a wheel that followed it would leave nothing to aim at.
+.gd-ui-kit-color-picker__wheel {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1;
+    margin-bottom: 15px;
+    border-radius: 50%;
+    cursor: crosshair;
+    // Without this a drag on a touch screen scrolls the page instead of picking a color.
+    touch-action: none;
+    user-select: none;
+    background:
+        radial-gradient(circle closest-side, hsl(0deg 0% 50%) 0%, transparent 100%),
+        conic-gradient(
+            from 90deg,
+            hsl(0deg 100% 50%),
+            hsl(60deg 100% 50%),
+            hsl(120deg 100% 50%),
+            hsl(180deg 100% 50%),
+            hsl(240deg 100% 50%),
+            hsl(300deg 100% 50%),
+            hsl(360deg 100% 50%)
+        );
+
+    &:focus-visible {
+        outline: 2px solid var(--gd-palette-primary-base);
+        outline-offset: 2px;
+    }
+}
+
+.gd-ui-kit-color-picker__slider {
+    position: relative;
+    height: var(--color-picker-handle);
+    margin-bottom: 15px;
+    border-radius: calc(var(--color-picker-handle) / 2);
+    cursor: pointer;
+    touch-action: none;
+    // A drag would otherwise select the labels around the control and show an I-beam over it.
+    user-select: none;
+    // Shows through wherever a track is not fully opaque, which is what marks it as see-through.
+    background: repeating-conic-gradient(
+            var(--gd-palette-complementary-2) 0% 25%,
+            var(--gd-palette-complementary-0) 0% 50%
+        )
+        50% / 8px 8px;
+
+    &:focus-visible {
+        outline: 2px solid var(--gd-palette-primary-base);
+        outline-offset: 2px;
+    }
+}
+
+.gd-ui-kit-color-picker__slider-track {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+}
+
+// Placed by its middle, which is what the positions the controls set mean. The border counts
+// towards its size, or the offset that centres it would be short by the border on each side.
+.gd-ui-kit-color-picker__wheel-thumb,
+.gd-ui-kit-color-picker__slider-thumb {
+    position: absolute;
+    box-sizing: border-box;
+    width: var(--color-picker-handle);
+    height: var(--color-picker-handle);
+    margin: calc(var(--color-picker-handle) / -2) 0 0 calc(var(--color-picker-handle) / -2);
+    border: 2px solid var(--gd-palette-complementary-0);
+    border-radius: 50%;
+    box-shadow: 0 0 2px var(--gd-palette-complementary-6);
+    // The handle only reports where the value is; the gesture belongs to the control under it.
+    pointer-events: none;
+}
+
+.gd-ui-kit-color-picker__slider-thumb {
+    top: 50%;
+    // Stops half a handle short of each end, so it stays inside the track it reads against.
+    left: calc(
+        var(--color-picker-handle) / 2 + (100% - var(--color-picker-handle)) *
+            var(--color-picker-slider-position)
+    );
+}
+
+.gd-ui-kit-color-picker__value {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+
+    // A text input asks for a width of its own and a flex item will not shrink below what it asks
+    // for, so without this the notation button is pushed out of the panel.
+    .gd-ui-kit-text-input {
+        flex: 1;
+        min-width: 0;
+    }
+}
+
+.gd-ui-kit-color-picker__actions {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 15px 0 0;
+
+    .gd-ui-kit-button {
+        flex: 1;
+    }
+}

package/src/@ui/index.scss

@@ -8,6 +8,7 @@
 @use "./UiSkeleton/UiSkeleton.scss";
 @use "./UiPagedVirtualList/UiPagedVirtualList.scss";
 @use "./UiChip/UiChip.scss";
+@use "./UiColorPicker/UiColorPicker.scss";
 @use "./UiControlButton/UiControlButton.scss";
 @use "./UiCombobox/UiCombobox.scss";
 @use "./UiAutocomplete/UiAutocomplete.scss";