@cloudscape-design/components-themeable 3.0.1382 → 3.0.1384

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 (221) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/container/styles.scss +5 -4
  3. package/lib/internal/scss/input/styles.scss +4 -0
  4. package/lib/internal/scss/internal/components/button-trigger/styles.scss +4 -0
  5. package/lib/internal/scss/internal/components/control-group/styles.scss +53 -0
  6. package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +176 -175
  7. package/lib/internal/scss/internal/styles/forms/mixins.scss +58 -17
  8. package/lib/internal/scss/modal/styles.scss +6 -0
  9. package/lib/internal/scss/prompt-input/styles.scss +4 -0
  10. package/lib/internal/scss/segmented-control/segment.scss +5 -0
  11. package/lib/internal/scss/segmented-control/styles.scss +29 -4
  12. package/lib/internal/scss/side-navigation/styles.scss +13 -6
  13. package/lib/internal/scss/steps/styles.scss +1 -1
  14. package/lib/internal/template/alert/styles.css.js +27 -27
  15. package/lib/internal/template/alert/styles.scoped.css +50 -50
  16. package/lib/internal/template/alert/styles.selectors.js +27 -27
  17. package/lib/internal/template/annotation-context/annotation/styles.css.js +13 -13
  18. package/lib/internal/template/annotation-context/annotation/styles.scoped.css +21 -21
  19. package/lib/internal/template/annotation-context/annotation/styles.selectors.js +13 -13
  20. package/lib/internal/template/app-layout/notifications/styles.css.js +3 -3
  21. package/lib/internal/template/app-layout/notifications/styles.scoped.css +7 -7
  22. package/lib/internal/template/app-layout/notifications/styles.selectors.js +3 -3
  23. package/lib/internal/template/app-layout/visual-refresh/styles.css.js +86 -86
  24. package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +258 -258
  25. package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +86 -86
  26. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.css.js +32 -32
  27. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +89 -89
  28. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +32 -32
  29. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.css.js +6 -6
  30. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +13 -13
  31. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +6 -6
  32. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.css.js +30 -30
  33. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css +68 -68
  34. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js +30 -30
  35. package/lib/internal/template/attribute-editor/styles.css.js +15 -15
  36. package/lib/internal/template/attribute-editor/styles.scoped.css +28 -28
  37. package/lib/internal/template/attribute-editor/styles.selectors.js +15 -15
  38. package/lib/internal/template/breadcrumb-group/item/styles.css.js +7 -7
  39. package/lib/internal/template/breadcrumb-group/item/styles.scoped.css +28 -28
  40. package/lib/internal/template/breadcrumb-group/item/styles.selectors.js +7 -7
  41. package/lib/internal/template/button/styles.css.js +23 -23
  42. package/lib/internal/template/button/styles.scoped.css +261 -261
  43. package/lib/internal/template/button/styles.selectors.js +23 -23
  44. package/lib/internal/template/button-dropdown/item-element/styles.css.js +21 -21
  45. package/lib/internal/template/button-dropdown/item-element/styles.scoped.css +37 -37
  46. package/lib/internal/template/button-dropdown/item-element/styles.selectors.js +21 -21
  47. package/lib/internal/template/cards/styles.css.js +39 -39
  48. package/lib/internal/template/cards/styles.scoped.css +41 -41
  49. package/lib/internal/template/cards/styles.selectors.js +39 -39
  50. package/lib/internal/template/checkbox/styles.css.js +3 -3
  51. package/lib/internal/template/checkbox/styles.scoped.css +10 -10
  52. package/lib/internal/template/checkbox/styles.selectors.js +3 -3
  53. package/lib/internal/template/container/style.d.ts +1 -15
  54. package/lib/internal/template/container/style.d.ts.map +1 -1
  55. package/lib/internal/template/container/style.js +6 -2
  56. package/lib/internal/template/container/style.js.map +1 -1
  57. package/lib/internal/template/container/styles.css.js +34 -34
  58. package/lib/internal/template/container/styles.scoped.css +87 -87
  59. package/lib/internal/template/container/styles.selectors.js +34 -34
  60. package/lib/internal/template/content-layout/styles.css.js +14 -14
  61. package/lib/internal/template/content-layout/styles.scoped.css +27 -27
  62. package/lib/internal/template/content-layout/styles.selectors.js +14 -14
  63. package/lib/internal/template/dropdown/styles.css.js +20 -20
  64. package/lib/internal/template/dropdown/styles.scoped.css +49 -49
  65. package/lib/internal/template/dropdown/styles.selectors.js +20 -20
  66. package/lib/internal/template/expandable-section/expandable-section-header.d.ts.map +1 -1
  67. package/lib/internal/template/expandable-section/expandable-section-header.js +1 -1
  68. package/lib/internal/template/expandable-section/expandable-section-header.js.map +1 -1
  69. package/lib/internal/template/expandable-section/interfaces.d.ts +4 -4
  70. package/lib/internal/template/expandable-section/interfaces.js.map +1 -1
  71. package/lib/internal/template/file-token-group/styles.css.js +23 -23
  72. package/lib/internal/template/file-token-group/styles.scoped.css +36 -36
  73. package/lib/internal/template/file-token-group/styles.selectors.js +23 -23
  74. package/lib/internal/template/flashbar/styles.css.js +50 -50
  75. package/lib/internal/template/flashbar/styles.scoped.css +184 -184
  76. package/lib/internal/template/flashbar/styles.selectors.js +50 -50
  77. package/lib/internal/template/help-panel/styles.css.js +6 -6
  78. package/lib/internal/template/help-panel/styles.scoped.css +72 -72
  79. package/lib/internal/template/help-panel/styles.selectors.js +6 -6
  80. package/lib/internal/template/input/internal.d.ts.map +1 -1
  81. package/lib/internal/template/input/internal.js +10 -4
  82. package/lib/internal/template/input/internal.js.map +1 -1
  83. package/lib/internal/template/input/styles.css.js +36 -29
  84. package/lib/internal/template/input/styles.scoped.css +168 -137
  85. package/lib/internal/template/input/styles.selectors.js +36 -29
  86. package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
  87. package/lib/internal/template/internal/components/autosuggest-input/index.d.ts.map +1 -1
  88. package/lib/internal/template/internal/components/autosuggest-input/index.js +4 -1
  89. package/lib/internal/template/internal/components/autosuggest-input/index.js.map +1 -1
  90. package/lib/internal/template/internal/components/button-trigger/index.d.ts +2 -0
  91. package/lib/internal/template/internal/components/button-trigger/index.d.ts.map +1 -1
  92. package/lib/internal/template/internal/components/button-trigger/index.js +3 -2
  93. package/lib/internal/template/internal/components/button-trigger/index.js.map +1 -1
  94. package/lib/internal/template/internal/components/button-trigger/styles.css.js +21 -14
  95. package/lib/internal/template/internal/components/button-trigger/styles.scoped.css +63 -33
  96. package/lib/internal/template/internal/components/button-trigger/styles.selectors.js +21 -14
  97. package/lib/internal/template/internal/components/control-group/grouped-control-styles.d.ts +10 -0
  98. package/lib/internal/template/internal/components/control-group/grouped-control-styles.d.ts.map +1 -0
  99. package/lib/internal/template/internal/components/control-group/grouped-control-styles.js +14 -0
  100. package/lib/internal/template/internal/components/control-group/grouped-control-styles.js.map +1 -0
  101. package/lib/internal/template/internal/components/control-group/index.d.ts +9 -0
  102. package/lib/internal/template/internal/components/control-group/index.d.ts.map +1 -0
  103. package/lib/internal/template/internal/components/control-group/index.js +20 -0
  104. package/lib/internal/template/internal/components/control-group/index.js.map +1 -0
  105. package/lib/internal/template/internal/components/control-group/styles.css.js +13 -0
  106. package/lib/internal/template/internal/components/control-group/styles.scoped.css +63 -0
  107. package/lib/internal/template/internal/components/control-group/styles.selectors.js +14 -0
  108. package/lib/internal/template/internal/components/drag-handle-wrapper/styles.css.js +30 -30
  109. package/lib/internal/template/internal/components/drag-handle-wrapper/styles.scoped.css +58 -58
  110. package/lib/internal/template/internal/components/drag-handle-wrapper/styles.selectors.js +30 -30
  111. package/lib/internal/template/internal/components/focus-lock/index.d.ts +6 -0
  112. package/lib/internal/template/internal/components/focus-lock/index.d.ts.map +1 -1
  113. package/lib/internal/template/internal/components/focus-lock/index.js +8 -3
  114. package/lib/internal/template/internal/components/focus-lock/index.js.map +1 -1
  115. package/lib/internal/template/internal/components/option/styles.css.js +17 -17
  116. package/lib/internal/template/internal/components/option/styles.scoped.css +31 -31
  117. package/lib/internal/template/internal/components/option/styles.selectors.js +17 -17
  118. package/lib/internal/template/internal/components/radio-button/styles.css.js +7 -7
  119. package/lib/internal/template/internal/components/radio-button/styles.scoped.css +17 -17
  120. package/lib/internal/template/internal/components/radio-button/styles.selectors.js +7 -7
  121. package/lib/internal/template/internal/components/selectable-item/styles.css.js +22 -22
  122. package/lib/internal/template/internal/components/selectable-item/styles.scoped.css +57 -57
  123. package/lib/internal/template/internal/components/selectable-item/styles.selectors.js +22 -22
  124. package/lib/internal/template/internal/components/token-list/styles.css.js +10 -10
  125. package/lib/internal/template/internal/components/token-list/styles.scoped.css +25 -25
  126. package/lib/internal/template/internal/components/token-list/styles.selectors.js +10 -10
  127. package/lib/internal/template/internal/context/control-group-context.d.ts +30 -0
  128. package/lib/internal/template/internal/context/control-group-context.d.ts.map +1 -0
  129. package/lib/internal/template/internal/context/control-group-context.js +24 -0
  130. package/lib/internal/template/internal/context/control-group-context.js.map +1 -0
  131. package/lib/internal/template/internal/environment.js +2 -2
  132. package/lib/internal/template/internal/environment.json +2 -2
  133. package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts +1 -0
  134. package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts.map +1 -1
  135. package/lib/internal/template/internal/generated/custom-css-properties/index.js +175 -174
  136. package/lib/internal/template/internal/generated/custom-css-properties/index.js.map +1 -1
  137. package/lib/internal/template/item-card/styles.css.js +14 -14
  138. package/lib/internal/template/item-card/styles.scoped.css +63 -63
  139. package/lib/internal/template/item-card/styles.selectors.js +14 -14
  140. package/lib/internal/template/link/styles.css.js +21 -21
  141. package/lib/internal/template/link/styles.scoped.css +104 -104
  142. package/lib/internal/template/link/styles.selectors.js +21 -21
  143. package/lib/internal/template/modal/index.d.ts +1 -1
  144. package/lib/internal/template/modal/index.d.ts.map +1 -1
  145. package/lib/internal/template/modal/index.js +6 -5
  146. package/lib/internal/template/modal/index.js.map +1 -1
  147. package/lib/internal/template/modal/interfaces.d.ts +7 -0
  148. package/lib/internal/template/modal/interfaces.d.ts.map +1 -1
  149. package/lib/internal/template/modal/interfaces.js.map +1 -1
  150. package/lib/internal/template/modal/internal.js +23 -6
  151. package/lib/internal/template/modal/internal.js.map +1 -1
  152. package/lib/internal/template/modal/styles.css.js +32 -31
  153. package/lib/internal/template/modal/styles.scoped.css +51 -48
  154. package/lib/internal/template/modal/styles.selectors.js +32 -31
  155. package/lib/internal/template/multiselect/internal.d.ts.map +1 -1
  156. package/lib/internal/template/multiselect/internal.js +17 -10
  157. package/lib/internal/template/multiselect/internal.js.map +1 -1
  158. package/lib/internal/template/progress-bar/styles.css.js +19 -19
  159. package/lib/internal/template/progress-bar/styles.scoped.css +58 -58
  160. package/lib/internal/template/progress-bar/styles.selectors.js +19 -19
  161. package/lib/internal/template/prompt-input/styles.css.js +26 -26
  162. package/lib/internal/template/prompt-input/styles.scoped.css +109 -109
  163. package/lib/internal/template/prompt-input/styles.selectors.js +26 -26
  164. package/lib/internal/template/segmented-control/internal-segmented-control.d.ts +6 -1
  165. package/lib/internal/template/segmented-control/internal-segmented-control.d.ts.map +1 -1
  166. package/lib/internal/template/segmented-control/internal-segmented-control.js +8 -3
  167. package/lib/internal/template/segmented-control/internal-segmented-control.js.map +1 -1
  168. package/lib/internal/template/segmented-control/internal.d.ts.map +1 -1
  169. package/lib/internal/template/segmented-control/internal.js +5 -2
  170. package/lib/internal/template/segmented-control/internal.js.map +1 -1
  171. package/lib/internal/template/segmented-control/segment.d.ts +1 -0
  172. package/lib/internal/template/segmented-control/segment.d.ts.map +1 -1
  173. package/lib/internal/template/segmented-control/segment.js +2 -2
  174. package/lib/internal/template/segmented-control/segment.js.map +1 -1
  175. package/lib/internal/template/segmented-control/styles.css.js +26 -16
  176. package/lib/internal/template/segmented-control/styles.scoped.css +106 -46
  177. package/lib/internal/template/segmented-control/styles.selectors.js +26 -16
  178. package/lib/internal/template/select/internal.d.ts.map +1 -1
  179. package/lib/internal/template/select/internal.js +11 -8
  180. package/lib/internal/template/select/internal.js.map +1 -1
  181. package/lib/internal/template/select/parts/styles.css.js +21 -21
  182. package/lib/internal/template/select/parts/styles.scoped.css +24 -24
  183. package/lib/internal/template/select/parts/styles.selectors.js +21 -21
  184. package/lib/internal/template/select/parts/trigger.d.ts +2 -0
  185. package/lib/internal/template/select/parts/trigger.d.ts.map +1 -1
  186. package/lib/internal/template/select/parts/trigger.js +2 -2
  187. package/lib/internal/template/select/parts/trigger.js.map +1 -1
  188. package/lib/internal/template/side-navigation/styles.css.js +64 -64
  189. package/lib/internal/template/side-navigation/styles.scoped.css +119 -114
  190. package/lib/internal/template/side-navigation/styles.selectors.js +64 -64
  191. package/lib/internal/template/slider/styles.css.js +26 -26
  192. package/lib/internal/template/slider/styles.scoped.css +165 -165
  193. package/lib/internal/template/slider/styles.selectors.js +26 -26
  194. package/lib/internal/template/spinner/styles.css.js +14 -14
  195. package/lib/internal/template/spinner/styles.scoped.css +40 -40
  196. package/lib/internal/template/spinner/styles.selectors.js +14 -14
  197. package/lib/internal/template/steps/styles.css.js +17 -17
  198. package/lib/internal/template/steps/styles.scoped.css +35 -35
  199. package/lib/internal/template/steps/styles.selectors.js +17 -17
  200. package/lib/internal/template/table/styles.css.js +37 -37
  201. package/lib/internal/template/table/styles.scoped.css +46 -46
  202. package/lib/internal/template/table/styles.selectors.js +37 -37
  203. package/lib/internal/template/tabs/styles.css.js +30 -30
  204. package/lib/internal/template/tabs/styles.scoped.css +76 -76
  205. package/lib/internal/template/tabs/styles.selectors.js +30 -30
  206. package/lib/internal/template/tag-editor/styles.css.js +3 -3
  207. package/lib/internal/template/tag-editor/styles.scoped.css +13 -13
  208. package/lib/internal/template/tag-editor/styles.selectors.js +3 -3
  209. package/lib/internal/template/text-content/styles.css.js +1 -1
  210. package/lib/internal/template/text-content/styles.scoped.css +66 -66
  211. package/lib/internal/template/text-content/styles.selectors.js +1 -1
  212. package/lib/internal/template/textarea/styles.css.js +9 -9
  213. package/lib/internal/template/textarea/styles.scoped.css +51 -55
  214. package/lib/internal/template/textarea/styles.selectors.js +9 -9
  215. package/lib/internal/template/toggle/styles.css.js +10 -10
  216. package/lib/internal/template/toggle/styles.scoped.css +22 -22
  217. package/lib/internal/template/toggle/styles.selectors.js +10 -10
  218. package/lib/internal/template/token/styles.css.js +14 -14
  219. package/lib/internal/template/token/styles.scoped.css +46 -46
  220. package/lib/internal/template/token/styles.selectors.js +14 -14
  221. package/package.json +1 -1
package/lib/internal/template/prompt-input/styles.scoped.css CHANGED
@@ -7,7 +7,7 @@
7
7
  /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
8
8
  /* Style used for links in slots/components that are text heavy, to help links stand out among
9
9
  surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
10
- .awsui_root_55fkh_7hmfa_10:not(#\9) {
10
+ .awsui_root_55fkh_p5zjs_10:not(#\9) {
11
11
  border-collapse: separate;
12
12
  border-spacing: 0;
13
13
  box-sizing: border-box;
@@ -42,107 +42,103 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
42
42
  border-end-start-radius: var(--border-radius-input-k1q34z, 2px);
43
43
  border-end-end-radius: var(--border-radius-input-k1q34z, 2px);
44
44
  cursor: text;
45
- background-color: var(--awsui-prompt-input-style-background-default-66120l, var(--color-background-input-default-1u0v1p, #ffffff));
46
- border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-default-66120l, var(--color-border-input-default-jtkw9d, #687078));
47
- border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-default-66120l, var(--color-border-input-default-jtkw9d, #687078));
48
- box-shadow: var(--awsui-prompt-input-style-box-shadow-default-66120l);
49
- }
50
- .awsui_root_55fkh_7hmfa_10:not(#\9):hover {
51
- background-color: var(--awsui-prompt-input-style-background-hover-66120l, var(--awsui-prompt-input-style-background-default-66120l, var(--color-background-input-default-1u0v1p, #ffffff)));
52
- border-color: var(--awsui-prompt-input-style-border-color-hover-66120l, var(--awsui-prompt-input-style-border-color-default-66120l, var(--color-border-input-default-jtkw9d, #687078)));
53
- box-shadow: var(--awsui-prompt-input-style-box-shadow-hover-66120l, var(--awsui-prompt-input-style-box-shadow-default-66120l));
54
- }
55
- .awsui_root_55fkh_7hmfa_10.awsui_textarea-readonly_55fkh_7hmfa_55:not(#\9) {
56
- background-color: var(--awsui-prompt-input-style-background-readonly-66120l, var(--awsui-prompt-input-style-background-default-66120l, var(--color-background-input-default-1u0v1p, #ffffff)));
57
- border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-readonly-66120l, var(--awsui-prompt-input-style-border-color-default-66120l, var(--color-border-input-disabled-5m31k6, #eaeded)));
58
- border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-readonly-66120l, var(--awsui-prompt-input-style-border-color-default-66120l, var(--color-border-input-disabled-5m31k6, #eaeded)));
59
- box-shadow: var(--awsui-prompt-input-style-box-shadow-readonly-66120l);
60
- }
61
- .awsui_root_55fkh_7hmfa_10.awsui_disabled_55fkh_7hmfa_61:not(#\9) {
62
- background-color: var(--awsui-prompt-input-style-background-disabled-66120l, var(--color-background-input-disabled-pyvhb1, #eaeded));
63
- border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-disabled-66120l, var(--color-border-input-disabled-5m31k6, #eaeded));
64
- border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-disabled-66120l, var(--color-border-input-disabled-5m31k6, #eaeded));
65
- color: var(--awsui-prompt-input-style-color-disabled-66120l, var(--color-text-input-disabled-s4k7tb, #879596));
45
+ background-color: var(--awsui-prompt-input-style-background-default-ka4djm, var(--color-background-input-default-1u0v1p, #ffffff));
46
+ border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-default-ka4djm, var(--color-border-input-default-jtkw9d, #687078));
47
+ border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-default-ka4djm, var(--color-border-input-default-jtkw9d, #687078));
48
+ box-shadow: var(--awsui-prompt-input-style-box-shadow-default-ka4djm);
49
+ }
50
+ .awsui_root_55fkh_p5zjs_10:not(#\9):hover {
51
+ background-color: var(--awsui-prompt-input-style-background-hover-ka4djm, var(--awsui-prompt-input-style-background-default-ka4djm, var(--color-background-input-default-1u0v1p, #ffffff)));
52
+ border-color: var(--awsui-prompt-input-style-border-color-hover-ka4djm, var(--awsui-prompt-input-style-border-color-default-ka4djm, var(--color-border-input-default-jtkw9d, #687078)));
53
+ box-shadow: var(--awsui-prompt-input-style-box-shadow-hover-ka4djm, var(--awsui-prompt-input-style-box-shadow-default-ka4djm));
54
+ }
55
+ .awsui_root_55fkh_p5zjs_10.awsui_textarea-readonly_55fkh_p5zjs_55:not(#\9) {
56
+ background-color: var(--awsui-prompt-input-style-background-readonly-ka4djm, var(--awsui-prompt-input-style-background-default-ka4djm, var(--color-background-input-default-1u0v1p, #ffffff)));
57
+ border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-readonly-ka4djm, var(--awsui-prompt-input-style-border-color-default-ka4djm, var(--color-border-input-disabled-5m31k6, #eaeded)));
58
+ border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-readonly-ka4djm, var(--awsui-prompt-input-style-border-color-default-ka4djm, var(--color-border-input-disabled-5m31k6, #eaeded)));
59
+ box-shadow: var(--awsui-prompt-input-style-box-shadow-readonly-ka4djm);
60
+ }
61
+ .awsui_root_55fkh_p5zjs_10.awsui_disabled_55fkh_p5zjs_61:not(#\9) {
62
+ background-color: var(--awsui-prompt-input-style-background-disabled-ka4djm, var(--color-background-input-disabled-pyvhb1, #eaeded));
63
+ border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-disabled-ka4djm, var(--color-border-input-disabled-5m31k6, #eaeded));
64
+ border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-disabled-ka4djm, var(--color-border-input-disabled-5m31k6, #eaeded));
65
+ color: var(--awsui-prompt-input-style-color-disabled-ka4djm, var(--color-text-input-disabled-s4k7tb, #879596));
66
66
  cursor: default;
67
- box-shadow: var(--awsui-prompt-input-style-box-shadow-disabled-66120l);
67
+ box-shadow: var(--awsui-prompt-input-style-box-shadow-disabled-ka4djm);
68
68
  }
69
- .awsui_root_55fkh_7hmfa_10.awsui_textarea-invalid_55fkh_7hmfa_69:not(#\9) {
70
- color: var(--awsui-prompt-input-style-color-default-66120l, var(--color-text-status-error-ri38gt, #d13212));
71
- border-color: var(--awsui-prompt-input-style-border-color-default-66120l, var(--color-text-status-error-ri38gt, #d13212));
69
+ .awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69:not(#\9) {
70
+ color: var(--awsui-prompt-input-style-color-default-ka4djm, var(--color-text-status-error-ri38gt, #d13212));
71
+ border-color: var(--awsui-prompt-input-style-border-color-default-ka4djm, var(--color-text-status-error-ri38gt, #d13212));
72
72
  padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
73
73
  border-inline-start-width: var(--border-invalid-width-b183os, 4px);
74
74
  }
75
- .awsui_root_55fkh_7hmfa_10.awsui_textarea-invalid_55fkh_7hmfa_69:not(#\9):focus {
75
+ .awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69:not(#\9):focus {
76
76
  box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb);
77
77
  }
78
- .awsui_root_55fkh_7hmfa_10.awsui_textarea-invalid_55fkh_7hmfa_69:not(#\9) {
78
+ .awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69:not(#\9) {
79
79
  padding-inline-start: 0;
80
80
  }
81
- .awsui_root_55fkh_7hmfa_10.awsui_textarea-invalid_55fkh_7hmfa_69:not(#\9):focus-within, .awsui_root_55fkh_7hmfa_10.awsui_textarea-invalid_55fkh_7hmfa_69:not(#\9):focus {
82
- color: var(--awsui-prompt-input-style-color-default-66120l, var(--color-text-status-error-ri38gt, #d13212));
83
- border-color: var(--awsui-prompt-input-style-border-color-default-66120l, var(--color-text-status-error-ri38gt, #d13212));
81
+ .awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69:not(#\9):focus-within, .awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69:not(#\9):focus {
82
+ color: var(--awsui-prompt-input-style-color-default-ka4djm, var(--color-text-status-error-ri38gt, #d13212));
83
+ border-color: var(--awsui-prompt-input-style-border-color-default-ka4djm, var(--color-text-status-error-ri38gt, #d13212));
84
84
  padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
85
85
  border-inline-start-width: var(--border-invalid-width-b183os, 4px);
86
86
  }
87
- .awsui_root_55fkh_7hmfa_10.awsui_textarea-invalid_55fkh_7hmfa_69:not(#\9):focus-within:focus, .awsui_root_55fkh_7hmfa_10.awsui_textarea-invalid_55fkh_7hmfa_69:not(#\9):focus:focus {
87
+ .awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69:not(#\9):focus-within:focus, .awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69:not(#\9):focus:focus {
88
88
  box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb);
89
89
  }
90
- .awsui_root_55fkh_7hmfa_10.awsui_textarea-invalid_55fkh_7hmfa_69:not(#\9):focus-within, .awsui_root_55fkh_7hmfa_10.awsui_textarea-invalid_55fkh_7hmfa_69:not(#\9):focus {
90
+ .awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69:not(#\9):focus-within, .awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69:not(#\9):focus {
91
91
  padding-inline-start: 0;
92
92
  box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb);
93
93
  }
94
- .awsui_root_55fkh_7hmfa_10.awsui_textarea-invalid_55fkh_7hmfa_69.awsui_disabled_55fkh_7hmfa_61:not(#\9):focus-within, .awsui_root_55fkh_7hmfa_10.awsui_textarea-invalid_55fkh_7hmfa_69.awsui_disabled_55fkh_7hmfa_61:not(#\9):focus {
95
- box-shadow: var(--awsui-prompt-input-style-box-shadow-disabled-66120l);
94
+ .awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69.awsui_disabled_55fkh_p5zjs_61:not(#\9):focus-within, .awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69.awsui_disabled_55fkh_p5zjs_61:not(#\9):focus {
95
+ box-shadow: var(--awsui-prompt-input-style-box-shadow-disabled-ka4djm);
96
96
  }
97
- .awsui_root_55fkh_7hmfa_10.awsui_textarea-warning_55fkh_7hmfa_97:not(#\9) {
98
- color: var(--awsui-prompt-input-style-color-default-66120l, var(--color-text-status-warning-fabq6h, #906806));
99
- border-color: var(--awsui-prompt-input-style-border-color-default-66120l, var(--color-text-status-warning-fabq6h, #906806));
97
+ .awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97:not(#\9) {
98
+ color: var(--awsui-prompt-input-style-color-default-ka4djm, var(--color-text-status-warning-fabq6h, #906806));
99
+ border-color: var(--awsui-prompt-input-style-border-color-default-ka4djm, var(--color-text-status-warning-fabq6h, #906806));
100
100
  padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
101
101
  border-inline-start-width: var(--border-invalid-width-b183os, 4px);
102
102
  }
103
- .awsui_root_55fkh_7hmfa_10.awsui_textarea-warning_55fkh_7hmfa_97:not(#\9):focus {
103
+ .awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97:not(#\9):focus {
104
104
  box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb);
105
105
  }
106
- .awsui_root_55fkh_7hmfa_10.awsui_textarea-warning_55fkh_7hmfa_97:not(#\9) {
106
+ .awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97:not(#\9) {
107
107
  padding-inline-start: 0;
108
108
  }
109
- .awsui_root_55fkh_7hmfa_10.awsui_textarea-warning_55fkh_7hmfa_97:not(#\9):focus-within, .awsui_root_55fkh_7hmfa_10.awsui_textarea-warning_55fkh_7hmfa_97:not(#\9):focus {
110
- color: var(--awsui-prompt-input-style-color-default-66120l, var(--color-text-status-warning-fabq6h, #906806));
111
- border-color: var(--awsui-prompt-input-style-border-color-default-66120l, var(--color-text-status-warning-fabq6h, #906806));
109
+ .awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97:not(#\9):focus-within, .awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97:not(#\9):focus {
110
+ color: var(--awsui-prompt-input-style-color-default-ka4djm, var(--color-text-status-warning-fabq6h, #906806));
111
+ border-color: var(--awsui-prompt-input-style-border-color-default-ka4djm, var(--color-text-status-warning-fabq6h, #906806));
112
112
  padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
113
113
  border-inline-start-width: var(--border-invalid-width-b183os, 4px);
114
114
  }
115
- .awsui_root_55fkh_7hmfa_10.awsui_textarea-warning_55fkh_7hmfa_97:not(#\9):focus-within:focus, .awsui_root_55fkh_7hmfa_10.awsui_textarea-warning_55fkh_7hmfa_97:not(#\9):focus:focus {
115
+ .awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97:not(#\9):focus-within:focus, .awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97:not(#\9):focus:focus {
116
116
  box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb);
117
117
  }
118
- .awsui_root_55fkh_7hmfa_10.awsui_textarea-warning_55fkh_7hmfa_97:not(#\9):focus-within, .awsui_root_55fkh_7hmfa_10.awsui_textarea-warning_55fkh_7hmfa_97:not(#\9):focus {
118
+ .awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97:not(#\9):focus-within, .awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97:not(#\9):focus {
119
119
  padding-inline-start: 0;
120
120
  box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb);
121
121
  }
122
- .awsui_root_55fkh_7hmfa_10.awsui_textarea-warning_55fkh_7hmfa_97.awsui_disabled_55fkh_7hmfa_61:not(#\9):focus-within, .awsui_root_55fkh_7hmfa_10.awsui_textarea-warning_55fkh_7hmfa_97.awsui_disabled_55fkh_7hmfa_61:not(#\9):focus {
123
- box-shadow: var(--awsui-prompt-input-style-box-shadow-disabled-66120l);
122
+ .awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97.awsui_disabled_55fkh_p5zjs_61:not(#\9):focus-within, .awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97.awsui_disabled_55fkh_p5zjs_61:not(#\9):focus {
123
+ box-shadow: var(--awsui-prompt-input-style-box-shadow-disabled-ka4djm);
124
124
  }
125
- .awsui_root_55fkh_7hmfa_10:not(#\9):focus-within:not(.awsui_textarea-invalid_55fkh_7hmfa_69):not(.awsui_textarea-warning_55fkh_7hmfa_97), .awsui_root_55fkh_7hmfa_10:not(#\9):focus:not(.awsui_textarea-invalid_55fkh_7hmfa_69):not(.awsui_textarea-warning_55fkh_7hmfa_97) {
125
+ .awsui_root_55fkh_p5zjs_10:not(#\9):focus-within:not(.awsui_textarea-invalid_55fkh_p5zjs_69):not(.awsui_textarea-warning_55fkh_p5zjs_97), .awsui_root_55fkh_p5zjs_10:not(#\9):focus:not(.awsui_textarea-invalid_55fkh_p5zjs_69):not(.awsui_textarea-warning_55fkh_p5zjs_97) {
126
126
  outline: 2px dotted transparent;
127
- border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-focus-66120l, var(--color-border-input-focused-ppoq5z, #0073bb));
128
- border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-focus-66120l, var(--color-border-input-focused-ppoq5z, #0073bb));
129
- border-start-start-radius: var(--border-radius-input-k1q34z, 2px);
130
- border-start-end-radius: var(--border-radius-input-k1q34z, 2px);
131
- border-end-start-radius: var(--border-radius-input-k1q34z, 2px);
132
- border-end-end-radius: var(--border-radius-input-k1q34z, 2px);
133
- box-shadow: var(--awsui-prompt-input-style-box-shadow-focus-66120l, 0 0 0 var(--border-control-focus-ring-shadow-spread-iijyo6, 1px) var(--color-border-item-focused-sewkzn, #0073bb));
134
- background-color: var(--awsui-prompt-input-style-background-focus-66120l, var(--color-background-input-default-1u0v1p, #ffffff));
135
- }
136
- .awsui_root_55fkh_7hmfa_10.awsui_disabled_55fkh_7hmfa_61:not(#\9):focus-within:not(.awsui_textarea-invalid_55fkh_7hmfa_69):not(.awsui_textarea-warning_55fkh_7hmfa_97), .awsui_root_55fkh_7hmfa_10.awsui_disabled_55fkh_7hmfa_61:not(#\9):focus:not(.awsui_textarea-invalid_55fkh_7hmfa_69):not(.awsui_textarea-warning_55fkh_7hmfa_97) {
137
- background-color: var(--awsui-prompt-input-style-background-disabled-66120l, var(--color-background-input-disabled-pyvhb1, #eaeded));
138
- border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-disabled-66120l, var(--color-border-input-disabled-5m31k6, #eaeded));
139
- border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-disabled-66120l, var(--color-border-input-disabled-5m31k6, #eaeded));
140
- color: var(--awsui-prompt-input-style-color-disabled-66120l, var(--color-text-input-disabled-s4k7tb, #879596));
127
+ border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-focus-ka4djm, var(--color-border-input-focused-ppoq5z, #0073bb));
128
+ border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-focus-ka4djm, var(--color-border-input-focused-ppoq5z, #0073bb));
129
+ box-shadow: var(--awsui-prompt-input-style-box-shadow-focus-ka4djm, 0 0 0 var(--border-control-focus-ring-shadow-spread-iijyo6, 1px) var(--color-border-item-focused-sewkzn, #0073bb));
130
+ background-color: var(--awsui-prompt-input-style-background-focus-ka4djm, var(--color-background-input-default-1u0v1p, #ffffff));
131
+ }
132
+ .awsui_root_55fkh_p5zjs_10.awsui_disabled_55fkh_p5zjs_61:not(#\9):focus-within:not(.awsui_textarea-invalid_55fkh_p5zjs_69):not(.awsui_textarea-warning_55fkh_p5zjs_97), .awsui_root_55fkh_p5zjs_10.awsui_disabled_55fkh_p5zjs_61:not(#\9):focus:not(.awsui_textarea-invalid_55fkh_p5zjs_69):not(.awsui_textarea-warning_55fkh_p5zjs_97) {
133
+ background-color: var(--awsui-prompt-input-style-background-disabled-ka4djm, var(--color-background-input-disabled-pyvhb1, #eaeded));
134
+ border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-disabled-ka4djm, var(--color-border-input-disabled-5m31k6, #eaeded));
135
+ border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-disabled-ka4djm, var(--color-border-input-disabled-5m31k6, #eaeded));
136
+ color: var(--awsui-prompt-input-style-color-disabled-ka4djm, var(--color-text-input-disabled-s4k7tb, #879596));
141
137
  cursor: default;
142
- box-shadow: var(--awsui-prompt-input-style-box-shadow-disabled-66120l);
138
+ box-shadow: var(--awsui-prompt-input-style-box-shadow-disabled-ka4djm);
143
139
  }
144
140
 
145
- .awsui_textarea_55fkh_7hmfa_55:not(#\9) {
141
+ .awsui_textarea_55fkh_p5zjs_55:not(#\9) {
146
142
  border-collapse: separate;
147
143
  border-spacing: 0;
148
144
  box-sizing: border-box;
@@ -178,107 +174,109 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
178
174
  border-end-end-radius: var(--border-radius-input-k1q34z, 2px);
179
175
  font-size: var(--font-size-body-m-tq5a14, 14px);
180
176
  line-height: var(--line-height-body-m-5xw6xo, 22px);
177
+ font-size: inherit;
178
+ font-weight: inherit;
181
179
  resize: none;
182
180
  cursor: text;
183
181
  white-space: pre-wrap;
184
182
  background-color: inherit;
185
183
  padding-block: var(--space-field-vertical-77df8s, 4px);
186
184
  padding-inline: var(--space-field-horizontal-anki5k, 8px);
187
- color: var(--awsui-prompt-input-style-color-default-66120l, var(--color-text-body-default-b2us04, #16191f));
185
+ color: var(--awsui-prompt-input-style-color-default-ka4djm, var(--color-text-body-default-b2us04, #16191f));
188
186
  max-inline-size: 100%;
189
187
  inline-size: 100%;
190
188
  display: block;
191
189
  box-sizing: border-box;
192
190
  border: 0;
193
191
  }
194
- .awsui_textarea_55fkh_7hmfa_55.awsui_placeholder-visible_55fkh_7hmfa_194:not(#\9) {
192
+ .awsui_textarea_55fkh_p5zjs_55.awsui_placeholder-visible_55fkh_p5zjs_192:not(#\9) {
195
193
  display: grid;
196
194
  grid-template-columns: 1fr;
197
195
  }
198
- .awsui_textarea_55fkh_7hmfa_55.awsui_placeholder-visible_55fkh_7hmfa_194:not(#\9)::before, .awsui_textarea_55fkh_7hmfa_55.awsui_placeholder-visible_55fkh_7hmfa_194 > *:not(#\9) {
196
+ .awsui_textarea_55fkh_p5zjs_55.awsui_placeholder-visible_55fkh_p5zjs_192:not(#\9)::before, .awsui_textarea_55fkh_p5zjs_55.awsui_placeholder-visible_55fkh_p5zjs_192 > *:not(#\9) {
199
197
  grid-column: 1;
200
198
  grid-row: 1;
201
199
  }
202
- .awsui_textarea_55fkh_7hmfa_55.awsui_placeholder-visible_55fkh_7hmfa_194:not(#\9)::before {
200
+ .awsui_textarea_55fkh_p5zjs_55.awsui_placeholder-visible_55fkh_p5zjs_192:not(#\9)::before {
203
201
  content: attr(data-placeholder);
204
- color: var(--awsui-prompt-input-style-placeholder-color-66120l, var(--color-text-input-placeholder-l6klmg, #687078));
205
- font-size: var(--awsui-prompt-input-style-placeholder-font-size-66120l);
206
- font-style: var(--awsui-prompt-input-style-placeholder-font-style-66120l, italic);
207
- font-weight: var(--awsui-prompt-input-style-placeholder-font-weight-66120l);
202
+ color: var(--awsui-prompt-input-style-placeholder-color-ka4djm, var(--color-text-input-placeholder-l6klmg, #687078));
203
+ font-size: var(--awsui-prompt-input-style-placeholder-font-size-ka4djm);
204
+ font-style: var(--awsui-prompt-input-style-placeholder-font-style-ka4djm, italic);
205
+ font-weight: var(--awsui-prompt-input-style-placeholder-font-weight-ka4djm);
208
206
  opacity: 1;
209
207
  pointer-events: none;
210
208
  align-self: start;
211
209
  min-inline-size: 0;
212
210
  }
213
- .awsui_textarea_55fkh_7hmfa_55:not(#\9):hover {
214
- color: var(--awsui-prompt-input-style-color-hover-66120l, var(--awsui-prompt-input-style-color-default-66120l, var(--color-text-body-default-b2us04, #16191f)));
211
+ .awsui_textarea_55fkh_p5zjs_55:not(#\9):hover {
212
+ color: var(--awsui-prompt-input-style-color-hover-ka4djm, var(--awsui-prompt-input-style-color-default-ka4djm, var(--color-text-body-default-b2us04, #16191f)));
215
213
  }
216
- .awsui_textarea_55fkh_7hmfa_55:not(#\9):focus {
214
+ .awsui_textarea_55fkh_p5zjs_55:not(#\9):focus {
217
215
  outline: none;
218
- color: var(--awsui-prompt-input-style-color-focus-66120l, var(--awsui-prompt-input-style-color-default-66120l, var(--color-text-body-default-b2us04, #16191f)));
216
+ color: var(--awsui-prompt-input-style-color-focus-ka4djm, var(--awsui-prompt-input-style-color-default-ka4djm, var(--color-text-body-default-b2us04, #16191f)));
219
217
  }
220
- .awsui_textarea_55fkh_7hmfa_55:not(#\9):invalid {
218
+ .awsui_textarea_55fkh_p5zjs_55:not(#\9):invalid {
221
219
  box-shadow: none;
222
220
  }
223
- .awsui_textarea_55fkh_7hmfa_55:not(#\9)::placeholder {
224
- color: var(--awsui-prompt-input-style-placeholder-color-66120l, var(--color-text-input-placeholder-l6klmg, #687078));
225
- font-size: var(--awsui-prompt-input-style-placeholder-font-size-66120l);
226
- font-style: var(--awsui-prompt-input-style-placeholder-font-style-66120l, italic);
227
- font-weight: var(--awsui-prompt-input-style-placeholder-font-weight-66120l);
221
+ .awsui_textarea_55fkh_p5zjs_55:not(#\9)::placeholder {
222
+ color: var(--awsui-prompt-input-style-placeholder-color-ka4djm, var(--color-text-input-placeholder-l6klmg, #687078));
223
+ font-size: var(--awsui-prompt-input-style-placeholder-font-size-ka4djm);
224
+ font-style: var(--awsui-prompt-input-style-placeholder-font-style-ka4djm, italic);
225
+ font-weight: var(--awsui-prompt-input-style-placeholder-font-weight-ka4djm);
228
226
  opacity: 1;
229
227
  }
230
- .awsui_textarea_55fkh_7hmfa_55.awsui_invalid_55fkh_7hmfa_230:not(#\9), .awsui_textarea_55fkh_7hmfa_55.awsui_warning_55fkh_7hmfa_230:not(#\9) {
228
+ .awsui_textarea_55fkh_p5zjs_55.awsui_invalid_55fkh_p5zjs_228:not(#\9), .awsui_textarea_55fkh_p5zjs_55.awsui_warning_55fkh_p5zjs_228:not(#\9) {
231
229
  padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
232
230
  }
233
- .awsui_textarea_55fkh_7hmfa_55:not(#\9):disabled, .awsui_textarea_55fkh_7hmfa_55.awsui_textarea-disabled_55fkh_7hmfa_233:not(#\9) {
234
- color: var(--awsui-prompt-input-style-color-disabled-66120l, var(--color-text-input-disabled-s4k7tb, #879596));
231
+ .awsui_textarea_55fkh_p5zjs_55:not(#\9):disabled, .awsui_textarea_55fkh_p5zjs_55.awsui_textarea-disabled_55fkh_p5zjs_231:not(#\9) {
232
+ color: var(--awsui-prompt-input-style-color-disabled-ka4djm, var(--color-text-input-disabled-s4k7tb, #879596));
235
233
  cursor: default;
236
234
  overflow-y: hidden;
237
235
  }
238
- .awsui_textarea_55fkh_7hmfa_55:not(#\9):disabled::placeholder, .awsui_textarea_55fkh_7hmfa_55.awsui_textarea-disabled_55fkh_7hmfa_233:not(#\9)::placeholder {
236
+ .awsui_textarea_55fkh_p5zjs_55:not(#\9):disabled::placeholder, .awsui_textarea_55fkh_p5zjs_55.awsui_textarea-disabled_55fkh_p5zjs_231:not(#\9)::placeholder {
239
237
  color: var(--color-text-input-placeholder-disabled-8cf69l, #687078);
240
238
  opacity: 1;
241
239
  }
242
- .awsui_textarea-readonly_55fkh_7hmfa_55:not(#\9) {
243
- color: var(--awsui-prompt-input-style-color-readonly-66120l, var(--awsui-prompt-input-style-color-default-66120l, var(--color-text-body-default-b2us04, #16191f)));
240
+ .awsui_textarea-readonly_55fkh_p5zjs_55:not(#\9) {
241
+ color: var(--awsui-prompt-input-style-color-readonly-ka4djm, var(--awsui-prompt-input-style-color-default-ka4djm, var(--color-text-body-default-b2us04, #16191f)));
244
242
  }
245
- .awsui_textarea_55fkh_7hmfa_55.awsui_textarea-disabled_55fkh_7hmfa_233.awsui_placeholder-visible_55fkh_7hmfa_194:not(#\9)::before {
243
+ .awsui_textarea_55fkh_p5zjs_55.awsui_textarea-disabled_55fkh_p5zjs_231.awsui_placeholder-visible_55fkh_p5zjs_192:not(#\9)::before {
246
244
  color: var(--color-text-input-placeholder-disabled-8cf69l, #687078);
247
245
  opacity: 1;
248
246
  pointer-events: none;
249
247
  }
250
- .awsui_textarea-wrapper_55fkh_7hmfa_250:not(#\9) {
248
+ .awsui_textarea-wrapper_55fkh_p5zjs_248:not(#\9) {
251
249
  display: flex;
252
250
  position: relative;
253
251
  }
254
252
 
255
- .awsui_editable-wrapper_55fkh_7hmfa_255:not(#\9) {
253
+ .awsui_editable-wrapper_55fkh_p5zjs_253:not(#\9) {
256
254
  flex: 1;
257
255
  min-inline-size: 0;
258
256
  position: relative;
259
257
  }
260
258
 
261
- .awsui_editable-element_55fkh_7hmfa_261:not(#\9) {
259
+ .awsui_editable-element_55fkh_p5zjs_259:not(#\9) {
262
260
  word-wrap: break-word;
263
261
  overflow-wrap: break-word;
264
262
  overflow-y: auto;
265
263
  overflow-x: hidden;
266
264
  }
267
265
 
268
- .awsui_primary-action_55fkh_7hmfa_268:not(#\9) {
266
+ .awsui_primary-action_55fkh_p5zjs_266:not(#\9) {
269
267
  align-self: flex-end;
270
268
  flex-shrink: 0;
271
269
  padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) / 2);
272
270
  }
273
- .awsui_textarea-wrapper_55fkh_7hmfa_250 > .awsui_primary-action_55fkh_7hmfa_268:not(#\9) {
271
+ .awsui_textarea-wrapper_55fkh_p5zjs_248 > .awsui_primary-action_55fkh_p5zjs_266:not(#\9) {
274
272
  padding-inline-end: calc(var(--space-field-horizontal-anki5k, 8px) / 2);
275
273
  }
276
- .awsui_textarea-wrapper_55fkh_7hmfa_250 > .awsui_primary-action_55fkh_7hmfa_268 > .awsui_action-button_55fkh_7hmfa_276:not(#\9) {
274
+ .awsui_textarea-wrapper_55fkh_p5zjs_248 > .awsui_primary-action_55fkh_p5zjs_266 > .awsui_action-button_55fkh_p5zjs_274:not(#\9) {
277
275
  margin-block-end: var(--space-scaled-xxxs-n0ri6o, 2px);
278
276
  padding: 0;
279
277
  }
280
278
 
281
- .awsui_secondary-content_55fkh_7hmfa_281:not(#\9) {
279
+ .awsui_secondary-content_55fkh_p5zjs_279:not(#\9) {
282
280
  border-collapse: separate;
283
281
  border-spacing: 0;
284
282
  box-sizing: border-box;
@@ -313,17 +311,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
313
311
  border-end-start-radius: var(--border-radius-input-k1q34z, 2px);
314
312
  border-end-end-radius: var(--border-radius-input-k1q34z, 2px);
315
313
  }
316
- .awsui_secondary-content_55fkh_7hmfa_281.awsui_with-paddings_55fkh_7hmfa_316:not(#\9) {
314
+ .awsui_secondary-content_55fkh_p5zjs_279.awsui_with-paddings_55fkh_p5zjs_314:not(#\9) {
317
315
  padding-block-start: var(--space-scaled-s-2crg2b, 12px);
318
316
  padding-block-end: var(--space-scaled-s-2crg2b, 12px);
319
317
  padding-inline-start: var(--space-field-horizontal-anki5k, 8px);
320
318
  padding-inline-end: var(--space-field-horizontal-anki5k, 8px);
321
319
  }
322
- .awsui_secondary-content_55fkh_7hmfa_281.awsui_with-paddings_55fkh_7hmfa_316.awsui_invalid_55fkh_7hmfa_230:not(#\9), .awsui_secondary-content_55fkh_7hmfa_281.awsui_with-paddings_55fkh_7hmfa_316.awsui_warning_55fkh_7hmfa_230:not(#\9) {
320
+ .awsui_secondary-content_55fkh_p5zjs_279.awsui_with-paddings_55fkh_p5zjs_314.awsui_invalid_55fkh_p5zjs_228:not(#\9), .awsui_secondary-content_55fkh_p5zjs_279.awsui_with-paddings_55fkh_p5zjs_314.awsui_warning_55fkh_p5zjs_228:not(#\9) {
323
321
  padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
324
322
  }
325
323
 
326
- .awsui_action-stripe_55fkh_7hmfa_326:not(#\9) {
324
+ .awsui_action-stripe_55fkh_p5zjs_324:not(#\9) {
327
325
  border-collapse: separate;
328
326
  border-spacing: 0;
329
327
  box-sizing: border-box;
@@ -362,7 +360,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
362
360
  align-items: flex-end;
363
361
  }
364
362
 
365
- .awsui_secondary-actions_55fkh_7hmfa_365:not(#\9) {
363
+ .awsui_secondary-actions_55fkh_p5zjs_363:not(#\9) {
366
364
  flex-basis: max-content;
367
365
  flex-grow: 0;
368
366
  flex-shrink: 1;
@@ -372,25 +370,25 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
372
370
  overflow: hidden;
373
371
  padding-inline-end: var(--space-scaled-xxs-j00t0m, 4px);
374
372
  }
375
- .awsui_secondary-actions_55fkh_7hmfa_365.awsui_with-paddings_55fkh_7hmfa_316:not(#\9) {
373
+ .awsui_secondary-actions_55fkh_p5zjs_363.awsui_with-paddings_55fkh_p5zjs_314:not(#\9) {
376
374
  padding-inline: var(--space-field-horizontal-anki5k, 8px);
377
375
  padding-block-start: var(--space-scaled-s-2crg2b, 12px);
378
376
  padding-block-end: var(--space-field-vertical-77df8s, 4px);
379
377
  }
380
- .awsui_secondary-actions_55fkh_7hmfa_365.awsui_with-paddings_55fkh_7hmfa_316.awsui_invalid_55fkh_7hmfa_230:not(#\9), .awsui_secondary-actions_55fkh_7hmfa_365.awsui_with-paddings_55fkh_7hmfa_316.awsui_warning_55fkh_7hmfa_230:not(#\9) {
378
+ .awsui_secondary-actions_55fkh_p5zjs_363.awsui_with-paddings_55fkh_p5zjs_314.awsui_invalid_55fkh_p5zjs_228:not(#\9), .awsui_secondary-actions_55fkh_p5zjs_363.awsui_with-paddings_55fkh_p5zjs_314.awsui_warning_55fkh_p5zjs_228:not(#\9) {
381
379
  padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
382
380
  }
383
- .awsui_secondary-actions_55fkh_7hmfa_365.awsui_with-paddings-and-actions_55fkh_7hmfa_383:not(#\9) {
381
+ .awsui_secondary-actions_55fkh_p5zjs_363.awsui_with-paddings-and-actions_55fkh_p5zjs_381:not(#\9) {
384
382
  padding-inline-end: 0;
385
383
  }
386
384
 
387
- .awsui_buffer_55fkh_7hmfa_387:not(#\9) {
385
+ .awsui_buffer_55fkh_p5zjs_385:not(#\9) {
388
386
  flex: 1;
389
387
  align-self: stretch;
390
388
  cursor: text;
391
389
  }
392
390
 
393
- .awsui_token-container_55fkh_7hmfa_393:not(#\9) {
391
+ .awsui_token-container_55fkh_p5zjs_391:not(#\9) {
394
392
  display: inline-block;
395
393
  user-select: all;
396
394
  -webkit-user-select: all;
@@ -398,21 +396,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
398
396
  padding-inline: var(--space-xxxs-3ulqs3, 2px);
399
397
  }
400
398
 
401
- .awsui_reference-wrapper_55fkh_7hmfa_401:not(#\9) {
399
+ .awsui_reference-wrapper_55fkh_p5zjs_399:not(#\9) {
402
400
  unicode-bidi: isolate;
403
401
  }
404
402
 
405
- .awsui_trigger-base_55fkh_7hmfa_405:not(#\9) {
403
+ .awsui_trigger-base_55fkh_p5zjs_403:not(#\9) {
406
404
  unicode-bidi: isolate;
407
405
  }
408
406
 
409
- .awsui_trigger-token_55fkh_7hmfa_409:not(#\9) {
407
+ .awsui_trigger-token_55fkh_p5zjs_407:not(#\9) {
410
408
  text-decoration: underline dashed currentColor;
411
409
  text-decoration-thickness: var(--border-divider-list-width-2qbfmz, 1px);
412
410
  text-underline-offset: var(--space-xxxs-3ulqs3, 2px);
413
411
  }
414
412
 
415
- .awsui_paragraph_55fkh_7hmfa_415:not(#\9) {
413
+ .awsui_paragraph_55fkh_p5zjs_413:not(#\9) {
416
414
  border-collapse: separate;
417
415
  border-spacing: 0;
418
416
  box-sizing: border-box;
@@ -446,4 +444,6 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
446
444
  padding: 0;
447
445
  white-space: pre-wrap;
448
446
  color: inherit;
447
+ font-size: inherit;
448
+ font-weight: inherit;
449
449
  }
package/lib/internal/template/prompt-input/styles.selectors.js CHANGED
@@ -2,31 +2,31 @@
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_55fkh_7hmfa_10",
6
- "textarea-readonly": "awsui_textarea-readonly_55fkh_7hmfa_55",
7
- "disabled": "awsui_disabled_55fkh_7hmfa_61",
8
- "textarea-invalid": "awsui_textarea-invalid_55fkh_7hmfa_69",
9
- "textarea-warning": "awsui_textarea-warning_55fkh_7hmfa_97",
10
- "textarea": "awsui_textarea_55fkh_7hmfa_55",
11
- "placeholder-visible": "awsui_placeholder-visible_55fkh_7hmfa_194",
12
- "invalid": "awsui_invalid_55fkh_7hmfa_230",
13
- "warning": "awsui_warning_55fkh_7hmfa_230",
14
- "textarea-disabled": "awsui_textarea-disabled_55fkh_7hmfa_233",
15
- "textarea-wrapper": "awsui_textarea-wrapper_55fkh_7hmfa_250",
16
- "editable-wrapper": "awsui_editable-wrapper_55fkh_7hmfa_255",
17
- "editable-element": "awsui_editable-element_55fkh_7hmfa_261",
18
- "primary-action": "awsui_primary-action_55fkh_7hmfa_268",
19
- "action-button": "awsui_action-button_55fkh_7hmfa_276",
20
- "secondary-content": "awsui_secondary-content_55fkh_7hmfa_281",
21
- "with-paddings": "awsui_with-paddings_55fkh_7hmfa_316",
22
- "action-stripe": "awsui_action-stripe_55fkh_7hmfa_326",
23
- "secondary-actions": "awsui_secondary-actions_55fkh_7hmfa_365",
24
- "with-paddings-and-actions": "awsui_with-paddings-and-actions_55fkh_7hmfa_383",
25
- "buffer": "awsui_buffer_55fkh_7hmfa_387",
26
- "token-container": "awsui_token-container_55fkh_7hmfa_393",
27
- "reference-wrapper": "awsui_reference-wrapper_55fkh_7hmfa_401",
28
- "trigger-base": "awsui_trigger-base_55fkh_7hmfa_405",
29
- "trigger-token": "awsui_trigger-token_55fkh_7hmfa_409",
30
- "paragraph": "awsui_paragraph_55fkh_7hmfa_415"
5
+ "root": "awsui_root_55fkh_p5zjs_10",
6
+ "textarea-readonly": "awsui_textarea-readonly_55fkh_p5zjs_55",
7
+ "disabled": "awsui_disabled_55fkh_p5zjs_61",
8
+ "textarea-invalid": "awsui_textarea-invalid_55fkh_p5zjs_69",
9
+ "textarea-warning": "awsui_textarea-warning_55fkh_p5zjs_97",
10
+ "textarea": "awsui_textarea_55fkh_p5zjs_55",
11
+ "placeholder-visible": "awsui_placeholder-visible_55fkh_p5zjs_192",
12
+ "invalid": "awsui_invalid_55fkh_p5zjs_228",
13
+ "warning": "awsui_warning_55fkh_p5zjs_228",
14
+ "textarea-disabled": "awsui_textarea-disabled_55fkh_p5zjs_231",
15
+ "textarea-wrapper": "awsui_textarea-wrapper_55fkh_p5zjs_248",
16
+ "editable-wrapper": "awsui_editable-wrapper_55fkh_p5zjs_253",
17
+ "editable-element": "awsui_editable-element_55fkh_p5zjs_259",
18
+ "primary-action": "awsui_primary-action_55fkh_p5zjs_266",
19
+ "action-button": "awsui_action-button_55fkh_p5zjs_274",
20
+ "secondary-content": "awsui_secondary-content_55fkh_p5zjs_279",
21
+ "with-paddings": "awsui_with-paddings_55fkh_p5zjs_314",
22
+ "action-stripe": "awsui_action-stripe_55fkh_p5zjs_324",
23
+ "secondary-actions": "awsui_secondary-actions_55fkh_p5zjs_363",
24
+ "with-paddings-and-actions": "awsui_with-paddings-and-actions_55fkh_p5zjs_381",
25
+ "buffer": "awsui_buffer_55fkh_p5zjs_385",
26
+ "token-container": "awsui_token-container_55fkh_p5zjs_391",
27
+ "reference-wrapper": "awsui_reference-wrapper_55fkh_p5zjs_399",
28
+ "trigger-base": "awsui_trigger-base_55fkh_p5zjs_403",
29
+ "trigger-token": "awsui_trigger-token_55fkh_p5zjs_407",
30
+ "paragraph": "awsui_paragraph_55fkh_p5zjs_413"
31
31
  };
32
32
 
package/lib/internal/template/segmented-control/internal-segmented-control.d.ts CHANGED
@@ -1,3 +1,8 @@
1
+ import { GroupedControlContextProps } from '../internal/context/control-group-context';
1
2
  import { SegmentedControlProps } from './interfaces';
2
- export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, style, }: SegmentedControlProps): JSX.Element;
3
+ interface InternalSegmentedControlComponentProps extends SegmentedControlProps {
4
+ groupedControlProps?: GroupedControlContextProps;
5
+ }
6
+ export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, style, groupedControlProps, }: InternalSegmentedControlComponentProps): JSX.Element;
7
+ export {};
3
8
  //# sourceMappingURL=internal-segmented-control.d.ts.map
package/lib/internal/template/segmented-control/internal-segmented-control.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal-segmented-control.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAMrD,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,KAAK,GACN,EAAE,qBAAqB,eAiFvB"}
1
+ {"version":3,"file":"internal-segmented-control.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AAKvF,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAMrD,UAAU,sCAAuC,SAAQ,qBAAqB;IAC5E,mBAAmB,CAAC,EAAE,0BAA0B,CAAC;CAClD;AAED,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,KAAK,EACL,mBAAmB,GACpB,EAAE,sCAAsC,eAwFxC"}
package/lib/internal/template/segmented-control/internal-segmented-control.js CHANGED
@@ -2,6 +2,7 @@
2
2
  // SPDX-License-Identifier: Apache-2.0
3
3
  import React, { useRef } from 'react';
4
4
  import clsx from 'clsx';
5
+ import { getGroupedControlClassNames } from '../internal/components/control-group/grouped-control-styles';
5
6
  import { fireNonCancelableEvent } from '../internal/events';
6
7
  import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
7
8
  import { KeyCode } from '../internal/keycode';
@@ -9,7 +10,7 @@ import handleKey from '../internal/utils/handle-key';
9
10
  import { Segment } from './segment';
10
11
  import { getSegmentedControlRootStyles } from './style';
11
12
  import styles from './styles.css.js';
12
- export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, style, }) {
13
+ export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, style, groupedControlProps, }) {
13
14
  const segmentByIdRef = useRef({});
14
15
  const selectedOptions = (options || []).filter(option => {
15
16
  return option.id === selectedId;
@@ -30,8 +31,12 @@ export default function InternalSegmentedControl({ selectedId, options, label, a
30
31
  (_a = segmentByIdRef.current[nextSegmentId]) === null || _a === void 0 ? void 0 : _a.focus();
31
32
  };
32
33
  const isVisualRefresh = useVisualRefresh();
33
- return (React.createElement("div", { className: clsx(styles['segment-part'], styles[`segment-count-${options === null || options === void 0 ? void 0 : options.length}`], {
34
+ const isGrouped = !!(groupedControlProps === null || groupedControlProps === void 0 ? void 0 : groupedControlProps.position);
35
+ const isGroupedVertical = isGrouped && (groupedControlProps === null || groupedControlProps === void 0 ? void 0 : groupedControlProps.direction) === 'vertical';
36
+ const groupedControlClassNames = isGrouped ? getGroupedControlClassNames(styles, groupedControlProps) : [];
37
+ return (React.createElement("div", { className: clsx(styles['segment-part'], styles[`segment-count-${options === null || options === void 0 ? void 0 : options.length}`], ...groupedControlClassNames, {
34
38
  [styles.refresh]: isVisualRefresh,
39
+ [styles['grouped-vertical']]: isGroupedVertical,
35
40
  }), "aria-label": label, "aria-labelledby": ariaLabelledby, role: "toolbar", style: getSegmentedControlRootStyles(style) }, options &&
36
41
  options.map((option, index) => {
37
42
  const isActive = selectedId === option.id;
@@ -54,7 +59,7 @@ export default function InternalSegmentedControl({ selectedId, options, label, a
54
59
  if (selectedId !== option.id) {
55
60
  fireNonCancelableEvent(onChange, { selectedId: option.id });
56
61
  }
57
- }, onKeyDown: event => moveHighlight(event, focusableSegmentIndex), style: style }));
62
+ }, onKeyDown: event => moveHighlight(event, focusableSegmentIndex), style: style, fullWidth: isGroupedVertical }));
58
63
  })));
59
64
  }
60
65
  //# sourceMappingURL=internal-segmented-control.js.map
package/lib/internal/template/segmented-control/internal-segmented-control.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal-segmented-control.js","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { KeyCode } from '../internal/keycode';\nimport handleKey from '../internal/utils/handle-key';\nimport { SegmentedControlProps } from './interfaces';\nimport { Segment } from './segment';\nimport { getSegmentedControlRootStyles } from './style';\n\nimport styles from './styles.css.js';\n\nexport default function InternalSegmentedControl({\n selectedId,\n options,\n label,\n ariaLabelledby,\n onChange,\n style,\n}: SegmentedControlProps) {\n const segmentByIdRef = useRef<{ [id: string]: HTMLButtonElement }>({});\n const selectedOptions = (options || []).filter(option => {\n return option.id === selectedId;\n });\n const currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;\n const focusableSegments = (options || []).filter(\n option => !option.disabled || (option.disabled && !!option.disabledReason)\n );\n\n const moveHighlight = (event: React.KeyboardEvent<HTMLButtonElement>, activeIndex: number) => {\n if (event.keyCode !== KeyCode.right && event.keyCode !== KeyCode.left) {\n return;\n }\n\n let nextIndex = activeIndex;\n\n handleKey(event, {\n onInlineStart: () => (nextIndex = activeIndex === 0 ? focusableSegments.length - 1 : activeIndex - 1),\n onInlineEnd: () => (nextIndex = activeIndex + 1 === focusableSegments.length ? 0 : activeIndex + 1),\n });\n\n const nextSegmentId = focusableSegments[nextIndex].id;\n segmentByIdRef.current[nextSegmentId]?.focus();\n };\n const isVisualRefresh = useVisualRefresh();\n\n return (\n <div\n className={clsx(styles['segment-part'], styles[`segment-count-${options?.length}`], {\n [styles.refresh]: isVisualRefresh,\n })}\n aria-label={label}\n aria-labelledby={ariaLabelledby}\n role=\"toolbar\"\n style={getSegmentedControlRootStyles(style)}\n >\n {options &&\n options.map((option: SegmentedControlProps.Option, index) => {\n const isActive = selectedId === option.id;\n const focusableSegmentIndex = focusableSegments.indexOf(option);\n let tabIndex = isActive ? 0 : -1;\n if (currentSelectedOption === null && focusableSegmentIndex === 0) {\n tabIndex = 0;\n }\n return (\n <Segment\n key={index}\n id={option.id}\n disabled={!!option.disabled}\n disabledReason={option.disabledReason}\n iconName={option.iconName}\n iconAlt={option.iconAlt}\n iconUrl={option.iconUrl}\n iconSvg={option.iconSvg}\n text={option.text}\n isActive={isActive}\n tabIndex={tabIndex}\n ref={node => {\n if (node) {\n segmentByIdRef.current[option.id] = node;\n } else {\n delete segmentByIdRef.current[option.id];\n }\n }}\n onClick={() => {\n if (option.disabled) {\n return;\n }\n\n if (selectedId !== option.id) {\n fireNonCancelableEvent(onChange, { selectedId: option.id });\n }\n }}\n onKeyDown={event => moveHighlight(event, focusableSegmentIndex)}\n style={style}\n />\n );\n })}\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"internal-segmented-control.js","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getGroupedControlClassNames } from '../internal/components/control-group/grouped-control-styles';\nimport { GroupedControlContextProps } from '../internal/context/control-group-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { KeyCode } from '../internal/keycode';\nimport handleKey from '../internal/utils/handle-key';\nimport { SegmentedControlProps } from './interfaces';\nimport { Segment } from './segment';\nimport { getSegmentedControlRootStyles } from './style';\n\nimport styles from './styles.css.js';\n\ninterface InternalSegmentedControlComponentProps extends SegmentedControlProps {\n groupedControlProps?: GroupedControlContextProps;\n}\n\nexport default function InternalSegmentedControl({\n selectedId,\n options,\n label,\n ariaLabelledby,\n onChange,\n style,\n groupedControlProps,\n}: InternalSegmentedControlComponentProps) {\n const segmentByIdRef = useRef<{ [id: string]: HTMLButtonElement }>({});\n const selectedOptions = (options || []).filter(option => {\n return option.id === selectedId;\n });\n const currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;\n const focusableSegments = (options || []).filter(\n option => !option.disabled || (option.disabled && !!option.disabledReason)\n );\n\n const moveHighlight = (event: React.KeyboardEvent<HTMLButtonElement>, activeIndex: number) => {\n if (event.keyCode !== KeyCode.right && event.keyCode !== KeyCode.left) {\n return;\n }\n\n let nextIndex = activeIndex;\n\n handleKey(event, {\n onInlineStart: () => (nextIndex = activeIndex === 0 ? focusableSegments.length - 1 : activeIndex - 1),\n onInlineEnd: () => (nextIndex = activeIndex + 1 === focusableSegments.length ? 0 : activeIndex + 1),\n });\n\n const nextSegmentId = focusableSegments[nextIndex].id;\n segmentByIdRef.current[nextSegmentId]?.focus();\n };\n const isVisualRefresh = useVisualRefresh();\n\n const isGrouped = !!groupedControlProps?.position;\n const isGroupedVertical = isGrouped && groupedControlProps?.direction === 'vertical';\n\n const groupedControlClassNames = isGrouped ? getGroupedControlClassNames(styles, groupedControlProps) : [];\n\n return (\n <div\n className={clsx(styles['segment-part'], styles[`segment-count-${options?.length}`], ...groupedControlClassNames, {\n [styles.refresh]: isVisualRefresh,\n [styles['grouped-vertical']]: isGroupedVertical,\n })}\n aria-label={label}\n aria-labelledby={ariaLabelledby}\n role=\"toolbar\"\n style={getSegmentedControlRootStyles(style)}\n >\n {options &&\n options.map((option: SegmentedControlProps.Option, index) => {\n const isActive = selectedId === option.id;\n const focusableSegmentIndex = focusableSegments.indexOf(option);\n let tabIndex = isActive ? 0 : -1;\n if (currentSelectedOption === null && focusableSegmentIndex === 0) {\n tabIndex = 0;\n }\n return (\n <Segment\n key={index}\n id={option.id}\n disabled={!!option.disabled}\n disabledReason={option.disabledReason}\n iconName={option.iconName}\n iconAlt={option.iconAlt}\n iconUrl={option.iconUrl}\n iconSvg={option.iconSvg}\n text={option.text}\n isActive={isActive}\n tabIndex={tabIndex}\n ref={node => {\n if (node) {\n segmentByIdRef.current[option.id] = node;\n } else {\n delete segmentByIdRef.current[option.id];\n }\n }}\n onClick={() => {\n if (option.disabled) {\n return;\n }\n\n if (selectedId !== option.id) {\n fireNonCancelableEvent(onChange, { selectedId: option.id });\n }\n }}\n onKeyDown={event => moveHighlight(event, focusableSegmentIndex)}\n style={style}\n fullWidth={isGroupedVertical}\n />\n );\n })}\n </div>\n );\n}\n"]}
package/lib/internal/template/segmented-control/internal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAKrD,KAAK,6BAA6B,GAAG,qBAAqB,GAAG,0BAA0B,CAAC;AAExF,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,iBAAiB,EACjB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,6BAA6B,eAyC/B"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAKrD,KAAK,6BAA6B,GAAG,qBAAqB,GAAG,0BAA0B,CAAC;AAExF,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,iBAAiB,EACjB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,6BAA6B,eA2C/B"}