@cloudscape-design/components-themeable 3.0.1359 → 3.0.1361

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 (197) hide show
  1. package/lib/__tests__/theming.test.d.ts +2 -0
  2. package/lib/__tests__/theming.test.d.ts.map +1 -0
  3. package/lib/__tests__/theming.test.js +47 -0
  4. package/lib/__tests__/theming.test.js.map +1 -0
  5. package/lib/internal/manifest.json +1 -1
  6. package/lib/internal/scss/alert/styles.scss +13 -12
  7. package/lib/internal/scss/badge/styles.scss +38 -49
  8. package/lib/internal/scss/button/styles.scss +51 -51
  9. package/lib/internal/scss/cards/styles.scss +4 -0
  10. package/lib/internal/scss/container/styles.scss +2 -0
  11. package/lib/internal/scss/icon/hover-motion.scss +24 -12
  12. package/lib/internal/scss/input/styles.scss +4 -0
  13. package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +175 -174
  14. package/lib/internal/scss/internal/styles/forms/mixins.scss +11 -2
  15. package/lib/internal/scss/internal/styles/style-api.scss +60 -10
  16. package/lib/internal/scss/pagination/styles.scss +3 -1
  17. package/lib/internal/scss/table/styles.scss +5 -0
  18. package/lib/internal/template/alert/styles.css.js +27 -27
  19. package/lib/internal/template/alert/styles.scoped.css +50 -50
  20. package/lib/internal/template/alert/styles.selectors.js +27 -27
  21. package/lib/internal/template/annotation-context/annotation/styles.css.js +13 -13
  22. package/lib/internal/template/annotation-context/annotation/styles.scoped.css +21 -21
  23. package/lib/internal/template/annotation-context/annotation/styles.selectors.js +13 -13
  24. package/lib/internal/template/app-layout/notifications/styles.css.js +3 -3
  25. package/lib/internal/template/app-layout/notifications/styles.scoped.css +7 -7
  26. package/lib/internal/template/app-layout/notifications/styles.selectors.js +3 -3
  27. package/lib/internal/template/app-layout/visual-refresh/styles.css.js +86 -86
  28. package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +258 -258
  29. package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +86 -86
  30. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.css.js +32 -32
  31. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +89 -89
  32. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +32 -32
  33. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.css.js +6 -6
  34. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +13 -13
  35. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +6 -6
  36. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.css.js +30 -30
  37. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css +68 -68
  38. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js +30 -30
  39. package/lib/internal/template/attribute-editor/styles.css.js +15 -15
  40. package/lib/internal/template/attribute-editor/styles.scoped.css +28 -28
  41. package/lib/internal/template/attribute-editor/styles.selectors.js +15 -15
  42. package/lib/internal/template/breadcrumb-group/item/styles.css.js +7 -7
  43. package/lib/internal/template/breadcrumb-group/item/styles.scoped.css +28 -28
  44. package/lib/internal/template/breadcrumb-group/item/styles.selectors.js +7 -7
  45. package/lib/internal/template/button/styles.css.js +23 -23
  46. package/lib/internal/template/button/styles.scoped.css +261 -261
  47. package/lib/internal/template/button/styles.selectors.js +23 -23
  48. package/lib/internal/template/button-dropdown/filter.d.ts +1 -1
  49. package/lib/internal/template/button-dropdown/filter.d.ts.map +1 -1
  50. package/lib/internal/template/button-dropdown/internal.d.ts.map +1 -1
  51. package/lib/internal/template/button-dropdown/internal.js +9 -3
  52. package/lib/internal/template/button-dropdown/internal.js.map +1 -1
  53. package/lib/internal/template/button-dropdown/item-element/styles.css.js +21 -21
  54. package/lib/internal/template/button-dropdown/item-element/styles.scoped.css +37 -37
  55. package/lib/internal/template/button-dropdown/item-element/styles.selectors.js +21 -21
  56. package/lib/internal/template/button-dropdown/utils/use-button-dropdown.d.ts +5 -3
  57. package/lib/internal/template/button-dropdown/utils/use-button-dropdown.d.ts.map +1 -1
  58. package/lib/internal/template/button-dropdown/utils/use-button-dropdown.js +14 -2
  59. package/lib/internal/template/button-dropdown/utils/use-button-dropdown.js.map +1 -1
  60. package/lib/internal/template/cards/styles.css.js +39 -38
  61. package/lib/internal/template/cards/styles.scoped.css +42 -39
  62. package/lib/internal/template/cards/styles.selectors.js +39 -38
  63. package/lib/internal/template/checkbox/styles.css.js +3 -3
  64. package/lib/internal/template/checkbox/styles.scoped.css +11 -11
  65. package/lib/internal/template/checkbox/styles.selectors.js +3 -3
  66. package/lib/internal/template/container/styles.css.js +33 -33
  67. package/lib/internal/template/container/styles.scoped.css +57 -56
  68. package/lib/internal/template/container/styles.selectors.js +33 -33
  69. package/lib/internal/template/content-layout/styles.css.js +14 -14
  70. package/lib/internal/template/content-layout/styles.scoped.css +27 -27
  71. package/lib/internal/template/content-layout/styles.selectors.js +14 -14
  72. package/lib/internal/template/dropdown/styles.css.js +20 -20
  73. package/lib/internal/template/dropdown/styles.scoped.css +49 -49
  74. package/lib/internal/template/dropdown/styles.selectors.js +20 -20
  75. package/lib/internal/template/file-token-group/styles.css.js +23 -23
  76. package/lib/internal/template/file-token-group/styles.scoped.css +36 -36
  77. package/lib/internal/template/file-token-group/styles.selectors.js +23 -23
  78. package/lib/internal/template/flashbar/styles.css.js +50 -50
  79. package/lib/internal/template/flashbar/styles.scoped.css +192 -192
  80. package/lib/internal/template/flashbar/styles.selectors.js +50 -50
  81. package/lib/internal/template/help-panel/styles.css.js +6 -6
  82. package/lib/internal/template/help-panel/styles.scoped.css +72 -72
  83. package/lib/internal/template/help-panel/styles.selectors.js +6 -6
  84. package/lib/internal/template/input/index.d.ts.map +1 -1
  85. package/lib/internal/template/input/index.js +3 -2
  86. package/lib/internal/template/input/index.js.map +1 -1
  87. package/lib/internal/template/input/interfaces.d.ts +6 -0
  88. package/lib/internal/template/input/interfaces.d.ts.map +1 -1
  89. package/lib/internal/template/input/interfaces.js.map +1 -1
  90. package/lib/internal/template/input/internal.d.ts +0 -1
  91. package/lib/internal/template/input/internal.d.ts.map +1 -1
  92. package/lib/internal/template/input/internal.js +26 -12
  93. package/lib/internal/template/input/internal.js.map +1 -1
  94. package/lib/internal/template/input/styles.css.js +29 -28
  95. package/lib/internal/template/input/styles.scoped.css +134 -131
  96. package/lib/internal/template/input/styles.selectors.js +29 -28
  97. package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
  98. package/lib/internal/template/internal/components/drag-handle-wrapper/index.d.ts.map +1 -1
  99. package/lib/internal/template/internal/components/drag-handle-wrapper/index.js +2 -1
  100. package/lib/internal/template/internal/components/drag-handle-wrapper/index.js.map +1 -1
  101. package/lib/internal/template/internal/components/drag-handle-wrapper/styles.css.js +30 -30
  102. package/lib/internal/template/internal/components/drag-handle-wrapper/styles.scoped.css +58 -58
  103. package/lib/internal/template/internal/components/drag-handle-wrapper/styles.selectors.js +30 -30
  104. package/lib/internal/template/internal/components/option/styles.css.js +17 -17
  105. package/lib/internal/template/internal/components/option/styles.scoped.css +31 -31
  106. package/lib/internal/template/internal/components/option/styles.selectors.js +17 -17
  107. package/lib/internal/template/internal/components/radio-button/styles.css.js +7 -7
  108. package/lib/internal/template/internal/components/radio-button/styles.scoped.css +18 -18
  109. package/lib/internal/template/internal/components/radio-button/styles.selectors.js +7 -7
  110. package/lib/internal/template/internal/components/selectable-item/styles.css.js +22 -22
  111. package/lib/internal/template/internal/components/selectable-item/styles.scoped.css +57 -57
  112. package/lib/internal/template/internal/components/selectable-item/styles.selectors.js +22 -22
  113. package/lib/internal/template/internal/components/token-list/styles.css.js +10 -10
  114. package/lib/internal/template/internal/components/token-list/styles.scoped.css +25 -25
  115. package/lib/internal/template/internal/components/token-list/styles.selectors.js +10 -10
  116. package/lib/internal/template/internal/environment.js +2 -2
  117. package/lib/internal/template/internal/environment.json +2 -2
  118. package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts +1 -0
  119. package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts.map +1 -1
  120. package/lib/internal/template/internal/generated/custom-css-properties/index.js +174 -173
  121. package/lib/internal/template/internal/generated/custom-css-properties/index.js.map +1 -1
  122. package/lib/internal/template/internal/generated/styles/tokens.js +200 -200
  123. package/lib/internal/template/internal/generated/theming/index.cjs +200 -200
  124. package/lib/internal/template/internal/generated/theming/index.js +200 -200
  125. package/lib/internal/template/internal/utils/focus-visible.d.ts +15 -0
  126. package/lib/internal/template/internal/utils/focus-visible.d.ts.map +1 -0
  127. package/lib/internal/template/internal/utils/focus-visible.js +21 -0
  128. package/lib/internal/template/internal/utils/focus-visible.js.map +1 -0
  129. package/lib/internal/template/item-card/styles.css.js +14 -14
  130. package/lib/internal/template/item-card/styles.scoped.css +63 -63
  131. package/lib/internal/template/item-card/styles.selectors.js +14 -14
  132. package/lib/internal/template/link/styles.css.js +21 -21
  133. package/lib/internal/template/link/styles.scoped.css +104 -104
  134. package/lib/internal/template/link/styles.selectors.js +21 -21
  135. package/lib/internal/template/modal/styles.css.js +31 -31
  136. package/lib/internal/template/modal/styles.scoped.css +48 -48
  137. package/lib/internal/template/modal/styles.selectors.js +31 -31
  138. package/lib/internal/template/pagination/internal.js +1 -1
  139. package/lib/internal/template/pagination/internal.js.map +1 -1
  140. package/lib/internal/template/pagination/styles.css.js +12 -12
  141. package/lib/internal/template/pagination/styles.scoped.css +31 -31
  142. package/lib/internal/template/pagination/styles.selectors.js +12 -12
  143. package/lib/internal/template/progress-bar/styles.css.js +19 -19
  144. package/lib/internal/template/progress-bar/styles.scoped.css +58 -58
  145. package/lib/internal/template/progress-bar/styles.selectors.js +19 -19
  146. package/lib/internal/template/prompt-input/styles.css.js +26 -26
  147. package/lib/internal/template/prompt-input/styles.scoped.css +105 -105
  148. package/lib/internal/template/prompt-input/styles.selectors.js +26 -26
  149. package/lib/internal/template/segmented-control/styles.css.js +16 -16
  150. package/lib/internal/template/segmented-control/styles.scoped.css +46 -46
  151. package/lib/internal/template/segmented-control/styles.selectors.js +16 -16
  152. package/lib/internal/template/select/parts/filter.d.ts +1 -1
  153. package/lib/internal/template/select/parts/filter.d.ts.map +1 -1
  154. package/lib/internal/template/select/parts/styles.css.js +21 -21
  155. package/lib/internal/template/select/parts/styles.scoped.css +24 -24
  156. package/lib/internal/template/select/parts/styles.selectors.js +21 -21
  157. package/lib/internal/template/side-navigation/styles.css.js +64 -64
  158. package/lib/internal/template/side-navigation/styles.scoped.css +111 -111
  159. package/lib/internal/template/side-navigation/styles.selectors.js +64 -64
  160. package/lib/internal/template/slider/styles.css.js +26 -26
  161. package/lib/internal/template/slider/styles.scoped.css +165 -165
  162. package/lib/internal/template/slider/styles.selectors.js +26 -26
  163. package/lib/internal/template/spinner/styles.css.js +14 -14
  164. package/lib/internal/template/spinner/styles.scoped.css +40 -40
  165. package/lib/internal/template/spinner/styles.selectors.js +14 -14
  166. package/lib/internal/template/table/styles.css.js +37 -37
  167. package/lib/internal/template/table/styles.scoped.css +47 -44
  168. package/lib/internal/template/table/styles.selectors.js +37 -37
  169. package/lib/internal/template/tabs/styles.css.js +30 -30
  170. package/lib/internal/template/tabs/styles.scoped.css +76 -76
  171. package/lib/internal/template/tabs/styles.selectors.js +30 -30
  172. package/lib/internal/template/tag-editor/styles.css.js +3 -3
  173. package/lib/internal/template/tag-editor/styles.scoped.css +13 -13
  174. package/lib/internal/template/tag-editor/styles.selectors.js +3 -3
  175. package/lib/internal/template/test-utils/dom/input/index.d.ts +1 -0
  176. package/lib/internal/template/test-utils/dom/input/index.js +3 -0
  177. package/lib/internal/template/test-utils/dom/input/index.js.map +1 -1
  178. package/lib/internal/template/test-utils/selectors/input/index.d.ts +1 -0
  179. package/lib/internal/template/test-utils/selectors/input/index.js +3 -0
  180. package/lib/internal/template/test-utils/selectors/input/index.js.map +1 -1
  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 -51
  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 +23 -23
  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/lib/theming.d.ts +1 -1
  194. package/lib/theming.d.ts.map +1 -1
  195. package/lib/theming.js +11 -2
  196. package/lib/theming.js.map +1 -1
  197. package/package.json +1 -1
package/lib/internal/template/input/styles.scoped.css CHANGED
@@ -6,41 +6,41 @@
6
6
  /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
7
7
  /* Style used for links in slots/components that are text heavy, to help links stand out among
8
8
  surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
9
- .awsui_input-adorned-container_2rhyz_1ofyb_9:not(#\9), .awsui_input_2rhyz_1ofyb_9:not(#\9) {
10
- background-color: var(--awsui-style-background-default-esndbs, var(--color-background-input-default-1u0v1p, #ffffff));
11
- border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-style-border-color-default-esndbs, var(--color-border-input-default-jtkw9d, #687078));
12
- border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-style-border-color-default-esndbs, var(--color-border-input-default-jtkw9d, #687078));
13
- box-shadow: var(--awsui-style-box-shadow-default-esndbs);
9
+ .awsui_input-adorned-container_2rhyz_1611r_9:not(#\9), .awsui_input_2rhyz_1611r_9:not(#\9) {
10
+ background-color: var(--awsui-style-background-default-66120l, var(--color-background-input-default-1u0v1p, #ffffff));
11
+ border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-style-border-color-default-66120l, var(--color-border-input-default-jtkw9d, #687078));
12
+ border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-style-border-color-default-66120l, var(--color-border-input-default-jtkw9d, #687078));
13
+ box-shadow: var(--awsui-style-box-shadow-default-66120l);
14
14
  }
15
15
 
16
- .awsui_input-adorned-container_2rhyz_1ofyb_9:not(#\9):hover, .awsui_input_2rhyz_1ofyb_9:not(#\9):hover {
17
- border-color: var(--awsui-style-border-color-hover-esndbs, var(--awsui-style-border-color-default-esndbs, var(--color-border-input-default-jtkw9d, #687078)));
18
- background-color: var(--awsui-style-background-hover-esndbs, var(--awsui-style-background-default-esndbs, var(--color-background-input-default-1u0v1p, #ffffff)));
19
- box-shadow: var(--awsui-style-box-shadow-hover-esndbs, --awsui-style-box-shadow-default-esndbs);
16
+ .awsui_input-adorned-container_2rhyz_1611r_9:not(#\9):hover, .awsui_input_2rhyz_1611r_9:not(#\9):hover {
17
+ border-color: var(--awsui-style-border-color-hover-66120l, var(--awsui-style-border-color-default-66120l, var(--color-border-input-default-jtkw9d, #687078)));
18
+ background-color: var(--awsui-style-background-hover-66120l, var(--awsui-style-background-default-66120l, var(--color-background-input-default-1u0v1p, #ffffff)));
19
+ box-shadow: var(--awsui-style-box-shadow-hover-66120l, --awsui-style-box-shadow-default-66120l);
20
20
  }
21
21
 
22
- .awsui_input-adorned-container_2rhyz_1ofyb_9.awsui_input-adorned-container-readonly_2rhyz_1ofyb_22:not(#\9), .awsui_input_2rhyz_1ofyb_9.awsui_input-readonly_2rhyz_1ofyb_22:not(#\9) {
23
- background-color: var(--awsui-style-background-readonly-esndbs, var(--awsui-style-background-default-esndbs, var(--color-background-input-default-1u0v1p, #ffffff)));
24
- border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-style-border-color-readonly-esndbs, var(--awsui-style-border-color-default-esndbs, var(--color-border-input-disabled-5m31k6, #eaeded)));
25
- border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-style-border-color-readonly-esndbs, var(--awsui-style-border-color-default-esndbs, var(--color-border-input-disabled-5m31k6, #eaeded)));
22
+ .awsui_input-adorned-container_2rhyz_1611r_9.awsui_input-adorned-container-readonly_2rhyz_1611r_22:not(#\9), .awsui_input_2rhyz_1611r_9.awsui_input-readonly_2rhyz_1611r_22:not(#\9) {
23
+ background-color: var(--awsui-style-background-readonly-66120l, var(--awsui-style-background-default-66120l, var(--color-background-input-default-1u0v1p, #ffffff)));
24
+ border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-style-border-color-readonly-66120l, var(--awsui-style-border-color-default-66120l, var(--color-border-input-disabled-5m31k6, #eaeded)));
25
+ border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-style-border-color-readonly-66120l, var(--awsui-style-border-color-default-66120l, var(--color-border-input-disabled-5m31k6, #eaeded)));
26
26
  }
27
27
 
28
- .awsui_input-adorned-container_2rhyz_1ofyb_9:not(#\9):focus-within, .awsui_input_2rhyz_1ofyb_9:not(#\9):focus {
28
+ .awsui_input-adorned-container_2rhyz_1611r_9:not(#\9):focus-within, .awsui_input_2rhyz_1611r_9:not(#\9):focus {
29
29
  outline: 2px dotted transparent;
30
- border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-style-border-color-focus-esndbs, var(--color-border-input-focused-ppoq5z, #0073bb));
31
- border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-style-border-color-focus-esndbs, var(--color-border-input-focused-ppoq5z, #0073bb));
30
+ border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-style-border-color-focus-66120l, var(--color-border-input-focused-ppoq5z, #0073bb));
31
+ border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-style-border-color-focus-66120l, var(--color-border-input-focused-ppoq5z, #0073bb));
32
32
  border-start-start-radius: var(--border-radius-input-k1q34z, 2px);
33
33
  border-start-end-radius: var(--border-radius-input-k1q34z, 2px);
34
34
  border-end-start-radius: var(--border-radius-input-k1q34z, 2px);
35
35
  border-end-end-radius: var(--border-radius-input-k1q34z, 2px);
36
- box-shadow: var(--awsui-style-box-shadow-focus-esndbs, 0 0 0 var(--border-control-focus-ring-shadow-spread-iijyo6, 1px) var(--color-border-item-focused-sewkzn, #0073bb));
36
+ box-shadow: var(--awsui-style-box-shadow-focus-66120l, 0 0 0 var(--border-control-focus-ring-shadow-spread-iijyo6, 1px) var(--color-border-item-focused-sewkzn, #0073bb));
37
37
  }
38
38
 
39
- .awsui_root_2rhyz_1ofyb_39:not(#\9) {
39
+ .awsui_root_2rhyz_1611r_39:not(#\9) {
40
40
  /* used in test-utils for component to distinguish input from other input-like components, for example autosuggest */
41
41
  }
42
42
 
43
- .awsui_input_2rhyz_1ofyb_9:not(#\9) {
43
+ .awsui_input_2rhyz_1611r_9:not(#\9) {
44
44
  border-collapse: separate;
45
45
  border-spacing: 0;
46
46
  box-sizing: border-box;
@@ -72,7 +72,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
72
72
  -moz-osx-font-smoothing: auto;
73
73
  padding-block: var(--space-field-vertical-77df8s, 4px);
74
74
  padding-inline: var(--space-field-horizontal-anki5k, 8px);
75
- color: var(--awsui-style-color-default-esndbs, var(--color-text-body-default-b2us04, #16191f));
75
+ color: var(--awsui-style-color-default-66120l, var(--color-text-body-default-b2us04, #16191f));
76
76
  inline-size: 100%;
77
77
  cursor: text;
78
78
  box-sizing: border-box;
@@ -84,148 +84,148 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
84
84
  line-height: var(--line-height-body-m-5xw6xo, 22px);
85
85
  min-block-size: var(--size-vertical-input-5g8cy5, 32px);
86
86
  }
87
- .awsui_input_2rhyz_1ofyb_9:not(#\9):hover {
88
- color: var(--awsui-style-color-hover-esndbs, var(--awsui-style-border-color-default-esndbs, var(--color-text-body-default-b2us04, #16191f)));
87
+ .awsui_input_2rhyz_1611r_9:not(#\9):hover {
88
+ color: var(--awsui-style-color-hover-66120l, var(--awsui-style-border-color-default-66120l, var(--color-text-body-default-b2us04, #16191f)));
89
89
  }
90
- .awsui_input_2rhyz_1ofyb_9.awsui_input-readonly_2rhyz_1ofyb_22:not(#\9) {
91
- color: var(--awsui-style-color-readonly-esndbs, var(--awsui-style-color-default-esndbs, var(--color-text-body-default-b2us04, #16191f)));
92
- box-shadow: var(--awsui-style-box-shadow-readonly-esndbs);
90
+ .awsui_input_2rhyz_1611r_9.awsui_input-readonly_2rhyz_1611r_22:not(#\9) {
91
+ color: var(--awsui-style-color-readonly-66120l, var(--awsui-style-color-default-66120l, var(--color-text-body-default-b2us04, #16191f)));
92
+ box-shadow: var(--awsui-style-box-shadow-readonly-66120l);
93
93
  }
94
- .awsui_input_2rhyz_1ofyb_9:not(#\9)::-webkit-input-placeholder {
95
- color: var(--awsui-style-placeholder-color-esndbs, var(--color-text-input-placeholder-l6klmg, #687078));
96
- font-size: var(--awsui-style-placeholder-font-size-esndbs);
97
- font-style: var(--awsui-style-placeholder-font-style-esndbs, italic);
98
- font-weight: var(--awsui-style-placeholder-font-weight-esndbs);
94
+ .awsui_input_2rhyz_1611r_9:not(#\9)::-webkit-input-placeholder {
95
+ color: var(--awsui-style-placeholder-color-66120l, var(--color-text-input-placeholder-l6klmg, #687078));
96
+ font-size: var(--awsui-style-placeholder-font-size-66120l);
97
+ font-style: var(--awsui-style-placeholder-font-style-66120l, italic);
98
+ font-weight: var(--awsui-style-placeholder-font-weight-66120l);
99
99
  -webkit-user-select: none;
100
100
  user-select: none;
101
101
  }
102
- .awsui_input_2rhyz_1ofyb_9:not(#\9)::-moz-placeholder {
103
- color: var(--awsui-style-placeholder-color-esndbs, var(--color-text-input-placeholder-l6klmg, #687078));
104
- font-size: var(--awsui-style-placeholder-font-size-esndbs);
105
- font-style: var(--awsui-style-placeholder-font-style-esndbs, italic);
106
- font-weight: var(--awsui-style-placeholder-font-weight-esndbs);
102
+ .awsui_input_2rhyz_1611r_9:not(#\9)::-moz-placeholder {
103
+ color: var(--awsui-style-placeholder-color-66120l, var(--color-text-input-placeholder-l6klmg, #687078));
104
+ font-size: var(--awsui-style-placeholder-font-size-66120l);
105
+ font-style: var(--awsui-style-placeholder-font-style-66120l, italic);
106
+ font-weight: var(--awsui-style-placeholder-font-weight-66120l);
107
107
  opacity: 1;
108
108
  }
109
- .awsui_input_2rhyz_1ofyb_9:not(#\9):-moz-placeholder {
110
- color: var(--awsui-style-placeholder-color-esndbs, var(--color-text-input-placeholder-l6klmg, #687078));
111
- font-size: var(--awsui-style-placeholder-font-size-esndbs);
112
- font-style: var(--awsui-style-placeholder-font-style-esndbs, italic);
113
- font-weight: var(--awsui-style-placeholder-font-weight-esndbs);
109
+ .awsui_input_2rhyz_1611r_9:not(#\9):-moz-placeholder {
110
+ color: var(--awsui-style-placeholder-color-66120l, var(--color-text-input-placeholder-l6klmg, #687078));
111
+ font-size: var(--awsui-style-placeholder-font-size-66120l);
112
+ font-style: var(--awsui-style-placeholder-font-style-66120l, italic);
113
+ font-weight: var(--awsui-style-placeholder-font-weight-66120l);
114
114
  opacity: 1;
115
115
  }
116
- .awsui_input_2rhyz_1ofyb_9:not(#\9):focus {
117
- color: var(--awsui-style-color-focus-esndbs, var(--color-text-body-default-b2us04, #16191f));
118
- background-color: var(--awsui-style-background-focus-esndbs, var(--color-background-input-default-1u0v1p, #ffffff));
116
+ .awsui_input_2rhyz_1611r_9:not(#\9):focus {
117
+ color: var(--awsui-style-color-focus-66120l, var(--color-text-body-default-b2us04, #16191f));
118
+ background-color: var(--awsui-style-background-focus-66120l, var(--color-background-input-default-1u0v1p, #ffffff));
119
119
  }
120
- .awsui_input_2rhyz_1ofyb_9:not(#\9):disabled {
121
- background-color: var(--awsui-style-background-disabled-esndbs, var(--color-background-input-disabled-pyvhb1, #eaeded));
122
- border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-style-border-color-disabled-esndbs, var(--color-border-input-disabled-5m31k6, #eaeded));
123
- border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-style-border-color-disabled-esndbs, var(--color-border-input-disabled-5m31k6, #eaeded));
124
- color: var(--awsui-style-color-disabled-esndbs, var(--color-text-input-disabled-s4k7tb, #879596));
120
+ .awsui_input_2rhyz_1611r_9:not(#\9):disabled {
121
+ background-color: var(--awsui-style-background-disabled-66120l, var(--color-background-input-disabled-pyvhb1, #eaeded));
122
+ border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-style-border-color-disabled-66120l, var(--color-border-input-disabled-5m31k6, #eaeded));
123
+ border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-style-border-color-disabled-66120l, var(--color-border-input-disabled-5m31k6, #eaeded));
124
+ color: var(--awsui-style-color-disabled-66120l, var(--color-text-input-disabled-s4k7tb, #879596));
125
125
  cursor: default;
126
- box-shadow: var(--awsui-style-box-shadow-disabled-esndbs);
126
+ box-shadow: var(--awsui-style-box-shadow-disabled-66120l);
127
127
  }
128
- .awsui_input_2rhyz_1ofyb_9:not(#\9):disabled::-webkit-input-placeholder {
129
- color: var(--awsui-style-placeholder-color-esndbs, var(--color-text-input-placeholder-disabled-8cf69l, #687078));
128
+ .awsui_input_2rhyz_1611r_9:not(#\9):disabled::-webkit-input-placeholder {
129
+ color: var(--awsui-style-placeholder-color-66120l, var(--color-text-input-placeholder-disabled-8cf69l, #687078));
130
130
  -webkit-user-select: none;
131
131
  user-select: none;
132
132
  }
133
- .awsui_input_2rhyz_1ofyb_9:not(#\9):disabled::-moz-placeholder {
134
- color: var(--awsui-style-placeholder-color-esndbs, var(--color-text-input-placeholder-disabled-8cf69l, #687078));
133
+ .awsui_input_2rhyz_1611r_9:not(#\9):disabled::-moz-placeholder {
134
+ color: var(--awsui-style-placeholder-color-66120l, var(--color-text-input-placeholder-disabled-8cf69l, #687078));
135
135
  opacity: 1;
136
136
  }
137
- .awsui_input_2rhyz_1ofyb_9:not(#\9):disabled:-moz-placeholder {
138
- color: var(--awsui-style-placeholder-color-esndbs, var(--color-text-input-placeholder-disabled-8cf69l, #687078));
137
+ .awsui_input_2rhyz_1611r_9:not(#\9):disabled:-moz-placeholder {
138
+ color: var(--awsui-style-placeholder-color-66120l, var(--color-text-input-placeholder-disabled-8cf69l, #687078));
139
139
  opacity: 1;
140
140
  }
141
- .awsui_input_2rhyz_1ofyb_9:not(#\9):invalid {
141
+ .awsui_input_2rhyz_1611r_9:not(#\9):invalid {
142
142
  box-shadow: none;
143
143
  }
144
- .awsui_input_2rhyz_1ofyb_9.awsui_input-invalid_2rhyz_1ofyb_142:not(#\9) {
145
- color: var(--awsui-style-color-default-esndbs, var(--color-text-status-error-ri38gt, #d13212));
146
- border-color: var(--awsui-style-border-color-default-esndbs, var(--color-text-status-error-ri38gt, #d13212));
144
+ .awsui_input_2rhyz_1611r_9.awsui_input-invalid_2rhyz_1611r_142:not(#\9) {
145
+ color: var(--awsui-style-color-default-66120l, var(--color-text-status-error-ri38gt, #d13212));
146
+ border-color: var(--awsui-style-border-color-default-66120l, var(--color-text-status-error-ri38gt, #d13212));
147
147
  padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
148
148
  border-inline-start-width: var(--border-invalid-width-b183os, 4px);
149
149
  }
150
- .awsui_input_2rhyz_1ofyb_9.awsui_input-invalid_2rhyz_1ofyb_142:not(#\9):focus {
151
- box-shadow: var(--awsui-style-box-shadow-focus-esndbs, 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb));
150
+ .awsui_input_2rhyz_1611r_9.awsui_input-invalid_2rhyz_1611r_142:not(#\9):focus {
151
+ box-shadow: var(--awsui-style-box-shadow-focus-66120l, 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb));
152
152
  }
153
- .awsui_input_2rhyz_1ofyb_9.awsui_input-invalid_2rhyz_1ofyb_142.awsui_input-has-icon-start_2rhyz_1ofyb_151:not(#\9) {
153
+ .awsui_input_2rhyz_1611r_9.awsui_input-invalid_2rhyz_1611r_142.awsui_input-has-icon-start_2rhyz_1611r_151:not(#\9) {
154
154
  padding-inline-start: calc(var(--space-field-icon-offset-2wydv9, 32px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
155
155
  }
156
- .awsui_input_2rhyz_1ofyb_9.awsui_input-warning_2rhyz_1ofyb_154:not(#\9) {
157
- color: var(--awsui-style-color-default-esndbs, var(--color-text-status-warning-fabq6h, #906806));
158
- border-color: var(--awsui-style-border-color-default-esndbs, var(--color-text-status-warning-fabq6h, #906806));
156
+ .awsui_input_2rhyz_1611r_9.awsui_input-warning_2rhyz_1611r_154:not(#\9) {
157
+ color: var(--awsui-style-color-default-66120l, var(--color-text-status-warning-fabq6h, #906806));
158
+ border-color: var(--awsui-style-border-color-default-66120l, var(--color-text-status-warning-fabq6h, #906806));
159
159
  padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
160
160
  border-inline-start-width: var(--border-invalid-width-b183os, 4px);
161
161
  }
162
- .awsui_input_2rhyz_1ofyb_9.awsui_input-warning_2rhyz_1ofyb_154:not(#\9):focus {
163
- box-shadow: var(--awsui-style-box-shadow-focus-esndbs, 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb));
162
+ .awsui_input_2rhyz_1611r_9.awsui_input-warning_2rhyz_1611r_154:not(#\9):focus {
163
+ box-shadow: var(--awsui-style-box-shadow-focus-66120l, 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb));
164
164
  }
165
- .awsui_input_2rhyz_1ofyb_9.awsui_input-warning_2rhyz_1ofyb_154.awsui_input-has-icon-start_2rhyz_1ofyb_151:not(#\9) {
165
+ .awsui_input_2rhyz_1611r_9.awsui_input-warning_2rhyz_1611r_154.awsui_input-has-icon-start_2rhyz_1611r_151:not(#\9) {
166
166
  padding-inline-start: calc(var(--space-field-icon-offset-2wydv9, 32px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
167
167
  }
168
- .awsui_input_2rhyz_1ofyb_9.awsui_input-type-search_2rhyz_1ofyb_166:not(#\9) {
168
+ .awsui_input_2rhyz_1611r_9.awsui_input-type-search_2rhyz_1611r_166:not(#\9) {
169
169
  box-sizing: border-box;
170
170
  -webkit-appearance: none;
171
171
  }
172
- .awsui_input_2rhyz_1ofyb_9.awsui_input-type-search_2rhyz_1ofyb_166:not(#\9)::-webkit-search-decoration {
172
+ .awsui_input_2rhyz_1611r_9.awsui_input-type-search_2rhyz_1611r_166:not(#\9)::-webkit-search-decoration {
173
173
  -webkit-appearance: none;
174
174
  }
175
- .awsui_input_2rhyz_1ofyb_9.awsui_input-type-search_2rhyz_1ofyb_166:not(#\9)::-webkit-search-cancel-button {
175
+ .awsui_input_2rhyz_1611r_9.awsui_input-type-search_2rhyz_1611r_166:not(#\9)::-webkit-search-cancel-button {
176
176
  display: none;
177
177
  }
178
- .awsui_input_2rhyz_1ofyb_9.awsui_input-has-icon-start_2rhyz_1ofyb_151:not(#\9) {
178
+ .awsui_input_2rhyz_1611r_9.awsui_input-has-icon-start_2rhyz_1611r_151:not(#\9) {
179
179
  padding-inline-start: var(--space-field-icon-offset-2wydv9, 32px);
180
180
  }
181
- .awsui_input_2rhyz_1ofyb_9.awsui_input-has-icon-end_2rhyz_1ofyb_179:not(#\9) {
181
+ .awsui_input_2rhyz_1611r_9.awsui_input-has-icon-end_2rhyz_1611r_179:not(#\9) {
182
182
  padding-inline-end: var(--space-field-icon-offset-2wydv9, 32px);
183
183
  }
184
- .awsui_input_2rhyz_1ofyb_9.awsui_input-has-no-border-radius_2rhyz_1ofyb_182:not(#\9) {
184
+ .awsui_input_2rhyz_1611r_9.awsui_input-has-no-border-radius_2rhyz_1611r_182:not(#\9) {
185
185
  border-start-start-radius: var(--border-radius-dropdown-azs8zp, 0px);
186
186
  border-start-end-radius: var(--border-radius-dropdown-azs8zp, 0px);
187
187
  border-end-start-radius: var(--border-radius-dropdown-azs8zp, 0px);
188
188
  border-end-end-radius: var(--border-radius-dropdown-azs8zp, 0px);
189
189
  }
190
190
 
191
- .awsui_input-container_2rhyz_1ofyb_189:not(#\9) {
191
+ .awsui_input-container_2rhyz_1611r_189:not(#\9) {
192
192
  display: flex;
193
193
  position: relative;
194
194
  }
195
195
 
196
- .awsui_input-icon-start_2rhyz_1ofyb_194:not(#\9) {
196
+ .awsui_input-icon-start_2rhyz_1611r_194:not(#\9) {
197
197
  position: absolute;
198
198
  pointer-events: none;
199
199
  inset-inline-start: var(--space-field-horizontal-anki5k, 8px);
200
200
  inset-block-start: calc(50% - var(--line-height-body-m-5xw6xo, 22px) / 2);
201
201
  }
202
202
 
203
- .awsui_input-icon-end_2rhyz_1ofyb_201:not(#\9) {
203
+ .awsui_input-icon-end_2rhyz_1611r_201:not(#\9) {
204
204
  position: absolute;
205
205
  inset-block-start: calc(calc(50% - var(--line-height-body-m-5xw6xo, 22px) / 2) - var(--space-xxxs-3ulqs3, 2px));
206
206
  inset-inline-end: calc(var(--space-field-horizontal-anki5k, 8px) - var(--space-xxs-3o1yoq, 4px));
207
207
  }
208
208
 
209
- .awsui_input-button-right_2rhyz_1ofyb_207:not(#\9) {
209
+ .awsui_input-button-right_2rhyz_1611r_207:not(#\9) {
210
210
  /* used in test-utils */
211
211
  }
212
212
 
213
- .awsui_inline-label-trigger-wrapper_2rhyz_1ofyb_211:not(#\9) {
213
+ .awsui_inline-label-trigger-wrapper_2rhyz_1611r_211:not(#\9) {
214
214
  margin-block-start: -7px;
215
215
  }
216
- .awsui_inline-label-trigger-wrapper-full-width_2rhyz_1ofyb_214:not(#\9) {
216
+ .awsui_inline-label-trigger-wrapper-full-width_2rhyz_1611r_214:not(#\9) {
217
217
  inline-size: 100%;
218
218
  }
219
219
 
220
- .awsui_inline-label-wrapper_2rhyz_1ofyb_218:not(#\9) {
220
+ .awsui_inline-label-wrapper_2rhyz_1611r_218:not(#\9) {
221
221
  margin-block-start: calc(var(--space-scaled-xs-pajbd1, 8px) * -1);
222
222
  }
223
- .awsui_inline-label-wrapper-full-width_2rhyz_1ofyb_221:not(#\9) {
223
+ .awsui_inline-label-wrapper-full-width_2rhyz_1611r_221:not(#\9) {
224
224
  inline-size: 100%;
225
225
  }
226
226
 
227
- .awsui_inline-label_2rhyz_1ofyb_211:not(#\9) {
228
- background: linear-gradient(to bottom, var(--color-background-layout-main-y4565g, #f2f3f3), var(--color-background-input-default-1u0v1p, #ffffff));
227
+ .awsui_inline-label_2rhyz_1611r_211:not(#\9) {
228
+ background: linear-gradient(to bottom, var(--awsui-inline-label-background-color-66120l, var(--color-background-layout-main-y4565g, #f2f3f3)), var(--color-background-input-default-1u0v1p, #ffffff));
229
229
  border-start-start-radius: 2px;
230
230
  border-start-end-radius: 2px;
231
231
  border-end-start-radius: 2px;
@@ -245,65 +245,68 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
245
245
  max-inline-size: calc(100% - 2 * var(--space-field-horizontal-anki5k, 8px));
246
246
  z-index: 1;
247
247
  }
248
+ .awsui_inline-label-disabled_2rhyz_1611r_246:not(#\9) {
249
+ background: linear-gradient(to bottom, var(--awsui-inline-label-background-color-66120l, var(--color-background-layout-main-y4565g, #f2f3f3)), var(--color-background-input-disabled-pyvhb1, #eaeded));
250
+ }
248
251
 
249
- .awsui_input-adorned-container_2rhyz_1ofyb_9:not(#\9) {
252
+ .awsui_input-adorned-container_2rhyz_1611r_9:not(#\9) {
250
253
  display: flex;
251
254
  align-items: stretch;
252
255
  inline-size: 100%;
253
256
  box-sizing: border-box;
254
- color: var(--awsui-style-color-default-esndbs, var(--color-text-form-secondary-wt0md2, #687078));
257
+ color: var(--awsui-style-color-default-66120l, var(--color-text-form-secondary-wt0md2, #687078));
255
258
  border-start-start-radius: var(--border-radius-input-k1q34z, 2px);
256
259
  border-start-end-radius: var(--border-radius-input-k1q34z, 2px);
257
260
  border-end-start-radius: var(--border-radius-input-k1q34z, 2px);
258
261
  border-end-end-radius: var(--border-radius-input-k1q34z, 2px);
259
262
  min-block-size: var(--size-vertical-input-5g8cy5, 32px);
260
263
  }
261
- .awsui_input-adorned-container_2rhyz_1ofyb_9:not(#\9):hover {
262
- color: var(--awsui-style-color-hover-esndbs, var(--awsui-style-color-default-esndbs, var(--color-text-form-secondary-wt0md2, #687078)));
264
+ .awsui_input-adorned-container_2rhyz_1611r_9:not(#\9):hover {
265
+ color: var(--awsui-style-color-hover-66120l, var(--awsui-style-color-default-66120l, var(--color-text-form-secondary-wt0md2, #687078)));
263
266
  }
264
- .awsui_input-adorned-container_2rhyz_1ofyb_9.awsui_input-adorned-container-readonly_2rhyz_1ofyb_22:not(#\9) {
265
- color: var(--awsui-style-color-readonly-esndbs, var(--awsui-style-color-default-esndbs, var(--color-text-form-secondary-wt0md2, #687078)));
267
+ .awsui_input-adorned-container_2rhyz_1611r_9.awsui_input-adorned-container-readonly_2rhyz_1611r_22:not(#\9) {
268
+ color: var(--awsui-style-color-readonly-66120l, var(--awsui-style-color-default-66120l, var(--color-text-form-secondary-wt0md2, #687078)));
266
269
  }
267
- .awsui_input-adorned-container_2rhyz_1ofyb_9:not(#\9):focus-within {
268
- color: var(--awsui-style-color-focus-esndbs, var(--awsui-style-color-default-esndbs, var(--color-text-form-secondary-wt0md2, #687078)));
270
+ .awsui_input-adorned-container_2rhyz_1611r_9:not(#\9):focus-within {
271
+ color: var(--awsui-style-color-focus-66120l, var(--awsui-style-color-default-66120l, var(--color-text-form-secondary-wt0md2, #687078)));
269
272
  }
270
- .awsui_input-adorned-container_2rhyz_1ofyb_9.awsui_input-adorned-container-disabled_2rhyz_1ofyb_268:not(#\9) {
271
- background-color: var(--awsui-style-background-disabled-esndbs, var(--color-background-input-disabled-pyvhb1, #eaeded));
272
- border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-style-border-color-disabled-esndbs, var(--color-border-input-disabled-5m31k6, #eaeded));
273
- border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-style-border-color-disabled-esndbs, var(--color-border-input-disabled-5m31k6, #eaeded));
274
- color: var(--awsui-style-color-disabled-esndbs, var(--color-text-input-disabled-s4k7tb, #879596));
273
+ .awsui_input-adorned-container_2rhyz_1611r_9.awsui_input-adorned-container-disabled_2rhyz_1611r_271:not(#\9) {
274
+ background-color: var(--awsui-style-background-disabled-66120l, var(--color-background-input-disabled-pyvhb1, #eaeded));
275
+ border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-style-border-color-disabled-66120l, var(--color-border-input-disabled-5m31k6, #eaeded));
276
+ border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-style-border-color-disabled-66120l, var(--color-border-input-disabled-5m31k6, #eaeded));
277
+ color: var(--awsui-style-color-disabled-66120l, var(--color-text-input-disabled-s4k7tb, #879596));
275
278
  cursor: default;
276
- box-shadow: var(--awsui-style-box-shadow-disabled-esndbs);
279
+ box-shadow: var(--awsui-style-box-shadow-disabled-66120l);
277
280
  }
278
- .awsui_input-adorned-container_2rhyz_1ofyb_9.awsui_input-adorned-container-invalid_2rhyz_1ofyb_276:not(#\9) {
279
- color: var(--awsui-style-color-default-esndbs, var(--color-text-status-error-ri38gt, #d13212));
280
- border-color: var(--awsui-style-border-color-default-esndbs, var(--color-text-status-error-ri38gt, #d13212));
281
+ .awsui_input-adorned-container_2rhyz_1611r_9.awsui_input-adorned-container-invalid_2rhyz_1611r_279:not(#\9) {
282
+ color: var(--awsui-style-color-default-66120l, var(--color-text-status-error-ri38gt, #d13212));
283
+ border-color: var(--awsui-style-border-color-default-66120l, var(--color-text-status-error-ri38gt, #d13212));
281
284
  padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
282
285
  border-inline-start-width: var(--border-invalid-width-b183os, 4px);
283
286
  padding-inline-start: 0;
284
287
  }
285
- .awsui_input-adorned-container_2rhyz_1ofyb_9.awsui_input-adorned-container-invalid_2rhyz_1ofyb_276:not(#\9):focus {
286
- box-shadow: var(--awsui-style-box-shadow-focus-esndbs, 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb));
288
+ .awsui_input-adorned-container_2rhyz_1611r_9.awsui_input-adorned-container-invalid_2rhyz_1611r_279:not(#\9):focus {
289
+ box-shadow: var(--awsui-style-box-shadow-focus-66120l, 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb));
287
290
  }
288
- .awsui_input-adorned-container_2rhyz_1ofyb_9.awsui_input-adorned-container-invalid_2rhyz_1ofyb_276:not(#\9):focus-within {
289
- box-shadow: var(--awsui-style-box-shadow-focus-esndbs, 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb));
291
+ .awsui_input-adorned-container_2rhyz_1611r_9.awsui_input-adorned-container-invalid_2rhyz_1611r_279:not(#\9):focus-within {
292
+ box-shadow: var(--awsui-style-box-shadow-focus-66120l, 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb));
290
293
  }
291
- .awsui_input-adorned-container_2rhyz_1ofyb_9.awsui_input-adorned-container-warning_2rhyz_1ofyb_289:not(#\9) {
292
- color: var(--awsui-style-color-default-esndbs, var(--color-text-status-warning-fabq6h, #906806));
293
- border-color: var(--awsui-style-border-color-default-esndbs, var(--color-text-status-warning-fabq6h, #906806));
294
+ .awsui_input-adorned-container_2rhyz_1611r_9.awsui_input-adorned-container-warning_2rhyz_1611r_292:not(#\9) {
295
+ color: var(--awsui-style-color-default-66120l, var(--color-text-status-warning-fabq6h, #906806));
296
+ border-color: var(--awsui-style-border-color-default-66120l, var(--color-text-status-warning-fabq6h, #906806));
294
297
  padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
295
298
  border-inline-start-width: var(--border-invalid-width-b183os, 4px);
296
299
  padding-inline-start: 0;
297
300
  }
298
- .awsui_input-adorned-container_2rhyz_1ofyb_9.awsui_input-adorned-container-warning_2rhyz_1ofyb_289:not(#\9):focus {
299
- box-shadow: var(--awsui-style-box-shadow-focus-esndbs, 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb));
301
+ .awsui_input-adorned-container_2rhyz_1611r_9.awsui_input-adorned-container-warning_2rhyz_1611r_292:not(#\9):focus {
302
+ box-shadow: var(--awsui-style-box-shadow-focus-66120l, 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb));
300
303
  }
301
- .awsui_input-adorned-container_2rhyz_1ofyb_9.awsui_input-adorned-container-warning_2rhyz_1ofyb_289:not(#\9):focus-within {
302
- box-shadow: var(--awsui-style-box-shadow-focus-esndbs, 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb));
304
+ .awsui_input-adorned-container_2rhyz_1611r_9.awsui_input-adorned-container-warning_2rhyz_1611r_292:not(#\9):focus-within {
305
+ box-shadow: var(--awsui-style-box-shadow-focus-66120l, 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb));
303
306
  }
304
307
 
305
- .awsui_input-prefix_2rhyz_1ofyb_303:not(#\9),
306
- .awsui_input-suffix_2rhyz_1ofyb_304:not(#\9) {
308
+ .awsui_input-prefix_2rhyz_1611r_306:not(#\9),
309
+ .awsui_input-suffix_2rhyz_1611r_307:not(#\9) {
307
310
  display: flex;
308
311
  align-items: center;
309
312
  flex-shrink: 1;
@@ -316,7 +319,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
316
319
  line-height: var(--line-height-body-m-5xw6xo, 22px);
317
320
  }
318
321
 
319
- .awsui_input-adornment-content_2rhyz_1ofyb_317:not(#\9) {
322
+ .awsui_input-adornment-content_2rhyz_1611r_320:not(#\9) {
320
323
  display: block;
321
324
  flex: 1;
322
325
  min-inline-size: 0;
@@ -325,7 +328,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
325
328
  white-space: nowrap;
326
329
  }
327
330
 
328
- .awsui_input-adornment-divider_2rhyz_1ofyb_326:not(#\9) {
331
+ .awsui_input-adornment-divider_2rhyz_1611r_329:not(#\9) {
329
332
  display: block;
330
333
  flex-shrink: 0;
331
334
  inline-size: var(--border-width-field-2365x3, 1px);
@@ -333,7 +336,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
333
336
  align-self: stretch;
334
337
  }
335
338
 
336
- .awsui_input-adorned_2rhyz_1ofyb_9:not(#\9) {
339
+ .awsui_input-adorned_2rhyz_1611r_9:not(#\9) {
337
340
  flex: 1;
338
341
  min-inline-size: 0;
339
342
  border-block: none;
@@ -346,51 +349,51 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
346
349
  box-shadow: none;
347
350
  min-block-size: unset;
348
351
  }
349
- .awsui_input-adorned_2rhyz_1ofyb_9.awsui_input_2rhyz_1ofyb_9:not(#\9):focus {
352
+ .awsui_input-adorned_2rhyz_1611r_9.awsui_input_2rhyz_1611r_9:not(#\9):focus {
350
353
  border-block: 0;
351
354
  border-inline: 0;
352
355
  box-shadow: none;
353
356
  outline: none;
354
357
  }
355
- .awsui_input-adorned_2rhyz_1ofyb_9:not(#\9):hover {
358
+ .awsui_input-adorned_2rhyz_1611r_9:not(#\9):hover {
356
359
  border-color: transparent;
357
360
  background-color: transparent;
358
361
  }
359
- .awsui_input-adorned_2rhyz_1ofyb_9:not(#\9):disabled {
362
+ .awsui_input-adorned_2rhyz_1611r_9:not(#\9):disabled {
360
363
  background-color: transparent;
361
364
  border-color: transparent;
362
365
  border-block: 0;
363
366
  border-inline: 0;
364
367
  }
365
- .awsui_input-adorned_2rhyz_1ofyb_9.awsui_input-readonly_2rhyz_1ofyb_22:not(#\9) {
368
+ .awsui_input-adorned_2rhyz_1611r_9.awsui_input-readonly_2rhyz_1611r_22:not(#\9) {
366
369
  background-color: transparent;
367
370
  border-color: transparent;
368
371
  border-block: 0;
369
372
  border-inline: 0;
370
373
  }
371
- .awsui_input-adorned_2rhyz_1ofyb_9.awsui_input-invalid_2rhyz_1ofyb_142:not(#\9), .awsui_input-adorned_2rhyz_1ofyb_9.awsui_input-warning_2rhyz_1ofyb_154:not(#\9) {
374
+ .awsui_input-adorned_2rhyz_1611r_9.awsui_input-invalid_2rhyz_1611r_142:not(#\9), .awsui_input-adorned_2rhyz_1611r_9.awsui_input-warning_2rhyz_1611r_154:not(#\9) {
372
375
  padding-inline-start: var(--space-field-horizontal-anki5k, 8px);
373
376
  border-block: 0;
374
377
  border-inline: 0;
375
378
  border-inline-start-width: 0;
376
379
  box-shadow: none;
377
380
  }
378
- .awsui_input-adorned_2rhyz_1ofyb_9.awsui_input-invalid_2rhyz_1ofyb_142:not(#\9):focus, .awsui_input-adorned_2rhyz_1ofyb_9.awsui_input-warning_2rhyz_1ofyb_154:not(#\9):focus {
381
+ .awsui_input-adorned_2rhyz_1611r_9.awsui_input-invalid_2rhyz_1611r_142:not(#\9):focus, .awsui_input-adorned_2rhyz_1611r_9.awsui_input-warning_2rhyz_1611r_154:not(#\9):focus {
379
382
  border-block: 0;
380
383
  border-inline: 0;
381
384
  box-shadow: none;
382
385
  outline: none;
383
386
  }
384
387
 
385
- .awsui_input-adorned-container-invalid_2rhyz_1ofyb_276 > .awsui_input-prefix_2rhyz_1ofyb_303:not(#\9),
386
- .awsui_input-adorned-container-invalid_2rhyz_1ofyb_276 > .awsui_input-adorned_2rhyz_1ofyb_9:not(#\9):first-child,
387
- .awsui_input-adorned-container-warning_2rhyz_1ofyb_289 > .awsui_input-prefix_2rhyz_1ofyb_303:not(#\9),
388
- .awsui_input-adorned-container-warning_2rhyz_1ofyb_289 > .awsui_input-adorned_2rhyz_1ofyb_9:not(#\9):first-child {
388
+ .awsui_input-adorned-container-invalid_2rhyz_1611r_279 > .awsui_input-prefix_2rhyz_1611r_306:not(#\9),
389
+ .awsui_input-adorned-container-invalid_2rhyz_1611r_279 > .awsui_input-adorned_2rhyz_1611r_9:not(#\9):first-child,
390
+ .awsui_input-adorned-container-warning_2rhyz_1611r_292 > .awsui_input-prefix_2rhyz_1611r_306:not(#\9),
391
+ .awsui_input-adorned-container-warning_2rhyz_1611r_292 > .awsui_input-adorned_2rhyz_1611r_9:not(#\9):first-child {
389
392
  padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
390
393
  }
391
- .awsui_input-adorned-container-invalid_2rhyz_1ofyb_276 > .awsui_input-prefix_2rhyz_1ofyb_303:not(#\9),
392
- .awsui_input-adorned-container-invalid_2rhyz_1ofyb_276 > .awsui_input-suffix_2rhyz_1ofyb_304:not(#\9),
393
- .awsui_input-adorned-container-warning_2rhyz_1ofyb_289 > .awsui_input-prefix_2rhyz_1ofyb_303:not(#\9),
394
- .awsui_input-adorned-container-warning_2rhyz_1ofyb_289 > .awsui_input-suffix_2rhyz_1ofyb_304:not(#\9) {
394
+ .awsui_input-adorned-container-invalid_2rhyz_1611r_279 > .awsui_input-prefix_2rhyz_1611r_306:not(#\9),
395
+ .awsui_input-adorned-container-invalid_2rhyz_1611r_279 > .awsui_input-suffix_2rhyz_1611r_307:not(#\9),
396
+ .awsui_input-adorned-container-warning_2rhyz_1611r_292 > .awsui_input-prefix_2rhyz_1611r_306:not(#\9),
397
+ .awsui_input-adorned-container-warning_2rhyz_1611r_292 > .awsui_input-suffix_2rhyz_1611r_307:not(#\9) {
395
398
  max-inline-size: calc(50% - 6rem + (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)) / 2);
396
399
  }
package/lib/internal/template/input/styles.selectors.js CHANGED
@@ -2,33 +2,34 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "input-adorned-container": "awsui_input-adorned-container_2rhyz_1ofyb_9",
6
- "input": "awsui_input_2rhyz_1ofyb_9",
7
- "input-adorned-container-readonly": "awsui_input-adorned-container-readonly_2rhyz_1ofyb_22",
8
- "input-readonly": "awsui_input-readonly_2rhyz_1ofyb_22",
9
- "root": "awsui_root_2rhyz_1ofyb_39",
10
- "input-invalid": "awsui_input-invalid_2rhyz_1ofyb_142",
11
- "input-has-icon-start": "awsui_input-has-icon-start_2rhyz_1ofyb_151",
12
- "input-warning": "awsui_input-warning_2rhyz_1ofyb_154",
13
- "input-type-search": "awsui_input-type-search_2rhyz_1ofyb_166",
14
- "input-has-icon-end": "awsui_input-has-icon-end_2rhyz_1ofyb_179",
15
- "input-has-no-border-radius": "awsui_input-has-no-border-radius_2rhyz_1ofyb_182",
16
- "input-container": "awsui_input-container_2rhyz_1ofyb_189",
17
- "input-icon-start": "awsui_input-icon-start_2rhyz_1ofyb_194",
18
- "input-icon-end": "awsui_input-icon-end_2rhyz_1ofyb_201",
19
- "input-button-right": "awsui_input-button-right_2rhyz_1ofyb_207",
20
- "inline-label-trigger-wrapper": "awsui_inline-label-trigger-wrapper_2rhyz_1ofyb_211",
21
- "inline-label-trigger-wrapper-full-width": "awsui_inline-label-trigger-wrapper-full-width_2rhyz_1ofyb_214",
22
- "inline-label-wrapper": "awsui_inline-label-wrapper_2rhyz_1ofyb_218",
23
- "inline-label-wrapper-full-width": "awsui_inline-label-wrapper-full-width_2rhyz_1ofyb_221",
24
- "inline-label": "awsui_inline-label_2rhyz_1ofyb_211",
25
- "input-adorned-container-disabled": "awsui_input-adorned-container-disabled_2rhyz_1ofyb_268",
26
- "input-adorned-container-invalid": "awsui_input-adorned-container-invalid_2rhyz_1ofyb_276",
27
- "input-adorned-container-warning": "awsui_input-adorned-container-warning_2rhyz_1ofyb_289",
28
- "input-prefix": "awsui_input-prefix_2rhyz_1ofyb_303",
29
- "input-suffix": "awsui_input-suffix_2rhyz_1ofyb_304",
30
- "input-adornment-content": "awsui_input-adornment-content_2rhyz_1ofyb_317",
31
- "input-adornment-divider": "awsui_input-adornment-divider_2rhyz_1ofyb_326",
32
- "input-adorned": "awsui_input-adorned_2rhyz_1ofyb_9"
5
+ "input-adorned-container": "awsui_input-adorned-container_2rhyz_1611r_9",
6
+ "input": "awsui_input_2rhyz_1611r_9",
7
+ "input-adorned-container-readonly": "awsui_input-adorned-container-readonly_2rhyz_1611r_22",
8
+ "input-readonly": "awsui_input-readonly_2rhyz_1611r_22",
9
+ "root": "awsui_root_2rhyz_1611r_39",
10
+ "input-invalid": "awsui_input-invalid_2rhyz_1611r_142",
11
+ "input-has-icon-start": "awsui_input-has-icon-start_2rhyz_1611r_151",
12
+ "input-warning": "awsui_input-warning_2rhyz_1611r_154",
13
+ "input-type-search": "awsui_input-type-search_2rhyz_1611r_166",
14
+ "input-has-icon-end": "awsui_input-has-icon-end_2rhyz_1611r_179",
15
+ "input-has-no-border-radius": "awsui_input-has-no-border-radius_2rhyz_1611r_182",
16
+ "input-container": "awsui_input-container_2rhyz_1611r_189",
17
+ "input-icon-start": "awsui_input-icon-start_2rhyz_1611r_194",
18
+ "input-icon-end": "awsui_input-icon-end_2rhyz_1611r_201",
19
+ "input-button-right": "awsui_input-button-right_2rhyz_1611r_207",
20
+ "inline-label-trigger-wrapper": "awsui_inline-label-trigger-wrapper_2rhyz_1611r_211",
21
+ "inline-label-trigger-wrapper-full-width": "awsui_inline-label-trigger-wrapper-full-width_2rhyz_1611r_214",
22
+ "inline-label-wrapper": "awsui_inline-label-wrapper_2rhyz_1611r_218",
23
+ "inline-label-wrapper-full-width": "awsui_inline-label-wrapper-full-width_2rhyz_1611r_221",
24
+ "inline-label": "awsui_inline-label_2rhyz_1611r_211",
25
+ "inline-label-disabled": "awsui_inline-label-disabled_2rhyz_1611r_246",
26
+ "input-adorned-container-disabled": "awsui_input-adorned-container-disabled_2rhyz_1611r_271",
27
+ "input-adorned-container-invalid": "awsui_input-adorned-container-invalid_2rhyz_1611r_279",
28
+ "input-adorned-container-warning": "awsui_input-adorned-container-warning_2rhyz_1611r_292",
29
+ "input-prefix": "awsui_input-prefix_2rhyz_1611r_306",
30
+ "input-suffix": "awsui_input-suffix_2rhyz_1611r_307",
31
+ "input-adornment-content": "awsui_input-adornment-content_2rhyz_1611r_320",
32
+ "input-adornment-divider": "awsui_input-adornment-divider_2rhyz_1611r_329",
33
+ "input-adorned": "awsui_input-adorned_2rhyz_1611r_9"
33
34
  };
34
35
 
package/lib/internal/template/internal/base-component/styles.scoped.css CHANGED
@@ -56,5 +56,5 @@
56
56
  }
57
57
  }
58
58
  :root {
59
- --awsui-version-info-85f92b8b: true;
59
+ --awsui-version-info-74e4f3d0: true;
60
60
  }
package/lib/internal/template/internal/components/drag-handle-wrapper/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAa,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAYjE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAqB,EACrB,kBAA0B,EAC1B,qBAA6B,EAC7B,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,GACnB,EAAE,sBAAsB,eAwPxB"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/index.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAa,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAYjE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAqB,EACrB,kBAA0B,EAC1B,qBAA6B,EAC7B,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,GACnB,EAAE,sBAAsB,eAwPxB"}
package/lib/internal/template/internal/components/drag-handle-wrapper/index.js CHANGED
@@ -4,6 +4,7 @@ import React, { useEffect, useRef, useState } from 'react';
4
4
  import clsx from 'clsx';
5
5
  import { nodeContains } from '@cloudscape-design/component-toolkit/dom';
6
6
  import { getLogicalBoundingClientRect, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
7
+ import { isKeyboardInteraction } from '../../utils/focus-visible';
7
8
  import Tooltip from '../tooltip';
8
9
  import DirectionButton from './direction-button';
9
10
  import PortalOverlay from './portal-overlay';
@@ -35,7 +36,7 @@ export default function DragHandleWrapper({ directions, tooltipText, children, o
35
36
  // handled in the "pointerup" listener instead. In cases where focus is moved
36
37
  // to the button (by manually calling `.focus()`), the buttons should only appear
37
38
  // if the action that triggered the focus move was the result of a keypress.
38
- if (document.body.dataset.awsuiFocusVisible && !nodeContains(wrapperRef.current, event.relatedTarget)) {
39
+ if (isKeyboardInteraction(wrapperRef.current) && !nodeContains(wrapperRef.current, event.relatedTarget)) {
39
40
  setShowTooltip(false);
40
41
  if (triggerMode === 'focus') {
41
42
  setUncontrolledShowButtons(true);