@gooddata/sdk-ui-kit 11.18.0-alpha.7 → 11.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/esm/@ui/@utils/keyboardNavigation.d.ts +10 -10
  2. package/esm/@ui/@utils/keyboardNavigation.d.ts.map +1 -1
  3. package/esm/@ui/@utils/size.d.ts +1 -1
  4. package/esm/@ui/UiAsyncTable/UiAsyncTable/WithConditionalAnchor.d.ts +1 -1
  5. package/esm/@ui/UiDrawer/hooks/useToggleDrawer.d.ts +1 -1
  6. package/esm/@ui/UiIcon/UiIconBackground.d.ts +1 -1
  7. package/esm/@ui/hooks/useListWithActionsKeyboardNavigation.d.ts +2 -2
  8. package/esm/Form/numberFormat.d.ts +19 -0
  9. package/esm/Form/numberFormat.d.ts.map +1 -1
  10. package/esm/Form/numberFormat.js +34 -1
  11. package/esm/Form/numberFormat.js.map +1 -1
  12. package/esm/index.d.ts +1 -1
  13. package/esm/index.d.ts.map +1 -1
  14. package/esm/index.js +1 -1
  15. package/esm/index.js.map +1 -1
  16. package/esm/sdk-ui-kit.d.ts +28 -8
  17. package/package.json +14 -12
  18. package/src/@ui/UiButton/UiButton.scss +5 -1
  19. package/src/@ui/UiButtonSegmentedControl/UiButtonSegmentedControl.scss +49 -90
  20. package/src/@ui/UiIconButton/UiIconButton.scss +10 -7
  21. package/styles/css/main.css +64 -53
  22. package/styles/css/main.css.map +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gooddata/sdk-ui-kit",
3
- "version": "11.18.0-alpha.7",
3
+ "version": "11.18.0",
4
4
  "description": "GoodData SDK - UI Building Components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -76,11 +76,11 @@
76
76
  "tslib": "2.8.1",
77
77
  "unified": "^11.0.5",
78
78
  "uuid": "^11.1.0",
79
- "@gooddata/sdk-backend-spi": "11.18.0-alpha.7",
80
- "@gooddata/sdk-model": "11.18.0-alpha.7",
81
- "@gooddata/sdk-ui": "11.18.0-alpha.7",
82
- "@gooddata/util": "11.18.0-alpha.7",
83
- "@gooddata/sdk-ui-theme-provider": "11.18.0-alpha.7"
79
+ "@gooddata/sdk-model": "11.18.0",
80
+ "@gooddata/sdk-ui": "11.18.0",
81
+ "@gooddata/sdk-backend-spi": "11.18.0",
82
+ "@gooddata/sdk-ui-theme-provider": "11.18.0",
83
+ "@gooddata/util": "11.18.0"
84
84
  },
85
85
  "devDependencies": {
86
86
  "@gooddata/stylelint-config": "^5.0.0",
@@ -105,7 +105,6 @@
105
105
  "dependency-cruiser": "^14.1.2",
106
106
  "eslint": "^8.57.1",
107
107
  "eslint-config-prettier": "10.1.8",
108
- "eslint-plugin-eslint-comments": "3.2.0",
109
108
  "eslint-plugin-header": "3.1.1",
110
109
  "eslint-plugin-import": "2.32.0",
111
110
  "eslint-plugin-import-esm": "1.2.1",
@@ -116,10 +115,11 @@
116
115
  "eslint-plugin-react": "7.37.5",
117
116
  "eslint-plugin-react-hooks": "4.6.0",
118
117
  "eslint-plugin-regexp": "1.15.0",
119
- "eslint-plugin-sonarjs": "0.16.0",
118
+ "eslint-plugin-sonarjs": "3.0.6",
120
119
  "eslint-plugin-tsdoc": "0.2.14",
121
120
  "happy-dom": "18.0.1",
122
121
  "kefir": "^3.8.8",
122
+ "npm-run-all": "^4.1.5",
123
123
  "prettier": "^3.6.2",
124
124
  "raf": "^3.4.1",
125
125
  "react": "19.1.1",
@@ -132,9 +132,9 @@
132
132
  "typescript": "5.9.3",
133
133
  "vitest": "4.0.8",
134
134
  "vitest-dom": "0.1.1",
135
- "@gooddata/eslint-config": "11.18.0-alpha.7",
136
- "@gooddata/reference-workspace": "11.18.0-alpha.7",
137
- "@gooddata/sdk-backend-mockingbird": "11.18.0-alpha.7"
135
+ "@gooddata/eslint-config": "11.18.0",
136
+ "@gooddata/reference-workspace": "11.18.0",
137
+ "@gooddata/sdk-backend-mockingbird": "11.18.0"
138
138
  },
139
139
  "peerDependencies": {
140
140
  "react": "^18.0.0 || ^19.0.0",
@@ -146,6 +146,8 @@
146
146
  "_phase:validate": "npm run validate",
147
147
  "api-extractor": "mkdir -p api && [ -z \"${CI}\" ] && (api-extractor run -l) || (api-extractor run)",
148
148
  "build": "bash scripts/build.sh",
149
+ "build-check": "tsc",
150
+ "build-ts": "tsc -p tsconfig.build.json",
149
151
  "clean": "../../common/scripts/clean-command-state.sh && rm -rf ci dist esm coverage styles/css *.log tsconfig.tsbuildinfo",
150
152
  "dep-cruiser": "depcruise --validate .dependency-cruiser.cjs --output-type err-long src/",
151
153
  "eslint": "eslint -c .eslintrc.cjs --ignore-path ../.eslintignore .",
@@ -158,7 +160,7 @@
158
160
  "stylelint-fix": "stylelint '**/*.scss' --fix",
159
161
  "test": "vitest watch",
160
162
  "test-once": "vitest run",
161
- "validate": "tsc && export BROWSERSLIST_IGNORE_OLD_DATA=true && npm run dep-cruiser && npm run eslint && npm run stylelint && npm run validate-locales && npm run prettier-check && npm run validate-theming && npm run validate-ui-components",
163
+ "validate": "export BROWSERSLIST_IGNORE_OLD_DATA=true && npm run dep-cruiser && npm run eslint && npm run stylelint && npm run validate-locales && npm run prettier-check && npm run validate-theming && npm run validate-ui-components",
162
164
  "validate-esm": "node --input-type=module --eval 'import \"@gooddata/sdk-ui-kit\"'",
163
165
  "validate-locales": "cd ../sdk-ui && npm run validate-locales",
164
166
  "validate-theming": "npm run scss && node scripts/validateCss.js",
package/src/@ui/UiButton/UiButton.scss CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  font-family: var(--gd-font-family);
7
7
  gap: var(--gd-spacing-5px);
8
- border-radius: var(--gd-button-borderRadius);
8
+ width: var(--gd-button-width, auto);
9
9
  transition: var(--gd-transition-all);
10
10
  display: inline-flex;
11
11
  justify-content: center;
@@ -13,6 +13,10 @@
13
13
  cursor: pointer;
14
14
  border-style: solid;
15
15
  border-width: 1px;
16
+ border-top-left-radius: var(--gd-button-borderRadiusTopLeft, var(--gd-button-borderRadius));
17
+ border-bottom-left-radius: var(--gd-button-borderRadiusBottomLeft, var(--gd-button-borderRadius));
18
+ border-top-right-radius: var(--gd-button-borderRadiusTopRight, var(--gd-button-borderRadius));
19
+ border-bottom-right-radius: var(--gd-button-borderRadiusBottomRight, var(--gd-button-borderRadius));
16
20
 
17
21
  &:disabled {
18
22
  cursor: default;
package/src/@ui/UiButtonSegmentedControl/UiButtonSegmentedControl.scss CHANGED
@@ -3,111 +3,70 @@
3
3
  .gd-ui-kit-button-segmented-control {
4
4
  display: flex;
5
5
 
6
- // Layout variants
7
- &--layout-fill {
8
- flex: 1;
9
-
10
- // UiButton
11
- .gd-ui-kit-button,
12
- // UiIconButton
13
- .gd-ui-kit-icon-button {
14
- flex: 1;
15
- }
6
+ /**
7
+ * Disable transitions for keyboard navigation to avoid "stale border" artifact.
8
+ */
9
+ &:has(:focus-visible) {
10
+ --gd-transition-all: none;
16
11
  }
17
12
 
18
- // Single border approach with nesting support for UiButton and UiIconButton
19
- // 1. Remove left border from adjacent buttons
20
- // 2. Set border radius for first and last buttons
21
- // 3. Set right border color based on next button interaction
22
-
23
- $button-border-radius: var(--gd-button-borderRadius, 3px);
13
+ /**
14
+ * Per-segment defaults (apply to direct children; values are inherited by nested buttons).
15
+ */
16
+ > * {
17
+ --gd-button-borderRadiusTopLeft: 0;
18
+ --gd-button-borderRadiusBottomLeft: 0;
19
+ --gd-button-borderRadiusTopRight: 0;
20
+ --gd-button-borderRadiusBottomRight: 0;
24
21
 
25
- // UiButton
26
- .gd-ui-kit-button,
27
- // UiIconButton
28
- .gd-ui-kit-icon-button {
29
- border-radius: 0;
22
+ position: relative;
30
23
  }
31
24
 
32
- // UiButton
33
- > .gd-ui-kit-button + .gd-ui-kit-button,
34
- > * + * .gd-ui-kit-button,
35
- // UiIconButton
36
- > .gd-ui-kit-icon-button + .gd-ui-kit-icon-button,
37
- > * + * .gd-ui-kit-icon-button {
38
- border-left: 0;
25
+ /**
26
+ * Collapse borders between segments by overlapping neighboring segments.
27
+ * On hover/focus, raise the segment above its neighbors to ensure its border is visible.
28
+ */
29
+ > * + * {
30
+ margin-left: -1px;
39
31
  }
40
32
 
41
- // UiButton
42
- > .gd-ui-kit-button:first-child,
43
- > :first-child:not(.gd-ui-kit-button) .gd-ui-kit-button,
44
- // UiIconButton
45
- > .gd-ui-kit-icon-button:first-child,
46
- > :first-child:not(.gd-ui-kit-icon-button) .gd-ui-kit-icon-button {
47
- border-top-left-radius: $button-border-radius;
48
- border-bottom-left-radius: $button-border-radius;
33
+ /**
34
+ * Stacking order: keyboard focus should win over hover.
35
+ *
36
+ * This prevents visual glitches when focus moves between segments (old border "sticking")
37
+ * and avoids hover on a neighboring segment disrupting the currently focused segment.
38
+ */
39
+ > *:hover {
40
+ z-index: 1;
49
41
  }
50
42
 
51
- // UiButton
52
- > .gd-ui-kit-button:last-child,
53
- > :last-child:not(.gd-ui-kit-button) .gd-ui-kit-button,
54
- // UiIconButton
55
- > .gd-ui-kit-icon-button:last-child,
56
- > :last-child:not(.gd-ui-kit-icon-button) .gd-ui-kit-icon-button {
57
- border-top-right-radius: $button-border-radius;
58
- border-bottom-right-radius: $button-border-radius;
43
+ > *:focus-within {
44
+ z-index: 2;
59
45
  }
60
46
 
61
- // Active state background for buttons inside segmented control
62
- // UiButton
63
- .gd-ui-kit-button--active,
64
- // UiIconButton
65
- .gd-ui-kit-icon-button--active {
66
- background-color: var(--gd-palette-complementary-2);
47
+ /**
48
+ * Rounded corners for the first/last segment.
49
+ */
50
+ > :first-child {
51
+ --gd-button-borderRadiusTopLeft: var(--gd-button-borderRadius);
52
+ --gd-button-borderRadiusBottomLeft: var(--gd-button-borderRadius);
67
53
  }
68
54
 
69
- // UiButton
70
- > .gd-ui-kit-button:has(
71
- + .gd-ui-kit-button--variant-primary:not(:disabled):is(:hover, :focus-visible, :active)
72
- ),
73
- > *:has(+ * .gd-ui-kit-button--variant-primary:not(:disabled):is(:hover, :focus-visible, :active))
74
- .gd-ui-kit-button,
75
- // UiIconButton
76
- > .gd-ui-kit-icon-button:has(
77
- + .gd-ui-kit-icon-button--variant-primary:not(:disabled):is(:hover, :focus-visible, :active)
78
- ),
79
- > *:has(+ * .gd-ui-kit-icon-button--variant-primary:not(:disabled):is(:hover, :focus-visible, :active))
80
- .gd-ui-kit-icon-button {
81
- border-right-color: var(--gd-palette-complementary-9-t80);
55
+ > :last-child {
56
+ --gd-button-borderRadiusTopRight: var(--gd-button-borderRadius);
57
+ --gd-button-borderRadiusBottomRight: var(--gd-button-borderRadius);
82
58
  }
83
59
 
84
- // UiButton
85
- > .gd-ui-kit-button:has(
86
- + .gd-ui-kit-button--variant-secondary:not(:disabled):is(:hover, :focus-visible, :active)
87
- ),
88
- > *:has(+ * .gd-ui-kit-button--variant-secondary:not(:disabled):is(:hover, :focus-visible, :active))
89
- .gd-ui-kit-button,
90
- // UiIconButton
91
- > .gd-ui-kit-icon-button:has(
92
- + .gd-ui-kit-icon-button--variant-secondary:not(:disabled):is(:hover, :focus-visible, :active)
93
- ),
94
- > *:has(+ * .gd-ui-kit-icon-button--variant-secondary:not(:disabled):is(:hover, :focus-visible, :active))
95
- .gd-ui-kit-icon-button {
96
- border-right-color: var(--gd-palette-complementary-5);
97
- }
60
+ /**
61
+ * Layout variants.
62
+ */
63
+ &--layout-fill {
64
+ flex: 1;
98
65
 
99
- // UiButton
100
- > .gd-ui-kit-button:has(
101
- + .gd-ui-kit-button--variant-danger:not(:disabled):is(:hover, :focus-visible, :active)
102
- ),
103
- > *:has(+ * .gd-ui-kit-button--variant-danger:not(:disabled):is(:hover, :focus-visible, :active))
104
- .gd-ui-kit-button,
105
- // UiIconButton
106
- > .gd-ui-kit-icon-button:has(
107
- + .gd-ui-kit-icon-button--variant-danger:not(:disabled):is(:hover, :focus-visible, :active)
108
- ),
109
- > *:has(+ * .gd-ui-kit-icon-button--variant-danger:not(:disabled):is(:hover, :focus-visible, :active))
110
- .gd-ui-kit-icon-button {
111
- border-right-color: var(--gd-palette-complementary-9-t80);
66
+ > * {
67
+ flex: 1 1 0;
68
+
69
+ --gd-button-width: 100%;
70
+ }
112
71
  }
113
72
  }
package/src/@ui/UiIconButton/UiIconButton.scss CHANGED
@@ -2,12 +2,15 @@
2
2
 
3
3
  .gd-ui-kit-icon-button {
4
4
  $root: &;
5
-
6
- border-radius: var(--gd-button-borderRadius);
5
+ width: var(--gd-button-width, auto);
7
6
  transition: var(--gd-transition-all);
8
7
  cursor: pointer;
9
8
  border-style: solid;
10
9
  border-width: 1px;
10
+ border-top-left-radius: var(--gd-button-borderRadiusTopLeft, var(--gd-button-borderRadius));
11
+ border-bottom-left-radius: var(--gd-button-borderRadiusBottomLeft, var(--gd-button-borderRadius));
12
+ border-top-right-radius: var(--gd-button-borderRadiusTopRight, var(--gd-button-borderRadius));
13
+ border-bottom-right-radius: var(--gd-button-borderRadiusBottomRight, var(--gd-button-borderRadius));
11
14
 
12
15
  &--type {
13
16
  &-button {
@@ -36,7 +39,7 @@
36
39
  height: var(--gd-button-S);
37
40
 
38
41
  &#{$root}--type-button {
39
- width: var(--gd-button-S);
42
+ width: var(--gd-button-width, var(--gd-button-S));
40
43
  }
41
44
  }
42
45
 
@@ -44,7 +47,7 @@
44
47
  height: var(--gd-button-M);
45
48
 
46
49
  &#{$root}--type-button {
47
- width: var(--gd-button-M);
50
+ width: var(--gd-button-width, var(--gd-button-M));
48
51
  }
49
52
  }
50
53
 
@@ -52,7 +55,7 @@
52
55
  height: var(--gd-button-L);
53
56
 
54
57
  &#{$root}--type-button {
55
- width: var(--gd-button-L);
58
+ width: var(--gd-button-width, var(--gd-button-L));
56
59
  }
57
60
  }
58
61
 
@@ -60,7 +63,7 @@
60
63
  height: var(--gd-button-XL);
61
64
 
62
65
  &#{$root}--type-button {
63
- width: var(--gd-button-XL);
66
+ width: var(--gd-button-width, var(--gd-button-XL));
64
67
  }
65
68
  }
66
69
 
@@ -68,7 +71,7 @@
68
71
  height: var(--gd-button-XXL);
69
72
 
70
73
  &#{$root}--type-button {
71
- width: var(--gd-button-XXL);
74
+ width: var(--gd-button-width, var(--gd-button-XXL));
72
75
  }
73
76
  }
74
77
  }
package/styles/css/main.css CHANGED
@@ -316,7 +316,7 @@
316
316
  .gd-ui-kit-button {
317
317
  font-family: var(--gd-font-family);
318
318
  gap: var(--gd-spacing-5px);
319
- border-radius: var(--gd-button-borderRadius);
319
+ width: var(--gd-button-width, auto);
320
320
  transition: var(--gd-transition-all);
321
321
  display: inline-flex;
322
322
  justify-content: center;
@@ -324,6 +324,10 @@
324
324
  cursor: pointer;
325
325
  border-style: solid;
326
326
  border-width: 1px;
327
+ border-top-left-radius: var(--gd-button-borderRadiusTopLeft, var(--gd-button-borderRadius));
328
+ border-bottom-left-radius: var(--gd-button-borderRadiusBottomLeft, var(--gd-button-borderRadius));
329
+ border-top-right-radius: var(--gd-button-borderRadiusTopRight, var(--gd-button-borderRadius));
330
+ border-bottom-right-radius: var(--gd-button-borderRadiusBottomRight, var(--gd-button-borderRadius));
327
331
  /**
328
332
  * Size
329
333
  */
@@ -512,67 +516,74 @@
512
516
 
513
517
  .gd-ui-kit-button-segmented-control {
514
518
  display: flex;
519
+ /**
520
+ * Disable transitions for keyboard navigation to avoid "stale border" artifact.
521
+ */
522
+ /**
523
+ * Per-segment defaults (apply to direct children; values are inherited by nested buttons).
524
+ */
525
+ /**
526
+ * Collapse borders between segments by overlapping neighboring segments.
527
+ * On hover/focus, raise the segment above its neighbors to ensure its border is visible.
528
+ */
529
+ /**
530
+ * Stacking order: keyboard focus should win over hover.
531
+ *
532
+ * This prevents visual glitches when focus moves between segments (old border "sticking")
533
+ * and avoids hover on a neighboring segment disrupting the currently focused segment.
534
+ */
535
+ /**
536
+ * Rounded corners for the first/last segment.
537
+ */
538
+ /**
539
+ * Layout variants.
540
+ */
515
541
  }
516
- .gd-ui-kit-button-segmented-control--layout-fill {
517
- flex: 1;
542
+ .gd-ui-kit-button-segmented-control:has(:focus-visible) {
543
+ --gd-transition-all: none;
518
544
  }
519
- .gd-ui-kit-button-segmented-control--layout-fill .gd-ui-kit-button,
520
- .gd-ui-kit-button-segmented-control--layout-fill .gd-ui-kit-icon-button {
521
- flex: 1;
545
+ .gd-ui-kit-button-segmented-control > * {
546
+ --gd-button-borderRadiusTopLeft: 0;
547
+ --gd-button-borderRadiusBottomLeft: 0;
548
+ --gd-button-borderRadiusTopRight: 0;
549
+ --gd-button-borderRadiusBottomRight: 0;
550
+ position: relative;
522
551
  }
523
- .gd-ui-kit-button-segmented-control .gd-ui-kit-button,
524
- .gd-ui-kit-button-segmented-control .gd-ui-kit-icon-button {
525
- border-radius: 0;
552
+ .gd-ui-kit-button-segmented-control > * + * {
553
+ margin-left: -1px;
526
554
  }
527
- .gd-ui-kit-button-segmented-control > .gd-ui-kit-button + .gd-ui-kit-button,
528
- .gd-ui-kit-button-segmented-control > * + * .gd-ui-kit-button,
529
- .gd-ui-kit-button-segmented-control > .gd-ui-kit-icon-button + .gd-ui-kit-icon-button,
530
- .gd-ui-kit-button-segmented-control > * + * .gd-ui-kit-icon-button {
531
- border-left: 0;
532
- }
533
- .gd-ui-kit-button-segmented-control > .gd-ui-kit-button:first-child,
534
- .gd-ui-kit-button-segmented-control > :first-child:not(.gd-ui-kit-button) .gd-ui-kit-button,
535
- .gd-ui-kit-button-segmented-control > .gd-ui-kit-icon-button:first-child,
536
- .gd-ui-kit-button-segmented-control > :first-child:not(.gd-ui-kit-icon-button) .gd-ui-kit-icon-button {
537
- border-top-left-radius: var(--gd-button-borderRadius, 3px);
538
- border-bottom-left-radius: var(--gd-button-borderRadius, 3px);
539
- }
540
- .gd-ui-kit-button-segmented-control > .gd-ui-kit-button:last-child,
541
- .gd-ui-kit-button-segmented-control > :last-child:not(.gd-ui-kit-button) .gd-ui-kit-button,
542
- .gd-ui-kit-button-segmented-control > .gd-ui-kit-icon-button:last-child,
543
- .gd-ui-kit-button-segmented-control > :last-child:not(.gd-ui-kit-icon-button) .gd-ui-kit-icon-button {
544
- border-top-right-radius: var(--gd-button-borderRadius, 3px);
545
- border-bottom-right-radius: var(--gd-button-borderRadius, 3px);
546
- }
547
- .gd-ui-kit-button-segmented-control .gd-ui-kit-button--active,
548
- .gd-ui-kit-button-segmented-control .gd-ui-kit-icon-button--active {
549
- background-color: var(--gd-palette-complementary-2);
555
+ .gd-ui-kit-button-segmented-control > *:hover {
556
+ z-index: 1;
550
557
  }
551
- .gd-ui-kit-button-segmented-control > .gd-ui-kit-button:has(+ .gd-ui-kit-button--variant-primary:not(:disabled):is(:hover, :focus-visible, :active)),
552
- .gd-ui-kit-button-segmented-control > *:has(+ * .gd-ui-kit-button--variant-primary:not(:disabled):is(:hover, :focus-visible, :active)) .gd-ui-kit-button,
553
- .gd-ui-kit-button-segmented-control > .gd-ui-kit-icon-button:has(+ .gd-ui-kit-icon-button--variant-primary:not(:disabled):is(:hover, :focus-visible, :active)),
554
- .gd-ui-kit-button-segmented-control > *:has(+ * .gd-ui-kit-icon-button--variant-primary:not(:disabled):is(:hover, :focus-visible, :active)) .gd-ui-kit-icon-button {
555
- border-right-color: var(--gd-palette-complementary-9-t80);
558
+ .gd-ui-kit-button-segmented-control > *:focus-within {
559
+ z-index: 2;
560
+ }
561
+ .gd-ui-kit-button-segmented-control > :first-child {
562
+ --gd-button-borderRadiusTopLeft: var(--gd-button-borderRadius);
563
+ --gd-button-borderRadiusBottomLeft: var(--gd-button-borderRadius);
564
+ }
565
+ .gd-ui-kit-button-segmented-control > :last-child {
566
+ --gd-button-borderRadiusTopRight: var(--gd-button-borderRadius);
567
+ --gd-button-borderRadiusBottomRight: var(--gd-button-borderRadius);
556
568
  }
557
- .gd-ui-kit-button-segmented-control > .gd-ui-kit-button:has(+ .gd-ui-kit-button--variant-secondary:not(:disabled):is(:hover, :focus-visible, :active)),
558
- .gd-ui-kit-button-segmented-control > *:has(+ * .gd-ui-kit-button--variant-secondary:not(:disabled):is(:hover, :focus-visible, :active)) .gd-ui-kit-button,
559
- .gd-ui-kit-button-segmented-control > .gd-ui-kit-icon-button:has(+ .gd-ui-kit-icon-button--variant-secondary:not(:disabled):is(:hover, :focus-visible, :active)),
560
- .gd-ui-kit-button-segmented-control > *:has(+ * .gd-ui-kit-icon-button--variant-secondary:not(:disabled):is(:hover, :focus-visible, :active)) .gd-ui-kit-icon-button {
561
- border-right-color: var(--gd-palette-complementary-5);
569
+ .gd-ui-kit-button-segmented-control--layout-fill {
570
+ flex: 1;
562
571
  }
563
- .gd-ui-kit-button-segmented-control > .gd-ui-kit-button:has(+ .gd-ui-kit-button--variant-danger:not(:disabled):is(:hover, :focus-visible, :active)),
564
- .gd-ui-kit-button-segmented-control > *:has(+ * .gd-ui-kit-button--variant-danger:not(:disabled):is(:hover, :focus-visible, :active)) .gd-ui-kit-button,
565
- .gd-ui-kit-button-segmented-control > .gd-ui-kit-icon-button:has(+ .gd-ui-kit-icon-button--variant-danger:not(:disabled):is(:hover, :focus-visible, :active)),
566
- .gd-ui-kit-button-segmented-control > *:has(+ * .gd-ui-kit-icon-button--variant-danger:not(:disabled):is(:hover, :focus-visible, :active)) .gd-ui-kit-icon-button {
567
- border-right-color: var(--gd-palette-complementary-9-t80);
572
+ .gd-ui-kit-button-segmented-control--layout-fill > * {
573
+ flex: 1 1 0;
574
+ --gd-button-width: 100%;
568
575
  }
569
576
 
570
577
  .gd-ui-kit-icon-button {
571
- border-radius: var(--gd-button-borderRadius);
578
+ width: var(--gd-button-width, auto);
572
579
  transition: var(--gd-transition-all);
573
580
  cursor: pointer;
574
581
  border-style: solid;
575
582
  border-width: 1px;
583
+ border-top-left-radius: var(--gd-button-borderRadiusTopLeft, var(--gd-button-borderRadius));
584
+ border-bottom-left-radius: var(--gd-button-borderRadiusBottomLeft, var(--gd-button-borderRadius));
585
+ border-top-right-radius: var(--gd-button-borderRadiusTopRight, var(--gd-button-borderRadius));
586
+ border-bottom-right-radius: var(--gd-button-borderRadiusBottomRight, var(--gd-button-borderRadius));
576
587
  /**
577
588
  * Size
578
589
  */
@@ -601,31 +612,31 @@
601
612
  height: var(--gd-button-S);
602
613
  }
603
614
  .gd-ui-kit-icon-button--size-small.gd-ui-kit-icon-button--type-button {
604
- width: var(--gd-button-S);
615
+ width: var(--gd-button-width, var(--gd-button-S));
605
616
  }
606
617
  .gd-ui-kit-icon-button--size-medium {
607
618
  height: var(--gd-button-M);
608
619
  }
609
620
  .gd-ui-kit-icon-button--size-medium.gd-ui-kit-icon-button--type-button {
610
- width: var(--gd-button-M);
621
+ width: var(--gd-button-width, var(--gd-button-M));
611
622
  }
612
623
  .gd-ui-kit-icon-button--size-large {
613
624
  height: var(--gd-button-L);
614
625
  }
615
626
  .gd-ui-kit-icon-button--size-large.gd-ui-kit-icon-button--type-button {
616
- width: var(--gd-button-L);
627
+ width: var(--gd-button-width, var(--gd-button-L));
617
628
  }
618
629
  .gd-ui-kit-icon-button--size-xlarge {
619
630
  height: var(--gd-button-XL);
620
631
  }
621
632
  .gd-ui-kit-icon-button--size-xlarge.gd-ui-kit-icon-button--type-button {
622
- width: var(--gd-button-XL);
633
+ width: var(--gd-button-width, var(--gd-button-XL));
623
634
  }
624
635
  .gd-ui-kit-icon-button--size-xxlarge {
625
636
  height: var(--gd-button-XXL);
626
637
  }
627
638
  .gd-ui-kit-icon-button--size-xxlarge.gd-ui-kit-icon-button--type-button {
628
- width: var(--gd-button-XXL);
639
+ width: var(--gd-button-width, var(--gd-button-XXL));
629
640
  }
630
641
  .gd-ui-kit-icon-button--variant-primary {
631
642
  --gd-icon-fill-color: var(--gd-palette-complementary-0);