@cloudscape-design/components-themeable 3.0.1384 → 3.0.1386

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 (80) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/button/styles.scss +1 -4
  3. package/lib/internal/scss/icon/mixins.scss +0 -2
  4. package/lib/internal/scss/icon/styles.scss +8 -1
  5. package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
  6. package/lib/internal/scss/key-value-pairs/styles.scss +9 -2
  7. package/lib/internal/scss/space-between/styles.scss +8 -0
  8. package/lib/internal/scss/spinner/mixins.scss +0 -1
  9. package/lib/internal/scss/tiles/styles.scss +0 -1
  10. package/lib/internal/scss/toggle/motion.scss +76 -0
  11. package/lib/internal/scss/toggle/styles.scss +4 -0
  12. package/lib/internal/template/alert/styles.css.js +27 -27
  13. package/lib/internal/template/alert/styles.scoped.css +43 -43
  14. package/lib/internal/template/alert/styles.selectors.js +27 -27
  15. package/lib/internal/template/app-layout/utils/feature-flags.d.ts +1 -0
  16. package/lib/internal/template/app-layout/utils/feature-flags.d.ts.map +1 -1
  17. package/lib/internal/template/app-layout/utils/feature-flags.js +1 -0
  18. package/lib/internal/template/app-layout/utils/feature-flags.js.map +1 -1
  19. package/lib/internal/template/app-layout/visual-refresh-toolbar/interfaces.d.ts +1 -1
  20. package/lib/internal/template/app-layout/visual-refresh-toolbar/interfaces.d.ts.map +1 -1
  21. package/lib/internal/template/app-layout/visual-refresh-toolbar/interfaces.js.map +1 -1
  22. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/toolbar-container.d.ts +2 -2
  23. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/toolbar-container.d.ts.map +1 -1
  24. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/toolbar-container.js +2 -2
  25. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/toolbar-container.js.map +1 -1
  26. package/lib/internal/template/app-layout/visual-refresh-toolbar/state/use-app-layout.d.ts.map +1 -1
  27. package/lib/internal/template/app-layout/visual-refresh-toolbar/state/use-app-layout.js +2 -1
  28. package/lib/internal/template/app-layout/visual-refresh-toolbar/state/use-app-layout.js.map +1 -1
  29. package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.d.ts +2 -2
  30. package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.d.ts.map +1 -1
  31. package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.js +2 -2
  32. package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.js.map +1 -1
  33. package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.js +2 -2
  34. package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.js.map +1 -1
  35. package/lib/internal/template/badge/styles.css.js +10 -10
  36. package/lib/internal/template/badge/styles.scoped.css +11 -11
  37. package/lib/internal/template/badge/styles.selectors.js +10 -10
  38. package/lib/internal/template/button/styles.css.js +23 -23
  39. package/lib/internal/template/button/styles.scoped.css +72 -115
  40. package/lib/internal/template/button/styles.selectors.js +23 -23
  41. package/lib/internal/template/checkbox/styles.css.js +3 -3
  42. package/lib/internal/template/checkbox/styles.scoped.css +8 -8
  43. package/lib/internal/template/checkbox/styles.selectors.js +3 -3
  44. package/lib/internal/template/dropdown/styles.css.js +20 -20
  45. package/lib/internal/template/dropdown/styles.scoped.css +38 -38
  46. package/lib/internal/template/dropdown/styles.selectors.js +20 -20
  47. package/lib/internal/template/icon/styles.css.js +43 -43
  48. package/lib/internal/template/icon/styles.scoped.css +110 -118
  49. package/lib/internal/template/icon/styles.selectors.js +43 -43
  50. package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
  51. package/lib/internal/template/internal/environment.js +2 -2
  52. package/lib/internal/template/internal/environment.json +2 -2
  53. package/lib/internal/template/key-value-pairs/styles.css.js +8 -8
  54. package/lib/internal/template/key-value-pairs/styles.scoped.css +16 -11
  55. package/lib/internal/template/key-value-pairs/styles.selectors.js +8 -8
  56. package/lib/internal/template/link/styles.css.js +21 -21
  57. package/lib/internal/template/link/styles.scoped.css +73 -73
  58. package/lib/internal/template/link/styles.selectors.js +21 -21
  59. package/lib/internal/template/radio-button/styles.css.js +1 -1
  60. package/lib/internal/template/radio-button/styles.scoped.css +2 -2
  61. package/lib/internal/template/radio-button/styles.selectors.js +1 -1
  62. package/lib/internal/template/space-between/internal.d.ts.map +1 -1
  63. package/lib/internal/template/space-between/internal.js +2 -1
  64. package/lib/internal/template/space-between/internal.js.map +1 -1
  65. package/lib/internal/template/space-between/styles.css.js +24 -23
  66. package/lib/internal/template/space-between/styles.scoped.css +29 -24
  67. package/lib/internal/template/space-between/styles.selectors.js +24 -23
  68. package/lib/internal/template/spinner/styles.css.js +14 -14
  69. package/lib/internal/template/spinner/styles.scoped.css +20 -24
  70. package/lib/internal/template/spinner/styles.selectors.js +14 -14
  71. package/lib/internal/template/tiles/styles.css.js +30 -30
  72. package/lib/internal/template/tiles/styles.scoped.css +72 -76
  73. package/lib/internal/template/tiles/styles.selectors.js +30 -30
  74. package/lib/internal/template/toggle/internal.d.ts.map +1 -1
  75. package/lib/internal/template/toggle/internal.js +8 -2
  76. package/lib/internal/template/toggle/internal.js.map +1 -1
  77. package/lib/internal/template/toggle/styles.css.js +10 -10
  78. package/lib/internal/template/toggle/styles.scoped.css +20 -21
  79. package/lib/internal/template/toggle/styles.selectors.js +10 -10
  80. package/package.json +1 -1
package/lib/internal/template/tiles/styles.scoped.css CHANGED
@@ -14,7 +14,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
14
14
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
15
15
  SPDX-License-Identifier: Apache-2.0
16
16
  */
17
- div.awsui_column-layout_vj6p7_g358p_17:not(#\9) {
17
+ div.awsui_column-layout_vj6p7_1kvr6_17:not(#\9) {
18
18
  border-collapse: separate;
19
19
  border-spacing: 0;
20
20
  box-sizing: border-box;
@@ -46,145 +46,145 @@ div.awsui_column-layout_vj6p7_g358p_17:not(#\9) {
46
46
  -moz-osx-font-smoothing: auto;
47
47
  word-wrap: break-word;
48
48
  }
49
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49:not(#\9) {
49
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49:not(#\9) {
50
50
  margin-block: calc(var(--space-grid-gutter-2qs4vj, 20px) / -2);
51
51
  margin-inline: calc(var(--space-grid-gutter-2qs4vj, 20px) / -2);
52
52
  /* stylelint-disable-next-line selector-max-universal */
53
53
  /* stylelint-disable-next-line selector-max-universal */
54
54
  }
55
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-no-gutters_vj6p7_g358p_55:not(#\9) {
55
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-no-gutters_vj6p7_1kvr6_55:not(#\9) {
56
56
  margin-block: 0;
57
57
  margin-inline: 0;
58
58
  }
59
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-variant-text-grid_vj6p7_g358p_59:not(#\9) {
59
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-variant-text-grid_vj6p7_1kvr6_59:not(#\9) {
60
60
  margin-block: calc(-1 * var(--space-grid-gutter-2qs4vj, 20px) / 2);
61
61
  margin-inline: calc(-1 * var(--space-grid-gutter-2qs4vj, 20px));
62
62
  /* stylelint-disable-next-line selector-max-universal */
63
63
  }
64
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-variant-text-grid_vj6p7_g358p_59 > *:not(#\9) {
64
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-variant-text-grid_vj6p7_1kvr6_59 > *:not(#\9) {
65
65
  border-inline-start: var(--border-divider-section-width-dlkb8v, 1px) solid var(--color-border-divider-default-diwd4w, #eaeded);
66
66
  }
67
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-variant-text-grid_vj6p7_g358p_59.awsui_grid-breakpoint-default_vj6p7_g358p_67 > *:not(#\9):nth-child(1n+1) {
67
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-variant-text-grid_vj6p7_1kvr6_59.awsui_grid-breakpoint-default_vj6p7_1kvr6_67 > *:not(#\9):nth-child(1n+1) {
68
68
  border-inline-start-width: 0;
69
69
  }
70
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-variant-text-grid_vj6p7_g358p_59.awsui_grid-columns-1_vj6p7_g358p_70.awsui_grid-breakpoint-xxs_vj6p7_g358p_70 > *:not(#\9):nth-child(1n+1) {
70
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-variant-text-grid_vj6p7_1kvr6_59.awsui_grid-columns-1_vj6p7_1kvr6_70.awsui_grid-breakpoint-xxs_vj6p7_1kvr6_70 > *:not(#\9):nth-child(1n+1) {
71
71
  border-inline-start-width: 0;
72
72
  }
73
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-variant-text-grid_vj6p7_g358p_59.awsui_grid-columns-1_vj6p7_g358p_70.awsui_grid-breakpoint-xs_vj6p7_g358p_73 > *:not(#\9):nth-child(1n+1) {
73
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-variant-text-grid_vj6p7_1kvr6_59.awsui_grid-columns-1_vj6p7_1kvr6_70.awsui_grid-breakpoint-xs_vj6p7_1kvr6_73 > *:not(#\9):nth-child(1n+1) {
74
74
  border-inline-start-width: 0;
75
75
  }
76
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-variant-text-grid_vj6p7_g358p_59.awsui_grid-columns-2_vj6p7_g358p_76.awsui_grid-breakpoint-xxs_vj6p7_g358p_70 > *:not(#\9):nth-child(2n+1) {
76
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-variant-text-grid_vj6p7_1kvr6_59.awsui_grid-columns-2_vj6p7_1kvr6_76.awsui_grid-breakpoint-xxs_vj6p7_1kvr6_70 > *:not(#\9):nth-child(2n+1) {
77
77
  border-inline-start-width: 0;
78
78
  }
79
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-variant-text-grid_vj6p7_g358p_59.awsui_grid-columns-2_vj6p7_g358p_76.awsui_grid-breakpoint-xs_vj6p7_g358p_73 > *:not(#\9):nth-child(2n+1) {
79
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-variant-text-grid_vj6p7_1kvr6_59.awsui_grid-columns-2_vj6p7_1kvr6_76.awsui_grid-breakpoint-xs_vj6p7_1kvr6_73 > *:not(#\9):nth-child(2n+1) {
80
80
  border-inline-start-width: 0;
81
81
  }
82
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-variant-text-grid_vj6p7_g358p_59.awsui_grid-columns-3_vj6p7_g358p_82.awsui_grid-breakpoint-xxs_vj6p7_g358p_70 > *:not(#\9):nth-child(2n+1) {
82
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-variant-text-grid_vj6p7_1kvr6_59.awsui_grid-columns-3_vj6p7_1kvr6_82.awsui_grid-breakpoint-xxs_vj6p7_1kvr6_70 > *:not(#\9):nth-child(2n+1) {
83
83
  border-inline-start-width: 0;
84
84
  }
85
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-variant-text-grid_vj6p7_g358p_59.awsui_grid-columns-3_vj6p7_g358p_82.awsui_grid-breakpoint-xs_vj6p7_g358p_73 > *:not(#\9):nth-child(3n+1) {
85
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-variant-text-grid_vj6p7_1kvr6_59.awsui_grid-columns-3_vj6p7_1kvr6_82.awsui_grid-breakpoint-xs_vj6p7_1kvr6_73 > *:not(#\9):nth-child(3n+1) {
86
86
  border-inline-start-width: 0;
87
87
  }
88
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-variant-text-grid_vj6p7_g358p_59.awsui_grid-columns-4_vj6p7_g358p_88.awsui_grid-breakpoint-xxs_vj6p7_g358p_70 > *:not(#\9):nth-child(2n+1) {
88
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-variant-text-grid_vj6p7_1kvr6_59.awsui_grid-columns-4_vj6p7_1kvr6_88.awsui_grid-breakpoint-xxs_vj6p7_1kvr6_70 > *:not(#\9):nth-child(2n+1) {
89
89
  border-inline-start-width: 0;
90
90
  }
91
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-variant-text-grid_vj6p7_g358p_59.awsui_grid-columns-4_vj6p7_g358p_88.awsui_grid-breakpoint-xs_vj6p7_g358p_73 > *:not(#\9):nth-child(4n+1) {
91
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-variant-text-grid_vj6p7_1kvr6_59.awsui_grid-columns-4_vj6p7_1kvr6_88.awsui_grid-breakpoint-xs_vj6p7_1kvr6_73 > *:not(#\9):nth-child(4n+1) {
92
92
  border-inline-start-width: 0;
93
93
  }
94
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49:not(#\9):not(.awsui_grid-no-gutters_vj6p7_g358p_55) > * {
94
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49:not(#\9):not(.awsui_grid-no-gutters_vj6p7_1kvr6_55) > * {
95
95
  padding-block: calc(var(--space-grid-gutter-2qs4vj, 20px) / 2);
96
96
  padding-inline: calc(var(--space-grid-gutter-2qs4vj, 20px) / 2);
97
97
  }
98
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49:not(#\9):not(.awsui_grid-no-gutters_vj6p7_g358p_55).awsui_grid-variant-text-grid_vj6p7_g358p_59 > * {
98
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49:not(#\9):not(.awsui_grid-no-gutters_vj6p7_1kvr6_55).awsui_grid-variant-text-grid_vj6p7_1kvr6_59 > * {
99
99
  padding-block: 0;
100
100
  padding-inline: var(--space-grid-gutter-2qs4vj, 20px);
101
101
  margin-block: calc(var(--space-grid-gutter-2qs4vj, 20px) / 2);
102
102
  margin-inline: 0;
103
103
  }
104
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-vertical-borders_vj6p7_g358p_104:not(#\9) {
104
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-vertical-borders_vj6p7_1kvr6_104:not(#\9) {
105
105
  /* stylelint-disable-next-line selector-max-universal */
106
106
  }
107
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-vertical-borders_vj6p7_g358p_104 > *:not(#\9) {
107
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-vertical-borders_vj6p7_1kvr6_104 > *:not(#\9) {
108
108
  border-inline-end: var(--border-divider-section-width-dlkb8v, 1px) solid var(--color-border-divider-default-diwd4w, #eaeded);
109
109
  }
110
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-vertical-borders_vj6p7_g358p_104.awsui_grid-breakpoint-default_vj6p7_g358p_67 > *:not(#\9):nth-child(1n) {
110
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-vertical-borders_vj6p7_1kvr6_104.awsui_grid-breakpoint-default_vj6p7_1kvr6_67 > *:not(#\9):nth-child(1n) {
111
111
  border-inline-end-width: 0;
112
112
  }
113
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-vertical-borders_vj6p7_g358p_104.awsui_grid-columns-1_vj6p7_g358p_70.awsui_grid-breakpoint-xxs_vj6p7_g358p_70 > *:not(#\9):nth-child(1n) {
113
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-vertical-borders_vj6p7_1kvr6_104.awsui_grid-columns-1_vj6p7_1kvr6_70.awsui_grid-breakpoint-xxs_vj6p7_1kvr6_70 > *:not(#\9):nth-child(1n) {
114
114
  border-inline-end-width: 0;
115
115
  }
116
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-vertical-borders_vj6p7_g358p_104.awsui_grid-columns-1_vj6p7_g358p_70.awsui_grid-breakpoint-xs_vj6p7_g358p_73 > *:not(#\9):nth-child(1n) {
116
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-vertical-borders_vj6p7_1kvr6_104.awsui_grid-columns-1_vj6p7_1kvr6_70.awsui_grid-breakpoint-xs_vj6p7_1kvr6_73 > *:not(#\9):nth-child(1n) {
117
117
  border-inline-end-width: 0;
118
118
  }
119
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-vertical-borders_vj6p7_g358p_104.awsui_grid-columns-2_vj6p7_g358p_76.awsui_grid-breakpoint-xxs_vj6p7_g358p_70 > *:not(#\9):nth-child(2n) {
119
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-vertical-borders_vj6p7_1kvr6_104.awsui_grid-columns-2_vj6p7_1kvr6_76.awsui_grid-breakpoint-xxs_vj6p7_1kvr6_70 > *:not(#\9):nth-child(2n) {
120
120
  border-inline-end-width: 0;
121
121
  }
122
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-vertical-borders_vj6p7_g358p_104.awsui_grid-columns-2_vj6p7_g358p_76.awsui_grid-breakpoint-xs_vj6p7_g358p_73 > *:not(#\9):nth-child(2n) {
122
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-vertical-borders_vj6p7_1kvr6_104.awsui_grid-columns-2_vj6p7_1kvr6_76.awsui_grid-breakpoint-xs_vj6p7_1kvr6_73 > *:not(#\9):nth-child(2n) {
123
123
  border-inline-end-width: 0;
124
124
  }
125
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-vertical-borders_vj6p7_g358p_104.awsui_grid-columns-3_vj6p7_g358p_82.awsui_grid-breakpoint-xxs_vj6p7_g358p_70 > *:not(#\9):nth-child(2n) {
125
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-vertical-borders_vj6p7_1kvr6_104.awsui_grid-columns-3_vj6p7_1kvr6_82.awsui_grid-breakpoint-xxs_vj6p7_1kvr6_70 > *:not(#\9):nth-child(2n) {
126
126
  border-inline-end-width: 0;
127
127
  }
128
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-vertical-borders_vj6p7_g358p_104.awsui_grid-columns-3_vj6p7_g358p_82.awsui_grid-breakpoint-xs_vj6p7_g358p_73 > *:not(#\9):nth-child(3n) {
128
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-vertical-borders_vj6p7_1kvr6_104.awsui_grid-columns-3_vj6p7_1kvr6_82.awsui_grid-breakpoint-xs_vj6p7_1kvr6_73 > *:not(#\9):nth-child(3n) {
129
129
  border-inline-end-width: 0;
130
130
  }
131
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-vertical-borders_vj6p7_g358p_104.awsui_grid-columns-4_vj6p7_g358p_88.awsui_grid-breakpoint-xxs_vj6p7_g358p_70 > *:not(#\9):nth-child(2n) {
131
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-vertical-borders_vj6p7_1kvr6_104.awsui_grid-columns-4_vj6p7_1kvr6_88.awsui_grid-breakpoint-xxs_vj6p7_1kvr6_70 > *:not(#\9):nth-child(2n) {
132
132
  border-inline-end-width: 0;
133
133
  }
134
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-vertical-borders_vj6p7_g358p_104.awsui_grid-columns-4_vj6p7_g358p_88.awsui_grid-breakpoint-xs_vj6p7_g358p_73 > *:not(#\9):nth-child(4n) {
134
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-vertical-borders_vj6p7_1kvr6_104.awsui_grid-columns-4_vj6p7_1kvr6_88.awsui_grid-breakpoint-xs_vj6p7_1kvr6_73 > *:not(#\9):nth-child(4n) {
135
135
  border-inline-end-width: 0;
136
136
  }
137
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-horizontal-borders_vj6p7_g358p_137:not(#\9) {
137
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-horizontal-borders_vj6p7_1kvr6_137:not(#\9) {
138
138
  /* stylelint-disable selector-max-universal */
139
139
  /* stylelint-enable selector-max-universal */
140
140
  }
141
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-horizontal-borders_vj6p7_g358p_137 > *:not(#\9) {
141
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-horizontal-borders_vj6p7_1kvr6_137 > *:not(#\9) {
142
142
  border-block-end: var(--border-divider-section-width-dlkb8v, 1px) solid var(--color-border-divider-default-diwd4w, #eaeded);
143
143
  }
144
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-horizontal-borders_vj6p7_g358p_137 > *:not(#\9):last-child {
144
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-horizontal-borders_vj6p7_1kvr6_137 > *:not(#\9):last-child {
145
145
  border-block-end-width: 0;
146
146
  }
147
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-horizontal-borders_vj6p7_g358p_137.awsui_grid-columns-2_vj6p7_g358p_76.awsui_grid-breakpoint-xxs_vj6p7_g358p_70 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
147
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-horizontal-borders_vj6p7_1kvr6_137.awsui_grid-columns-2_vj6p7_1kvr6_76.awsui_grid-breakpoint-xxs_vj6p7_1kvr6_70 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
148
148
  border-block-end-width: 0;
149
149
  }
150
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-horizontal-borders_vj6p7_g358p_137.awsui_grid-columns-2_vj6p7_g358p_76.awsui_grid-breakpoint-xs_vj6p7_g358p_73 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
150
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-horizontal-borders_vj6p7_1kvr6_137.awsui_grid-columns-2_vj6p7_1kvr6_76.awsui_grid-breakpoint-xs_vj6p7_1kvr6_73 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
151
151
  border-block-end-width: 0;
152
152
  }
153
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-horizontal-borders_vj6p7_g358p_137.awsui_grid-columns-3_vj6p7_g358p_82.awsui_grid-breakpoint-xxs_vj6p7_g358p_70 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
153
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-horizontal-borders_vj6p7_1kvr6_137.awsui_grid-columns-3_vj6p7_1kvr6_82.awsui_grid-breakpoint-xxs_vj6p7_1kvr6_70 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
154
154
  border-block-end-width: 0;
155
155
  }
156
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-horizontal-borders_vj6p7_g358p_137.awsui_grid-columns-3_vj6p7_g358p_82.awsui_grid-breakpoint-xs_vj6p7_g358p_73 > *:not(#\9):nth-last-child(2):nth-child(3n+1) {
156
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-horizontal-borders_vj6p7_1kvr6_137.awsui_grid-columns-3_vj6p7_1kvr6_82.awsui_grid-breakpoint-xs_vj6p7_1kvr6_73 > *:not(#\9):nth-last-child(2):nth-child(3n+1) {
157
157
  border-block-end-width: 0;
158
158
  }
159
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-horizontal-borders_vj6p7_g358p_137.awsui_grid-columns-3_vj6p7_g358p_82.awsui_grid-breakpoint-xs_vj6p7_g358p_73 > *:not(#\9):nth-last-child(2):nth-child(3n+2) {
159
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-horizontal-borders_vj6p7_1kvr6_137.awsui_grid-columns-3_vj6p7_1kvr6_82.awsui_grid-breakpoint-xs_vj6p7_1kvr6_73 > *:not(#\9):nth-last-child(2):nth-child(3n+2) {
160
160
  border-block-end-width: 0;
161
161
  }
162
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-horizontal-borders_vj6p7_g358p_137.awsui_grid-columns-3_vj6p7_g358p_82.awsui_grid-breakpoint-xs_vj6p7_g358p_73 > *:not(#\9):nth-last-child(3):nth-child(3n+1) {
162
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-horizontal-borders_vj6p7_1kvr6_137.awsui_grid-columns-3_vj6p7_1kvr6_82.awsui_grid-breakpoint-xs_vj6p7_1kvr6_73 > *:not(#\9):nth-last-child(3):nth-child(3n+1) {
163
163
  border-block-end-width: 0;
164
164
  }
165
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-horizontal-borders_vj6p7_g358p_137.awsui_grid-columns-4_vj6p7_g358p_88.awsui_grid-breakpoint-xxs_vj6p7_g358p_70 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
165
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-horizontal-borders_vj6p7_1kvr6_137.awsui_grid-columns-4_vj6p7_1kvr6_88.awsui_grid-breakpoint-xxs_vj6p7_1kvr6_70 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
166
166
  border-block-end-width: 0;
167
167
  }
168
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-horizontal-borders_vj6p7_g358p_137.awsui_grid-columns-4_vj6p7_g358p_88.awsui_grid-breakpoint-xs_vj6p7_g358p_73 > *:not(#\9):nth-last-child(2):nth-child(4n+1) {
168
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-horizontal-borders_vj6p7_1kvr6_137.awsui_grid-columns-4_vj6p7_1kvr6_88.awsui_grid-breakpoint-xs_vj6p7_1kvr6_73 > *:not(#\9):nth-last-child(2):nth-child(4n+1) {
169
169
  border-block-end-width: 0;
170
170
  }
171
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-horizontal-borders_vj6p7_g358p_137.awsui_grid-columns-4_vj6p7_g358p_88.awsui_grid-breakpoint-xs_vj6p7_g358p_73 > *:not(#\9):nth-last-child(2):nth-child(4n+2) {
171
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-horizontal-borders_vj6p7_1kvr6_137.awsui_grid-columns-4_vj6p7_1kvr6_88.awsui_grid-breakpoint-xs_vj6p7_1kvr6_73 > *:not(#\9):nth-last-child(2):nth-child(4n+2) {
172
172
  border-block-end-width: 0;
173
173
  }
174
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-horizontal-borders_vj6p7_g358p_137.awsui_grid-columns-4_vj6p7_g358p_88.awsui_grid-breakpoint-xs_vj6p7_g358p_73 > *:not(#\9):nth-last-child(2):nth-child(4n+3) {
174
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-horizontal-borders_vj6p7_1kvr6_137.awsui_grid-columns-4_vj6p7_1kvr6_88.awsui_grid-breakpoint-xs_vj6p7_1kvr6_73 > *:not(#\9):nth-last-child(2):nth-child(4n+3) {
175
175
  border-block-end-width: 0;
176
176
  }
177
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-horizontal-borders_vj6p7_g358p_137.awsui_grid-columns-4_vj6p7_g358p_88.awsui_grid-breakpoint-xs_vj6p7_g358p_73 > *:not(#\9):nth-last-child(3):nth-child(4n+1) {
177
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-horizontal-borders_vj6p7_1kvr6_137.awsui_grid-columns-4_vj6p7_1kvr6_88.awsui_grid-breakpoint-xs_vj6p7_1kvr6_73 > *:not(#\9):nth-last-child(3):nth-child(4n+1) {
178
178
  border-block-end-width: 0;
179
179
  }
180
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-horizontal-borders_vj6p7_g358p_137.awsui_grid-columns-4_vj6p7_g358p_88.awsui_grid-breakpoint-xs_vj6p7_g358p_73 > *:not(#\9):nth-last-child(3):nth-child(4n+2) {
180
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-horizontal-borders_vj6p7_1kvr6_137.awsui_grid-columns-4_vj6p7_1kvr6_88.awsui_grid-breakpoint-xs_vj6p7_1kvr6_73 > *:not(#\9):nth-last-child(3):nth-child(4n+2) {
181
181
  border-block-end-width: 0;
182
182
  }
183
- div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-horizontal-borders_vj6p7_g358p_137.awsui_grid-columns-4_vj6p7_g358p_88.awsui_grid-breakpoint-xs_vj6p7_g358p_73 > *:not(#\9):nth-last-child(4):nth-child(4n+1) {
183
+ div.awsui_column-layout_vj6p7_1kvr6_17 > .awsui_grid_vj6p7_1kvr6_49.awsui_grid-horizontal-borders_vj6p7_1kvr6_137.awsui_grid-columns-4_vj6p7_1kvr6_88.awsui_grid-breakpoint-xs_vj6p7_1kvr6_73 > *:not(#\9):nth-last-child(4):nth-child(4n+1) {
184
184
  border-block-end-width: 0;
185
185
  }
186
186
 
187
- .awsui_root_vj6p7_g358p_187:not(#\9) {
187
+ .awsui_root_vj6p7_1kvr6_187:not(#\9) {
188
188
  border-collapse: separate;
189
189
  border-spacing: 0;
190
190
  box-sizing: border-box;
@@ -219,7 +219,7 @@ div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-h
219
219
  display: block;
220
220
  }
221
221
 
222
- .awsui_tile-container_vj6p7_g358p_222:not(#\9) {
222
+ .awsui_tile-container_vj6p7_1kvr6_222:not(#\9) {
223
223
  box-sizing: border-box;
224
224
  display: flex;
225
225
  flex-direction: column;
@@ -235,126 +235,122 @@ div.awsui_column-layout_vj6p7_g358p_17 > .awsui_grid_vj6p7_g358p_49.awsui_grid-h
235
235
  transition: border-color var(--motion-duration-transition-quick-1p8yzt, 90ms) var(--motion-easing-transition-quick-afgcka, linear), background-color var(--motion-duration-transition-quick-1p8yzt, 90ms) var(--motion-easing-transition-quick-afgcka, linear);
236
236
  }
237
237
  @media (prefers-reduced-motion: reduce) {
238
- .awsui_tile-container_vj6p7_g358p_222:not(#\9) {
238
+ .awsui_tile-container_vj6p7_1kvr6_222:not(#\9) {
239
239
  animation: none;
240
240
  transition: none;
241
241
  }
242
242
  }
243
- .awsui-motion-disabled .awsui_tile-container_vj6p7_g358p_222:not(#\9), .awsui-mode-entering .awsui_tile-container_vj6p7_g358p_222:not(#\9) {
243
+ .awsui-motion-disabled .awsui_tile-container_vj6p7_1kvr6_222:not(#\9), .awsui-mode-entering .awsui_tile-container_vj6p7_1kvr6_222:not(#\9) {
244
244
  animation: none;
245
245
  transition: none;
246
246
  }
247
- .awsui_tile-container_vj6p7_g358p_222.awsui_refresh_vj6p7_g358p_247:not(#\9) {
247
+ .awsui_tile-container_vj6p7_1kvr6_222.awsui_refresh_vj6p7_1kvr6_247:not(#\9) {
248
248
  padding-block: var(--space-xs-m9b7jf, 8px);
249
249
  padding-inline: var(--space-s-kll7oj, 12px);
250
250
  }
251
- .awsui_tile-container_vj6p7_g358p_222.awsui_refresh_vj6p7_g358p_247.awsui_selected_vj6p7_g358p_251:not(#\9):not(.awsui_disabled_vj6p7_g358p_251):not(.awsui_readonly_vj6p7_g358p_251) {
251
+ .awsui_tile-container_vj6p7_1kvr6_222.awsui_refresh_vj6p7_1kvr6_247.awsui_selected_vj6p7_1kvr6_251:not(#\9):not(.awsui_disabled_vj6p7_1kvr6_251):not(.awsui_readonly_vj6p7_1kvr6_251) {
252
252
  box-shadow: inset 0 0 0 calc(var(--border-width-item-selected-l41fek, 1px) - 1px) var(--color-border-item-focused-sewkzn, #0073bb);
253
253
  }
254
- .awsui_tile-container_vj6p7_g358p_222.awsui_has-metadata_vj6p7_g358p_254:not(#\9) {
254
+ .awsui_tile-container_vj6p7_1kvr6_222.awsui_has-metadata_vj6p7_1kvr6_254:not(#\9) {
255
255
  padding-block-end: var(--space-s-kll7oj, 12px);
256
256
  }
257
- .awsui_tile-container_vj6p7_g358p_222.awsui_has-metadata_vj6p7_g358p_254.awsui_refresh_vj6p7_g358p_247:not(#\9) {
257
+ .awsui_tile-container_vj6p7_1kvr6_222.awsui_has-metadata_vj6p7_1kvr6_254.awsui_refresh_vj6p7_1kvr6_247:not(#\9) {
258
258
  padding-block-end: var(--space-scaled-s-2crg2b, 12px);
259
259
  }
260
- .awsui_tile-container_vj6p7_g358p_222.awsui_selected_vj6p7_g358p_251:not(#\9) {
260
+ .awsui_tile-container_vj6p7_1kvr6_222.awsui_selected_vj6p7_1kvr6_251:not(#\9) {
261
261
  border-block: var(--border-width-field-2365x3, 1px) solid var(--color-border-item-selected-7104rh, #0073bb);
262
262
  border-inline: var(--border-width-field-2365x3, 1px) solid var(--color-border-item-selected-7104rh, #0073bb);
263
263
  background: var(--color-background-item-selected-dotkup, #f1faff);
264
264
  }
265
- .awsui_tile-container_vj6p7_g358p_222.awsui_disabled_vj6p7_g358p_251:not(#\9) {
265
+ .awsui_tile-container_vj6p7_1kvr6_222.awsui_disabled_vj6p7_1kvr6_251:not(#\9) {
266
266
  border-block: var(--border-width-field-2365x3, 1px) solid var(--color-border-tiles-disabled-0fmv29, transparent);
267
267
  border-inline: var(--border-width-field-2365x3, 1px) solid var(--color-border-tiles-disabled-0fmv29, transparent);
268
268
  background: var(--color-background-tiles-disabled-9yvcfs, #eaeded);
269
269
  }
270
- .awsui_tile-container_vj6p7_g358p_222.awsui_readonly_vj6p7_g358p_251:not(#\9) {
270
+ .awsui_tile-container_vj6p7_1kvr6_222.awsui_readonly_vj6p7_1kvr6_251:not(#\9) {
271
271
  background-color: var(--color-background-input-default-1u0v1p, #ffffff);
272
272
  border-block: var(--border-width-field-2365x3, 1px) solid var(--color-border-input-disabled-5m31k6, #eaeded);
273
273
  border-inline: var(--border-width-field-2365x3, 1px) solid var(--color-border-input-disabled-5m31k6, #eaeded);
274
274
  }
275
275
 
276
- .awsui_columns_vj6p7_g358p_276:not(#\9) {
276
+ .awsui_columns_vj6p7_1kvr6_276:not(#\9) {
277
277
  display: flex;
278
278
  flex-wrap: wrap;
279
279
  margin-block: calc(var(--space-tile-gutter-5d7z8f, 24px) / -4);
280
280
  margin-inline-start: calc(var(--space-tile-gutter-5d7z8f, 24px) / -4);
281
281
  margin-inline-end: calc(var(--space-tile-gutter-5d7z8f, 24px) / -4);
282
282
  }
283
- .awsui_columns_vj6p7_g358p_276.awsui_column-1_vj6p7_g358p_283 > .awsui_tile-container_vj6p7_g358p_222:not(#\9) {
283
+ .awsui_columns_vj6p7_1kvr6_276.awsui_column-1_vj6p7_1kvr6_283 > .awsui_tile-container_vj6p7_1kvr6_222:not(#\9) {
284
284
  margin-block: calc(var(--space-tile-gutter-5d7z8f, 24px) / 4);
285
285
  margin-inline: calc(var(--space-tile-gutter-5d7z8f, 24px) / 4);
286
- box-sizing: border-box;
287
286
  flex: 0 0 calc(100% - var(--space-tile-gutter-5d7z8f, 24px)/2);
288
287
  max-inline-size: calc(100% - var(--space-tile-gutter-5d7z8f, 24px)/2);
289
288
  }
290
- .awsui_columns_vj6p7_g358p_276.awsui_column-1_vj6p7_g358p_283 > .awsui_tile-container_vj6p7_g358p_222.awsui_breakpoint-xs_vj6p7_g358p_290:not(#\9) {
289
+ .awsui_columns_vj6p7_1kvr6_276.awsui_column-1_vj6p7_1kvr6_283 > .awsui_tile-container_vj6p7_1kvr6_222.awsui_breakpoint-xs_vj6p7_1kvr6_289:not(#\9) {
291
290
  flex: 0 0 calc(100% - var(--space-tile-gutter-5d7z8f, 24px)/2);
292
291
  max-inline-size: calc(100% - var(--space-tile-gutter-5d7z8f, 24px)/2);
293
292
  }
294
- .awsui_columns_vj6p7_g358p_276.awsui_column-1_vj6p7_g358p_283 > .awsui_tile-container_vj6p7_g358p_222.awsui_breakpoint-xxs_vj6p7_g358p_294:not(#\9) {
293
+ .awsui_columns_vj6p7_1kvr6_276.awsui_column-1_vj6p7_1kvr6_283 > .awsui_tile-container_vj6p7_1kvr6_222.awsui_breakpoint-xxs_vj6p7_1kvr6_293:not(#\9) {
295
294
  flex: 0 0 calc(100% - var(--space-tile-gutter-5d7z8f, 24px)/2);
296
295
  max-inline-size: calc(100% - var(--space-tile-gutter-5d7z8f, 24px)/2);
297
296
  }
298
- .awsui_columns_vj6p7_g358p_276.awsui_column-2_vj6p7_g358p_298 > .awsui_tile-container_vj6p7_g358p_222:not(#\9) {
297
+ .awsui_columns_vj6p7_1kvr6_276.awsui_column-2_vj6p7_1kvr6_297 > .awsui_tile-container_vj6p7_1kvr6_222:not(#\9) {
299
298
  margin-block: calc(var(--space-tile-gutter-5d7z8f, 24px) / 4);
300
299
  margin-inline: calc(var(--space-tile-gutter-5d7z8f, 24px) / 4);
301
- box-sizing: border-box;
302
300
  flex: 0 0 calc(100% - var(--space-tile-gutter-5d7z8f, 24px)/2);
303
301
  max-inline-size: calc(100% - var(--space-tile-gutter-5d7z8f, 24px)/2);
304
302
  }
305
- .awsui_columns_vj6p7_g358p_276.awsui_column-2_vj6p7_g358p_298 > .awsui_tile-container_vj6p7_g358p_222.awsui_breakpoint-xs_vj6p7_g358p_290:not(#\9) {
303
+ .awsui_columns_vj6p7_1kvr6_276.awsui_column-2_vj6p7_1kvr6_297 > .awsui_tile-container_vj6p7_1kvr6_222.awsui_breakpoint-xs_vj6p7_1kvr6_289:not(#\9) {
306
304
  flex: 0 0 calc(50% - var(--space-tile-gutter-5d7z8f, 24px)/2);
307
305
  max-inline-size: calc(50% - var(--space-tile-gutter-5d7z8f, 24px)/2);
308
306
  }
309
- .awsui_columns_vj6p7_g358p_276.awsui_column-2_vj6p7_g358p_298 > .awsui_tile-container_vj6p7_g358p_222.awsui_breakpoint-xxs_vj6p7_g358p_294:not(#\9) {
307
+ .awsui_columns_vj6p7_1kvr6_276.awsui_column-2_vj6p7_1kvr6_297 > .awsui_tile-container_vj6p7_1kvr6_222.awsui_breakpoint-xxs_vj6p7_1kvr6_293:not(#\9) {
310
308
  flex: 0 0 calc(50% - var(--space-tile-gutter-5d7z8f, 24px)/2);
311
309
  max-inline-size: calc(50% - var(--space-tile-gutter-5d7z8f, 24px)/2);
312
310
  }
313
- .awsui_columns_vj6p7_g358p_276.awsui_column-3_vj6p7_g358p_313 > .awsui_tile-container_vj6p7_g358p_222:not(#\9) {
311
+ .awsui_columns_vj6p7_1kvr6_276.awsui_column-3_vj6p7_1kvr6_311 > .awsui_tile-container_vj6p7_1kvr6_222:not(#\9) {
314
312
  margin-block: calc(var(--space-tile-gutter-5d7z8f, 24px) / 4);
315
313
  margin-inline: calc(var(--space-tile-gutter-5d7z8f, 24px) / 4);
316
- box-sizing: border-box;
317
314
  flex: 0 0 calc(100% - var(--space-tile-gutter-5d7z8f, 24px)/2);
318
315
  max-inline-size: calc(100% - var(--space-tile-gutter-5d7z8f, 24px)/2);
319
316
  }
320
- .awsui_columns_vj6p7_g358p_276.awsui_column-3_vj6p7_g358p_313 > .awsui_tile-container_vj6p7_g358p_222.awsui_breakpoint-xs_vj6p7_g358p_290:not(#\9) {
317
+ .awsui_columns_vj6p7_1kvr6_276.awsui_column-3_vj6p7_1kvr6_311 > .awsui_tile-container_vj6p7_1kvr6_222.awsui_breakpoint-xs_vj6p7_1kvr6_289:not(#\9) {
321
318
  flex: 0 0 calc(33.3333333333% - var(--space-tile-gutter-5d7z8f, 24px)/2);
322
319
  max-inline-size: calc(33.3333333333% - var(--space-tile-gutter-5d7z8f, 24px)/2);
323
320
  }
324
- .awsui_columns_vj6p7_g358p_276.awsui_column-3_vj6p7_g358p_313 > .awsui_tile-container_vj6p7_g358p_222.awsui_breakpoint-xxs_vj6p7_g358p_294:not(#\9) {
321
+ .awsui_columns_vj6p7_1kvr6_276.awsui_column-3_vj6p7_1kvr6_311 > .awsui_tile-container_vj6p7_1kvr6_222.awsui_breakpoint-xxs_vj6p7_1kvr6_293:not(#\9) {
325
322
  flex: 0 0 calc(50% - var(--space-tile-gutter-5d7z8f, 24px)/2);
326
323
  max-inline-size: calc(50% - var(--space-tile-gutter-5d7z8f, 24px)/2);
327
324
  }
328
- .awsui_columns_vj6p7_g358p_276.awsui_column-4_vj6p7_g358p_328 > .awsui_tile-container_vj6p7_g358p_222:not(#\9) {
325
+ .awsui_columns_vj6p7_1kvr6_276.awsui_column-4_vj6p7_1kvr6_325 > .awsui_tile-container_vj6p7_1kvr6_222:not(#\9) {
329
326
  margin-block: calc(var(--space-tile-gutter-5d7z8f, 24px) / 4);
330
327
  margin-inline: calc(var(--space-tile-gutter-5d7z8f, 24px) / 4);
331
- box-sizing: border-box;
332
328
  flex: 0 0 calc(100% - var(--space-tile-gutter-5d7z8f, 24px)/2);
333
329
  max-inline-size: calc(100% - var(--space-tile-gutter-5d7z8f, 24px)/2);
334
330
  }
335
- .awsui_columns_vj6p7_g358p_276.awsui_column-4_vj6p7_g358p_328 > .awsui_tile-container_vj6p7_g358p_222.awsui_breakpoint-xs_vj6p7_g358p_290:not(#\9) {
331
+ .awsui_columns_vj6p7_1kvr6_276.awsui_column-4_vj6p7_1kvr6_325 > .awsui_tile-container_vj6p7_1kvr6_222.awsui_breakpoint-xs_vj6p7_1kvr6_289:not(#\9) {
336
332
  flex: 0 0 calc(25% - var(--space-tile-gutter-5d7z8f, 24px)/2);
337
333
  max-inline-size: calc(25% - var(--space-tile-gutter-5d7z8f, 24px)/2);
338
334
  }
339
- .awsui_columns_vj6p7_g358p_276.awsui_column-4_vj6p7_g358p_328 > .awsui_tile-container_vj6p7_g358p_222.awsui_breakpoint-xxs_vj6p7_g358p_294:not(#\9) {
335
+ .awsui_columns_vj6p7_1kvr6_276.awsui_column-4_vj6p7_1kvr6_325 > .awsui_tile-container_vj6p7_1kvr6_222.awsui_breakpoint-xxs_vj6p7_1kvr6_293:not(#\9) {
340
336
  flex: 0 0 calc(50% - var(--space-tile-gutter-5d7z8f, 24px)/2);
341
337
  max-inline-size: calc(50% - var(--space-tile-gutter-5d7z8f, 24px)/2);
342
338
  }
343
339
 
344
- .awsui_control_vj6p7_g358p_344:not(#\9) {
340
+ .awsui_control_vj6p7_1kvr6_340:not(#\9) {
345
341
  flex-grow: 1;
346
342
  margin-block-end: var(--space-s-kll7oj, 12px);
347
343
  }
348
- .awsui_control_vj6p7_g358p_344.awsui_no-image_vj6p7_g358p_348:not(#\9) {
344
+ .awsui_control_vj6p7_1kvr6_340.awsui_no-image_vj6p7_1kvr6_344:not(#\9) {
349
345
  margin-block-end: 0;
350
346
  }
351
347
 
352
- .awsui_image_vj6p7_g358p_352:not(#\9) {
348
+ .awsui_image_vj6p7_1kvr6_348:not(#\9) {
353
349
  text-align: center;
354
350
  }
355
- .awsui_image_vj6p7_g358p_352 > img:not(#\9) {
351
+ .awsui_image_vj6p7_1kvr6_348 > img:not(#\9) {
356
352
  max-inline-size: 100%;
357
353
  }
358
- .awsui_image_vj6p7_g358p_352.awsui_disabled_vj6p7_g358p_251 > img:not(#\9) {
354
+ .awsui_image_vj6p7_1kvr6_348.awsui_disabled_vj6p7_1kvr6_251 > img:not(#\9) {
359
355
  opacity: 0.3;
360
356
  }
package/lib/internal/template/tiles/styles.selectors.js CHANGED
@@ -2,35 +2,35 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "column-layout": "awsui_column-layout_vj6p7_g358p_17",
6
- "grid": "awsui_grid_vj6p7_g358p_49",
7
- "grid-no-gutters": "awsui_grid-no-gutters_vj6p7_g358p_55",
8
- "grid-variant-text-grid": "awsui_grid-variant-text-grid_vj6p7_g358p_59",
9
- "grid-breakpoint-default": "awsui_grid-breakpoint-default_vj6p7_g358p_67",
10
- "grid-columns-1": "awsui_grid-columns-1_vj6p7_g358p_70",
11
- "grid-breakpoint-xxs": "awsui_grid-breakpoint-xxs_vj6p7_g358p_70",
12
- "grid-breakpoint-xs": "awsui_grid-breakpoint-xs_vj6p7_g358p_73",
13
- "grid-columns-2": "awsui_grid-columns-2_vj6p7_g358p_76",
14
- "grid-columns-3": "awsui_grid-columns-3_vj6p7_g358p_82",
15
- "grid-columns-4": "awsui_grid-columns-4_vj6p7_g358p_88",
16
- "grid-vertical-borders": "awsui_grid-vertical-borders_vj6p7_g358p_104",
17
- "grid-horizontal-borders": "awsui_grid-horizontal-borders_vj6p7_g358p_137",
18
- "root": "awsui_root_vj6p7_g358p_187",
19
- "tile-container": "awsui_tile-container_vj6p7_g358p_222",
20
- "refresh": "awsui_refresh_vj6p7_g358p_247",
21
- "selected": "awsui_selected_vj6p7_g358p_251",
22
- "disabled": "awsui_disabled_vj6p7_g358p_251",
23
- "readonly": "awsui_readonly_vj6p7_g358p_251",
24
- "has-metadata": "awsui_has-metadata_vj6p7_g358p_254",
25
- "columns": "awsui_columns_vj6p7_g358p_276",
26
- "column-1": "awsui_column-1_vj6p7_g358p_283",
27
- "breakpoint-xs": "awsui_breakpoint-xs_vj6p7_g358p_290",
28
- "breakpoint-xxs": "awsui_breakpoint-xxs_vj6p7_g358p_294",
29
- "column-2": "awsui_column-2_vj6p7_g358p_298",
30
- "column-3": "awsui_column-3_vj6p7_g358p_313",
31
- "column-4": "awsui_column-4_vj6p7_g358p_328",
32
- "control": "awsui_control_vj6p7_g358p_344",
33
- "no-image": "awsui_no-image_vj6p7_g358p_348",
34
- "image": "awsui_image_vj6p7_g358p_352"
5
+ "column-layout": "awsui_column-layout_vj6p7_1kvr6_17",
6
+ "grid": "awsui_grid_vj6p7_1kvr6_49",
7
+ "grid-no-gutters": "awsui_grid-no-gutters_vj6p7_1kvr6_55",
8
+ "grid-variant-text-grid": "awsui_grid-variant-text-grid_vj6p7_1kvr6_59",
9
+ "grid-breakpoint-default": "awsui_grid-breakpoint-default_vj6p7_1kvr6_67",
10
+ "grid-columns-1": "awsui_grid-columns-1_vj6p7_1kvr6_70",
11
+ "grid-breakpoint-xxs": "awsui_grid-breakpoint-xxs_vj6p7_1kvr6_70",
12
+ "grid-breakpoint-xs": "awsui_grid-breakpoint-xs_vj6p7_1kvr6_73",
13
+ "grid-columns-2": "awsui_grid-columns-2_vj6p7_1kvr6_76",
14
+ "grid-columns-3": "awsui_grid-columns-3_vj6p7_1kvr6_82",
15
+ "grid-columns-4": "awsui_grid-columns-4_vj6p7_1kvr6_88",
16
+ "grid-vertical-borders": "awsui_grid-vertical-borders_vj6p7_1kvr6_104",
17
+ "grid-horizontal-borders": "awsui_grid-horizontal-borders_vj6p7_1kvr6_137",
18
+ "root": "awsui_root_vj6p7_1kvr6_187",
19
+ "tile-container": "awsui_tile-container_vj6p7_1kvr6_222",
20
+ "refresh": "awsui_refresh_vj6p7_1kvr6_247",
21
+ "selected": "awsui_selected_vj6p7_1kvr6_251",
22
+ "disabled": "awsui_disabled_vj6p7_1kvr6_251",
23
+ "readonly": "awsui_readonly_vj6p7_1kvr6_251",
24
+ "has-metadata": "awsui_has-metadata_vj6p7_1kvr6_254",
25
+ "columns": "awsui_columns_vj6p7_1kvr6_276",
26
+ "column-1": "awsui_column-1_vj6p7_1kvr6_283",
27
+ "breakpoint-xs": "awsui_breakpoint-xs_vj6p7_1kvr6_289",
28
+ "breakpoint-xxs": "awsui_breakpoint-xxs_vj6p7_1kvr6_293",
29
+ "column-2": "awsui_column-2_vj6p7_1kvr6_297",
30
+ "column-3": "awsui_column-3_vj6p7_1kvr6_311",
31
+ "column-4": "awsui_column-4_vj6p7_1kvr6_325",
32
+ "control": "awsui_control_vj6p7_1kvr6_340",
33
+ "no-image": "awsui_no-image_vj6p7_1kvr6_344",
34
+ "image": "awsui_image_vj6p7_1kvr6_348"
35
35
  };
36
36
 
package/lib/internal/template/toggle/internal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAatC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,UAAU,mBAAoB,SAAQ,WAAW,EAAE,0BAA0B;IAC3E,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C;AAGD,UAAU,eAAe;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,cAAc,6FA0GnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAahD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,UAAU,mBAAoB,SAAQ,WAAW,EAAE,0BAA0B;IAC3E,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C;AAGD,UAAU,eAAe;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,cAAc,6FAkHnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
package/lib/internal/template/toggle/internal.js CHANGED
@@ -1,6 +1,6 @@
1
1
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
2
  // SPDX-License-Identifier: Apache-2.0
3
- import React, { useRef } from 'react';
3
+ import React, { useRef, useState } from 'react';
4
4
  import clsx from 'clsx';
5
5
  import { getAnalyticsMetadataAttribute, } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
6
6
  import { getBaseProps } from '../internal/base-component';
@@ -15,6 +15,12 @@ const InternalToggle = React.forwardRef(({ controlId, checked, name, disabled, r
15
15
  const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);
16
16
  const baseProps = getBaseProps(rest);
17
17
  const checkboxRef = useRef(null);
18
+ // The handle's follow-through animation only plays once the state has changed since mount.
19
+ const [initialChecked] = useState(!!checked);
20
+ const [hasChanged, setHasChanged] = useState(false);
21
+ if (!hasChanged && !!checked !== initialChecked) {
22
+ setHasChanged(true);
23
+ }
18
24
  const analyticsMetadata = {};
19
25
  const analyticsComponentMetadata = {
20
26
  name: 'awsui.Toggle',
@@ -46,7 +52,7 @@ const InternalToggle = React.forwardRef(({ controlId, checked, name, disabled, r
46
52
  [styles['toggle-handle-checked']]: checked,
47
53
  [styles['toggle-handle-disabled']]: disabled,
48
54
  [styles['toggle-handle-readonly']]: readOnly,
49
- }), style: getStyledControlStyle(style, checked, disabled, readOnly) }), style: getAbstractSwitchStyles(style, checked, disabled, readOnly), __internalRootRef: __internalRootRef, ...getAnalyticsMetadataAttribute(analyticsMetadata) }));
55
+ }), "data-awsui-motion-ready": hasChanged ? '' : undefined, style: getStyledControlStyle(style, checked, disabled, readOnly) }), style: getAbstractSwitchStyles(style, checked, disabled, readOnly), __internalRootRef: __internalRootRef, ...getAnalyticsMetadataAttribute(analyticsMetadata) }));
50
56
  });
51
57
  export default InternalToggle;
52
58
  //# sourceMappingURL=internal.js.map
package/lib/internal/template/toggle/internal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/toggle/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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport {\n GeneratedAnalyticsMetadataFragment,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../internal/base-component';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { GeneratedAnalyticsMetadataToggleComponent } from './analytics-metadata/interfaces';\nimport { ToggleProps } from './interfaces';\nimport { getAbstractSwitchStyles, getStyledControlStyle } from './style';\n\nimport styles from './styles.css.js';\n\ninterface InternalToggleProps extends ToggleProps, InternalBaseComponentProps {\n styleClassNames?: StyleClassNames;\n __injectAnalyticsComponentMetadata?: boolean;\n}\n\n// Style API v2\ninterface StyleClassNames {\n control?: string;\n label?: string;\n description?: string;\n}\n\nconst InternalToggle = React.forwardRef<ToggleProps.Ref, InternalToggleProps>(\n (\n {\n controlId,\n checked,\n name,\n disabled,\n readOnly,\n children,\n description,\n ariaLabel,\n ariaControls,\n onFocus,\n onBlur,\n onChange,\n nativeInputAttributes,\n __internalRootRef,\n style,\n styleClassNames,\n __injectAnalyticsComponentMetadata,\n ...rest\n },\n ref\n ) => {\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n const baseProps = getBaseProps(rest);\n const checkboxRef = useRef<HTMLInputElement>(null);\n\n const analyticsMetadata: GeneratedAnalyticsMetadataFragment = {};\n const analyticsComponentMetadata: GeneratedAnalyticsMetadataToggleComponent = {\n name: 'awsui.Toggle',\n label: { root: 'self' },\n properties: {\n checked: `${!!checked}`,\n },\n };\n\n if (__injectAnalyticsComponentMetadata) {\n analyticsMetadata.component = analyticsComponentMetadata;\n }\n\n if (!disabled && !readOnly) {\n analyticsMetadata.action = !checked ? 'select' : 'deselect';\n }\n useForwardFocus(ref, checkboxRef);\n\n return (\n <AbstractSwitch\n {...baseProps}\n className={clsx(styles.root, baseProps.className)}\n controlClassName={clsx(styleClassNames?.control, styles['toggle-control'], {\n [styles['toggle-control-checked']]: checked,\n [styles['toggle-control-disabled']]: disabled,\n [styles['toggle-control-readonly']]: readOnly,\n })}\n outlineClassName={styles.outline}\n controlId={controlId}\n disabled={disabled}\n readOnly={readOnly}\n label={children}\n labelClassName={styleClassNames?.label}\n description={description}\n descriptionClassName={styleClassNames?.description}\n descriptionBottomPadding={true}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n ariaControls={ariaControls}\n nativeControl={nativeControlProps => (\n <WithNativeAttributes\n {...nativeControlProps}\n tag=\"input\"\n componentName=\"Toggle\"\n nativeAttributes={nativeInputAttributes}\n ref={checkboxRef}\n type=\"checkbox\"\n checked={checked}\n name={name}\n aria-disabled={readOnly && !disabled ? 'true' : undefined}\n onFocus={() => fireNonCancelableEvent(onFocus)}\n onBlur={() => fireNonCancelableEvent(onBlur)}\n // empty handler to suppress React controllability warning\n onChange={() => {}}\n />\n )}\n onClick={() => {\n checkboxRef.current?.focus();\n fireNonCancelableEvent(onChange, { checked: !checked });\n }}\n styledControl={\n /*Using span, not div for HTML validity*/\n <span\n className={clsx(styles['toggle-handle'], {\n [styles['toggle-handle-checked']]: checked,\n [styles['toggle-handle-disabled']]: disabled,\n [styles['toggle-handle-readonly']]: readOnly,\n })}\n style={getStyledControlStyle(style, checked, disabled, readOnly)}\n />\n }\n style={getAbstractSwitchStyles(style, checked, disabled, readOnly)}\n __internalRootRef={__internalRootRef}\n {...getAnalyticsMetadataAttribute(analyticsMetadata)}\n />\n );\n }\n);\n\nexport default InternalToggle;\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/toggle/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, { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport {\n GeneratedAnalyticsMetadataFragment,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../internal/base-component';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { GeneratedAnalyticsMetadataToggleComponent } from './analytics-metadata/interfaces';\nimport { ToggleProps } from './interfaces';\nimport { getAbstractSwitchStyles, getStyledControlStyle } from './style';\n\nimport styles from './styles.css.js';\n\ninterface InternalToggleProps extends ToggleProps, InternalBaseComponentProps {\n styleClassNames?: StyleClassNames;\n __injectAnalyticsComponentMetadata?: boolean;\n}\n\n// Style API v2\ninterface StyleClassNames {\n control?: string;\n label?: string;\n description?: string;\n}\n\nconst InternalToggle = React.forwardRef<ToggleProps.Ref, InternalToggleProps>(\n (\n {\n controlId,\n checked,\n name,\n disabled,\n readOnly,\n children,\n description,\n ariaLabel,\n ariaControls,\n onFocus,\n onBlur,\n onChange,\n nativeInputAttributes,\n __internalRootRef,\n style,\n styleClassNames,\n __injectAnalyticsComponentMetadata,\n ...rest\n },\n ref\n ) => {\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n const baseProps = getBaseProps(rest);\n const checkboxRef = useRef<HTMLInputElement>(null);\n\n // The handle's follow-through animation only plays once the state has changed since mount.\n const [initialChecked] = useState(!!checked);\n const [hasChanged, setHasChanged] = useState(false);\n if (!hasChanged && !!checked !== initialChecked) {\n setHasChanged(true);\n }\n\n const analyticsMetadata: GeneratedAnalyticsMetadataFragment = {};\n const analyticsComponentMetadata: GeneratedAnalyticsMetadataToggleComponent = {\n name: 'awsui.Toggle',\n label: { root: 'self' },\n properties: {\n checked: `${!!checked}`,\n },\n };\n\n if (__injectAnalyticsComponentMetadata) {\n analyticsMetadata.component = analyticsComponentMetadata;\n }\n\n if (!disabled && !readOnly) {\n analyticsMetadata.action = !checked ? 'select' : 'deselect';\n }\n useForwardFocus(ref, checkboxRef);\n\n return (\n <AbstractSwitch\n {...baseProps}\n className={clsx(styles.root, baseProps.className)}\n controlClassName={clsx(styleClassNames?.control, styles['toggle-control'], {\n [styles['toggle-control-checked']]: checked,\n [styles['toggle-control-disabled']]: disabled,\n [styles['toggle-control-readonly']]: readOnly,\n })}\n outlineClassName={styles.outline}\n controlId={controlId}\n disabled={disabled}\n readOnly={readOnly}\n label={children}\n labelClassName={styleClassNames?.label}\n description={description}\n descriptionClassName={styleClassNames?.description}\n descriptionBottomPadding={true}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n ariaControls={ariaControls}\n nativeControl={nativeControlProps => (\n <WithNativeAttributes\n {...nativeControlProps}\n tag=\"input\"\n componentName=\"Toggle\"\n nativeAttributes={nativeInputAttributes}\n ref={checkboxRef}\n type=\"checkbox\"\n checked={checked}\n name={name}\n aria-disabled={readOnly && !disabled ? 'true' : undefined}\n onFocus={() => fireNonCancelableEvent(onFocus)}\n onBlur={() => fireNonCancelableEvent(onBlur)}\n // empty handler to suppress React controllability warning\n onChange={() => {}}\n />\n )}\n onClick={() => {\n checkboxRef.current?.focus();\n fireNonCancelableEvent(onChange, { checked: !checked });\n }}\n styledControl={\n /*Using span, not div for HTML validity*/\n <span\n className={clsx(styles['toggle-handle'], {\n [styles['toggle-handle-checked']]: checked,\n [styles['toggle-handle-disabled']]: disabled,\n [styles['toggle-handle-readonly']]: readOnly,\n })}\n data-awsui-motion-ready={hasChanged ? '' : undefined}\n style={getStyledControlStyle(style, checked, disabled, readOnly)}\n />\n }\n style={getAbstractSwitchStyles(style, checked, disabled, readOnly)}\n __internalRootRef={__internalRootRef}\n {...getAnalyticsMetadataAttribute(analyticsMetadata)}\n />\n );\n }\n);\n\nexport default InternalToggle;\n"]}
package/lib/internal/template/toggle/styles.css.js CHANGED
@@ -1,15 +1,15 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "root": "awsui_root_4yi2u_1gepn_40",
5
- "outline": "awsui_outline_4yi2u_1gepn_73",
6
- "toggle-control": "awsui_toggle-control_4yi2u_1gepn_95",
7
- "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_1gepn_115",
8
- "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_1gepn_118",
9
- "toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_1gepn_124",
10
- "toggle-handle": "awsui_toggle-handle_4yi2u_1gepn_128",
11
- "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_1gepn_153",
12
- "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_1gepn_160",
13
- "toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_1gepn_164"
4
+ "root": "awsui_root_4yi2u_e9sk2_40",
5
+ "outline": "awsui_outline_4yi2u_e9sk2_73",
6
+ "toggle-control": "awsui_toggle-control_4yi2u_e9sk2_95",
7
+ "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_e9sk2_115",
8
+ "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_e9sk2_118",
9
+ "toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_e9sk2_124",
10
+ "toggle-handle": "awsui_toggle-handle_4yi2u_e9sk2_127",
11
+ "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_e9sk2_152",
12
+ "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_e9sk2_159",
13
+ "toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_e9sk2_163"
14
14
  };
15
15