@cloudscape-design/components-themeable 3.0.1382 → 3.0.1383

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 (193) 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 +36 -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 +43 -17
  8. package/lib/internal/scss/segmented-control/styles.scss +19 -4
  9. package/lib/internal/scss/side-navigation/styles.scss +13 -6
  10. package/lib/internal/template/alert/styles.css.js +27 -27
  11. package/lib/internal/template/alert/styles.scoped.css +50 -50
  12. package/lib/internal/template/alert/styles.selectors.js +27 -27
  13. package/lib/internal/template/annotation-context/annotation/styles.css.js +13 -13
  14. package/lib/internal/template/annotation-context/annotation/styles.scoped.css +21 -21
  15. package/lib/internal/template/annotation-context/annotation/styles.selectors.js +13 -13
  16. package/lib/internal/template/app-layout/notifications/styles.css.js +3 -3
  17. package/lib/internal/template/app-layout/notifications/styles.scoped.css +7 -7
  18. package/lib/internal/template/app-layout/notifications/styles.selectors.js +3 -3
  19. package/lib/internal/template/app-layout/visual-refresh/styles.css.js +86 -86
  20. package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +258 -258
  21. package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +86 -86
  22. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.css.js +32 -32
  23. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +89 -89
  24. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +32 -32
  25. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.css.js +6 -6
  26. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +13 -13
  27. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +6 -6
  28. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.css.js +30 -30
  29. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css +68 -68
  30. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js +30 -30
  31. package/lib/internal/template/attribute-editor/styles.css.js +15 -15
  32. package/lib/internal/template/attribute-editor/styles.scoped.css +28 -28
  33. package/lib/internal/template/attribute-editor/styles.selectors.js +15 -15
  34. package/lib/internal/template/breadcrumb-group/item/styles.css.js +7 -7
  35. package/lib/internal/template/breadcrumb-group/item/styles.scoped.css +28 -28
  36. package/lib/internal/template/breadcrumb-group/item/styles.selectors.js +7 -7
  37. package/lib/internal/template/button/styles.css.js +23 -23
  38. package/lib/internal/template/button/styles.scoped.css +261 -261
  39. package/lib/internal/template/button/styles.selectors.js +23 -23
  40. package/lib/internal/template/button-dropdown/item-element/styles.css.js +21 -21
  41. package/lib/internal/template/button-dropdown/item-element/styles.scoped.css +37 -37
  42. package/lib/internal/template/button-dropdown/item-element/styles.selectors.js +21 -21
  43. package/lib/internal/template/cards/styles.css.js +39 -39
  44. package/lib/internal/template/cards/styles.scoped.css +41 -41
  45. package/lib/internal/template/cards/styles.selectors.js +39 -39
  46. package/lib/internal/template/checkbox/styles.css.js +3 -3
  47. package/lib/internal/template/checkbox/styles.scoped.css +10 -10
  48. package/lib/internal/template/checkbox/styles.selectors.js +3 -3
  49. package/lib/internal/template/container/style.d.ts +1 -15
  50. package/lib/internal/template/container/style.d.ts.map +1 -1
  51. package/lib/internal/template/container/style.js +6 -2
  52. package/lib/internal/template/container/style.js.map +1 -1
  53. package/lib/internal/template/container/styles.css.js +34 -34
  54. package/lib/internal/template/container/styles.scoped.css +87 -87
  55. package/lib/internal/template/container/styles.selectors.js +34 -34
  56. package/lib/internal/template/content-layout/styles.css.js +14 -14
  57. package/lib/internal/template/content-layout/styles.scoped.css +27 -27
  58. package/lib/internal/template/content-layout/styles.selectors.js +14 -14
  59. package/lib/internal/template/dropdown/styles.css.js +20 -20
  60. package/lib/internal/template/dropdown/styles.scoped.css +49 -49
  61. package/lib/internal/template/dropdown/styles.selectors.js +20 -20
  62. package/lib/internal/template/expandable-section/expandable-section-header.d.ts.map +1 -1
  63. package/lib/internal/template/expandable-section/expandable-section-header.js +1 -1
  64. package/lib/internal/template/expandable-section/expandable-section-header.js.map +1 -1
  65. package/lib/internal/template/expandable-section/interfaces.d.ts +4 -4
  66. package/lib/internal/template/expandable-section/interfaces.js.map +1 -1
  67. package/lib/internal/template/file-token-group/styles.css.js +23 -23
  68. package/lib/internal/template/file-token-group/styles.scoped.css +36 -36
  69. package/lib/internal/template/file-token-group/styles.selectors.js +23 -23
  70. package/lib/internal/template/flashbar/styles.css.js +50 -50
  71. package/lib/internal/template/flashbar/styles.scoped.css +184 -184
  72. package/lib/internal/template/flashbar/styles.selectors.js +50 -50
  73. package/lib/internal/template/help-panel/styles.css.js +6 -6
  74. package/lib/internal/template/help-panel/styles.scoped.css +72 -72
  75. package/lib/internal/template/help-panel/styles.selectors.js +6 -6
  76. package/lib/internal/template/input/internal.d.ts.map +1 -1
  77. package/lib/internal/template/input/internal.js +11 -4
  78. package/lib/internal/template/input/internal.js.map +1 -1
  79. package/lib/internal/template/input/styles.css.js +34 -29
  80. package/lib/internal/template/input/styles.scoped.css +158 -137
  81. package/lib/internal/template/input/styles.selectors.js +34 -29
  82. package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
  83. package/lib/internal/template/internal/components/autosuggest-input/index.d.ts.map +1 -1
  84. package/lib/internal/template/internal/components/autosuggest-input/index.js +4 -1
  85. package/lib/internal/template/internal/components/autosuggest-input/index.js.map +1 -1
  86. package/lib/internal/template/internal/components/button-trigger/index.d.ts +2 -0
  87. package/lib/internal/template/internal/components/button-trigger/index.d.ts.map +1 -1
  88. package/lib/internal/template/internal/components/button-trigger/index.js +2 -2
  89. package/lib/internal/template/internal/components/button-trigger/index.js.map +1 -1
  90. package/lib/internal/template/internal/components/button-trigger/styles.css.js +19 -14
  91. package/lib/internal/template/internal/components/button-trigger/styles.scoped.css +53 -33
  92. package/lib/internal/template/internal/components/button-trigger/styles.selectors.js +19 -14
  93. package/lib/internal/template/internal/components/control-group/index.d.ts +7 -0
  94. package/lib/internal/template/internal/components/control-group/index.d.ts.map +1 -0
  95. package/lib/internal/template/internal/components/control-group/index.js +20 -0
  96. package/lib/internal/template/internal/components/control-group/index.js.map +1 -0
  97. package/lib/internal/template/internal/components/control-group/styles.css.js +9 -0
  98. package/lib/internal/template/internal/components/control-group/styles.scoped.css +54 -0
  99. package/lib/internal/template/internal/components/control-group/styles.selectors.js +10 -0
  100. package/lib/internal/template/internal/components/drag-handle-wrapper/styles.css.js +30 -30
  101. package/lib/internal/template/internal/components/drag-handle-wrapper/styles.scoped.css +58 -58
  102. package/lib/internal/template/internal/components/drag-handle-wrapper/styles.selectors.js +30 -30
  103. package/lib/internal/template/internal/components/option/styles.css.js +17 -17
  104. package/lib/internal/template/internal/components/option/styles.scoped.css +31 -31
  105. package/lib/internal/template/internal/components/option/styles.selectors.js +17 -17
  106. package/lib/internal/template/internal/components/radio-button/styles.css.js +7 -7
  107. package/lib/internal/template/internal/components/radio-button/styles.scoped.css +17 -17
  108. package/lib/internal/template/internal/components/radio-button/styles.selectors.js +7 -7
  109. package/lib/internal/template/internal/components/selectable-item/styles.css.js +22 -22
  110. package/lib/internal/template/internal/components/selectable-item/styles.scoped.css +57 -57
  111. package/lib/internal/template/internal/components/selectable-item/styles.selectors.js +22 -22
  112. package/lib/internal/template/internal/components/token-list/styles.css.js +10 -10
  113. package/lib/internal/template/internal/components/token-list/styles.scoped.css +25 -25
  114. package/lib/internal/template/internal/components/token-list/styles.selectors.js +10 -10
  115. package/lib/internal/template/internal/context/control-group-context.d.ts +24 -0
  116. package/lib/internal/template/internal/context/control-group-context.d.ts.map +1 -0
  117. package/lib/internal/template/internal/context/control-group-context.js +22 -0
  118. package/lib/internal/template/internal/context/control-group-context.js.map +1 -0
  119. package/lib/internal/template/internal/environment.js +2 -2
  120. package/lib/internal/template/internal/environment.json +2 -2
  121. package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts +1 -0
  122. package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts.map +1 -1
  123. package/lib/internal/template/internal/generated/custom-css-properties/index.js +175 -174
  124. package/lib/internal/template/internal/generated/custom-css-properties/index.js.map +1 -1
  125. package/lib/internal/template/item-card/styles.css.js +14 -14
  126. package/lib/internal/template/item-card/styles.scoped.css +63 -63
  127. package/lib/internal/template/item-card/styles.selectors.js +14 -14
  128. package/lib/internal/template/link/styles.css.js +21 -21
  129. package/lib/internal/template/link/styles.scoped.css +104 -104
  130. package/lib/internal/template/link/styles.selectors.js +21 -21
  131. package/lib/internal/template/modal/styles.css.js +31 -31
  132. package/lib/internal/template/modal/styles.scoped.css +48 -48
  133. package/lib/internal/template/modal/styles.selectors.js +31 -31
  134. package/lib/internal/template/multiselect/internal.d.ts.map +1 -1
  135. package/lib/internal/template/multiselect/internal.js +12 -9
  136. package/lib/internal/template/multiselect/internal.js.map +1 -1
  137. package/lib/internal/template/progress-bar/styles.css.js +19 -19
  138. package/lib/internal/template/progress-bar/styles.scoped.css +58 -58
  139. package/lib/internal/template/progress-bar/styles.selectors.js +19 -19
  140. package/lib/internal/template/prompt-input/styles.css.js +26 -26
  141. package/lib/internal/template/prompt-input/styles.scoped.css +105 -109
  142. package/lib/internal/template/prompt-input/styles.selectors.js +26 -26
  143. package/lib/internal/template/segmented-control/internal-segmented-control.d.ts +6 -1
  144. package/lib/internal/template/segmented-control/internal-segmented-control.d.ts.map +1 -1
  145. package/lib/internal/template/segmented-control/internal-segmented-control.js +3 -1
  146. package/lib/internal/template/segmented-control/internal-segmented-control.js.map +1 -1
  147. package/lib/internal/template/segmented-control/internal.d.ts.map +1 -1
  148. package/lib/internal/template/segmented-control/internal.js +7 -2
  149. package/lib/internal/template/segmented-control/internal.js.map +1 -1
  150. package/lib/internal/template/segmented-control/styles.css.js +21 -16
  151. package/lib/internal/template/segmented-control/styles.scoped.css +74 -46
  152. package/lib/internal/template/segmented-control/styles.selectors.js +21 -16
  153. package/lib/internal/template/select/internal.d.ts.map +1 -1
  154. package/lib/internal/template/select/internal.js +11 -8
  155. package/lib/internal/template/select/internal.js.map +1 -1
  156. package/lib/internal/template/select/parts/styles.css.js +21 -21
  157. package/lib/internal/template/select/parts/styles.scoped.css +24 -24
  158. package/lib/internal/template/select/parts/styles.selectors.js +21 -21
  159. package/lib/internal/template/select/parts/trigger.d.ts +2 -0
  160. package/lib/internal/template/select/parts/trigger.d.ts.map +1 -1
  161. package/lib/internal/template/select/parts/trigger.js +2 -2
  162. package/lib/internal/template/select/parts/trigger.js.map +1 -1
  163. package/lib/internal/template/side-navigation/styles.css.js +64 -64
  164. package/lib/internal/template/side-navigation/styles.scoped.css +119 -114
  165. package/lib/internal/template/side-navigation/styles.selectors.js +64 -64
  166. package/lib/internal/template/slider/styles.css.js +26 -26
  167. package/lib/internal/template/slider/styles.scoped.css +165 -165
  168. package/lib/internal/template/slider/styles.selectors.js +26 -26
  169. package/lib/internal/template/spinner/styles.css.js +14 -14
  170. package/lib/internal/template/spinner/styles.scoped.css +40 -40
  171. package/lib/internal/template/spinner/styles.selectors.js +14 -14
  172. package/lib/internal/template/table/styles.css.js +37 -37
  173. package/lib/internal/template/table/styles.scoped.css +46 -46
  174. package/lib/internal/template/table/styles.selectors.js +37 -37
  175. package/lib/internal/template/tabs/styles.css.js +30 -30
  176. package/lib/internal/template/tabs/styles.scoped.css +76 -76
  177. package/lib/internal/template/tabs/styles.selectors.js +30 -30
  178. package/lib/internal/template/tag-editor/styles.css.js +3 -3
  179. package/lib/internal/template/tag-editor/styles.scoped.css +13 -13
  180. package/lib/internal/template/tag-editor/styles.selectors.js +3 -3
  181. package/lib/internal/template/text-content/styles.css.js +1 -1
  182. package/lib/internal/template/text-content/styles.scoped.css +66 -66
  183. package/lib/internal/template/text-content/styles.selectors.js +1 -1
  184. package/lib/internal/template/textarea/styles.css.js +9 -9
  185. package/lib/internal/template/textarea/styles.scoped.css +51 -55
  186. package/lib/internal/template/textarea/styles.selectors.js +9 -9
  187. package/lib/internal/template/toggle/styles.css.js +10 -10
  188. package/lib/internal/template/toggle/styles.scoped.css +22 -22
  189. package/lib/internal/template/toggle/styles.selectors.js +10 -10
  190. package/lib/internal/template/token/styles.css.js +14 -14
  191. package/lib/internal/template/token/styles.scoped.css +46 -46
  192. package/lib/internal/template/token/styles.selectors.js +14 -14
  193. 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_2nevg_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_2nevg_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_2nevg_10.awsui_textarea-readonly_55fkh_2nevg_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_2nevg_10.awsui_disabled_55fkh_2nevg_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_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_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_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_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_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_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_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_69:not(#\9):focus-within, .awsui_root_55fkh_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_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_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_69:not(#\9):focus-within:focus, .awsui_root_55fkh_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_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_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_69:not(#\9):focus-within, .awsui_root_55fkh_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_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_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_69.awsui_disabled_55fkh_2nevg_61:not(#\9):focus-within, .awsui_root_55fkh_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_69.awsui_disabled_55fkh_2nevg_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_2nevg_10.awsui_textarea-warning_55fkh_2nevg_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_2nevg_10.awsui_textarea-warning_55fkh_2nevg_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_2nevg_10.awsui_textarea-warning_55fkh_2nevg_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_2nevg_10.awsui_textarea-warning_55fkh_2nevg_97:not(#\9):focus-within, .awsui_root_55fkh_2nevg_10.awsui_textarea-warning_55fkh_2nevg_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_2nevg_10.awsui_textarea-warning_55fkh_2nevg_97:not(#\9):focus-within:focus, .awsui_root_55fkh_2nevg_10.awsui_textarea-warning_55fkh_2nevg_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_2nevg_10.awsui_textarea-warning_55fkh_2nevg_97:not(#\9):focus-within, .awsui_root_55fkh_2nevg_10.awsui_textarea-warning_55fkh_2nevg_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_2nevg_10.awsui_textarea-warning_55fkh_2nevg_97.awsui_disabled_55fkh_2nevg_61:not(#\9):focus-within, .awsui_root_55fkh_2nevg_10.awsui_textarea-warning_55fkh_2nevg_97.awsui_disabled_55fkh_2nevg_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_2nevg_10:not(#\9):focus-within:not(.awsui_textarea-invalid_55fkh_2nevg_69):not(.awsui_textarea-warning_55fkh_2nevg_97), .awsui_root_55fkh_2nevg_10:not(#\9):focus:not(.awsui_textarea-invalid_55fkh_2nevg_69):not(.awsui_textarea-warning_55fkh_2nevg_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_2nevg_10.awsui_disabled_55fkh_2nevg_61:not(#\9):focus-within:not(.awsui_textarea-invalid_55fkh_2nevg_69):not(.awsui_textarea-warning_55fkh_2nevg_97), .awsui_root_55fkh_2nevg_10.awsui_disabled_55fkh_2nevg_61:not(#\9):focus:not(.awsui_textarea-invalid_55fkh_2nevg_69):not(.awsui_textarea-warning_55fkh_2nevg_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_2nevg_55:not(#\9) {
146
142
  border-collapse: separate;
147
143
  border-spacing: 0;
148
144
  box-sizing: border-box;
@@ -184,101 +180,101 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
184
180
  background-color: inherit;
185
181
  padding-block: var(--space-field-vertical-77df8s, 4px);
186
182
  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));
183
+ color: var(--awsui-prompt-input-style-color-default-ka4djm, var(--color-text-body-default-b2us04, #16191f));
188
184
  max-inline-size: 100%;
189
185
  inline-size: 100%;
190
186
  display: block;
191
187
  box-sizing: border-box;
192
188
  border: 0;
193
189
  }
194
- .awsui_textarea_55fkh_7hmfa_55.awsui_placeholder-visible_55fkh_7hmfa_194:not(#\9) {
190
+ .awsui_textarea_55fkh_2nevg_55.awsui_placeholder-visible_55fkh_2nevg_190:not(#\9) {
195
191
  display: grid;
196
192
  grid-template-columns: 1fr;
197
193
  }
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) {
194
+ .awsui_textarea_55fkh_2nevg_55.awsui_placeholder-visible_55fkh_2nevg_190:not(#\9)::before, .awsui_textarea_55fkh_2nevg_55.awsui_placeholder-visible_55fkh_2nevg_190 > *:not(#\9) {
199
195
  grid-column: 1;
200
196
  grid-row: 1;
201
197
  }
202
- .awsui_textarea_55fkh_7hmfa_55.awsui_placeholder-visible_55fkh_7hmfa_194:not(#\9)::before {
198
+ .awsui_textarea_55fkh_2nevg_55.awsui_placeholder-visible_55fkh_2nevg_190:not(#\9)::before {
203
199
  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);
200
+ color: var(--awsui-prompt-input-style-placeholder-color-ka4djm, var(--color-text-input-placeholder-l6klmg, #687078));
201
+ font-size: var(--awsui-prompt-input-style-placeholder-font-size-ka4djm);
202
+ font-style: var(--awsui-prompt-input-style-placeholder-font-style-ka4djm, italic);
203
+ font-weight: var(--awsui-prompt-input-style-placeholder-font-weight-ka4djm);
208
204
  opacity: 1;
209
205
  pointer-events: none;
210
206
  align-self: start;
211
207
  min-inline-size: 0;
212
208
  }
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)));
209
+ .awsui_textarea_55fkh_2nevg_55:not(#\9):hover {
210
+ 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
211
  }
216
- .awsui_textarea_55fkh_7hmfa_55:not(#\9):focus {
212
+ .awsui_textarea_55fkh_2nevg_55:not(#\9):focus {
217
213
  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)));
214
+ 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
215
  }
220
- .awsui_textarea_55fkh_7hmfa_55:not(#\9):invalid {
216
+ .awsui_textarea_55fkh_2nevg_55:not(#\9):invalid {
221
217
  box-shadow: none;
222
218
  }
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);
219
+ .awsui_textarea_55fkh_2nevg_55:not(#\9)::placeholder {
220
+ color: var(--awsui-prompt-input-style-placeholder-color-ka4djm, var(--color-text-input-placeholder-l6klmg, #687078));
221
+ font-size: var(--awsui-prompt-input-style-placeholder-font-size-ka4djm);
222
+ font-style: var(--awsui-prompt-input-style-placeholder-font-style-ka4djm, italic);
223
+ font-weight: var(--awsui-prompt-input-style-placeholder-font-weight-ka4djm);
228
224
  opacity: 1;
229
225
  }
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) {
226
+ .awsui_textarea_55fkh_2nevg_55.awsui_invalid_55fkh_2nevg_226:not(#\9), .awsui_textarea_55fkh_2nevg_55.awsui_warning_55fkh_2nevg_226:not(#\9) {
231
227
  padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
232
228
  }
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));
229
+ .awsui_textarea_55fkh_2nevg_55:not(#\9):disabled, .awsui_textarea_55fkh_2nevg_55.awsui_textarea-disabled_55fkh_2nevg_229:not(#\9) {
230
+ color: var(--awsui-prompt-input-style-color-disabled-ka4djm, var(--color-text-input-disabled-s4k7tb, #879596));
235
231
  cursor: default;
236
232
  overflow-y: hidden;
237
233
  }
238
- .awsui_textarea_55fkh_7hmfa_55:not(#\9):disabled::placeholder, .awsui_textarea_55fkh_7hmfa_55.awsui_textarea-disabled_55fkh_7hmfa_233:not(#\9)::placeholder {
234
+ .awsui_textarea_55fkh_2nevg_55:not(#\9):disabled::placeholder, .awsui_textarea_55fkh_2nevg_55.awsui_textarea-disabled_55fkh_2nevg_229:not(#\9)::placeholder {
239
235
  color: var(--color-text-input-placeholder-disabled-8cf69l, #687078);
240
236
  opacity: 1;
241
237
  }
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)));
238
+ .awsui_textarea-readonly_55fkh_2nevg_55:not(#\9) {
239
+ 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
240
  }
245
- .awsui_textarea_55fkh_7hmfa_55.awsui_textarea-disabled_55fkh_7hmfa_233.awsui_placeholder-visible_55fkh_7hmfa_194:not(#\9)::before {
241
+ .awsui_textarea_55fkh_2nevg_55.awsui_textarea-disabled_55fkh_2nevg_229.awsui_placeholder-visible_55fkh_2nevg_190:not(#\9)::before {
246
242
  color: var(--color-text-input-placeholder-disabled-8cf69l, #687078);
247
243
  opacity: 1;
248
244
  pointer-events: none;
249
245
  }
250
- .awsui_textarea-wrapper_55fkh_7hmfa_250:not(#\9) {
246
+ .awsui_textarea-wrapper_55fkh_2nevg_246:not(#\9) {
251
247
  display: flex;
252
248
  position: relative;
253
249
  }
254
250
 
255
- .awsui_editable-wrapper_55fkh_7hmfa_255:not(#\9) {
251
+ .awsui_editable-wrapper_55fkh_2nevg_251:not(#\9) {
256
252
  flex: 1;
257
253
  min-inline-size: 0;
258
254
  position: relative;
259
255
  }
260
256
 
261
- .awsui_editable-element_55fkh_7hmfa_261:not(#\9) {
257
+ .awsui_editable-element_55fkh_2nevg_257:not(#\9) {
262
258
  word-wrap: break-word;
263
259
  overflow-wrap: break-word;
264
260
  overflow-y: auto;
265
261
  overflow-x: hidden;
266
262
  }
267
263
 
268
- .awsui_primary-action_55fkh_7hmfa_268:not(#\9) {
264
+ .awsui_primary-action_55fkh_2nevg_264:not(#\9) {
269
265
  align-self: flex-end;
270
266
  flex-shrink: 0;
271
267
  padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) / 2);
272
268
  }
273
- .awsui_textarea-wrapper_55fkh_7hmfa_250 > .awsui_primary-action_55fkh_7hmfa_268:not(#\9) {
269
+ .awsui_textarea-wrapper_55fkh_2nevg_246 > .awsui_primary-action_55fkh_2nevg_264:not(#\9) {
274
270
  padding-inline-end: calc(var(--space-field-horizontal-anki5k, 8px) / 2);
275
271
  }
276
- .awsui_textarea-wrapper_55fkh_7hmfa_250 > .awsui_primary-action_55fkh_7hmfa_268 > .awsui_action-button_55fkh_7hmfa_276:not(#\9) {
272
+ .awsui_textarea-wrapper_55fkh_2nevg_246 > .awsui_primary-action_55fkh_2nevg_264 > .awsui_action-button_55fkh_2nevg_272:not(#\9) {
277
273
  margin-block-end: var(--space-scaled-xxxs-n0ri6o, 2px);
278
274
  padding: 0;
279
275
  }
280
276
 
281
- .awsui_secondary-content_55fkh_7hmfa_281:not(#\9) {
277
+ .awsui_secondary-content_55fkh_2nevg_277:not(#\9) {
282
278
  border-collapse: separate;
283
279
  border-spacing: 0;
284
280
  box-sizing: border-box;
@@ -313,17 +309,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
313
309
  border-end-start-radius: var(--border-radius-input-k1q34z, 2px);
314
310
  border-end-end-radius: var(--border-radius-input-k1q34z, 2px);
315
311
  }
316
- .awsui_secondary-content_55fkh_7hmfa_281.awsui_with-paddings_55fkh_7hmfa_316:not(#\9) {
312
+ .awsui_secondary-content_55fkh_2nevg_277.awsui_with-paddings_55fkh_2nevg_312:not(#\9) {
317
313
  padding-block-start: var(--space-scaled-s-2crg2b, 12px);
318
314
  padding-block-end: var(--space-scaled-s-2crg2b, 12px);
319
315
  padding-inline-start: var(--space-field-horizontal-anki5k, 8px);
320
316
  padding-inline-end: var(--space-field-horizontal-anki5k, 8px);
321
317
  }
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) {
318
+ .awsui_secondary-content_55fkh_2nevg_277.awsui_with-paddings_55fkh_2nevg_312.awsui_invalid_55fkh_2nevg_226:not(#\9), .awsui_secondary-content_55fkh_2nevg_277.awsui_with-paddings_55fkh_2nevg_312.awsui_warning_55fkh_2nevg_226:not(#\9) {
323
319
  padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
324
320
  }
325
321
 
326
- .awsui_action-stripe_55fkh_7hmfa_326:not(#\9) {
322
+ .awsui_action-stripe_55fkh_2nevg_322:not(#\9) {
327
323
  border-collapse: separate;
328
324
  border-spacing: 0;
329
325
  box-sizing: border-box;
@@ -362,7 +358,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
362
358
  align-items: flex-end;
363
359
  }
364
360
 
365
- .awsui_secondary-actions_55fkh_7hmfa_365:not(#\9) {
361
+ .awsui_secondary-actions_55fkh_2nevg_361:not(#\9) {
366
362
  flex-basis: max-content;
367
363
  flex-grow: 0;
368
364
  flex-shrink: 1;
@@ -372,25 +368,25 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
372
368
  overflow: hidden;
373
369
  padding-inline-end: var(--space-scaled-xxs-j00t0m, 4px);
374
370
  }
375
- .awsui_secondary-actions_55fkh_7hmfa_365.awsui_with-paddings_55fkh_7hmfa_316:not(#\9) {
371
+ .awsui_secondary-actions_55fkh_2nevg_361.awsui_with-paddings_55fkh_2nevg_312:not(#\9) {
376
372
  padding-inline: var(--space-field-horizontal-anki5k, 8px);
377
373
  padding-block-start: var(--space-scaled-s-2crg2b, 12px);
378
374
  padding-block-end: var(--space-field-vertical-77df8s, 4px);
379
375
  }
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) {
376
+ .awsui_secondary-actions_55fkh_2nevg_361.awsui_with-paddings_55fkh_2nevg_312.awsui_invalid_55fkh_2nevg_226:not(#\9), .awsui_secondary-actions_55fkh_2nevg_361.awsui_with-paddings_55fkh_2nevg_312.awsui_warning_55fkh_2nevg_226:not(#\9) {
381
377
  padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
382
378
  }
383
- .awsui_secondary-actions_55fkh_7hmfa_365.awsui_with-paddings-and-actions_55fkh_7hmfa_383:not(#\9) {
379
+ .awsui_secondary-actions_55fkh_2nevg_361.awsui_with-paddings-and-actions_55fkh_2nevg_379:not(#\9) {
384
380
  padding-inline-end: 0;
385
381
  }
386
382
 
387
- .awsui_buffer_55fkh_7hmfa_387:not(#\9) {
383
+ .awsui_buffer_55fkh_2nevg_383:not(#\9) {
388
384
  flex: 1;
389
385
  align-self: stretch;
390
386
  cursor: text;
391
387
  }
392
388
 
393
- .awsui_token-container_55fkh_7hmfa_393:not(#\9) {
389
+ .awsui_token-container_55fkh_2nevg_389:not(#\9) {
394
390
  display: inline-block;
395
391
  user-select: all;
396
392
  -webkit-user-select: all;
@@ -398,21 +394,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
398
394
  padding-inline: var(--space-xxxs-3ulqs3, 2px);
399
395
  }
400
396
 
401
- .awsui_reference-wrapper_55fkh_7hmfa_401:not(#\9) {
397
+ .awsui_reference-wrapper_55fkh_2nevg_397:not(#\9) {
402
398
  unicode-bidi: isolate;
403
399
  }
404
400
 
405
- .awsui_trigger-base_55fkh_7hmfa_405:not(#\9) {
401
+ .awsui_trigger-base_55fkh_2nevg_401:not(#\9) {
406
402
  unicode-bidi: isolate;
407
403
  }
408
404
 
409
- .awsui_trigger-token_55fkh_7hmfa_409:not(#\9) {
405
+ .awsui_trigger-token_55fkh_2nevg_405:not(#\9) {
410
406
  text-decoration: underline dashed currentColor;
411
407
  text-decoration-thickness: var(--border-divider-list-width-2qbfmz, 1px);
412
408
  text-underline-offset: var(--space-xxxs-3ulqs3, 2px);
413
409
  }
414
410
 
415
- .awsui_paragraph_55fkh_7hmfa_415:not(#\9) {
411
+ .awsui_paragraph_55fkh_2nevg_411:not(#\9) {
416
412
  border-collapse: separate;
417
413
  border-spacing: 0;
418
414
  box-sizing: border-box;
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_2nevg_10",
6
+ "textarea-readonly": "awsui_textarea-readonly_55fkh_2nevg_55",
7
+ "disabled": "awsui_disabled_55fkh_2nevg_61",
8
+ "textarea-invalid": "awsui_textarea-invalid_55fkh_2nevg_69",
9
+ "textarea-warning": "awsui_textarea-warning_55fkh_2nevg_97",
10
+ "textarea": "awsui_textarea_55fkh_2nevg_55",
11
+ "placeholder-visible": "awsui_placeholder-visible_55fkh_2nevg_190",
12
+ "invalid": "awsui_invalid_55fkh_2nevg_226",
13
+ "warning": "awsui_warning_55fkh_2nevg_226",
14
+ "textarea-disabled": "awsui_textarea-disabled_55fkh_2nevg_229",
15
+ "textarea-wrapper": "awsui_textarea-wrapper_55fkh_2nevg_246",
16
+ "editable-wrapper": "awsui_editable-wrapper_55fkh_2nevg_251",
17
+ "editable-element": "awsui_editable-element_55fkh_2nevg_257",
18
+ "primary-action": "awsui_primary-action_55fkh_2nevg_264",
19
+ "action-button": "awsui_action-button_55fkh_2nevg_272",
20
+ "secondary-content": "awsui_secondary-content_55fkh_2nevg_277",
21
+ "with-paddings": "awsui_with-paddings_55fkh_2nevg_312",
22
+ "action-stripe": "awsui_action-stripe_55fkh_2nevg_322",
23
+ "secondary-actions": "awsui_secondary-actions_55fkh_2nevg_361",
24
+ "with-paddings-and-actions": "awsui_with-paddings-and-actions_55fkh_2nevg_379",
25
+ "buffer": "awsui_buffer_55fkh_2nevg_383",
26
+ "token-container": "awsui_token-container_55fkh_2nevg_389",
27
+ "reference-wrapper": "awsui_reference-wrapper_55fkh_2nevg_397",
28
+ "trigger-base": "awsui_trigger-base_55fkh_2nevg_401",
29
+ "trigger-token": "awsui_trigger-token_55fkh_2nevg_405",
30
+ "paragraph": "awsui_paragraph_55fkh_2nevg_411"
31
31
  };
32
32
 
package/lib/internal/template/segmented-control/internal-segmented-control.d.ts CHANGED
@@ -1,3 +1,8 @@
1
+ import { GroupedControlPosition } 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
+ groupedControlPosition?: GroupedControlPosition | null;
5
+ }
6
+ export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, style, groupedControlPosition, }: 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":"AAKA,OAAO,EAAE,sBAAsB,EAAE,MAAM,2CAA2C,CAAC;AAKnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAMrD,UAAU,sCAAuC,SAAQ,qBAAqB;IAC5E,sBAAsB,CAAC,EAAE,sBAAsB,GAAG,IAAI,CAAC;CACxD;AAED,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,KAAK,EACL,sBAAsB,GACvB,EAAE,sCAAsC,eAmFxC"}
package/lib/internal/template/segmented-control/internal-segmented-control.js CHANGED
@@ -9,7 +9,7 @@ import handleKey from '../internal/utils/handle-key';
9
9
  import { Segment } from './segment';
10
10
  import { getSegmentedControlRootStyles } from './style';
11
11
  import styles from './styles.css.js';
12
- export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, style, }) {
12
+ export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, style, groupedControlPosition, }) {
13
13
  const segmentByIdRef = useRef({});
14
14
  const selectedOptions = (options || []).filter(option => {
15
15
  return option.id === selectedId;
@@ -32,6 +32,8 @@ export default function InternalSegmentedControl({ selectedId, options, label, a
32
32
  const isVisualRefresh = useVisualRefresh();
33
33
  return (React.createElement("div", { className: clsx(styles['segment-part'], styles[`segment-count-${options === null || options === void 0 ? void 0 : options.length}`], {
34
34
  [styles.refresh]: isVisualRefresh,
35
+ [styles.grouped]: !!groupedControlPosition,
36
+ [styles[`grouped-${groupedControlPosition}`]]: !!groupedControlPosition,
35
37
  }), "aria-label": label, "aria-labelledby": ariaLabelledby, role: "toolbar", style: getSegmentedControlRootStyles(style) }, options &&
36
38
  options.map((option, index) => {
37
39
  const isActive = selectedId === option.id;
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 { GroupedControlPosition } 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 groupedControlPosition?: GroupedControlPosition | null;\n}\n\nexport default function InternalSegmentedControl({\n selectedId,\n options,\n label,\n ariaLabelledby,\n onChange,\n style,\n groupedControlPosition,\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 return (\n <div\n className={clsx(styles['segment-part'], styles[`segment-count-${options?.length}`], {\n [styles.refresh]: isVisualRefresh,\n [styles.grouped]: !!groupedControlPosition,\n [styles[`grouped-${groupedControlPosition}`]]: !!groupedControlPosition,\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"]}
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":"AASA,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,eAgD/B"}
package/lib/internal/template/segmented-control/internal.js CHANGED
@@ -4,12 +4,14 @@ import React from 'react';
4
4
  import clsx from 'clsx';
5
5
  import InternalFormField from '../form-field/internal';
6
6
  import { getBaseProps } from '../internal/base-component';
7
+ import { useGroupedControlContext } from '../internal/context/control-group-context';
7
8
  import { fireNonCancelableEvent } from '../internal/events';
8
9
  import InternalSelect from '../select/internal';
9
10
  import InternalSegmentedControlComponent from './internal-segmented-control';
10
11
  import styles from './styles.css.js';
11
12
  export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, __internalRootRef, style, ...props }) {
12
13
  const baseProps = getBaseProps(props);
14
+ const { position: groupedControlPosition } = useGroupedControlContext();
13
15
  const selectOptions = (options || []).map(option => {
14
16
  const label = option.text || option.iconAlt;
15
17
  return { ...option, label, value: option.id };
@@ -25,8 +27,11 @@ export default function InternalSegmentedControl({ selectedId, options, label, a
25
27
  onChange: event => fireNonCancelableEvent(onChange, { selectedId: event.detail.selectedOption.value }),
26
28
  };
27
29
  return (React.createElement("div", { ...baseProps, className: clsx(baseProps.className, styles.root), ref: __internalRootRef },
28
- React.createElement(InternalSegmentedControlComponent, { selectedId: selectedId, options: options, label: label, ariaLabelledby: ariaLabelledby, onChange: onChange, style: style }),
29
- React.createElement("div", { className: styles.select },
30
+ React.createElement(InternalSegmentedControlComponent, { selectedId: selectedId, options: options, label: label, ariaLabelledby: ariaLabelledby, onChange: onChange, style: style, groupedControlPosition: groupedControlPosition }),
31
+ React.createElement("div", { className: clsx(styles.select, {
32
+ [styles.grouped]: !!groupedControlPosition,
33
+ [styles[`grouped-${groupedControlPosition}`]]: !!groupedControlPosition,
34
+ }) },
30
35
  ariaLabelledby && React.createElement(InternalSelect, { ...selectProps, ariaLabelledby: ariaLabelledby }),
31
36
  !ariaLabelledby && label && (React.createElement(InternalFormField, { label: label, stretch: true },
32
37
  React.createElement(InternalSelect, { ...selectProps }))),
package/lib/internal/template/segmented-control/internal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/segmented-control/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,cAAuC,MAAM,oBAAoB,CAAC;AAEzE,OAAO,iCAAiC,MAAM,8BAA8B,CAAC;AAE7E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,iBAAiB,EACjB,KAAK,EACL,GAAG,KAAK,EACsB;IAC9B,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEtC,MAAM,aAAa,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QACjD,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,OAAO,CAAC;QAC5C,OAAO,EAAE,GAAG,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE;QACpD,OAAO,MAAM,CAAC,KAAK,KAAK,UAAU,CAAC;IACrC,CAAC,CAAC,CAAC;IACH,MAAM,qBAAqB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAEjF,MAAM,WAAW,GAAwB;QACvC,OAAO,EAAE,aAAa;QACtB,cAAc,EAAE,qBAAqB;QACrC,cAAc,EAAE,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,QAAQ,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,KAAM,EAAE,CAAC;KACxG,CAAC;IAEF,OAAO,CACL,gCAAS,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,iBAAiB;QAC3F,oBAAC,iCAAiC,IAChC,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACZ;QACF,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;YAC1B,cAAc,IAAI,oBAAC,cAAc,OAAK,WAAW,EAAE,cAAc,EAAE,cAAc,GAAI;YACrF,CAAC,cAAc,IAAI,KAAK,IAAI,CAC3B,oBAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI;gBAC5C,oBAAC,cAAc,OAAK,WAAW,GAAI,CACjB,CACrB;YACA,CAAC,cAAc,IAAI,CAAC,KAAK,IAAI,oBAAC,cAAc,OAAK,WAAW,GAAI,CAC7D,CACF,CACP,CAAC;AACJ,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 InternalFormField from '../form-field/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport InternalSelect, { InternalSelectProps } from '../select/internal';\nimport { SegmentedControlProps } from './interfaces';\nimport InternalSegmentedControlComponent from './internal-segmented-control';\n\nimport styles from './styles.css.js';\n\ntype InternalSegmentedControlProps = SegmentedControlProps & InternalBaseComponentProps;\n\nexport default function InternalSegmentedControl({\n selectedId,\n options,\n label,\n ariaLabelledby,\n onChange,\n __internalRootRef,\n style,\n ...props\n}: InternalSegmentedControlProps) {\n const baseProps = getBaseProps(props);\n\n const selectOptions = (options || []).map(option => {\n const label = option.text || option.iconAlt;\n return { ...option, label, value: option.id };\n });\n\n const selectedOptions = selectOptions.filter(option => {\n return option.value === selectedId;\n });\n const currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;\n\n const selectProps: InternalSelectProps = {\n options: selectOptions,\n selectedOption: currentSelectedOption,\n triggerVariant: 'option',\n onChange: event => fireNonCancelableEvent(onChange, { selectedId: event.detail.selectedOption.value! }),\n };\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n <InternalSegmentedControlComponent\n selectedId={selectedId}\n options={options}\n label={label}\n ariaLabelledby={ariaLabelledby}\n onChange={onChange}\n style={style}\n />\n <div className={styles.select}>\n {ariaLabelledby && <InternalSelect {...selectProps} ariaLabelledby={ariaLabelledby} />}\n {!ariaLabelledby && label && (\n <InternalFormField label={label} stretch={true}>\n <InternalSelect {...selectProps} />\n </InternalFormField>\n )}\n {!ariaLabelledby && !label && <InternalSelect {...selectProps} />}\n </div>\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/segmented-control/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 InternalFormField from '../form-field/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { useGroupedControlContext } from '../internal/context/control-group-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport InternalSelect, { InternalSelectProps } from '../select/internal';\nimport { SegmentedControlProps } from './interfaces';\nimport InternalSegmentedControlComponent from './internal-segmented-control';\n\nimport styles from './styles.css.js';\n\ntype InternalSegmentedControlProps = SegmentedControlProps & InternalBaseComponentProps;\n\nexport default function InternalSegmentedControl({\n selectedId,\n options,\n label,\n ariaLabelledby,\n onChange,\n __internalRootRef,\n style,\n ...props\n}: InternalSegmentedControlProps) {\n const baseProps = getBaseProps(props);\n const { position: groupedControlPosition } = useGroupedControlContext();\n\n const selectOptions = (options || []).map(option => {\n const label = option.text || option.iconAlt;\n return { ...option, label, value: option.id };\n });\n\n const selectedOptions = selectOptions.filter(option => {\n return option.value === selectedId;\n });\n const currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;\n\n const selectProps: InternalSelectProps = {\n options: selectOptions,\n selectedOption: currentSelectedOption,\n triggerVariant: 'option',\n onChange: event => fireNonCancelableEvent(onChange, { selectedId: event.detail.selectedOption.value! }),\n };\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n <InternalSegmentedControlComponent\n selectedId={selectedId}\n options={options}\n label={label}\n ariaLabelledby={ariaLabelledby}\n onChange={onChange}\n style={style}\n groupedControlPosition={groupedControlPosition}\n />\n <div\n className={clsx(styles.select, {\n [styles.grouped]: !!groupedControlPosition,\n [styles[`grouped-${groupedControlPosition}`]]: !!groupedControlPosition,\n })}\n >\n {ariaLabelledby && <InternalSelect {...selectProps} ariaLabelledby={ariaLabelledby} />}\n {!ariaLabelledby && label && (\n <InternalFormField label={label} stretch={true}>\n <InternalSelect {...selectProps} />\n </InternalFormField>\n )}\n {!ariaLabelledby && !label && <InternalSelect {...selectProps} />}\n </div>\n </div>\n );\n}\n"]}