@cloudscape-design/components-themeable 3.0.1311 → 3.0.1313

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 (219) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/app-layout/visual-refresh/drawers.scss +16 -0
  3. package/lib/internal/scss/app-layout/visual-refresh/navigation.scss +1 -1
  4. package/lib/internal/scss/app-layout/visual-refresh/tools.scss +4 -0
  5. package/lib/internal/scss/app-layout/visual-refresh-toolbar/drawer/styles.scss +1 -1
  6. package/lib/internal/scss/app-layout/visual-refresh-toolbar/navigation/styles.scss +1 -1
  7. package/lib/internal/scss/button-dropdown/category-elements/styles.scss +5 -0
  8. package/lib/internal/scss/button-dropdown/styles.scss +18 -0
  9. package/lib/internal/scss/expandable-section/styles.scss +17 -0
  10. package/lib/internal/scss/internal/components/button-trigger/styles.scss +7 -0
  11. package/lib/internal/scss/internal/components/drag-handle/styles.scss +5 -1
  12. package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
  13. package/lib/internal/scss/internal/styles/utils/theming.scss +6 -0
  14. package/lib/internal/scss/segmented-control/styles.scss +2 -2
  15. package/lib/internal/scss/status-indicator/styles.scss +36 -0
  16. package/lib/internal/scss/steps/styles.scss +39 -0
  17. package/lib/internal/scss/table/header-cell/styles.scss +12 -1
  18. package/lib/internal/scss/table/resizer/styles.scss +9 -1
  19. package/lib/internal/scss/toggle/styles.scss +1 -1
  20. package/lib/internal/scss/toggle-button/styles.scss +7 -1
  21. package/lib/internal/scss/token/mixins.scss +4 -4
  22. package/lib/internal/scss/token/styles.scss +7 -0
  23. package/lib/internal/scss/tree-view/tree-item/styles.scss +10 -0
  24. package/lib/internal/template/app-layout/runtime-drawer/index.js +1 -1
  25. package/lib/internal/template/app-layout/runtime-drawer/index.js.map +1 -1
  26. package/lib/internal/template/app-layout/visual-refresh/drawers.d.ts.map +1 -1
  27. package/lib/internal/template/app-layout/visual-refresh/drawers.js +3 -0
  28. package/lib/internal/template/app-layout/visual-refresh/drawers.js.map +1 -1
  29. package/lib/internal/template/app-layout/visual-refresh/styles.css.js +87 -86
  30. package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +176 -164
  31. package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +87 -86
  32. package/lib/internal/template/app-layout/visual-refresh/tools.d.ts.map +1 -1
  33. package/lib/internal/template/app-layout/visual-refresh/tools.js +2 -0
  34. package/lib/internal/template/app-layout/visual-refresh/tools.js.map +1 -1
  35. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.css.js +32 -32
  36. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +84 -84
  37. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +32 -32
  38. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.css.js +4 -4
  39. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +6 -6
  40. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +4 -4
  41. package/lib/internal/template/breadcrumb-group/implementation.d.ts.map +1 -1
  42. package/lib/internal/template/breadcrumb-group/implementation.js +2 -2
  43. package/lib/internal/template/breadcrumb-group/implementation.js.map +1 -1
  44. package/lib/internal/template/breadcrumb-group/item/item.d.ts.map +1 -1
  45. package/lib/internal/template/breadcrumb-group/item/item.js +2 -1
  46. package/lib/internal/template/breadcrumb-group/item/item.js.map +1 -1
  47. package/lib/internal/template/button/internal.d.ts +3 -0
  48. package/lib/internal/template/button/internal.d.ts.map +1 -1
  49. package/lib/internal/template/button/internal.js +2 -2
  50. package/lib/internal/template/button/internal.js.map +1 -1
  51. package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.d.ts.map +1 -1
  52. package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.js +4 -2
  53. package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.js.map +1 -1
  54. package/lib/internal/template/button-dropdown/category-elements/mobile-expandable-category-element.d.ts.map +1 -1
  55. package/lib/internal/template/button-dropdown/category-elements/mobile-expandable-category-element.js +4 -2
  56. package/lib/internal/template/button-dropdown/category-elements/mobile-expandable-category-element.js.map +1 -1
  57. package/lib/internal/template/button-dropdown/category-elements/styles.css.js +19 -18
  58. package/lib/internal/template/button-dropdown/category-elements/styles.scoped.css +32 -28
  59. package/lib/internal/template/button-dropdown/category-elements/styles.selectors.js +19 -18
  60. package/lib/internal/template/button-dropdown/index.d.ts.map +1 -1
  61. package/lib/internal/template/button-dropdown/index.js +4 -3
  62. package/lib/internal/template/button-dropdown/index.js.map +1 -1
  63. package/lib/internal/template/button-dropdown/interfaces.d.ts +22 -0
  64. package/lib/internal/template/button-dropdown/interfaces.d.ts.map +1 -1
  65. package/lib/internal/template/button-dropdown/interfaces.js.map +1 -1
  66. package/lib/internal/template/button-dropdown/internal.d.ts.map +1 -1
  67. package/lib/internal/template/button-dropdown/internal.js +15 -6
  68. package/lib/internal/template/button-dropdown/internal.js.map +1 -1
  69. package/lib/internal/template/button-dropdown/styles.css.js +23 -21
  70. package/lib/internal/template/button-dropdown/styles.scoped.css +39 -29
  71. package/lib/internal/template/button-dropdown/styles.selectors.js +23 -21
  72. package/lib/internal/template/button-group/icon-toggle-button-item.js +1 -1
  73. package/lib/internal/template/button-group/icon-toggle-button-item.js.map +1 -1
  74. package/lib/internal/template/button-group/interfaces.d.ts +12 -1
  75. package/lib/internal/template/button-group/interfaces.d.ts.map +1 -1
  76. package/lib/internal/template/button-group/interfaces.js.map +1 -1
  77. package/lib/internal/template/button-group/menu-dropdown-item.d.ts.map +1 -1
  78. package/lib/internal/template/button-group/menu-dropdown-item.js +2 -1
  79. package/lib/internal/template/button-group/menu-dropdown-item.js.map +1 -1
  80. package/lib/internal/template/dropdown/internal.d.ts.map +1 -1
  81. package/lib/internal/template/dropdown/internal.js +14 -2
  82. package/lib/internal/template/dropdown/internal.js.map +1 -1
  83. package/lib/internal/template/expandable-section/expandable-section-header.d.ts.map +1 -1
  84. package/lib/internal/template/expandable-section/expandable-section-header.js +5 -5
  85. package/lib/internal/template/expandable-section/expandable-section-header.js.map +1 -1
  86. package/lib/internal/template/expandable-section/styles.css.js +36 -35
  87. package/lib/internal/template/expandable-section/styles.scoped.css +81 -66
  88. package/lib/internal/template/expandable-section/styles.selectors.js +36 -35
  89. package/lib/internal/template/icon/generated/icons.d.ts +1 -0
  90. package/lib/internal/template/icon/generated/icons.d.ts.map +1 -1
  91. package/lib/internal/template/icon/generated/icons.js +2 -0
  92. package/lib/internal/template/icon/generated/icons.js.map +1 -1
  93. package/lib/internal/template/icon-provider/interfaces.d.ts +1 -1
  94. package/lib/internal/template/icon-provider/interfaces.d.ts.map +1 -1
  95. package/lib/internal/template/icon-provider/interfaces.js.map +1 -1
  96. package/lib/internal/template/internal/base-component/styles.scoped.css +65 -1
  97. package/lib/internal/template/internal/components/button-trigger/index.d.ts.map +1 -1
  98. package/lib/internal/template/internal/components/button-trigger/index.js +3 -2
  99. package/lib/internal/template/internal/components/button-trigger/index.js.map +1 -1
  100. package/lib/internal/template/internal/components/button-trigger/styles.css.js +15 -14
  101. package/lib/internal/template/internal/components/button-trigger/styles.scoped.css +35 -29
  102. package/lib/internal/template/internal/components/button-trigger/styles.selectors.js +15 -14
  103. package/lib/internal/template/internal/components/checkbox-icon/index.d.ts.map +1 -1
  104. package/lib/internal/template/internal/components/checkbox-icon/index.js +11 -2
  105. package/lib/internal/template/internal/components/checkbox-icon/index.js.map +1 -1
  106. package/lib/internal/template/internal/components/drag-handle/styles.css.js +14 -14
  107. package/lib/internal/template/internal/components/drag-handle/styles.scoped.css +20 -19
  108. package/lib/internal/template/internal/components/drag-handle/styles.selectors.js +14 -14
  109. package/lib/internal/template/internal/components/drag-handle-wrapper/index.d.ts.map +1 -1
  110. package/lib/internal/template/internal/components/drag-handle-wrapper/index.js +6 -3
  111. package/lib/internal/template/internal/components/drag-handle-wrapper/index.js.map +1 -1
  112. package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.d.ts +2 -1
  113. package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.d.ts.map +1 -1
  114. package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.js +2 -2
  115. package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.js.map +1 -1
  116. package/lib/internal/template/internal/components/expand-toggle-button/index.js +2 -2
  117. package/lib/internal/template/internal/components/expand-toggle-button/index.js.map +1 -1
  118. package/lib/internal/template/internal/environment.js +2 -2
  119. package/lib/internal/template/internal/environment.json +2 -2
  120. package/lib/internal/template/internal/generated/styles/tokens.d.ts +8 -0
  121. package/lib/internal/template/internal/generated/styles/tokens.js +8 -0
  122. package/lib/internal/template/internal/generated/theming/index.cjs +236 -0
  123. package/lib/internal/template/internal/generated/theming/index.cjs.d.ts +72 -0
  124. package/lib/internal/template/internal/generated/theming/index.d.ts +72 -0
  125. package/lib/internal/template/internal/generated/theming/index.js +236 -0
  126. package/lib/internal/template/internal/hooks/use-mouse-down-target.js +2 -2
  127. package/lib/internal/template/internal/hooks/use-mouse-down-target.js.map +1 -1
  128. package/lib/internal/template/internal/hooks/use-portal-mode-classes/index.d.ts.map +1 -1
  129. package/lib/internal/template/internal/hooks/use-portal-mode-classes/index.js +4 -2
  130. package/lib/internal/template/internal/hooks/use-portal-mode-classes/index.js.map +1 -1
  131. package/lib/internal/template/internal/hooks/use-visual-mode/index.d.ts +1 -0
  132. package/lib/internal/template/internal/hooks/use-visual-mode/index.d.ts.map +1 -1
  133. package/lib/internal/template/internal/hooks/use-visual-mode/index.js +2 -1
  134. package/lib/internal/template/internal/hooks/use-visual-mode/index.js.map +1 -1
  135. package/lib/internal/template/internal/utils/throttle.d.ts.map +1 -1
  136. package/lib/internal/template/internal/utils/throttle.js +3 -1
  137. package/lib/internal/template/internal/utils/throttle.js.map +1 -1
  138. package/lib/internal/template/progress-bar/index.d.ts.map +1 -1
  139. package/lib/internal/template/progress-bar/index.js +1 -0
  140. package/lib/internal/template/progress-bar/index.js.map +1 -1
  141. package/lib/internal/template/segmented-control/styles.css.js +16 -16
  142. package/lib/internal/template/segmented-control/styles.scoped.css +34 -34
  143. package/lib/internal/template/segmented-control/styles.selectors.js +16 -16
  144. package/lib/internal/template/status-indicator/internal.d.ts.map +1 -1
  145. package/lib/internal/template/status-indicator/internal.js +4 -3
  146. package/lib/internal/template/status-indicator/internal.js.map +1 -1
  147. package/lib/internal/template/status-indicator/styles.css.js +25 -24
  148. package/lib/internal/template/status-indicator/styles.scoped.css +75 -40
  149. package/lib/internal/template/status-indicator/styles.selectors.js +25 -24
  150. package/lib/internal/template/steps/internal.d.ts.map +1 -1
  151. package/lib/internal/template/steps/internal.js +20 -6
  152. package/lib/internal/template/steps/internal.js.map +1 -1
  153. package/lib/internal/template/steps/styles.css.js +12 -9
  154. package/lib/internal/template/steps/styles.scoped.css +43 -15
  155. package/lib/internal/template/steps/styles.selectors.js +12 -9
  156. package/lib/internal/template/table/header-cell/group-header-cell.d.ts.map +1 -1
  157. package/lib/internal/template/table/header-cell/group-header-cell.js +4 -16
  158. package/lib/internal/template/table/header-cell/group-header-cell.js.map +1 -1
  159. package/lib/internal/template/table/header-cell/index.d.ts.map +1 -1
  160. package/lib/internal/template/table/header-cell/index.js +2 -1
  161. package/lib/internal/template/table/header-cell/index.js.map +1 -1
  162. package/lib/internal/template/table/header-cell/styles.css.js +33 -33
  163. package/lib/internal/template/table/header-cell/styles.scoped.css +80 -73
  164. package/lib/internal/template/table/header-cell/styles.selectors.js +33 -33
  165. package/lib/internal/template/table/header-cell/th-element.d.ts +6 -5
  166. package/lib/internal/template/table/header-cell/th-element.d.ts.map +1 -1
  167. package/lib/internal/template/table/header-cell/th-element.js +4 -3
  168. package/lib/internal/template/table/header-cell/th-element.js.map +1 -1
  169. package/lib/internal/template/table/resizer/index.d.ts +4 -2
  170. package/lib/internal/template/table/resizer/index.d.ts.map +1 -1
  171. package/lib/internal/template/table/resizer/index.js +4 -4
  172. package/lib/internal/template/table/resizer/index.js.map +1 -1
  173. package/lib/internal/template/table/resizer/styles.css.js +17 -16
  174. package/lib/internal/template/table/resizer/styles.scoped.css +32 -24
  175. package/lib/internal/template/table/resizer/styles.selectors.js +17 -16
  176. package/lib/internal/template/table/selection/selection-cell.d.ts +2 -1
  177. package/lib/internal/template/table/selection/selection-cell.d.ts.map +1 -1
  178. package/lib/internal/template/table/selection/selection-cell.js +2 -2
  179. package/lib/internal/template/table/selection/selection-cell.js.map +1 -1
  180. package/lib/internal/template/table/sticky-columns/use-sticky-columns.d.ts +2 -1
  181. package/lib/internal/template/table/sticky-columns/use-sticky-columns.d.ts.map +1 -1
  182. package/lib/internal/template/table/sticky-columns/use-sticky-columns.js +31 -7
  183. package/lib/internal/template/table/sticky-columns/use-sticky-columns.js.map +1 -1
  184. package/lib/internal/template/table/thead.d.ts.map +1 -1
  185. package/lib/internal/template/table/thead.js +2 -2
  186. package/lib/internal/template/table/thead.js.map +1 -1
  187. package/lib/internal/template/test-utils/dom/table/index.js +1 -1
  188. package/lib/internal/template/test-utils/dom/table/index.js.map +1 -1
  189. package/lib/internal/template/test-utils/selectors/table/index.js +1 -1
  190. package/lib/internal/template/test-utils/selectors/table/index.js.map +1 -1
  191. package/lib/internal/template/theming/index.d.ts +2 -0
  192. package/lib/internal/template/theming/index.d.ts.map +1 -1
  193. package/lib/internal/template/theming/index.js +55 -0
  194. package/lib/internal/template/theming/index.js.map +1 -1
  195. package/lib/internal/template/toggle/styles.css.js +10 -10
  196. package/lib/internal/template/toggle/styles.scoped.css +18 -18
  197. package/lib/internal/template/toggle/styles.selectors.js +10 -10
  198. package/lib/internal/template/toggle-button/internal.d.ts.map +1 -1
  199. package/lib/internal/template/toggle-button/internal.js +3 -1
  200. package/lib/internal/template/toggle-button/internal.js.map +1 -1
  201. package/lib/internal/template/toggle-button/styles.css.js +4 -3
  202. package/lib/internal/template/toggle-button/styles.scoped.css +8 -3
  203. package/lib/internal/template/toggle-button/styles.selectors.js +4 -3
  204. package/lib/internal/template/token/dismiss-button.d.ts.map +1 -1
  205. package/lib/internal/template/token/dismiss-button.js +3 -1
  206. package/lib/internal/template/token/dismiss-button.js.map +1 -1
  207. package/lib/internal/template/token/internal.d.ts.map +1 -1
  208. package/lib/internal/template/token/internal.js +11 -3
  209. package/lib/internal/template/token/internal.js.map +1 -1
  210. package/lib/internal/template/token/styles.css.js +14 -14
  211. package/lib/internal/template/token/styles.scoped.css +33 -30
  212. package/lib/internal/template/token/styles.selectors.js +14 -14
  213. package/lib/internal/template/tree-view/tree-item/index.d.ts.map +1 -1
  214. package/lib/internal/template/tree-view/tree-item/index.js +2 -1
  215. package/lib/internal/template/tree-view/tree-item/index.js.map +1 -1
  216. package/lib/internal/template/tree-view/tree-item/styles.css.js +10 -9
  217. package/lib/internal/template/tree-view/tree-item/styles.scoped.css +19 -12
  218. package/lib/internal/template/tree-view/tree-item/styles.selectors.js +10 -9
  219. package/package.json +1 -1
@@ -150,11 +150,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
150
150
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
151
151
  SPDX-License-Identifier: Apache-2.0
152
152
  */
153
- .awsui_icon-shake_1cbgc_hmmrt_153:not(#\9) {
153
+ .awsui_icon-shake_1cbgc_13oha_153:not(#\9) {
154
154
  display: inline-block;
155
- animation: awsui_awsui-motion-shake-horizontally_1cbgc_hmmrt_1 var(--motion-duration-refresh-only-medium-h3wrr6, 0ms);
155
+ animation: awsui_awsui-motion-shake-horizontally_1cbgc_13oha_1 var(--motion-duration-refresh-only-medium-h3wrr6, 0ms);
156
156
  }
157
- @keyframes awsui_awsui-motion-shake-horizontally_1cbgc_hmmrt_1 {
157
+ @keyframes awsui_awsui-motion-shake-horizontally_1cbgc_13oha_1 {
158
158
  0% {
159
159
  transform: translateX(-5px);
160
160
  animation-timing-function: linear;
@@ -168,20 +168,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
168
168
  }
169
169
  }
170
170
  @media (prefers-reduced-motion: reduce) {
171
- .awsui_icon-shake_1cbgc_hmmrt_153:not(#\9) {
171
+ .awsui_icon-shake_1cbgc_13oha_153:not(#\9) {
172
172
  animation: none;
173
173
  transition: none;
174
174
  }
175
175
  }
176
- .awsui-motion-disabled .awsui_icon-shake_1cbgc_hmmrt_153:not(#\9), .awsui-mode-entering .awsui_icon-shake_1cbgc_hmmrt_153:not(#\9) {
176
+ .awsui-motion-disabled .awsui_icon-shake_1cbgc_13oha_153:not(#\9), .awsui-mode-entering .awsui_icon-shake_1cbgc_13oha_153:not(#\9) {
177
177
  animation: none;
178
178
  transition: none;
179
179
  }
180
180
 
181
- .awsui_container-fade-in_1cbgc_hmmrt_181:not(#\9) {
182
- animation: awsui_awsui-motion-fade-in-0_1cbgc_hmmrt_1 var(--motion-duration-refresh-only-medium-h3wrr6, 0ms) var(--motion-easing-refresh-only-a-8gio5w, cubic-bezier(0, 0, 0, 1));
181
+ .awsui_container-fade-in_1cbgc_13oha_181:not(#\9) {
182
+ animation: awsui_awsui-motion-fade-in-0_1cbgc_13oha_1 var(--motion-duration-refresh-only-medium-h3wrr6, 0ms) var(--motion-easing-refresh-only-a-8gio5w, cubic-bezier(0, 0, 0, 1));
183
183
  }
184
- @keyframes awsui_awsui-motion-fade-in-0_1cbgc_hmmrt_1 {
184
+ @keyframes awsui_awsui-motion-fade-in-0_1cbgc_13oha_1 {
185
185
  from {
186
186
  opacity: 0;
187
187
  }
@@ -190,17 +190,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
190
190
  }
191
191
  }
192
192
  @media (prefers-reduced-motion: reduce) {
193
- .awsui_container-fade-in_1cbgc_hmmrt_181:not(#\9) {
193
+ .awsui_container-fade-in_1cbgc_13oha_181:not(#\9) {
194
194
  animation: none;
195
195
  transition: none;
196
196
  }
197
197
  }
198
- .awsui-motion-disabled .awsui_container-fade-in_1cbgc_hmmrt_181:not(#\9), .awsui-mode-entering .awsui_container-fade-in_1cbgc_hmmrt_181:not(#\9) {
198
+ .awsui-motion-disabled .awsui_container-fade-in_1cbgc_13oha_181:not(#\9), .awsui-mode-entering .awsui_container-fade-in_1cbgc_13oha_181:not(#\9) {
199
199
  animation: none;
200
200
  transition: none;
201
201
  }
202
202
 
203
- .awsui_root_1cbgc_hmmrt_203:not(#\9) {
203
+ .awsui_root_1cbgc_13oha_203:not(#\9) {
204
204
  font-size: var(--font-size-body-m-vv54cm, 14px);
205
205
  line-height: var(--line-height-body-m-bedeoh, 22px);
206
206
  color: var(--color-text-body-default-5qid0u, #16191f);
@@ -209,104 +209,139 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
209
209
  -webkit-font-smoothing: auto;
210
210
  -moz-osx-font-smoothing: auto;
211
211
  }
212
- .awsui_root_1cbgc_hmmrt_203.awsui_status-error_1cbgc_hmmrt_212:not(#\9) {
212
+ .awsui_root_1cbgc_13oha_203.awsui_status-error_1cbgc_13oha_212:not(#\9) {
213
213
  color: var(--color-text-status-error-aknuvu, #d13212);
214
214
  }
215
- .awsui_root_1cbgc_hmmrt_203.awsui_status-warning_1cbgc_hmmrt_215:not(#\9) {
215
+ .awsui_root_1cbgc_13oha_203.awsui_status-warning_1cbgc_13oha_215:not(#\9) {
216
216
  color: var(--color-text-status-warning-9b45qh, #906806);
217
217
  }
218
- .awsui_root_1cbgc_hmmrt_203.awsui_status-success_1cbgc_hmmrt_218:not(#\9) {
218
+ .awsui_root_1cbgc_13oha_203.awsui_status-success_1cbgc_13oha_218:not(#\9) {
219
219
  color: var(--color-text-status-success-yodf3z, #1d8102);
220
220
  }
221
- .awsui_root_1cbgc_hmmrt_203.awsui_status-info_1cbgc_hmmrt_221:not(#\9) {
221
+ .awsui_root_1cbgc_13oha_203.awsui_status-info_1cbgc_13oha_221:not(#\9) {
222
222
  color: var(--color-text-status-info-xt2ka7, #0073bb);
223
223
  }
224
- .awsui_root_1cbgc_hmmrt_203.awsui_status-stopped_1cbgc_hmmrt_224:not(#\9) {
224
+ .awsui_root_1cbgc_13oha_203.awsui_status-stopped_1cbgc_13oha_224:not(#\9) {
225
225
  color: var(--color-text-status-inactive-n7p1uq, #687078);
226
226
  }
227
- .awsui_root_1cbgc_hmmrt_203.awsui_status-pending_1cbgc_hmmrt_227:not(#\9) {
227
+ .awsui_root_1cbgc_13oha_203.awsui_status-pending_1cbgc_13oha_227:not(#\9) {
228
228
  color: var(--color-text-status-inactive-n7p1uq, #687078);
229
229
  }
230
- .awsui_root_1cbgc_hmmrt_203.awsui_status-in-progress_1cbgc_hmmrt_230:not(#\9) {
230
+ .awsui_root_1cbgc_13oha_203.awsui_status-in-progress_1cbgc_13oha_230:not(#\9) {
231
231
  color: var(--color-text-status-inactive-n7p1uq, #687078);
232
232
  }
233
- .awsui_root_1cbgc_hmmrt_203.awsui_status-loading_1cbgc_hmmrt_233:not(#\9) {
233
+ .awsui_root_1cbgc_13oha_203.awsui_status-loading_1cbgc_13oha_233:not(#\9) {
234
234
  color: var(--color-text-status-inactive-n7p1uq, #687078);
235
235
  }
236
- .awsui_root_1cbgc_hmmrt_203.awsui_status-not-started_1cbgc_hmmrt_236:not(#\9) {
236
+ .awsui_root_1cbgc_13oha_203.awsui_status-not-started_1cbgc_13oha_236:not(#\9) {
237
237
  color: var(--color-text-status-inactive-n7p1uq, #687078);
238
238
  }
239
- .awsui_root_1cbgc_hmmrt_203.awsui_color-override-red_1cbgc_hmmrt_239:not(#\9) {
239
+ .awsui_root_1cbgc_13oha_203.awsui_color-override-red_1cbgc_13oha_239:not(#\9) {
240
240
  color: var(--color-text-status-error-aknuvu, #d13212);
241
241
  }
242
- .awsui_root_1cbgc_hmmrt_203.awsui_color-override-grey_1cbgc_hmmrt_242:not(#\9) {
242
+ .awsui_root_1cbgc_13oha_203.awsui_color-override-grey_1cbgc_13oha_242:not(#\9) {
243
243
  color: var(--color-text-status-inactive-n7p1uq, #687078);
244
244
  }
245
- .awsui_root_1cbgc_hmmrt_203.awsui_color-override-blue_1cbgc_hmmrt_245:not(#\9) {
245
+ .awsui_root_1cbgc_13oha_203.awsui_color-override-blue_1cbgc_13oha_245:not(#\9) {
246
246
  color: var(--color-text-status-info-xt2ka7, #0073bb);
247
247
  }
248
- .awsui_root_1cbgc_hmmrt_203.awsui_color-override-green_1cbgc_hmmrt_248:not(#\9) {
248
+ .awsui_root_1cbgc_13oha_203.awsui_color-override-green_1cbgc_13oha_248:not(#\9) {
249
249
  color: var(--color-text-status-success-yodf3z, #1d8102);
250
250
  }
251
- .awsui_root_1cbgc_hmmrt_203.awsui_color-override-yellow_1cbgc_hmmrt_251:not(#\9) {
251
+ .awsui_root_1cbgc_13oha_203.awsui_color-override-yellow_1cbgc_13oha_251:not(#\9) {
252
252
  color: var(--color-text-status-warning-9b45qh, #906806);
253
253
  }
254
- .awsui_root_1cbgc_hmmrt_203.awsui_status-error_1cbgc_hmmrt_212 > .awsui_container_1cbgc_hmmrt_181:not(#\9) {
254
+ .awsui_root_1cbgc_13oha_203.awsui_status-error_1cbgc_13oha_212 > .awsui_container_1cbgc_13oha_181:not(#\9) {
255
255
  background: var(--color-background-status-indicator-error-621sf8, transparent);
256
256
  }
257
- .awsui_root_1cbgc_hmmrt_203.awsui_status-warning_1cbgc_hmmrt_215 > .awsui_container_1cbgc_hmmrt_181:not(#\9) {
257
+ .awsui_root_1cbgc_13oha_203.awsui_status-warning_1cbgc_13oha_215 > .awsui_container_1cbgc_13oha_181:not(#\9) {
258
258
  background: var(--color-background-status-indicator-warning-3kccdi, transparent);
259
259
  }
260
- .awsui_root_1cbgc_hmmrt_203.awsui_status-success_1cbgc_hmmrt_218 > .awsui_container_1cbgc_hmmrt_181:not(#\9) {
260
+ .awsui_root_1cbgc_13oha_203.awsui_status-success_1cbgc_13oha_218 > .awsui_container_1cbgc_13oha_181:not(#\9) {
261
261
  background: var(--color-background-status-indicator-success-9mizpw, transparent);
262
262
  }
263
- .awsui_root_1cbgc_hmmrt_203.awsui_status-info_1cbgc_hmmrt_221 > .awsui_container_1cbgc_hmmrt_181:not(#\9) {
263
+ .awsui_root_1cbgc_13oha_203.awsui_status-info_1cbgc_13oha_221 > .awsui_container_1cbgc_13oha_181:not(#\9) {
264
264
  background: var(--color-background-status-indicator-info-zw9ljm, transparent);
265
265
  }
266
- .awsui_root_1cbgc_hmmrt_203.awsui_status-stopped_1cbgc_hmmrt_224 > .awsui_container_1cbgc_hmmrt_181:not(#\9) {
266
+ .awsui_root_1cbgc_13oha_203.awsui_status-stopped_1cbgc_13oha_224 > .awsui_container_1cbgc_13oha_181:not(#\9) {
267
267
  background: var(--color-background-status-indicator-neutral-50dvgi, transparent);
268
268
  }
269
- .awsui_root_1cbgc_hmmrt_203.awsui_status-pending_1cbgc_hmmrt_227 > .awsui_container_1cbgc_hmmrt_181:not(#\9) {
269
+ .awsui_root_1cbgc_13oha_203.awsui_status-pending_1cbgc_13oha_227 > .awsui_container_1cbgc_13oha_181:not(#\9) {
270
270
  background: var(--color-background-status-indicator-neutral-50dvgi, transparent);
271
271
  }
272
- .awsui_root_1cbgc_hmmrt_203.awsui_status-in-progress_1cbgc_hmmrt_230 > .awsui_container_1cbgc_hmmrt_181:not(#\9) {
272
+ .awsui_root_1cbgc_13oha_203.awsui_status-in-progress_1cbgc_13oha_230 > .awsui_container_1cbgc_13oha_181:not(#\9) {
273
273
  background: var(--color-background-status-indicator-neutral-50dvgi, transparent);
274
274
  }
275
- .awsui_root_1cbgc_hmmrt_203.awsui_status-loading_1cbgc_hmmrt_233 > .awsui_container_1cbgc_hmmrt_181:not(#\9) {
275
+ .awsui_root_1cbgc_13oha_203.awsui_status-loading_1cbgc_13oha_233 > .awsui_container_1cbgc_13oha_181:not(#\9) {
276
276
  background: var(--color-background-status-indicator-neutral-50dvgi, transparent);
277
277
  }
278
- .awsui_root_1cbgc_hmmrt_203.awsui_status-not-started_1cbgc_hmmrt_236 > .awsui_container_1cbgc_hmmrt_181:not(#\9) {
278
+ .awsui_root_1cbgc_13oha_203.awsui_status-not-started_1cbgc_13oha_236 > .awsui_container_1cbgc_13oha_181:not(#\9) {
279
279
  background: var(--color-background-status-indicator-neutral-50dvgi, transparent);
280
280
  }
281
+ .awsui_root_1cbgc_13oha_203.awsui_color-override-red_1cbgc_13oha_239 > .awsui_container_1cbgc_13oha_181:not(#\9) {
282
+ background: var(--color-background-status-indicator-error-621sf8, transparent);
283
+ }
284
+ .awsui_root_1cbgc_13oha_203.awsui_color-override-grey_1cbgc_13oha_242 > .awsui_container_1cbgc_13oha_181:not(#\9) {
285
+ background: var(--color-background-status-indicator-neutral-50dvgi, transparent);
286
+ }
287
+ .awsui_root_1cbgc_13oha_203.awsui_color-override-blue_1cbgc_13oha_245 > .awsui_container_1cbgc_13oha_181:not(#\9) {
288
+ background: var(--color-background-status-indicator-info-zw9ljm, transparent);
289
+ }
290
+ .awsui_root_1cbgc_13oha_203.awsui_color-override-green_1cbgc_13oha_248 > .awsui_container_1cbgc_13oha_181:not(#\9) {
291
+ background: var(--color-background-status-indicator-success-9mizpw, transparent);
292
+ }
293
+ .awsui_root_1cbgc_13oha_203.awsui_color-override-yellow_1cbgc_13oha_251 > .awsui_container_1cbgc_13oha_181:not(#\9) {
294
+ background: var(--color-background-status-indicator-warning-3kccdi, transparent);
295
+ }
281
296
 
282
- .awsui_container_1cbgc_hmmrt_181:not(#\9) {
297
+ .awsui_container_1cbgc_13oha_181:not(#\9) {
283
298
  padding-inline: var(--space-status-indicator-padding-horizontal-hzqgcr, 0px);
284
299
  border-start-start-radius: var(--border-radius-status-indicator-42rwc5, 16px);
285
300
  border-start-end-radius: var(--border-radius-status-indicator-42rwc5, 16px);
286
301
  border-end-start-radius: var(--border-radius-status-indicator-42rwc5, 16px);
287
302
  border-end-end-radius: var(--border-radius-status-indicator-42rwc5, 16px);
288
303
  }
289
- .awsui_container_1cbgc_hmmrt_181.awsui_display-inline_1cbgc_hmmrt_289:not(#\9) {
304
+ .awsui_container_1cbgc_13oha_181.awsui_display-inline_1cbgc_13oha_304:not(#\9) {
290
305
  min-inline-size: 0;
291
306
  word-break: break-word;
292
307
  display: inline;
293
308
  }
294
- .awsui_container_1cbgc_hmmrt_181.awsui_display-inline_1cbgc_hmmrt_289 > .awsui_icon_1cbgc_hmmrt_153:not(#\9) {
309
+ .awsui_container_1cbgc_13oha_181.awsui_display-inline_1cbgc_13oha_304 > .awsui_icon_1cbgc_13oha_153:not(#\9) {
295
310
  white-space: nowrap;
296
311
  }
297
- .awsui_container_1cbgc_hmmrt_181.awsui_display-inline-block_1cbgc_hmmrt_297:not(#\9) {
312
+ .awsui_container_1cbgc_13oha_181.awsui_display-inline_1cbgc_13oha_304 > .awsui_icon_1cbgc_13oha_153.awsui_one-theme_1cbgc_13oha_312:not(#\9) {
313
+ vertical-align: middle;
314
+ }
315
+ .awsui_container_1cbgc_13oha_181.awsui_display-inline-block_1cbgc_13oha_315:not(#\9) {
298
316
  display: inline-block;
299
317
  word-wrap: break-word;
300
318
  word-break: break-all;
301
319
  }
302
- .awsui_container_1cbgc_hmmrt_181.awsui_display-inline-block_1cbgc_hmmrt_297 > .awsui_icon_1cbgc_hmmrt_153:not(#\9) {
320
+ .awsui_container_1cbgc_13oha_181.awsui_display-inline-block_1cbgc_13oha_315.awsui_one-theme_1cbgc_13oha_312:not(#\9) {
321
+ display: inline-flex;
322
+ align-items: flex-start;
323
+ }
324
+ .awsui_container_1cbgc_13oha_181.awsui_display-inline-block_1cbgc_13oha_315 > .awsui_icon_1cbgc_13oha_153:not(#\9) {
303
325
  padding-inline-end: var(--space-xxs-jnczic, 4px);
304
326
  }
327
+ .awsui_container_1cbgc_13oha_181.awsui_display-inline-block_1cbgc_13oha_315 > .awsui_icon_1cbgc_13oha_153.awsui_one-theme_1cbgc_13oha_312:not(#\9) {
328
+ display: inline-flex;
329
+ align-items: center;
330
+ margin-block-start: var(--space-xxxs-3w1kr2, 2px);
331
+ }
305
332
 
306
- .awsui_overflow-ellipsis_1cbgc_hmmrt_306:not(#\9) {
333
+ .awsui_overflow-ellipsis_1cbgc_13oha_333:not(#\9) {
307
334
  max-inline-size: 100%;
308
335
  overflow: hidden;
309
336
  text-overflow: ellipsis;
310
337
  white-space: nowrap;
311
338
  vertical-align: text-bottom;
339
+ }
340
+ .awsui_overflow-ellipsis_1cbgc_13oha_333.awsui_one-theme_1cbgc_13oha_312:not(#\9) {
341
+ text-overflow: unset;
342
+ }
343
+ .awsui_overflow-ellipsis_1cbgc_13oha_333.awsui_one-theme_1cbgc_13oha_312 > span:not(#\9):last-child {
344
+ overflow: hidden;
345
+ text-overflow: ellipsis;
346
+ white-space: nowrap;
312
347
  }
@@ -2,29 +2,30 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "icon-shake": "awsui_icon-shake_1cbgc_hmmrt_153",
6
- "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_1cbgc_hmmrt_1",
7
- "container-fade-in": "awsui_container-fade-in_1cbgc_hmmrt_181",
8
- "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1cbgc_hmmrt_1",
9
- "root": "awsui_root_1cbgc_hmmrt_203",
10
- "status-error": "awsui_status-error_1cbgc_hmmrt_212",
11
- "status-warning": "awsui_status-warning_1cbgc_hmmrt_215",
12
- "status-success": "awsui_status-success_1cbgc_hmmrt_218",
13
- "status-info": "awsui_status-info_1cbgc_hmmrt_221",
14
- "status-stopped": "awsui_status-stopped_1cbgc_hmmrt_224",
15
- "status-pending": "awsui_status-pending_1cbgc_hmmrt_227",
16
- "status-in-progress": "awsui_status-in-progress_1cbgc_hmmrt_230",
17
- "status-loading": "awsui_status-loading_1cbgc_hmmrt_233",
18
- "status-not-started": "awsui_status-not-started_1cbgc_hmmrt_236",
19
- "color-override-red": "awsui_color-override-red_1cbgc_hmmrt_239",
20
- "color-override-grey": "awsui_color-override-grey_1cbgc_hmmrt_242",
21
- "color-override-blue": "awsui_color-override-blue_1cbgc_hmmrt_245",
22
- "color-override-green": "awsui_color-override-green_1cbgc_hmmrt_248",
23
- "color-override-yellow": "awsui_color-override-yellow_1cbgc_hmmrt_251",
24
- "container": "awsui_container_1cbgc_hmmrt_181",
25
- "display-inline": "awsui_display-inline_1cbgc_hmmrt_289",
26
- "icon": "awsui_icon_1cbgc_hmmrt_153",
27
- "display-inline-block": "awsui_display-inline-block_1cbgc_hmmrt_297",
28
- "overflow-ellipsis": "awsui_overflow-ellipsis_1cbgc_hmmrt_306"
5
+ "icon-shake": "awsui_icon-shake_1cbgc_13oha_153",
6
+ "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_1cbgc_13oha_1",
7
+ "container-fade-in": "awsui_container-fade-in_1cbgc_13oha_181",
8
+ "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1cbgc_13oha_1",
9
+ "root": "awsui_root_1cbgc_13oha_203",
10
+ "status-error": "awsui_status-error_1cbgc_13oha_212",
11
+ "status-warning": "awsui_status-warning_1cbgc_13oha_215",
12
+ "status-success": "awsui_status-success_1cbgc_13oha_218",
13
+ "status-info": "awsui_status-info_1cbgc_13oha_221",
14
+ "status-stopped": "awsui_status-stopped_1cbgc_13oha_224",
15
+ "status-pending": "awsui_status-pending_1cbgc_13oha_227",
16
+ "status-in-progress": "awsui_status-in-progress_1cbgc_13oha_230",
17
+ "status-loading": "awsui_status-loading_1cbgc_13oha_233",
18
+ "status-not-started": "awsui_status-not-started_1cbgc_13oha_236",
19
+ "color-override-red": "awsui_color-override-red_1cbgc_13oha_239",
20
+ "color-override-grey": "awsui_color-override-grey_1cbgc_13oha_242",
21
+ "color-override-blue": "awsui_color-override-blue_1cbgc_13oha_245",
22
+ "color-override-green": "awsui_color-override-green_1cbgc_13oha_248",
23
+ "color-override-yellow": "awsui_color-override-yellow_1cbgc_13oha_251",
24
+ "container": "awsui_container_1cbgc_13oha_181",
25
+ "display-inline": "awsui_display-inline_1cbgc_13oha_304",
26
+ "icon": "awsui_icon_1cbgc_13oha_153",
27
+ "one-theme": "awsui_one-theme_1cbgc_13oha_312",
28
+ "display-inline-block": "awsui_display-inline-block_1cbgc_13oha_315",
29
+ "overflow-ellipsis": "awsui_overflow-ellipsis_1cbgc_13oha_333"
29
30
  };
30
31
 
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,0BAA0B,CAAC;AA4EzF,QAAA,MAAM,aAAa,GAAI,6GASpB,kBAAkB,gBA8BpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,0BAA0B,CAAC;AA6FzF,QAAA,MAAM,aAAa,GAAI,6GASpB,kBAAkB,gBA8BpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -19,12 +19,26 @@ const statusToColor = {
19
19
  const CustomStep = ({ step, orientation, renderStep, }) => {
20
20
  const { status, statusIconAriaLabel } = step;
21
21
  const { header, details, icon } = renderStep(step);
22
- return (React.createElement("li", { className: styles.container },
23
- React.createElement("div", { className: styles.header },
24
- icon ? icon : React.createElement(InternalStatusIcon, { type: status, iconAriaLabel: statusIconAriaLabel }),
25
- orientation === 'vertical' ? header : React.createElement("hr", { className: styles.connector, role: "none" })),
26
- orientation === 'vertical' ? (React.createElement("hr", { className: styles.connector, role: "none" })) : (React.createElement("div", { className: styles['horizontal-header'] }, header)),
27
- details && React.createElement("div", { className: styles.details }, details)));
22
+ const iconNode = icon ? icon : React.createElement(InternalStatusIcon, { type: status, iconAriaLabel: statusIconAriaLabel });
23
+ if (orientation === 'horizontal') {
24
+ return (React.createElement("li", { className: styles.container },
25
+ React.createElement("div", { className: styles.header },
26
+ iconNode,
27
+ React.createElement("hr", { className: styles.connector, role: "none" })),
28
+ React.createElement("div", { className: styles['horizontal-header'] }, header),
29
+ details && React.createElement("div", { className: styles.details }, details)));
30
+ }
31
+ // Vertical orientation: render the icon and the connector together in a column-1 "rail" so the
32
+ // connector starts directly beneath the icon and stretches the full height of the step. Unlike
33
+ // placing the header in the same row as the icon, this keeps the vertical line continuous even
34
+ // when the custom header wraps onto multiple lines.
35
+ return (React.createElement("li", { className: clsx(styles.container, styles['custom-vertical']) },
36
+ React.createElement("div", { className: styles.rail },
37
+ iconNode,
38
+ React.createElement("hr", { className: styles.connector, role: "none" })),
39
+ React.createElement("div", { className: styles.content },
40
+ React.createElement("div", { className: styles.header }, header),
41
+ details && React.createElement("div", { className: styles.details }, details))));
28
42
  };
29
43
  const InternalStep = ({ status, statusIconAriaLabel, header, details, orientation, }) => {
30
44
  return (React.createElement("li", { className: styles.container },
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAG1C,OAAO,uBAAuB,EAAE,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAG3F,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,aAAa,GAA8C;IAC/D,KAAK,EAAE,mBAAmB;IAC1B,OAAO,EAAE,qBAAqB;IAC9B,OAAO,EAAE,qBAAqB;IAC9B,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,sBAAsB;IAC/B,OAAO,EAAE,sBAAsB;IAC/B,aAAa,EAAE,sBAAsB;IACrC,OAAO,EAAE,sBAAsB;IAC/B,aAAa,EAAE,sBAAsB;CACtC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAClB,IAAI,EACJ,WAAW,EACX,UAAU,GAKX,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,mBAAmB,EAAE,GAAG,IAAI,CAAC;IAC7C,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IACnD,OAAO,CACL,4BAAI,SAAS,EAAE,MAAM,CAAC,SAAS;QAC7B,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;YAC1B,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAC,kBAAkB,IAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,mBAAmB,GAAI;YACtF,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,4BAAI,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,IAAI,EAAC,MAAM,GAAG,CAClF;QACL,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,CAC5B,4BAAI,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,IAAI,EAAC,MAAM,GAAG,CAChD,CAAC,CAAC,CAAC,CACF,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IAAG,MAAM,CAAO,CAC5D;QACA,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO,CACxD,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EACpB,MAAM,EACN,mBAAmB,EACnB,MAAM,EACN,OAAO,EACP,WAAW,GAC+C,EAAE,EAAE;IAC9D,OAAO,CACL,4BAAI,SAAS,EAAE,MAAM,CAAC,SAAS;QAC7B,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAC1B,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,CAC5B,oBAAC,uBAAuB,IAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,mBAAmB,IACtE,MAAM,CACiB,CAC3B,CAAC,CAAC,CAAC,CACF;YACE,oBAAC,WAAW,IAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC;gBACvC,oBAAC,kBAAkB,IAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,mBAAmB,GAAI,CAC5D;YACd,4BAAI,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,IAAI,EAAC,MAAM,GAAG,CAC9C,CACJ,CACG;QACL,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,CAC5B,4BAAI,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,IAAI,EAAC,MAAM,GAAG,CAChD,CAAC,CAAC,CAAC,CACF,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC;YACzC,oBAAC,WAAW,IAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,IAAG,MAAM,CAAe,CAC7D,CACP;QACA,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO,CACxD,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,EACrB,KAAK,EACL,WAAW,GAAG,UAAU,EACxB,UAAU,EACV,SAAS,EACT,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,GAAG,KAAK,EACW,EAAE,EAAE;IACvB,OAAO,CACL,gCACM,KAAK,EACT,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,EACjH,GAAG,EAAE,iBAAiB;QAEtB,4BACE,SAAS,EAAE,MAAM,CAAC,IAAI,gBACV,SAAS,qBACJ,cAAc,sBACb,eAAe,IAEhC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACzB,UAAU,CAAC,CAAC,CAAC,CACX,oBAAC,UAAU,IAAC,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,GAAI,CACzF,CAAC,CAAC,CAAC,CACF,oBAAC,YAAY,IACX,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,EAC7C,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,WAAW,GACxB,CACH,CACF,CACE,CACD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\nimport InternalStatusIndicator, { InternalStatusIcon } from '../status-indicator/internal';\nimport { StepsProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalStepsProps = SomeRequired<StepsProps, 'steps'> & InternalBaseComponentProps;\n\nconst statusToColor: Record<StepsProps.Status, BoxProps.Color> = {\n error: 'text-status-error',\n warning: 'text-status-warning',\n success: 'text-status-success',\n info: 'text-status-info',\n stopped: 'text-status-inactive',\n pending: 'text-status-inactive',\n 'in-progress': 'text-status-inactive',\n loading: 'text-status-inactive',\n 'not-started': 'text-status-inactive',\n};\n\nconst CustomStep = ({\n step,\n orientation,\n renderStep,\n}: {\n step: StepsProps.Step;\n orientation: StepsProps.Orientation;\n renderStep: Required<StepsProps>['renderStep'];\n}) => {\n const { status, statusIconAriaLabel } = step;\n const { header, details, icon } = renderStep(step);\n return (\n <li className={styles.container}>\n <div className={styles.header}>\n {icon ? icon : <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />}\n {orientation === 'vertical' ? header : <hr className={styles.connector} role=\"none\" />}\n </div>\n {orientation === 'vertical' ? (\n <hr className={styles.connector} role=\"none\" />\n ) : (\n <div className={styles['horizontal-header']}>{header}</div>\n )}\n {details && <div className={styles.details}>{details}</div>}\n </li>\n );\n};\n\nconst InternalStep = ({\n status,\n statusIconAriaLabel,\n header,\n details,\n orientation,\n}: StepsProps.Step & { orientation: StepsProps.Orientation }) => {\n return (\n <li className={styles.container}>\n <div className={styles.header}>\n {orientation === 'vertical' ? (\n <InternalStatusIndicator type={status} iconAriaLabel={statusIconAriaLabel}>\n {header}\n </InternalStatusIndicator>\n ) : (\n <>\n <InternalBox color={statusToColor[status]}>\n <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />\n </InternalBox>\n <hr className={styles.connector} role=\"none\" />\n </>\n )}\n </div>\n {orientation === 'vertical' ? (\n <hr className={styles.connector} role=\"none\" />\n ) : (\n <div className={styles['horizontal-header']}>\n <InternalBox color={statusToColor[status]}>{header}</InternalBox>\n </div>\n )}\n {details && <div className={styles.details}>{details}</div>}\n </li>\n );\n};\n\nconst InternalSteps = ({\n steps,\n orientation = 'vertical',\n renderStep,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n __internalRootRef,\n ...props\n}: InternalStepsProps) => {\n return (\n <div\n {...props}\n className={clsx(styles.root, props.className, orientation === 'horizontal' ? styles.horizontal : styles.vertical)}\n ref={__internalRootRef}\n >\n <ol\n className={styles.list}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n >\n {steps.map((step, index) =>\n renderStep ? (\n <CustomStep key={index} orientation={orientation} step={step} renderStep={renderStep} />\n ) : (\n <InternalStep\n key={index}\n status={step.status}\n statusIconAriaLabel={step.statusIconAriaLabel}\n header={step.header}\n details={step.details}\n orientation={orientation}\n />\n )\n )}\n </ol>\n </div>\n );\n};\n\nexport default InternalSteps;\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\nimport InternalStatusIndicator, { InternalStatusIcon } from '../status-indicator/internal';\nimport { StepsProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalStepsProps = SomeRequired<StepsProps, 'steps'> & InternalBaseComponentProps;\n\nconst statusToColor: Record<StepsProps.Status, BoxProps.Color> = {\n error: 'text-status-error',\n warning: 'text-status-warning',\n success: 'text-status-success',\n info: 'text-status-info',\n stopped: 'text-status-inactive',\n pending: 'text-status-inactive',\n 'in-progress': 'text-status-inactive',\n loading: 'text-status-inactive',\n 'not-started': 'text-status-inactive',\n};\n\nconst CustomStep = ({\n step,\n orientation,\n renderStep,\n}: {\n step: StepsProps.Step;\n orientation: StepsProps.Orientation;\n renderStep: Required<StepsProps>['renderStep'];\n}) => {\n const { status, statusIconAriaLabel } = step;\n const { header, details, icon } = renderStep(step);\n const iconNode = icon ? icon : <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />;\n\n if (orientation === 'horizontal') {\n return (\n <li className={styles.container}>\n <div className={styles.header}>\n {iconNode}\n <hr className={styles.connector} role=\"none\" />\n </div>\n <div className={styles['horizontal-header']}>{header}</div>\n {details && <div className={styles.details}>{details}</div>}\n </li>\n );\n }\n\n // Vertical orientation: render the icon and the connector together in a column-1 \"rail\" so the\n // connector starts directly beneath the icon and stretches the full height of the step. Unlike\n // placing the header in the same row as the icon, this keeps the vertical line continuous even\n // when the custom header wraps onto multiple lines.\n return (\n <li className={clsx(styles.container, styles['custom-vertical'])}>\n <div className={styles.rail}>\n {iconNode}\n <hr className={styles.connector} role=\"none\" />\n </div>\n <div className={styles.content}>\n <div className={styles.header}>{header}</div>\n {details && <div className={styles.details}>{details}</div>}\n </div>\n </li>\n );\n};\n\nconst InternalStep = ({\n status,\n statusIconAriaLabel,\n header,\n details,\n orientation,\n}: StepsProps.Step & { orientation: StepsProps.Orientation }) => {\n return (\n <li className={styles.container}>\n <div className={styles.header}>\n {orientation === 'vertical' ? (\n <InternalStatusIndicator type={status} iconAriaLabel={statusIconAriaLabel}>\n {header}\n </InternalStatusIndicator>\n ) : (\n <>\n <InternalBox color={statusToColor[status]}>\n <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />\n </InternalBox>\n <hr className={styles.connector} role=\"none\" />\n </>\n )}\n </div>\n {orientation === 'vertical' ? (\n <hr className={styles.connector} role=\"none\" />\n ) : (\n <div className={styles['horizontal-header']}>\n <InternalBox color={statusToColor[status]}>{header}</InternalBox>\n </div>\n )}\n {details && <div className={styles.details}>{details}</div>}\n </li>\n );\n};\n\nconst InternalSteps = ({\n steps,\n orientation = 'vertical',\n renderStep,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n __internalRootRef,\n ...props\n}: InternalStepsProps) => {\n return (\n <div\n {...props}\n className={clsx(styles.root, props.className, orientation === 'horizontal' ? styles.horizontal : styles.vertical)}\n ref={__internalRootRef}\n >\n <ol\n className={styles.list}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n >\n {steps.map((step, index) =>\n renderStep ? (\n <CustomStep key={index} orientation={orientation} step={step} renderStep={renderStep} />\n ) : (\n <InternalStep\n key={index}\n status={step.status}\n statusIconAriaLabel={step.statusIconAriaLabel}\n header={step.header}\n details={step.details}\n orientation={orientation}\n />\n )\n )}\n </ol>\n </div>\n );\n};\n\nexport default InternalSteps;\n"]}
@@ -1,14 +1,17 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "root": "awsui_root_gxp9y_13ibf_181",
5
- "list": "awsui_list_gxp9y_13ibf_214",
6
- "container": "awsui_container_gxp9y_13ibf_219",
7
- "header": "awsui_header_gxp9y_13ibf_224",
8
- "details": "awsui_details_gxp9y_13ibf_230",
9
- "connector": "awsui_connector_gxp9y_13ibf_236",
10
- "custom": "awsui_custom_gxp9y_13ibf_252",
11
- "horizontal": "awsui_horizontal_gxp9y_13ibf_256",
12
- "horizontal-header": "awsui_horizontal-header_gxp9y_13ibf_288"
4
+ "root": "awsui_root_gxp9y_12uqv_181",
5
+ "list": "awsui_list_gxp9y_12uqv_214",
6
+ "container": "awsui_container_gxp9y_12uqv_219",
7
+ "header": "awsui_header_gxp9y_12uqv_224",
8
+ "details": "awsui_details_gxp9y_12uqv_230",
9
+ "connector": "awsui_connector_gxp9y_12uqv_236",
10
+ "custom": "awsui_custom_gxp9y_12uqv_252",
11
+ "horizontal": "awsui_horizontal_gxp9y_12uqv_256",
12
+ "horizontal-header": "awsui_horizontal-header_gxp9y_12uqv_288",
13
+ "custom-vertical": "awsui_custom-vertical_gxp9y_12uqv_302",
14
+ "rail": "awsui_rail_gxp9y_12uqv_302",
15
+ "content": "awsui_content_gxp9y_12uqv_321"
13
16
  };
14
17
 
@@ -178,7 +178,7 @@
178
178
  */
179
179
  /* Style used for links in slots/components that are text heavy, to help links stand out among
180
180
  surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
181
- .awsui_root_gxp9y_13ibf_181:not(#\9) {
181
+ .awsui_root_gxp9y_12uqv_181:not(#\9) {
182
182
  border-collapse: separate;
183
183
  border-spacing: 0;
184
184
  box-sizing: border-box;
@@ -211,29 +211,29 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
211
211
  min-inline-size: 0;
212
212
  word-break: break-word;
213
213
  }
214
- .awsui_root_gxp9y_13ibf_181 > .awsui_list_gxp9y_13ibf_214:not(#\9) {
214
+ .awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214:not(#\9) {
215
215
  list-style: none;
216
216
  padding-inline-start: 0;
217
217
  margin-block: 0;
218
218
  }
219
- .awsui_root_gxp9y_13ibf_181 > .awsui_list_gxp9y_13ibf_214 > .awsui_container_gxp9y_13ibf_219:not(#\9) {
219
+ .awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219:not(#\9) {
220
220
  display: grid;
221
221
  grid-template-columns: var(--space-static-l-ig026c, 20px) 1fr;
222
222
  grid-template-rows: minmax(var(--space-static-l-ig026c, 20px), auto);
223
223
  }
224
- .awsui_root_gxp9y_13ibf_181 > .awsui_list_gxp9y_13ibf_214 > .awsui_container_gxp9y_13ibf_219 > .awsui_header_gxp9y_13ibf_224:not(#\9) {
224
+ .awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219 > .awsui_header_gxp9y_12uqv_224:not(#\9) {
225
225
  display: flex;
226
226
  gap: var(--space-xxs-jnczic, 4px);
227
227
  grid-row: 1;
228
228
  grid-column: 1/span 2;
229
229
  }
230
- .awsui_root_gxp9y_13ibf_181 > .awsui_list_gxp9y_13ibf_214 > .awsui_container_gxp9y_13ibf_219 > .awsui_details_gxp9y_13ibf_230:not(#\9) {
230
+ .awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219 > .awsui_details_gxp9y_12uqv_230:not(#\9) {
231
231
  align-items: center;
232
232
  grid-row: 2;
233
233
  grid-column: 2;
234
234
  margin-block-end: var(--space-static-xs-4gq40t, 8px);
235
235
  }
236
- .awsui_root_gxp9y_13ibf_181 > .awsui_list_gxp9y_13ibf_214 > .awsui_container_gxp9y_13ibf_219 > .awsui_connector_gxp9y_13ibf_236:not(#\9) {
236
+ .awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219 > .awsui_connector_gxp9y_12uqv_236:not(#\9) {
237
237
  grid-row: 2;
238
238
  grid-column: 1;
239
239
  background-color: var(--color-border-divider-default-ipvpev, #eaeded);
@@ -246,32 +246,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
246
246
  position: relative;
247
247
  inset-inline-end: var(--space-static-xxxs-zckw10, 2px);
248
248
  }
249
- .awsui_root_gxp9y_13ibf_181 > .awsui_list_gxp9y_13ibf_214 > :not(#\9):last-of-type > .awsui_connector_gxp9y_13ibf_236 {
249
+ .awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214 > :not(#\9):last-of-type > .awsui_connector_gxp9y_12uqv_236 {
250
250
  display: none;
251
251
  }
252
- .awsui_root_gxp9y_13ibf_181 > .awsui_list_gxp9y_13ibf_214.awsui_custom_gxp9y_13ibf_252 > .awsui_details_gxp9y_13ibf_230:not(#\9) {
252
+ .awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214.awsui_custom_gxp9y_12uqv_252 > .awsui_details_gxp9y_12uqv_230:not(#\9) {
253
253
  margin-block-end: 0;
254
254
  }
255
255
 
256
- .awsui_horizontal_gxp9y_13ibf_256 > .awsui_list_gxp9y_13ibf_214:not(#\9) {
256
+ .awsui_horizontal_gxp9y_12uqv_256 > .awsui_list_gxp9y_12uqv_214:not(#\9) {
257
257
  display: grid;
258
258
  align-items: flex-start;
259
259
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
260
260
  grid-auto-flow: column;
261
261
  }
262
- .awsui_horizontal_gxp9y_13ibf_256 > .awsui_list_gxp9y_13ibf_214 > .awsui_container_gxp9y_13ibf_219:not(#\9) {
262
+ .awsui_horizontal_gxp9y_12uqv_256 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219:not(#\9) {
263
263
  display: grid;
264
264
  grid-template-columns: var(--space-static-l-ig026c, 20px) 1fr;
265
265
  grid-template-rows: minmax(var(--space-static-l-ig026c, 20px), auto);
266
266
  align-items: center;
267
267
  }
268
- .awsui_horizontal_gxp9y_13ibf_256 > .awsui_list_gxp9y_13ibf_214 > .awsui_container_gxp9y_13ibf_219 > .awsui_header_gxp9y_13ibf_224:not(#\9) {
268
+ .awsui_horizontal_gxp9y_12uqv_256 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219 > .awsui_header_gxp9y_12uqv_224:not(#\9) {
269
269
  display: flex;
270
270
  grid-row: 1;
271
271
  grid-column: 1/span 2;
272
272
  align-items: center;
273
273
  }
274
- .awsui_horizontal_gxp9y_13ibf_256 > .awsui_list_gxp9y_13ibf_214 > .awsui_container_gxp9y_13ibf_219 > .awsui_header_gxp9y_13ibf_224 > .awsui_connector_gxp9y_13ibf_236:not(#\9) {
274
+ .awsui_horizontal_gxp9y_12uqv_256 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219 > .awsui_header_gxp9y_12uqv_224 > .awsui_connector_gxp9y_12uqv_236:not(#\9) {
275
275
  display: block;
276
276
  flex: 1;
277
277
  background-color: var(--color-border-divider-default-ipvpev, #eaeded);
@@ -285,16 +285,44 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
285
285
  min-inline-size: var(--space-static-xs-4gq40t, 8px);
286
286
  margin-inline-end: var(--space-static-xxs-0cgyf1, 4px);
287
287
  }
288
- .awsui_horizontal_gxp9y_13ibf_256 > .awsui_list_gxp9y_13ibf_214 > .awsui_container_gxp9y_13ibf_219 > .awsui_horizontal-header_gxp9y_13ibf_288:not(#\9) {
288
+ .awsui_horizontal_gxp9y_12uqv_256 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219 > .awsui_horizontal-header_gxp9y_12uqv_288:not(#\9) {
289
289
  grid-row: 2;
290
290
  grid-column: 1/span 3;
291
291
  padding-inline-end: var(--space-xs-kw7k3v, 8px);
292
292
  }
293
- .awsui_horizontal_gxp9y_13ibf_256 > .awsui_list_gxp9y_13ibf_214 > .awsui_container_gxp9y_13ibf_219 > .awsui_details_gxp9y_13ibf_230:not(#\9) {
293
+ .awsui_horizontal_gxp9y_12uqv_256 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219 > .awsui_details_gxp9y_12uqv_230:not(#\9) {
294
294
  grid-row: 3;
295
295
  grid-column: 1/span 3;
296
296
  padding-inline-end: var(--space-xs-kw7k3v, 8px);
297
297
  }
298
- .awsui_horizontal_gxp9y_13ibf_256 > .awsui_list_gxp9y_13ibf_214 > .awsui_container_gxp9y_13ibf_219:not(#\9):last-child > .awsui_header_gxp9y_13ibf_224 > .awsui_connector_gxp9y_13ibf_236 {
298
+ .awsui_horizontal_gxp9y_12uqv_256 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219:not(#\9):last-child > .awsui_header_gxp9y_12uqv_224 > .awsui_connector_gxp9y_12uqv_236 {
299
+ display: none;
300
+ }
301
+
302
+ .awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219.awsui_custom-vertical_gxp9y_12uqv_302 > .awsui_rail_gxp9y_12uqv_302:not(#\9) {
303
+ grid-column: 1;
304
+ display: flex;
305
+ flex-direction: column;
306
+ align-items: center;
307
+ }
308
+ .awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219.awsui_custom-vertical_gxp9y_12uqv_302 > .awsui_rail_gxp9y_12uqv_302 > .awsui_connector_gxp9y_12uqv_236:not(#\9) {
309
+ grid-row: auto;
310
+ grid-column: auto;
311
+ flex: 1 1 auto;
312
+ background-color: var(--color-border-divider-default-ipvpev, #eaeded);
313
+ border-block: 0;
314
+ border-inline: 0;
315
+ inline-size: var(--border-divider-list-width-8ggz94, 1px);
316
+ block-size: auto;
317
+ min-block-size: var(--space-static-xs-4gq40t, 8px);
318
+ inset-inline-end: 0;
319
+ margin-block: var(--space-static-xxs-0cgyf1, 4px) 0;
320
+ }
321
+ .awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219.awsui_custom-vertical_gxp9y_12uqv_302 > .awsui_content_gxp9y_12uqv_321:not(#\9) {
322
+ grid-column: 2;
323
+ min-inline-size: 0;
324
+ }
325
+
326
+ .awsui_root_gxp9y_12uqv_181 > .awsui_list_gxp9y_12uqv_214 > .awsui_container_gxp9y_12uqv_219.awsui_custom-vertical_gxp9y_12uqv_302:not(#\9):last-of-type > .awsui_rail_gxp9y_12uqv_302 > .awsui_connector_gxp9y_12uqv_236 {
299
327
  display: none;
300
328
  }
@@ -2,14 +2,17 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "root": "awsui_root_gxp9y_13ibf_181",
6
- "list": "awsui_list_gxp9y_13ibf_214",
7
- "container": "awsui_container_gxp9y_13ibf_219",
8
- "header": "awsui_header_gxp9y_13ibf_224",
9
- "details": "awsui_details_gxp9y_13ibf_230",
10
- "connector": "awsui_connector_gxp9y_13ibf_236",
11
- "custom": "awsui_custom_gxp9y_13ibf_252",
12
- "horizontal": "awsui_horizontal_gxp9y_13ibf_256",
13
- "horizontal-header": "awsui_horizontal-header_gxp9y_13ibf_288"
5
+ "root": "awsui_root_gxp9y_12uqv_181",
6
+ "list": "awsui_list_gxp9y_12uqv_214",
7
+ "container": "awsui_container_gxp9y_12uqv_219",
8
+ "header": "awsui_header_gxp9y_12uqv_224",
9
+ "details": "awsui_details_gxp9y_12uqv_230",
10
+ "connector": "awsui_connector_gxp9y_12uqv_236",
11
+ "custom": "awsui_custom_gxp9y_12uqv_252",
12
+ "horizontal": "awsui_horizontal_gxp9y_12uqv_256",
13
+ "horizontal-header": "awsui_horizontal-header_gxp9y_12uqv_288",
14
+ "custom-vertical": "awsui_custom-vertical_gxp9y_12uqv_302",
15
+ "rail": "awsui_rail_gxp9y_12uqv_302",
16
+ "content": "awsui_content_gxp9y_12uqv_321"
14
17
  };
15
18
 
@@ -1 +1 @@
1
- {"version":3,"file":"group-header-cell.d.ts","sourceRoot":"","sources":["../../../../src/table/header-cell/group-header-cell.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAK3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAKrD,MAAM,WAAW,yBAA0B,SAAQ,mBAAmB;IACpE,KAAK,EAAE,UAAU,CAAC,eAAe,CAAC;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,cAAc,EAAE,WAAW,EAAE,CAAC;IAC9B,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,sBAAsB,CAAC,EAAE,WAAW,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,MAAM,EACN,WAAW,EACX,WAAW,EACX,OAAO,EACP,SAAS,EACT,sBAAsB,EACtB,kBAAkB,EAClB,OAAO,EACP,YAAY,EACZ,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,MAAM,EACN,SAAS,GACV,EAAE,yBAAyB,eAmF3B"}
1
+ {"version":3,"file":"group-header-cell.d.ts","sourceRoot":"","sources":["../../../../src/table/header-cell/group-header-cell.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAKrD,MAAM,WAAW,yBAA0B,SAAQ,mBAAmB;IACpE,KAAK,EAAE,UAAU,CAAC,eAAe,CAAC;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,cAAc,EAAE,WAAW,EAAE,CAAC;IAC9B,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,sBAAsB,CAAC,EAAE,WAAW,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,QAAQ,EACR,MAAM,EACN,MAAM,EACN,WAAW,EACX,WAAW,EACX,OAAO,EACP,SAAS,EACT,sBAAsB,EACtB,kBAAkB,EAClB,OAAO,EACP,YAAY,EACZ,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,MAAM,EACN,SAAS,GACV,EAAE,yBAAyB,eAuE3B"}
@@ -5,13 +5,11 @@ import clsx from 'clsx';
5
5
  import { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
6
6
  import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
7
7
  import { Divider, Resizer } from '../resizer';
8
- import { useStickyCellStyles } from '../sticky-columns';
9
8
  import { DEFAULT_COLUMN_WIDTH, useColumnWidths } from '../use-column-widths';
10
- import { getStickyClassNames } from '../utils';
11
9
  import { TableThElement } from './th-element';
12
10
  import styles from './styles.css.js';
13
11
  export function TableGroupHeaderCell({ group, colspan, rowspan, colIndex, groupId, resizableColumns, resizableStyle, onResizeFinish, updateGroupWidth, childColumnIds, focusedComponent, tabIndex, sticky, hidden, stripedRows, stickyState, cellRef, tableRole, resizerRoleDescription, resizerTooltipText, variant, tableVariant, columnGroupId, stickyColumnId, stickyBoundaryColumnId, isLast, wrapLines, }) {
14
- var _a, _b;
12
+ var _a;
15
13
  const headerId = useUniqueId('table-group-header-');
16
14
  const { columnWidths } = useColumnWidths();
17
15
  // Effective min = sum of non-rightmost children's current widths (fixed) + rightmost child's minWidth
@@ -24,21 +22,11 @@ export function TableGroupHeaderCell({ group, colspan, rowspan, colIndex, groupI
24
22
  }, 0);
25
23
  const clickableHeaderRef = useRef(null);
26
24
  const { tabIndex: clickableHeaderTabIndex } = useSingleTabStopNavigation(clickableHeaderRef, { tabIndex });
27
- // Subscribe to the boundary column's sticky state to inherit shadow/clip-path classes.
28
- // The offset/position comes from stickyColumnId (first child); this only adds boundary classes.
29
- const boundaryStyles = useStickyCellStyles({
30
- stickyColumns: stickyState,
31
- columnId: (_a = stickyBoundaryColumnId !== null && stickyBoundaryColumnId !== void 0 ? stickyBoundaryColumnId : stickyColumnId) !== null && _a !== void 0 ? _a : groupId,
32
- getClassName: props => getStickyClassNames(styles, props),
33
- });
34
- // boundaryStyles.className is populated by scroll/intersection observers in the browser.
35
- // In JSDOM these observers don't fire, so this branch is only exercised in integration tests.
36
- const boundaryClassName = stickyBoundaryColumnId && boundaryStyles.className ? boundaryStyles.className : undefined;
37
- return (React.createElement(TableThElement, { resizableStyle: resizableStyle, cellRef: cellRef, focusedComponent: focusedComponent, sticky: sticky, resizable: resizableColumns, hidden: hidden, stripedRows: stripedRows, colIndex: colIndex, columnId: stickyColumnId !== null && stickyColumnId !== void 0 ? stickyColumnId : groupId, stickyState: stickyState, tableRole: tableRole, variant: variant, tableVariant: tableVariant, colSpan: colspan, rowSpan: rowspan, scope: "colgroup", isLast: isLast, columnGroupId: columnGroupId, className: boundaryClassName, boundaryRef: stickyBoundaryColumnId ? boundaryStyles.ref : undefined },
25
+ return (React.createElement(TableThElement, { resizableStyle: resizableStyle, cellRef: cellRef, focusedComponent: focusedComponent, sticky: sticky, resizable: resizableColumns, hidden: hidden, stripedRows: stripedRows, colIndex: colIndex, columnId: stickyColumnId !== null && stickyColumnId !== void 0 ? stickyColumnId : groupId, stickyBoundaryColumnId: stickyBoundaryColumnId, stickyState: stickyState, tableRole: tableRole, variant: variant, tableVariant: tableVariant, colSpan: colspan, rowSpan: rowspan, scope: "colgroup", isLast: isLast, columnGroupId: columnGroupId },
38
26
  React.createElement("div", { ref: clickableHeaderRef, "data-focus-id": `group-header-${groupId}`, className: clsx(styles['header-cell-content'], {
39
27
  [styles['header-cell-fake-focus']]: focusedComponent === `group-header-${groupId}`,
40
- }), "aria-label": (_b = group.ariaLabel) === null || _b === void 0 ? void 0 : _b.call(group, { sorted: false, descending: false, disabled: true }), tabIndex: clickableHeaderTabIndex },
28
+ }), "aria-label": (_a = group.ariaLabel) === null || _a === void 0 ? void 0 : _a.call(group, { sorted: false, descending: false, disabled: true }), tabIndex: clickableHeaderTabIndex },
41
29
  React.createElement("div", { className: clsx(styles['header-cell-text'], wrapLines && styles['header-cell-text-wrap']), id: headerId }, group.header)),
42
- resizableColumns ? (React.createElement(Resizer, { tabIndex: tabIndex, focusId: `resize-group-${groupId}`, showFocusRing: focusedComponent === `resize-group-${groupId}`, onWidthUpdate: newWidth => updateGroupWidth(groupId, newWidth), onWidthUpdateCommit: onResizeFinish, ariaLabelledby: headerId, minWidth: groupMinWidth, roleDescription: resizerRoleDescription, tooltipText: resizerTooltipText, isBorderless: variant === 'full-page' || variant === 'embedded' || variant === 'borderless', isLast: isLast, dividerPosition: columnGroupId ? 'full' : 'bottom' })) : (React.createElement(Divider, { position: columnGroupId ? 'full' : 'bottom' }))));
30
+ resizableColumns ? (React.createElement(Resizer, { tabIndex: tabIndex, focusId: `resize-group-${groupId}`, showFocusRing: focusedComponent === `resize-group-${groupId}`, onWidthUpdate: newWidth => updateGroupWidth(groupId, newWidth), onWidthUpdateCommit: onResizeFinish, ariaLabelledby: headerId, minWidth: groupMinWidth, roleDescription: resizerRoleDescription, tooltipText: resizerTooltipText, isBorderless: variant === 'full-page' || variant === 'embedded' || variant === 'borderless', isLast: isLast, isGrouped: true, dividerPosition: columnGroupId ? 'full' : 'bottom' })) : (React.createElement(Divider, { position: columnGroupId ? 'full' : 'bottom', isGrouped: true }))));
43
31
  }
44
32
  //# sourceMappingURL=group-header-cell.js.map