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

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

@@ -2598,7 +2598,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" | "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" | "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";
+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" | "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";
 
 /**
  * @internal
@@ -5949,6 +5949,16 @@ export declare interface ISingleSelectListItemProps {
     dataTestId?: string;
 }
 
+/**
+ * Predicate the picker uses to decide whether an item is effectively selected:
+ * locked items always count as selected, otherwise membership in the staged
+ * `selected` set. Exported so consumers (e.g. the grantee row counter) can
+ * apply the same rule without re-encoding it.
+ *
+ * @internal
+ */
+export declare const isLabelsPickerItemChecked: (item: IUiLabelsPickerItem, selectedIds: readonly string[]) => boolean;
+
 /**
  * @internal
  */
@@ -6602,6 +6612,12 @@ export declare interface IUiCheckboxProps {
     accessibilityConfig?: IAccessibilityConfigBase;
     tabIndex?: number;
     label?: string;
+    /**
+     * Id set on the native input. When omitted a stable id is generated.
+     * Pass an explicit id when an ancestor renders its own
+     * `<label htmlFor={id}>` so the two stay associated.
+     */
+    id?: string;
 }
 
 /**
@@ -7162,6 +7178,28 @@ export declare interface IUiGranteeAvatarProps {
     dataTestId?: string;
 }
 
+/**
+ * @internal
+ */
+export declare interface IUiGranteeRowControlsProps {
+    /** All labels available on the parent attribute. */
+    labels: ReadonlyArray<IUiLabelsPickerItem>;
+    /** Currently selected label ids. Locked items are always treated as selected. */
+    selectedLabelIds: ReadonlyArray<string>;
+    /** Current permission level for the grantee. */
+    permissionLevel: PermissionMenuLevel;
+    /** Fires when the labels picker commits a new selection. */
+    onLabelsChange: (selectedIds: string[]) => void;
+    /** Fires when the user picks a new permission level. */
+    onPermissionChange: (level: PermissionMenuLevel) => void;
+    /** Fires when the user picks Transfer ownership in the permission menu. */
+    onTransferOwnership?: () => void;
+    /** Fires when the user picks Remove access in the permission menu. */
+    onRemoveAccess?: () => void;
+    /** Test id forwarded to the root element. */
+    dataTestId?: string;
+}
+
 /**
  * @internal
  */
@@ -7255,6 +7293,135 @@ export declare interface IUiInlineTextGeneratorResult {
     text: string;
 }
 
+/**
+ * @internal
+ */
+export declare interface IUiLabelChecklistRowProps {
+    /** Label text. */
+    label: string;
+    /** Determines the leading icon. Omit for a generic label icon. */
+    kind?: LabelRowKind;
+    /** Optional trailing suffix passed through to `UiLabelRow`. */
+    suffix?: string;
+    /** Whether the label is selected for inclusion. */
+    checked: boolean;
+    /**
+     * When true the row is rendered but cannot be toggled. Use for the primary
+     * key row, which is always included.
+     */
+    disabled?: boolean;
+    /** Fires when the user toggles the checkbox. */
+    onChange?: (checked: boolean) => void;
+    /** Test id forwarded to the root element. */
+    dataTestId?: string;
+}
+
+/**
+ * @internal
+ */
+export declare interface IUiLabelRowProps {
+    /** Label text. */
+    label: string;
+    /** Determines the leading icon. Omit for a generic label icon. */
+    kind?: LabelRowKind;
+    /**
+     * Optional trailing suffix text rendered after the label (e.g.
+     * "Primary key", "Default label"). The kit primitive does not format
+     * domain-specific copy — callers translate and pass the string.
+     */
+    suffix?: string;
+    /**
+     * Optional content rendered before the kind icon. Used by
+     * `UiLabelChecklistRow` to inject the row's checkbox.
+     */
+    leading?: ReactNode;
+    /**
+     * Optional id set on the inner label `<span>` so an interactive ancestor
+     * can use it as `aria-labelledby` — e.g. `UiLabelChecklistRow` binds the
+     * row checkbox's accessible name to this id instead of wrapping the row
+     * in a `<label>` (which is invalid HTML around a `<div>`).
+     */
+    labelId?: string;
+    /**
+     * Optional row click handler. Used by `UiLabelChecklistRow` to delegate
+     * clicks anywhere on the row to the inner checkbox without nesting the
+     * row inside a `<label>`. Not fired when the click originates inside an
+     * interactive descendant.
+     */
+    onClick?: () => void;
+    /** Test id forwarded to the root element. */
+    dataTestId?: string;
+}
+
+/**
+ * One label entry in the list.
+ *
+ * @internal
+ */
+export declare interface IUiLabelsListItem {
+    /** Stable identifier for React keys. */
+    id: string;
+    /** Label text. */
+    label: string;
+    /** Drives the icon + suffix. Omit for a regular label. */
+    kind?: LabelRowKind;
+}
+
+/**
+ * @internal
+ */
+export declare interface IUiLabelsListProps {
+    /** Label items to render in source order. */
+    items: ReadonlyArray<IUiLabelsListItem>;
+    /** Test id forwarded to the root element. */
+    dataTestId?: string;
+}
+
+/**
+ * One label entry in the picker.
+ *
+ * @internal
+ */
+export declare interface IUiLabelsPickerItem {
+    /** Stable identifier — used as the React key and in selection state. */
+    id: string;
+    /** Label text. */
+    label: string;
+    /** Drives the icon + suffix. Omit for a regular label. */
+    kind?: LabelRowKind;
+    /**
+     * When true the item is rendered locked (checked + disabled). Used for
+     * the primary-key row, which is always included.
+     */
+    locked?: boolean;
+}
+
+/**
+ * @internal
+ */
+export declare interface IUiLabelsPickerProps {
+    /** Element that opens the picker on click. */
+    anchor: ReactElement<any>;
+    /** All available label items, in source order. */
+    items: ReadonlyArray<IUiLabelsPickerItem>;
+    /**
+     * Initial set of selected item ids. Locked items are always treated as
+     * selected regardless of what's passed here. Consumers that need to
+     * reset the staged state when switching contexts (e.g. picking labels
+     * for a different grantee) should pass `key={contextId}` so React
+     * remounts the picker body.
+     */
+    defaultSelectedIds: ReadonlyArray<string>;
+    /**
+     * Fires when the user clicks Apply with the (locked-augmented) set of
+     * selected ids. The picker keeps its own staged state — the caller is
+     * notified only on commit.
+     */
+    onApply: (selectedIds: string[]) => void;
+    /** Test id forwarded to the picker body. */
+    dataTestId?: string;
+}
+
 /**
  * @internal
  */
@@ -7786,12 +7953,52 @@ export declare interface IUiPaginationButtonProps {
     accessibilityConfig?: IAccessibilityConfigBase;
 }
 
+/**
+ * @internal
+ */
+export declare interface IUiPermissionMenuProps {
+    /** Element that opens the menu on click. */
+    anchor: ReactElement<any>;
+    /** Currently selected permission level — drives `aria-checked`. */
+    selectedLevel?: PermissionMenuLevel;
+    /** Fires when the user picks a permission level. */
+    onPermissionChange: (level: PermissionMenuLevel) => void;
+    /** Fires when the user picks Transfer ownership. */
+    onTransferOwnership?: () => void;
+    /**
+     * Fires when the user picks the Labels entry. Display the count via
+     * `labelsCounter`.
+     */
+    onLabelsClick?: () => void;
+    /**
+     * Counter shown next to the Labels row (e.g. `"4/4"`). Hidden
+     * if omitted.
+     */
+    labelsCounter?: string;
+    /** Fires when the user picks Remove access. */
+    onRemoveAccess?: () => void;
+    /** Test id forwarded to the menu body. */
+    dataTestId?: string;
+}
+
 /**
  * @internal
  */
 export declare interface IUiPopoverProps {
     id?: string;
     anchor: ReactElement<any>;
+    /**
+     * Accessibility attributes forwarded to the anchor element (the trigger).
+     * `ariaHaspopup` defaults to `"dialog"` — pass
+     * `"menu"` for menu-style popovers, `"listbox"` for
+     * single-select pickers, etc. Set `ariaHaspopup: false` to
+     * suppress. (Separate from `accessibilityConfig`, which targets
+     * the popover content surface.)
+     */
+    anchorAccessibilityConfig?: {
+        ariaHaspopup?: "dialog" | "menu" | "listbox" | "tree" | "grid" | false;
+        ariaControls?: AriaAttributes["aria-controls"];
+    };
     width?: "default" | number;
     disabled?: boolean;
     tabIndex?: number;
@@ -8578,6 +8785,14 @@ export declare interface IZoomContextState {
     hasVisualViewport: boolean;
 }
 
+/**
+ * Display-form kind. Drives the icon only — the trailing suffix text is
+ * supplied by the caller via `suffix`. Omit for a regular label.
+ *
+ * @internal
+ */
+export declare type LabelRowKind = "primary" | "default";
+
 /**
  * @internal
  */
@@ -8995,6 +9210,13 @@ export declare function ParameterControlDropdown({ name, value, resetValue, cons
  */
 export declare function ParameterPicker({ parameters, excludedKeys, isLoading, maxListHeight, onAdd, onCancel }: IParameterPickerProps): JSX.Element;
 
+/**
+ * Permission level offered by the menu.
+ *
+ * @internal
+ */
+export declare type PermissionMenuLevel = "VIEW" | "SHARE";
+
 /**
  * @internal
  */
@@ -9710,9 +9932,15 @@ export declare type UiButtonSegmentedControlProps = Omit<ComponentPropsWithRef<"
 export declare const UiCard: ForwardRefExoticComponent<IUiCardProps & RefAttributes<HTMLDivElement>>;
 
 /**
+ * Checkbox control — renders a native `<input type="checkbox">` for
+ * accessibility and a custom 14px box for the visual. The input is overlaid on
+ * the box, so clicking the box toggles it. Renders no wrapping `<label>`: an
+ * optional inline label is a sibling associated via `htmlFor`, which lets an
+ * ancestor row supply its own label without nesting.
+ *
  * @internal
  */
-export declare function UiCheckbox({ checked, onChange, preventDefault, indeterminate, disabled, accessibilityConfig, tabIndex, label }: IUiCheckboxProps): JSX.Element;
+export declare function UiCheckbox({ checked, onChange, preventDefault, indeterminate, disabled, accessibilityConfig, tabIndex, label, id }: IUiCheckboxProps): JSX.Element;
 
 /**
  * @internal
@@ -9946,6 +10174,16 @@ export declare function UiGranteeAvatar({ kind, decorative, dataTestId }: IUiGra
  */
 export declare function UiGranteeRow({ kind, name, email, isOwner, controls, dataTestId }: IUiGranteeRowProps): JSX.Element;
 
+/**
+ * Pair of controls shown on every grantee row in the OLP share dialog:
+ * a labels-picker trigger and a permission-menu trigger. Both triggers are
+ * Tertiary `small` `UiButton`s with `chevronDown`
+ * and open their respective popovers on click.
+ *
+ * @internal
+ */
+export declare function UiGranteeRowControls({ labels, selectedLabelIds, permissionLevel, onLabelsChange, onPermissionChange, onTransferOwnership, onRemoveAccess, dataTestId }: IUiGranteeRowControlsProps): JSX.Element;
+
 /**
  * @internal
  */
@@ -9966,6 +10204,44 @@ export declare type UiIconButtonProps = IUiIconButtonPublicProps;
  */
 export declare const UiInlineTextGenerator: ForwardRefExoticComponent<IUiInlineTextGeneratorProps & RefAttributes<HTMLDivElement>>;
 
+/**
+ * Selectable label row used inside the Labels picker. The row delegates row
+ * clicks to the inner checkbox and binds the checkbox's accessible name to
+ * the row's label span via `aria-labelledby` — instead of wrapping the row
+ * in a `<label>` element (which is invalid HTML around the row's `<div>`).
+ * `disabled` locks the row for the primary-key case.
+ *
+ * @internal
+ */
+export declare function UiLabelChecklistRow({ label, kind, suffix, checked, disabled, onChange, dataTestId }: IUiLabelChecklistRowProps): JSX.Element;
+
+/**
+ * Read-only label row — icon + label + optional caller-supplied suffix. Used
+ * inside the Labels list and (via `UiLabelChecklistRow`) the
+ * Labels picker.
+ *
+ * @internal
+ */
+export declare function UiLabelRow({ label, kind, suffix, leading, labelId, onClick, dataTestId }: IUiLabelRowProps): JSX.Element;
+
+/**
+ * Read-only list of labels — uppercase heading + N `UiLabelRow`s.
+ * Renders only the panel content; whoever needs a popover wraps it.
+ *
+ * @internal
+ */
+export declare function UiLabelsList({ items, dataTestId }: IUiLabelsListProps): JSX.Element;
+
+/**
+ * Per-label picker popover. Anchored on a click target; stages selection
+ * internally and commits via `onApply`. Locked items are always included
+ * — at render time via {@link isLabelsPickerItemChecked} and again at
+ * commit via the locked-aware filter.
+ *
+ * @internal
+ */
+export declare function UiLabelsPicker({ anchor, items, defaultSelectedIds, onApply, dataTestId }: IUiLabelsPickerProps): JSX.Element;
+
 /**
  * @internal
  */
@@ -10055,10 +10331,20 @@ export declare type UiPaginationButtonDirection = "previous" | "next";
  */
 export declare type UiPaginationButtonSize = "small" | "large";
 
+/**
+ * Per-grantee permission popover. Renders a fixed set of rows — two
+ * permission levels (Can view & share / Can view), an optional divider,
+ * and optional Transfer ownership / Labels / Remove access action rows.
+ * Each level row carries an `infoCircle` tooltip.
+ *
+ * @internal
+ */
+export declare function UiPermissionMenu({ anchor, selectedLevel, onPermissionChange, onTransferOwnership, onLabelsClick, labelsCounter, onRemoveAccess, dataTestId }: IUiPermissionMenuProps): JSX.Element;
+
 /**
  * @internal
  */
-export declare function UiPopover({ id, accessibilityConfig, anchor, width, title, tabIndex, disabled, content, footer, closeText, closeVisible, initialFocus, returnFocusTo, triggerBy, returnFocusAfterClose, focusCheckFn, enableFocusTrap, onOpen, onClose }: IUiPopoverProps): JSX.Element;
+export declare function UiPopover({ id, accessibilityConfig, anchor, anchorAccessibilityConfig, width, title, tabIndex, disabled, content, footer, closeText, closeVisible, initialFocus, returnFocusTo, triggerBy, returnFocusAfterClose, focusCheckFn, enableFocusTrap, onOpen, onClose }: IUiPopoverProps): JSX.Element;
 
 /**
  * Standalone radio control — renders a native `<input type="radio">` for

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "11.40.0-alpha.1",
+  "version": "11.40.0-alpha.3",
   "description": "GoodData SDK - UI Building Components",
   "license": "MIT",
   "author": "GoodData Corporation",
@@ -75,11 +75,11 @@
     "tslib": "2.8.1",
     "unified": "^11.0.5",
     "uuid": "11.1.0",
-    "@gooddata/sdk-backend-spi": "11.40.0-alpha.1",
-    "@gooddata/sdk-model": "11.40.0-alpha.1",
-    "@gooddata/sdk-ui": "11.40.0-alpha.1",
-    "@gooddata/sdk-ui-theme-provider": "11.40.0-alpha.1",
-    "@gooddata/util": "11.40.0-alpha.1"
+    "@gooddata/sdk-backend-spi": "11.40.0-alpha.3",
+    "@gooddata/sdk-ui": "11.40.0-alpha.3",
+    "@gooddata/sdk-model": "11.40.0-alpha.3",
+    "@gooddata/sdk-ui-theme-provider": "11.40.0-alpha.3",
+    "@gooddata/util": "11.40.0-alpha.3"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.17.0",
@@ -128,11 +128,11 @@
     "typescript": "5.9.3",
     "vitest": "4.1.0",
     "vitest-dom": "0.1.1",
-    "@gooddata/eslint-config": "11.40.0-alpha.1",
-    "@gooddata/oxlint-config": "11.40.0-alpha.1",
-    "@gooddata/reference-workspace": "11.40.0-alpha.1",
-    "@gooddata/sdk-backend-mockingbird": "11.40.0-alpha.1",
-    "@gooddata/stylelint-config": "11.40.0-alpha.1"
+    "@gooddata/eslint-config": "11.40.0-alpha.3",
+    "@gooddata/oxlint-config": "11.40.0-alpha.3",
+    "@gooddata/reference-workspace": "11.40.0-alpha.3",
+    "@gooddata/sdk-backend-mockingbird": "11.40.0-alpha.3",
+    "@gooddata/stylelint-config": "11.40.0-alpha.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/@ui/UiCheckbox/UiCheckbox.scss

@@ -3,14 +3,28 @@
 .gd-ui-kit-checkbox {
     display: inline-flex;
     align-items: center;
-    cursor: pointer;
     user-select: none;
 
+    &__control {
+        position: relative;
+        display: inline-flex;
+        flex-shrink: 0;
+        width: 14px;
+        height: 14px;
+    }
+
     &__input {
         position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        margin: 0;
         opacity: 0;
-        width: 0;
-        height: 0;
+        cursor: pointer;
+
+        &:disabled {
+            cursor: not-allowed;
+        }
     }
 
     &__box {
@@ -20,16 +34,12 @@
         border: 1px solid var(--gd-palette-complementary-5);
         border-radius: 2px;
         position: relative;
+        pointer-events: none;
         transition:
             background-color 0.2s,
             border-color 0.2s;
         background-color: var(--gd-palette-complementary-0);
 
-        &:hover:not(&--disabled) {
-            border-color: var(--gd-palette-complementary-6);
-            box-shadow: 0 1px 2px 0 rgba(31, 53, 74, 0.15) inset;
-        }
-
         &::after {
             box-sizing: border-box;
             content: "";
@@ -66,6 +76,16 @@
         &--disabled {
             border-color: var(--gd-palette-complementary-3);
         }
+
+        &--checked#{&}--disabled {
+            background-color: var(--gd-palette-complementary-4);
+            border-color: var(--gd-palette-complementary-4);
+        }
+    }
+
+    &__input:hover:not(:disabled) + &__box {
+        border-color: var(--gd-palette-complementary-6);
+        box-shadow: 0 1px 2px 0 rgba(31, 53, 74, 0.15) inset;
     }
 
     &__input:focus-visible + &__box {
@@ -75,5 +95,6 @@
     &__label {
         margin-left: 8px;
         user-select: none;
+        cursor: pointer;
     }
 }

package/src/@ui/UiGranteeRowControls/UiGranteeRowControls.scss

@@ -0,0 +1,8 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-grantee-row-controls {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--gd-spacing-10px);
+    flex-shrink: 0;
+}

package/src/@ui/UiLabelRow/UiLabelRow.scss

@@ -0,0 +1,40 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-label-row {
+    display: flex;
+    align-items: center;
+    gap: var(--gd-spacing-5px);
+    padding: var(--gd-spacing-5px) var(--gd-spacing-10px);
+    font-size: 12px;
+    line-height: 18px;
+
+    &__leading {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+        padding-right: var(--gd-spacing-5px);
+    }
+
+    &__icon {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+    }
+
+    &__label {
+        flex: 0 1 auto;
+        min-width: 0;
+        font-weight: 700;
+        color: var(--gd-palette-complementary-8);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__suffix {
+        flex: 1 1 auto;
+        min-width: 0;
+        color: var(--gd-palette-complementary-6);
+        font-weight: 400;
+    }
+}

package/src/@ui/UiLabelsList/UiLabelsList.scss

@@ -0,0 +1,21 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-labels-list {
+    display: flex;
+    flex-direction: column;
+
+    &__heading {
+        padding: var(--gd-spacing-10px) var(--gd-spacing-10px) var(--gd-spacing-5px);
+        font-size: 10px;
+        font-weight: 700;
+        line-height: 14px;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        color: var(--gd-palette-complementary-6);
+    }
+
+    &__items {
+        display: flex;
+        flex-direction: column;
+    }
+}

package/src/@ui/UiLabelsPicker/UiLabelsPicker.scss

@@ -0,0 +1,29 @@
+// (C) 2026 GoodData Corporation
+
+// Rendered inside UiPopover.__content (which adds 10px padding + 20px gap).
+// Pull the padding back so the rows stretch edge-to-edge of the popover and
+// disable the gap. The actions strip sits flush at the bottom with its own
+// top border.
+
+.gd-ui-kit-labels-picker {
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    // UiPopover's __content adds 10px padding all around. Pull it back so rows
+    // reach edge-to-edge of the popover; the popover sets its own width.
+    margin: calc(-1 * var(--gd-spacing-10px));
+
+    &__items {
+        display: flex;
+        flex-direction: column;
+        padding: var(--gd-spacing-10px) 0;
+    }
+
+    &__actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--gd-spacing-10px);
+        padding: var(--gd-spacing-10px);
+        border-top: 1px solid var(--gd-palette-complementary-3);
+    }
+}

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

@@ -0,0 +1,66 @@
+// (C) 2026 GoodData Corporation
+
+// Rendered inside UiPopover.__content (which adds 10px padding all around).
+// Pull the padding back so rows span the popover edge-to-edge.
+
+.gd-ui-kit-permission-menu {
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    margin: calc(-1 * var(--gd-spacing-10px));
+
+    &__items {
+        display: flex;
+        flex-direction: column;
+        padding: var(--gd-spacing-5px) 0;
+    }
+
+    &__divider {
+        height: 1px;
+        margin: var(--gd-spacing-5px) 0;
+        background: var(--gd-palette-complementary-3);
+    }
+
+    &__item-row {
+        display: flex;
+        align-items: stretch;
+    }
+
+    &__item {
+        flex: 1 1 auto;
+        min-width: 0;
+        display: flex;
+        align-items: center;
+        gap: var(--gd-spacing-5px);
+        padding: var(--gd-spacing-5px) var(--gd-spacing-10px);
+        border: 0;
+        background: transparent;
+        cursor: pointer;
+        text-align: left;
+        font: inherit;
+        color: var(--gd-palette-complementary-8);
+
+        &:hover,
+        &:focus-visible {
+            background: var(--gd-palette-complementary-2);
+            outline: none;
+        }
+    }
+
+    &__item-label {
+        flex: 1 1 auto;
+        min-width: 0;
+        font-size: 12px;
+        line-height: 18px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__item-counter {
+        flex-shrink: 0;
+        font-size: 12px;
+        line-height: 18px;
+        color: var(--gd-palette-complementary-6);
+    }
+}