@gooddata/sdk-ui-kit 11.39.0-alpha.3 → 11.39.0

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

@@ -0,0 +1,36 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-grantee-row {
+    display: flex;
+    align-items: center;
+    gap: var(--gd-spacing-10px);
+    width: 100%;
+    min-height: 50px;
+    padding: var(--gd-spacing-5px) 0;
+    box-sizing: border-box;
+
+    &__text {
+        flex: 1 1 auto;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        line-height: 20px;
+    }
+
+    &__name {
+        font-size: 14px;
+        font-weight: 700;
+        color: var(--gd-palette-complementary-8);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__email {
+        font-size: 14px;
+        color: var(--gd-palette-complementary-6);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}

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

@@ -0,0 +1,12 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-object-share-dialog {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gd-spacing-10px);
+
+    &__grantees {
+        display: flex;
+        flex-direction: column;
+    }
+}

package/src/@ui/UiRadio/UiRadio.scss

@@ -0,0 +1,63 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-radio {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--gd-spacing-5px);
+
+    &__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;
+        cursor: pointer;
+
+        &:disabled {
+            cursor: not-allowed;
+        }
+    }
+
+    &__circle {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        border: 1px solid var(--gd-palette-complementary-5);
+        background-color: var(--gd-palette-complementary-0);
+        box-sizing: border-box;
+        pointer-events: none;
+        transition:
+            border-width 60ms ease-out,
+            border-color 60ms ease-out;
+
+        &--checked {
+            border-color: var(--gd-palette-primary-base);
+            border-width: 4px;
+        }
+
+        &--disabled {
+            border-color: var(--gd-palette-complementary-4);
+            background-color: var(--gd-palette-complementary-2);
+        }
+    }
+
+    &__input:focus-visible + &__circle {
+        box-shadow: 0 0 0 2px var(--gd-palette-primary-focus);
+    }
+
+    &__label {
+        font-size: 14px;
+        line-height: 20px;
+        color: var(--gd-palette-complementary-8);
+        cursor: pointer;
+    }
+}

package/src/@ui/UiRadioRow/UiRadioRow.scss

@@ -0,0 +1,44 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-radio-row {
+    display: flex;
+    align-items: center;
+    gap: var(--gd-spacing-10px);
+    width: 100%;
+    min-height: 50px;
+    padding: var(--gd-spacing-5px) 0;
+    box-sizing: border-box;
+
+    &__text {
+        flex: 1 1 auto;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        line-height: 20px;
+    }
+
+    &__title {
+        font-size: 14px;
+        font-weight: 700;
+        color: var(--gd-palette-complementary-8);
+        cursor: pointer;
+    }
+
+    &--disabled &__title {
+        cursor: not-allowed;
+    }
+
+    &__description {
+        font-size: 14px;
+        color: var(--gd-palette-complementary-6);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__trailing {
+        flex-shrink: 0;
+        display: inline-flex;
+        align-items: center;
+    }
+}

package/src/@ui/UiSectionHeading/UiSectionHeading.scss

@@ -4,7 +4,6 @@
     display: flex;
     align-items: center;
     gap: var(--gd-spacing-15px);
-    font-family: var(--gd-font-family);
 
     &__label {
         font-size: 11px;

package/src/@ui/UiTextInput/UiTextInput.scss

@@ -0,0 +1,68 @@
+// (C) 2026 GoodData Corporation
+
+.gd-ui-kit-text-input {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gd-spacing-5px);
+
+    &__label {
+        font-size: 14px;
+        line-height: 21px;
+        color: var(--gd-palette-complementary-7);
+    }
+
+    &__field {
+        display: flex;
+        align-items: center;
+        height: 32px;
+        padding: 0 var(--gd-spacing-7px);
+        border: 1px solid var(--gd-palette-complementary-4);
+        border-radius: 3px;
+        background-color: var(--gd-palette-complementary-0);
+        box-shadow: inset 0 1px 2px var(--gd-shadow-color);
+
+        &:focus-within {
+            border-color: var(--gd-palette-primary-base);
+        }
+
+        &--disabled {
+            background-color: var(--gd-palette-complementary-2);
+            cursor: not-allowed;
+        }
+    }
+
+    &__icon-before {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+        margin-right: var(--gd-spacing-5px);
+    }
+
+    &__icon-after {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+        margin-left: var(--gd-spacing-5px);
+    }
+
+    &__input {
+        flex: 1 1 auto;
+        min-width: 0;
+        height: 100%;
+        padding: 0;
+        border: none;
+        background: transparent;
+        font-family: inherit;
+        font-size: 14px;
+        color: var(--gd-palette-complementary-8);
+        outline: none;
+
+        &::placeholder {
+            color: var(--gd-palette-complementary-5);
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+        }
+    }
+}

package/src/@ui/index.scss

@@ -33,3 +33,20 @@
 @use "./UiSectionHeading/UiSectionHeading.scss";
 @use "./UiDialogShell/UiDialogShell.scss";
 @use "./UiConfirmDialog/UiConfirmDialog.scss";
+@use "./UiTextInput/UiTextInput.scss";
+@use "./UiRadio/UiRadio.scss";
+@use "./UiRadioRow/UiRadioRow.scss";
+@use "./UiAvatar/UiAvatar.scss";
+@use "./UiGranteeRow/UiGranteeRow.scss";
+@use "./UiObjectShareDialog/UiObjectShareDialog.scss";
+@use "./UiAddGranteeDialog/UiAddGranteeDialog.scss";
+@use "./UiGeneralAccessRadio/UiGeneralAccessRadio.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
+// fall back to the browser default (e.g. Times New Roman), rather than each
+// component redeclaring it.
+[class^="gd-ui-kit-"],
+[class*=" gd-ui-kit-"] {
+    font-family: var(--gd-font-family);
+}

package/src/FilterGroupItem/FilterGroupItem.scss

@@ -20,7 +20,6 @@
     }
 
     .gd-filter-group-item-chevron {
-        transition: transform 0.8s ease;
         padding-right: 4px;
         color: variables.$gd-color-state-blank;
     }
@@ -28,11 +27,10 @@
     &:not(.error, .gd-is-disabled):hover,
     &.gd-is-active {
         background-color: variables.$is-focused-background;
+    }
 
-        &::before {
-            transform: translateX(0) scaleX(1);
-            opacity: 1;
-        }
+    &.gd-is-active:not(.gd-is-disabled):hover {
+        background-color: variables.$gd-palette-primary-dimmed;
     }
 
     &::before {
@@ -43,30 +41,16 @@
         width: 4px;
         height: 100%;
         background-color: variables.$gd-palette-primary-base;
-        transform: translateX(-2px) scaleX(0);
         opacity: 0;
-        transition:
-            transform 0.2s ease,
-            opacity 0.2s ease;
     }
 
-    &:not(.error, .gd-is-disabled):hover .gd-filter-group-item-chevron,
-    &.gd-is-active .gd-filter-group-item-chevron {
-        transform: translateX(4px);
+    &.gd-is-active::before {
+        opacity: 1;
     }
 
-    &.gd-is-active:not(.error, .gd-is-disabled):hover {
-        background-color: variables.$gd-palette-primary-dimmed;
-
-        &::before {
-            transform: translateX(-2px) scaleX(0);
-            opacity: 0;
-        }
-
-        .gd-filter-group-item-chevron {
-            transform: translateX(0);
-            animation: none;
-        }
+    &:not(.error, .gd-is-active, .gd-is-disabled):hover::before {
+        background-color: var(--gd-palette-complementary-5-t40, rgba(176, 190, 202, 0.6));
+        opacity: 1;
     }
 
     &.error:not(.gd-is-active) {
@@ -75,6 +59,11 @@
         .gd-filter-group-item-icon {
             color: variables.$gd-palette-error-base;
         }
+
+        &:not(.gd-is-disabled):hover::before {
+            background-color: var(--gd-palette-error-base-t85, rgba(229, 77, 66, 0.15));
+            opacity: 1;
+        }
     }
 
     &.error.gd-is-active .gd-filter-group-item-icon {

package/styles/css/main.css

@@ -3323,7 +3323,6 @@
   display: flex;
   align-items: center;
   gap: var(--gd-spacing-15px);
-  font-family: var(--gd-font-family);
 }
 .gd-ui-kit-section-heading__label {
   font-size: 11px;
@@ -3349,7 +3348,6 @@
   flex-direction: column;
   padding: var(--gd-spacing-20px);
   background-color: var(--gd-palette-complementary-0);
-  font-family: var(--gd-font-family);
   border-radius: var(--gd-modal-borderRadius);
   box-shadow: 0 2px 8px var(--gd-shadow-color);
 }
@@ -3406,6 +3404,280 @@
   margin-bottom: var(--gd-spacing-20px);
 }
 
+.gd-ui-kit-text-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gd-spacing-5px);
+}
+.gd-ui-kit-text-input__label {
+  font-size: 14px;
+  line-height: 21px;
+  color: var(--gd-palette-complementary-7);
+}
+.gd-ui-kit-text-input__field {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 var(--gd-spacing-7px);
+  border: 1px solid var(--gd-palette-complementary-4);
+  border-radius: 3px;
+  background-color: var(--gd-palette-complementary-0);
+  box-shadow: inset 0 1px 2px var(--gd-shadow-color);
+}
+.gd-ui-kit-text-input__field:focus-within {
+  border-color: var(--gd-palette-primary-base);
+}
+.gd-ui-kit-text-input__field--disabled {
+  background-color: var(--gd-palette-complementary-2);
+  cursor: not-allowed;
+}
+.gd-ui-kit-text-input__icon-before {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-right: var(--gd-spacing-5px);
+}
+.gd-ui-kit-text-input__icon-after {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: var(--gd-spacing-5px);
+}
+.gd-ui-kit-text-input__input {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: 14px;
+  color: var(--gd-palette-complementary-8);
+  outline: none;
+}
+.gd-ui-kit-text-input__input::placeholder {
+  color: var(--gd-palette-complementary-5);
+}
+.gd-ui-kit-text-input__input:disabled {
+  cursor: not-allowed;
+}
+
+.gd-ui-kit-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gd-spacing-5px);
+}
+.gd-ui-kit-radio__control {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+}
+.gd-ui-kit-radio__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.gd-ui-kit-radio__input:disabled {
+  cursor: not-allowed;
+}
+.gd-ui-kit-radio__circle {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 1px solid var(--gd-palette-complementary-5);
+  background-color: var(--gd-palette-complementary-0);
+  box-sizing: border-box;
+  pointer-events: none;
+  transition: border-width 60ms ease-out, border-color 60ms ease-out;
+}
+.gd-ui-kit-radio__circle--checked {
+  border-color: var(--gd-palette-primary-base);
+  border-width: 4px;
+}
+.gd-ui-kit-radio__circle--disabled {
+  border-color: var(--gd-palette-complementary-4);
+  background-color: var(--gd-palette-complementary-2);
+}
+.gd-ui-kit-radio__input:focus-visible + .gd-ui-kit-radio__circle {
+  box-shadow: 0 0 0 2px var(--gd-palette-primary-focus);
+}
+.gd-ui-kit-radio__label {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--gd-palette-complementary-8);
+  cursor: pointer;
+}
+
+.gd-ui-kit-radio-row {
+  display: flex;
+  align-items: center;
+  gap: var(--gd-spacing-10px);
+  width: 100%;
+  min-height: 50px;
+  padding: var(--gd-spacing-5px) 0;
+  box-sizing: border-box;
+}
+.gd-ui-kit-radio-row__text {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  line-height: 20px;
+}
+.gd-ui-kit-radio-row__title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--gd-palette-complementary-8);
+  cursor: pointer;
+}
+.gd-ui-kit-radio-row--disabled .gd-ui-kit-radio-row__title {
+  cursor: not-allowed;
+}
+.gd-ui-kit-radio-row__description {
+  font-size: 14px;
+  color: var(--gd-palette-complementary-6);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gd-ui-kit-radio-row__trailing {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+}
+
+.gd-ui-kit-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 50%;
+  width: var(--gd-avatar-size);
+  height: var(--gd-avatar-size);
+  background-color: var(--gd-avatar-background-color);
+}
+.gd-ui-kit-avatar--background-primary {
+  --gd-avatar-background-color: var(--gd-palette-primary-base);
+}
+.gd-ui-kit-avatar--background-success {
+  --gd-avatar-background-color: var(--gd-palette-success-base);
+}
+.gd-ui-kit-avatar--background-warning {
+  --gd-avatar-background-color: var(--gd-palette-warning-base);
+}
+.gd-ui-kit-avatar--background-error {
+  --gd-avatar-background-color: var(--gd-palette-error-base);
+}
+.gd-ui-kit-avatar--background-complementary-0 {
+  --gd-avatar-background-color: var(--gd-palette-complementary-0);
+}
+.gd-ui-kit-avatar--background-complementary-1 {
+  --gd-avatar-background-color: var(--gd-palette-complementary-1);
+}
+.gd-ui-kit-avatar--background-complementary-2 {
+  --gd-avatar-background-color: var(--gd-palette-complementary-2);
+}
+.gd-ui-kit-avatar--background-complementary-3 {
+  --gd-avatar-background-color: var(--gd-palette-complementary-3);
+}
+.gd-ui-kit-avatar--background-complementary-4 {
+  --gd-avatar-background-color: var(--gd-palette-complementary-4);
+}
+.gd-ui-kit-avatar--background-complementary-5 {
+  --gd-avatar-background-color: var(--gd-palette-complementary-5);
+}
+.gd-ui-kit-avatar--background-complementary-6 {
+  --gd-avatar-background-color: var(--gd-palette-complementary-6);
+}
+.gd-ui-kit-avatar--background-complementary-7 {
+  --gd-avatar-background-color: var(--gd-palette-complementary-7);
+}
+.gd-ui-kit-avatar--background-complementary-8 {
+  --gd-avatar-background-color: var(--gd-palette-complementary-8);
+}
+.gd-ui-kit-avatar--background-complementary-9 {
+  --gd-avatar-background-color: var(--gd-palette-complementary-9);
+}
+
+.gd-ui-kit-grantee-row {
+  display: flex;
+  align-items: center;
+  gap: var(--gd-spacing-10px);
+  width: 100%;
+  min-height: 50px;
+  padding: var(--gd-spacing-5px) 0;
+  box-sizing: border-box;
+}
+.gd-ui-kit-grantee-row__text {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  line-height: 20px;
+}
+.gd-ui-kit-grantee-row__name {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--gd-palette-complementary-8);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gd-ui-kit-grantee-row__email {
+  font-size: 14px;
+  color: var(--gd-palette-complementary-6);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gd-ui-kit-object-share-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gd-spacing-10px);
+}
+.gd-ui-kit-object-share-dialog__grantees {
+  display: flex;
+  flex-direction: column;
+}
+
+.gd-ui-kit-add-grantee-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gd-spacing-10px);
+  padding-bottom: var(--gd-spacing-5px);
+}
+.gd-ui-kit-add-grantee-dialog__preview {
+  display: flex;
+  align-items: center;
+  min-height: 50px;
+}
+.gd-ui-kit-add-grantee-dialog__empty-state {
+  flex: 1 1 auto;
+  text-align: center;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--gd-palette-complementary-6);
+}
+
+.gd-ui-kit-general-access-radio {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+[class^=gd-ui-kit-],
+[class*=" gd-ui-kit-"] {
+  font-family: var(--gd-font-family);
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -13598,16 +13870,14 @@ input[type=search]::-webkit-search-cancel-button {
   cursor: pointer;
 }
 .gd-filter-group-item .gd-filter-group-item-chevron {
-  transition: transform 0.8s ease;
   padding-right: 4px;
   color: var(--gd-palette-complementary-6, #94a1ad);
 }
 .gd-filter-group-item:not(.error, .gd-is-disabled):hover, .gd-filter-group-item.gd-is-active {
   background-color: var(--gd-palette-complementary-2, #ebeff4);
 }
-.gd-filter-group-item:not(.error, .gd-is-disabled):hover::before, .gd-filter-group-item.gd-is-active::before {
-  transform: translateX(0) scaleX(1);
-  opacity: 1;
+.gd-filter-group-item.gd-is-active:not(.gd-is-disabled):hover {
+  background-color: var(--gd-palette-primary-dimmed, #e8f7fc);
 }
 .gd-filter-group-item::before {
   content: "";
@@ -13617,23 +13887,14 @@ input[type=search]::-webkit-search-cancel-button {
   width: 4px;
   height: 100%;
   background-color: var(--gd-palette-primary-base, #14b2e2);
-  transform: translateX(-2px) scaleX(0);
   opacity: 0;
-  transition: transform 0.2s ease, opacity 0.2s ease;
-}
-.gd-filter-group-item:not(.error, .gd-is-disabled):hover .gd-filter-group-item-chevron, .gd-filter-group-item.gd-is-active .gd-filter-group-item-chevron {
-  transform: translateX(4px);
-}
-.gd-filter-group-item.gd-is-active:not(.error, .gd-is-disabled):hover {
-  background-color: var(--gd-palette-primary-dimmed, #e8f7fc);
 }
-.gd-filter-group-item.gd-is-active:not(.error, .gd-is-disabled):hover::before {
-  transform: translateX(-2px) scaleX(0);
-  opacity: 0;
+.gd-filter-group-item.gd-is-active::before {
+  opacity: 1;
 }
-.gd-filter-group-item.gd-is-active:not(.error, .gd-is-disabled):hover .gd-filter-group-item-chevron {
-  transform: translateX(0);
-  animation: none;
+.gd-filter-group-item:not(.error, .gd-is-active, .gd-is-disabled):hover::before {
+  background-color: var(--gd-palette-complementary-5-t40, rgba(176, 190, 202, 0.6));
+  opacity: 1;
 }
 .gd-filter-group-item.error:not(.gd-is-active) {
   background-color: var(--gd-palette-error-dimmed, #fcedec);
@@ -13641,6 +13902,10 @@ input[type=search]::-webkit-search-cancel-button {
 .gd-filter-group-item.error:not(.gd-is-active) .gd-filter-group-item-icon {
   color: var(--gd-palette-error-base, #e54d42);
 }
+.gd-filter-group-item.error:not(.gd-is-active):not(.gd-is-disabled):hover::before {
+  background-color: var(--gd-palette-error-base-t85, rgba(229, 77, 66, 0.15));
+  opacity: 1;
+}
 .gd-filter-group-item.error.gd-is-active .gd-filter-group-item-icon {
   color: #94a1ad;
 }