npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.686 → 3.0.687 - Mend

@cloudscape-design/components-themeable 3.0.686 → 3.0.687

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 (134) hide show

package/lib/internal/template/tiles/styles.scoped.css CHANGED Viewed

@@ -94,7 +94,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-div.awsui_column-layout_vj6p7_18uio_97:not(#\9) {
+div.awsui_column-layout_vj6p7_x18xx_97:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -130,141 +130,141 @@ div.awsui_column-layout_vj6p7_18uio_97:not(#\9) {
   -moz-osx-font-smoothing: auto;
   word-wrap: break-word;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132:not(#\9) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132:not(#\9) {
   margin-block: calc(var(--space-grid-gutter-fzqbbi, 20px) / -2);
   margin-inline: calc(var(--space-grid-gutter-fzqbbi, 20px) / -2);
   /* stylelint-disable-next-line selector-max-universal */
   /* stylelint-disable-next-line selector-max-universal */
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-no-gutters_vj6p7_18uio_138:not(#\9) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-no-gutters_vj6p7_x18xx_138:not(#\9) {
   margin-block: 0;
   margin-inline: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-variant-text-grid_vj6p7_18uio_142:not(#\9) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-variant-text-grid_vj6p7_x18xx_142:not(#\9) {
   /* stylelint-disable-next-line selector-max-universal */
   margin-block: calc(-1 * var(--space-grid-gutter-fzqbbi, 20px) / 2);
   margin-inline: calc(-1 * var(--space-grid-gutter-fzqbbi, 20px));
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-variant-text-grid_vj6p7_18uio_142 > *:not(#\9) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-variant-text-grid_vj6p7_x18xx_142 > *:not(#\9) {
   border-inline-start: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-divider-default-in8dkg, #eaeded);
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-variant-text-grid_vj6p7_18uio_142.awsui_grid-breakpoint-default_vj6p7_18uio_150 > *:not(#\9):nth-child(1n+1) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-variant-text-grid_vj6p7_x18xx_142.awsui_grid-breakpoint-default_vj6p7_x18xx_150 > *:not(#\9):nth-child(1n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-variant-text-grid_vj6p7_18uio_142.awsui_grid-columns-1_vj6p7_18uio_153.awsui_grid-breakpoint-xxs_vj6p7_18uio_153 > *:not(#\9):nth-child(1n+1) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-variant-text-grid_vj6p7_x18xx_142.awsui_grid-columns-1_vj6p7_x18xx_153.awsui_grid-breakpoint-xxs_vj6p7_x18xx_153 > *:not(#\9):nth-child(1n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-variant-text-grid_vj6p7_18uio_142.awsui_grid-columns-1_vj6p7_18uio_153.awsui_grid-breakpoint-xs_vj6p7_18uio_156 > *:not(#\9):nth-child(1n+1) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-variant-text-grid_vj6p7_x18xx_142.awsui_grid-columns-1_vj6p7_x18xx_153.awsui_grid-breakpoint-xs_vj6p7_x18xx_156 > *:not(#\9):nth-child(1n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-variant-text-grid_vj6p7_18uio_142.awsui_grid-columns-2_vj6p7_18uio_159.awsui_grid-breakpoint-xxs_vj6p7_18uio_153 > *:not(#\9):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-variant-text-grid_vj6p7_x18xx_142.awsui_grid-columns-2_vj6p7_x18xx_159.awsui_grid-breakpoint-xxs_vj6p7_x18xx_153 > *:not(#\9):nth-child(2n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-variant-text-grid_vj6p7_18uio_142.awsui_grid-columns-2_vj6p7_18uio_159.awsui_grid-breakpoint-xs_vj6p7_18uio_156 > *:not(#\9):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-variant-text-grid_vj6p7_x18xx_142.awsui_grid-columns-2_vj6p7_x18xx_159.awsui_grid-breakpoint-xs_vj6p7_x18xx_156 > *:not(#\9):nth-child(2n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-variant-text-grid_vj6p7_18uio_142.awsui_grid-columns-3_vj6p7_18uio_165.awsui_grid-breakpoint-xxs_vj6p7_18uio_153 > *:not(#\9):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-variant-text-grid_vj6p7_x18xx_142.awsui_grid-columns-3_vj6p7_x18xx_165.awsui_grid-breakpoint-xxs_vj6p7_x18xx_153 > *:not(#\9):nth-child(2n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-variant-text-grid_vj6p7_18uio_142.awsui_grid-columns-3_vj6p7_18uio_165.awsui_grid-breakpoint-xs_vj6p7_18uio_156 > *:not(#\9):nth-child(3n+1) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-variant-text-grid_vj6p7_x18xx_142.awsui_grid-columns-3_vj6p7_x18xx_165.awsui_grid-breakpoint-xs_vj6p7_x18xx_156 > *:not(#\9):nth-child(3n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-variant-text-grid_vj6p7_18uio_142.awsui_grid-columns-4_vj6p7_18uio_171.awsui_grid-breakpoint-xxs_vj6p7_18uio_153 > *:not(#\9):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-variant-text-grid_vj6p7_x18xx_142.awsui_grid-columns-4_vj6p7_x18xx_171.awsui_grid-breakpoint-xxs_vj6p7_x18xx_153 > *:not(#\9):nth-child(2n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-variant-text-grid_vj6p7_18uio_142.awsui_grid-columns-4_vj6p7_18uio_171.awsui_grid-breakpoint-xs_vj6p7_18uio_156 > *:not(#\9):nth-child(4n+1) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-variant-text-grid_vj6p7_x18xx_142.awsui_grid-columns-4_vj6p7_x18xx_171.awsui_grid-breakpoint-xs_vj6p7_x18xx_156 > *:not(#\9):nth-child(4n+1) {
   border-inline-start-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132:not(#\9):not(.awsui_grid-no-gutters_vj6p7_18uio_138) > * {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132:not(#\9):not(.awsui_grid-no-gutters_vj6p7_x18xx_138) > * {
   padding-block: calc(var(--space-grid-gutter-fzqbbi, 20px) / 2);
   padding-inline: calc(var(--space-grid-gutter-fzqbbi, 20px) / 2);
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132:not(#\9):not(.awsui_grid-no-gutters_vj6p7_18uio_138).awsui_grid-variant-text-grid_vj6p7_18uio_142 > * {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132:not(#\9):not(.awsui_grid-no-gutters_vj6p7_x18xx_138).awsui_grid-variant-text-grid_vj6p7_x18xx_142 > * {
   padding-block: 0;
   padding-inline: var(--space-grid-gutter-fzqbbi, 20px);
   margin-block: calc(var(--space-grid-gutter-fzqbbi, 20px) / 2);
   margin-inline: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-vertical-borders_vj6p7_18uio_187:not(#\9) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-vertical-borders_vj6p7_x18xx_187:not(#\9) {
   /* stylelint-disable-next-line selector-max-universal */
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-vertical-borders_vj6p7_18uio_187 > *:not(#\9) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-vertical-borders_vj6p7_x18xx_187 > *:not(#\9) {
   border-inline-end: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-divider-default-in8dkg, #eaeded);
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-vertical-borders_vj6p7_18uio_187.awsui_grid-breakpoint-default_vj6p7_18uio_150 > *:not(#\9):nth-child(1n) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-vertical-borders_vj6p7_x18xx_187.awsui_grid-breakpoint-default_vj6p7_x18xx_150 > *:not(#\9):nth-child(1n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-vertical-borders_vj6p7_18uio_187.awsui_grid-columns-1_vj6p7_18uio_153.awsui_grid-breakpoint-xxs_vj6p7_18uio_153 > *:not(#\9):nth-child(1n) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-vertical-borders_vj6p7_x18xx_187.awsui_grid-columns-1_vj6p7_x18xx_153.awsui_grid-breakpoint-xxs_vj6p7_x18xx_153 > *:not(#\9):nth-child(1n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-vertical-borders_vj6p7_18uio_187.awsui_grid-columns-1_vj6p7_18uio_153.awsui_grid-breakpoint-xs_vj6p7_18uio_156 > *:not(#\9):nth-child(1n) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-vertical-borders_vj6p7_x18xx_187.awsui_grid-columns-1_vj6p7_x18xx_153.awsui_grid-breakpoint-xs_vj6p7_x18xx_156 > *:not(#\9):nth-child(1n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-vertical-borders_vj6p7_18uio_187.awsui_grid-columns-2_vj6p7_18uio_159.awsui_grid-breakpoint-xxs_vj6p7_18uio_153 > *:not(#\9):nth-child(2n) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-vertical-borders_vj6p7_x18xx_187.awsui_grid-columns-2_vj6p7_x18xx_159.awsui_grid-breakpoint-xxs_vj6p7_x18xx_153 > *:not(#\9):nth-child(2n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-vertical-borders_vj6p7_18uio_187.awsui_grid-columns-2_vj6p7_18uio_159.awsui_grid-breakpoint-xs_vj6p7_18uio_156 > *:not(#\9):nth-child(2n) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-vertical-borders_vj6p7_x18xx_187.awsui_grid-columns-2_vj6p7_x18xx_159.awsui_grid-breakpoint-xs_vj6p7_x18xx_156 > *:not(#\9):nth-child(2n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-vertical-borders_vj6p7_18uio_187.awsui_grid-columns-3_vj6p7_18uio_165.awsui_grid-breakpoint-xxs_vj6p7_18uio_153 > *:not(#\9):nth-child(2n) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-vertical-borders_vj6p7_x18xx_187.awsui_grid-columns-3_vj6p7_x18xx_165.awsui_grid-breakpoint-xxs_vj6p7_x18xx_153 > *:not(#\9):nth-child(2n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-vertical-borders_vj6p7_18uio_187.awsui_grid-columns-3_vj6p7_18uio_165.awsui_grid-breakpoint-xs_vj6p7_18uio_156 > *:not(#\9):nth-child(3n) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-vertical-borders_vj6p7_x18xx_187.awsui_grid-columns-3_vj6p7_x18xx_165.awsui_grid-breakpoint-xs_vj6p7_x18xx_156 > *:not(#\9):nth-child(3n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-vertical-borders_vj6p7_18uio_187.awsui_grid-columns-4_vj6p7_18uio_171.awsui_grid-breakpoint-xxs_vj6p7_18uio_153 > *:not(#\9):nth-child(2n) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-vertical-borders_vj6p7_x18xx_187.awsui_grid-columns-4_vj6p7_x18xx_171.awsui_grid-breakpoint-xxs_vj6p7_x18xx_153 > *:not(#\9):nth-child(2n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-vertical-borders_vj6p7_18uio_187.awsui_grid-columns-4_vj6p7_18uio_171.awsui_grid-breakpoint-xs_vj6p7_18uio_156 > *:not(#\9):nth-child(4n) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-vertical-borders_vj6p7_x18xx_187.awsui_grid-columns-4_vj6p7_x18xx_171.awsui_grid-breakpoint-xs_vj6p7_x18xx_156 > *:not(#\9):nth-child(4n) {
   border-inline-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-horizontal-borders_vj6p7_18uio_220:not(#\9) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-horizontal-borders_vj6p7_x18xx_220:not(#\9) {
   /* stylelint-disable selector-max-universal */
   /* stylelint-enable selector-max-universal */
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-horizontal-borders_vj6p7_18uio_220 > *:not(#\9) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-horizontal-borders_vj6p7_x18xx_220 > *:not(#\9) {
   border-block-end: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-divider-default-in8dkg, #eaeded);
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-horizontal-borders_vj6p7_18uio_220 > *:not(#\9):last-child {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-horizontal-borders_vj6p7_x18xx_220 > *:not(#\9):last-child {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-horizontal-borders_vj6p7_18uio_220.awsui_grid-columns-2_vj6p7_18uio_159.awsui_grid-breakpoint-xxs_vj6p7_18uio_153 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-horizontal-borders_vj6p7_x18xx_220.awsui_grid-columns-2_vj6p7_x18xx_159.awsui_grid-breakpoint-xxs_vj6p7_x18xx_153 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-horizontal-borders_vj6p7_18uio_220.awsui_grid-columns-2_vj6p7_18uio_159.awsui_grid-breakpoint-xs_vj6p7_18uio_156 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-horizontal-borders_vj6p7_x18xx_220.awsui_grid-columns-2_vj6p7_x18xx_159.awsui_grid-breakpoint-xs_vj6p7_x18xx_156 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-horizontal-borders_vj6p7_18uio_220.awsui_grid-columns-3_vj6p7_18uio_165.awsui_grid-breakpoint-xxs_vj6p7_18uio_153 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-horizontal-borders_vj6p7_x18xx_220.awsui_grid-columns-3_vj6p7_x18xx_165.awsui_grid-breakpoint-xxs_vj6p7_x18xx_153 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-horizontal-borders_vj6p7_18uio_220.awsui_grid-columns-3_vj6p7_18uio_165.awsui_grid-breakpoint-xs_vj6p7_18uio_156 > *:not(#\9):nth-last-child(2):nth-child(3n+1) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-horizontal-borders_vj6p7_x18xx_220.awsui_grid-columns-3_vj6p7_x18xx_165.awsui_grid-breakpoint-xs_vj6p7_x18xx_156 > *:not(#\9):nth-last-child(2):nth-child(3n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-horizontal-borders_vj6p7_18uio_220.awsui_grid-columns-3_vj6p7_18uio_165.awsui_grid-breakpoint-xs_vj6p7_18uio_156 > *:not(#\9):nth-last-child(2):nth-child(3n+2) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-horizontal-borders_vj6p7_x18xx_220.awsui_grid-columns-3_vj6p7_x18xx_165.awsui_grid-breakpoint-xs_vj6p7_x18xx_156 > *:not(#\9):nth-last-child(2):nth-child(3n+2) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-horizontal-borders_vj6p7_18uio_220.awsui_grid-columns-3_vj6p7_18uio_165.awsui_grid-breakpoint-xs_vj6p7_18uio_156 > *:not(#\9):nth-last-child(3):nth-child(3n+1) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-horizontal-borders_vj6p7_x18xx_220.awsui_grid-columns-3_vj6p7_x18xx_165.awsui_grid-breakpoint-xs_vj6p7_x18xx_156 > *:not(#\9):nth-last-child(3):nth-child(3n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-horizontal-borders_vj6p7_18uio_220.awsui_grid-columns-4_vj6p7_18uio_171.awsui_grid-breakpoint-xxs_vj6p7_18uio_153 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-horizontal-borders_vj6p7_x18xx_220.awsui_grid-columns-4_vj6p7_x18xx_171.awsui_grid-breakpoint-xxs_vj6p7_x18xx_153 > *:not(#\9):nth-last-child(2):nth-child(2n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-horizontal-borders_vj6p7_18uio_220.awsui_grid-columns-4_vj6p7_18uio_171.awsui_grid-breakpoint-xs_vj6p7_18uio_156 > *:not(#\9):nth-last-child(2):nth-child(4n+1) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-horizontal-borders_vj6p7_x18xx_220.awsui_grid-columns-4_vj6p7_x18xx_171.awsui_grid-breakpoint-xs_vj6p7_x18xx_156 > *:not(#\9):nth-last-child(2):nth-child(4n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-horizontal-borders_vj6p7_18uio_220.awsui_grid-columns-4_vj6p7_18uio_171.awsui_grid-breakpoint-xs_vj6p7_18uio_156 > *:not(#\9):nth-last-child(2):nth-child(4n+2) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-horizontal-borders_vj6p7_x18xx_220.awsui_grid-columns-4_vj6p7_x18xx_171.awsui_grid-breakpoint-xs_vj6p7_x18xx_156 > *:not(#\9):nth-last-child(2):nth-child(4n+2) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-horizontal-borders_vj6p7_18uio_220.awsui_grid-columns-4_vj6p7_18uio_171.awsui_grid-breakpoint-xs_vj6p7_18uio_156 > *:not(#\9):nth-last-child(2):nth-child(4n+3) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-horizontal-borders_vj6p7_x18xx_220.awsui_grid-columns-4_vj6p7_x18xx_171.awsui_grid-breakpoint-xs_vj6p7_x18xx_156 > *:not(#\9):nth-last-child(2):nth-child(4n+3) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-horizontal-borders_vj6p7_18uio_220.awsui_grid-columns-4_vj6p7_18uio_171.awsui_grid-breakpoint-xs_vj6p7_18uio_156 > *:not(#\9):nth-last-child(3):nth-child(4n+1) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-horizontal-borders_vj6p7_x18xx_220.awsui_grid-columns-4_vj6p7_x18xx_171.awsui_grid-breakpoint-xs_vj6p7_x18xx_156 > *:not(#\9):nth-last-child(3):nth-child(4n+1) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-horizontal-borders_vj6p7_18uio_220.awsui_grid-columns-4_vj6p7_18uio_171.awsui_grid-breakpoint-xs_vj6p7_18uio_156 > *:not(#\9):nth-last-child(3):nth-child(4n+2) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-horizontal-borders_vj6p7_x18xx_220.awsui_grid-columns-4_vj6p7_x18xx_171.awsui_grid-breakpoint-xs_vj6p7_x18xx_156 > *:not(#\9):nth-last-child(3):nth-child(4n+2) {
   border-block-end-width: 0;
 }
-div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-horizontal-borders_vj6p7_18uio_220.awsui_grid-columns-4_vj6p7_18uio_171.awsui_grid-breakpoint-xs_vj6p7_18uio_156 > *:not(#\9):nth-last-child(4):nth-child(4n+1) {
+div.awsui_column-layout_vj6p7_x18xx_97 > .awsui_grid_vj6p7_x18xx_132.awsui_grid-horizontal-borders_vj6p7_x18xx_220.awsui_grid-columns-4_vj6p7_x18xx_171.awsui_grid-breakpoint-xs_vj6p7_x18xx_156 > *:not(#\9):nth-last-child(4):nth-child(4n+1) {
   border-block-end-width: 0;
 }
@@ -272,7 +272,7 @@ div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_vj6p7_18uio_274:not(#\9) {
+.awsui_root_vj6p7_x18xx_274:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -311,7 +311,7 @@ div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-
   display: block;
 }
-.awsui_tile-container_vj6p7_18uio_312:not(#\9) {
+.awsui_tile-container_vj6p7_x18xx_312:not(#\9) {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -326,118 +326,123 @@ div.awsui_column-layout_vj6p7_18uio_97 > .awsui_grid_vj6p7_18uio_132.awsui_grid-
   padding-inline: var(--space-scaled-m-er48cl, 16px);
   transition: border-color var(--motion-duration-transition-quick-j01tkg, 90ms) var(--motion-easing-transition-quick-9ktw66, linear), background-color var(--motion-duration-transition-quick-j01tkg, 90ms) var(--motion-easing-transition-quick-9ktw66, linear);
 }
-.awsui_tile-container_vj6p7_18uio_312.awsui_refresh_vj6p7_18uio_327:not(#\9) {
+.awsui_tile-container_vj6p7_x18xx_312.awsui_refresh_vj6p7_x18xx_327:not(#\9) {
   padding-block: var(--space-xs-xf5ch3, 8px);
   padding-inline: var(--space-s-2025hl, 12px);
 }
-.awsui_tile-container_vj6p7_18uio_312.awsui_has-metadata_vj6p7_18uio_331:not(#\9) {
+.awsui_tile-container_vj6p7_x18xx_312.awsui_has-metadata_vj6p7_x18xx_331:not(#\9) {
   padding-block-end: var(--space-s-2025hl, 12px);
 }
-.awsui_tile-container_vj6p7_18uio_312.awsui_has-metadata_vj6p7_18uio_331.awsui_refresh_vj6p7_18uio_327:not(#\9) {
+.awsui_tile-container_vj6p7_x18xx_312.awsui_has-metadata_vj6p7_x18xx_331.awsui_refresh_vj6p7_x18xx_327:not(#\9) {
   padding-block-end: var(--space-scaled-s-9q8n2q, 12px);
 }
-.awsui_tile-container_vj6p7_18uio_312.awsui_selected_vj6p7_18uio_337:not(#\9) {
+.awsui_tile-container_vj6p7_x18xx_312.awsui_selected_vj6p7_x18xx_337:not(#\9) {
   border-block: var(--border-field-width-yoy972, 1px) solid var(--color-border-item-selected-20gejb, #0073bb);
   border-inline: var(--border-field-width-yoy972, 1px) solid var(--color-border-item-selected-20gejb, #0073bb);
   background: var(--color-background-item-selected-dbqvjr, #f1faff);
 }
-.awsui_tile-container_vj6p7_18uio_312.awsui_disabled_vj6p7_18uio_342:not(#\9) {
+.awsui_tile-container_vj6p7_x18xx_312.awsui_disabled_vj6p7_x18xx_342:not(#\9) {
   border-block: var(--border-field-width-yoy972, 1px) solid var(--color-border-tiles-disabled-o1okbc, transparent);
   border-inline: var(--border-field-width-yoy972, 1px) solid var(--color-border-tiles-disabled-o1okbc, transparent);
   background: var(--color-background-tiles-disabled-ctqo0t, #eaeded);
 }
+.awsui_tile-container_vj6p7_x18xx_312.awsui_readonly_vj6p7_x18xx_347:not(#\9) {
+  background-color: var(--color-background-input-default-w7mbz6, #ffffff);
+  border-block: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-disabled-v8bsvq, #eaeded);
+  border-inline: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-disabled-v8bsvq, #eaeded);
+}
 @media (prefers-reduced-motion: reduce) {
-  .awsui_tile-container_vj6p7_18uio_312:not(#\9) {
+  .awsui_tile-container_vj6p7_x18xx_312:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_tile-container_vj6p7_18uio_312:not(#\9), .awsui-mode-entering .awsui_tile-container_vj6p7_18uio_312:not(#\9) {
+.awsui-motion-disabled .awsui_tile-container_vj6p7_x18xx_312:not(#\9), .awsui-mode-entering .awsui_tile-container_vj6p7_x18xx_312:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_columns_vj6p7_18uio_358:not(#\9) {
+.awsui_columns_vj6p7_x18xx_363:not(#\9) {
   display: flex;
   flex-wrap: wrap;
   margin-block: calc(var(--space-grid-gutter-fzqbbi, 20px) / -2);
   margin-inline: calc(var(--space-grid-gutter-fzqbbi, 20px) / -2);
 }
-.awsui_columns_vj6p7_18uio_358.awsui_column-1_vj6p7_18uio_364 > .awsui_tile-container_vj6p7_18uio_312:not(#\9) {
+.awsui_columns_vj6p7_x18xx_363.awsui_column-1_vj6p7_x18xx_369 > .awsui_tile-container_vj6p7_x18xx_312:not(#\9) {
   margin-block: calc(var(--space-grid-gutter-fzqbbi, 20px) / 2);
   margin-inline: calc(var(--space-grid-gutter-fzqbbi, 20px) / 2);
   box-sizing: border-box;
   flex: 0 0 calc(100% - var(--space-grid-gutter-fzqbbi, 20px));
   max-inline-size: calc(100% - var(--space-grid-gutter-fzqbbi, 20px));
 }
-.awsui_columns_vj6p7_18uio_358.awsui_column-1_vj6p7_18uio_364 > .awsui_tile-container_vj6p7_18uio_312.awsui_breakpoint-xs_vj6p7_18uio_371:not(#\9) {
+.awsui_columns_vj6p7_x18xx_363.awsui_column-1_vj6p7_x18xx_369 > .awsui_tile-container_vj6p7_x18xx_312.awsui_breakpoint-xs_vj6p7_x18xx_376:not(#\9) {
   flex: 0 0 calc(100% - var(--space-grid-gutter-fzqbbi, 20px));
   max-inline-size: calc(100% - var(--space-grid-gutter-fzqbbi, 20px));
 }
-.awsui_columns_vj6p7_18uio_358.awsui_column-1_vj6p7_18uio_364 > .awsui_tile-container_vj6p7_18uio_312.awsui_breakpoint-xxs_vj6p7_18uio_375:not(#\9) {
+.awsui_columns_vj6p7_x18xx_363.awsui_column-1_vj6p7_x18xx_369 > .awsui_tile-container_vj6p7_x18xx_312.awsui_breakpoint-xxs_vj6p7_x18xx_380:not(#\9) {
   flex: 0 0 calc(100% - var(--space-grid-gutter-fzqbbi, 20px));
   max-inline-size: calc(100% - var(--space-grid-gutter-fzqbbi, 20px));
 }
-.awsui_columns_vj6p7_18uio_358.awsui_column-2_vj6p7_18uio_379 > .awsui_tile-container_vj6p7_18uio_312:not(#\9) {
+.awsui_columns_vj6p7_x18xx_363.awsui_column-2_vj6p7_x18xx_384 > .awsui_tile-container_vj6p7_x18xx_312:not(#\9) {
   margin-block: calc(var(--space-grid-gutter-fzqbbi, 20px) / 2);
   margin-inline: calc(var(--space-grid-gutter-fzqbbi, 20px) / 2);
   box-sizing: border-box;
   flex: 0 0 calc(100% - var(--space-grid-gutter-fzqbbi, 20px));
   max-inline-size: calc(100% - var(--space-grid-gutter-fzqbbi, 20px));
 }
-.awsui_columns_vj6p7_18uio_358.awsui_column-2_vj6p7_18uio_379 > .awsui_tile-container_vj6p7_18uio_312.awsui_breakpoint-xs_vj6p7_18uio_371:not(#\9) {
+.awsui_columns_vj6p7_x18xx_363.awsui_column-2_vj6p7_x18xx_384 > .awsui_tile-container_vj6p7_x18xx_312.awsui_breakpoint-xs_vj6p7_x18xx_376:not(#\9) {
   flex: 0 0 calc(50% - var(--space-grid-gutter-fzqbbi, 20px));
   max-inline-size: calc(50% - var(--space-grid-gutter-fzqbbi, 20px));
 }
-.awsui_columns_vj6p7_18uio_358.awsui_column-2_vj6p7_18uio_379 > .awsui_tile-container_vj6p7_18uio_312.awsui_breakpoint-xxs_vj6p7_18uio_375:not(#\9) {
+.awsui_columns_vj6p7_x18xx_363.awsui_column-2_vj6p7_x18xx_384 > .awsui_tile-container_vj6p7_x18xx_312.awsui_breakpoint-xxs_vj6p7_x18xx_380:not(#\9) {
   flex: 0 0 calc(50% - var(--space-grid-gutter-fzqbbi, 20px));
   max-inline-size: calc(50% - var(--space-grid-gutter-fzqbbi, 20px));
 }
-.awsui_columns_vj6p7_18uio_358.awsui_column-3_vj6p7_18uio_394 > .awsui_tile-container_vj6p7_18uio_312:not(#\9) {
+.awsui_columns_vj6p7_x18xx_363.awsui_column-3_vj6p7_x18xx_399 > .awsui_tile-container_vj6p7_x18xx_312:not(#\9) {
   margin-block: calc(var(--space-grid-gutter-fzqbbi, 20px) / 2);
   margin-inline: calc(var(--space-grid-gutter-fzqbbi, 20px) / 2);
   box-sizing: border-box;
   flex: 0 0 calc(100% - var(--space-grid-gutter-fzqbbi, 20px));
   max-inline-size: calc(100% - var(--space-grid-gutter-fzqbbi, 20px));
 }
-.awsui_columns_vj6p7_18uio_358.awsui_column-3_vj6p7_18uio_394 > .awsui_tile-container_vj6p7_18uio_312.awsui_breakpoint-xs_vj6p7_18uio_371:not(#\9) {
+.awsui_columns_vj6p7_x18xx_363.awsui_column-3_vj6p7_x18xx_399 > .awsui_tile-container_vj6p7_x18xx_312.awsui_breakpoint-xs_vj6p7_x18xx_376:not(#\9) {
   flex: 0 0 calc(33.3333333333% - var(--space-grid-gutter-fzqbbi, 20px));
   max-inline-size: calc(33.3333333333% - var(--space-grid-gutter-fzqbbi, 20px));
 }
-.awsui_columns_vj6p7_18uio_358.awsui_column-3_vj6p7_18uio_394 > .awsui_tile-container_vj6p7_18uio_312.awsui_breakpoint-xxs_vj6p7_18uio_375:not(#\9) {
+.awsui_columns_vj6p7_x18xx_363.awsui_column-3_vj6p7_x18xx_399 > .awsui_tile-container_vj6p7_x18xx_312.awsui_breakpoint-xxs_vj6p7_x18xx_380:not(#\9) {
   flex: 0 0 calc(50% - var(--space-grid-gutter-fzqbbi, 20px));
   max-inline-size: calc(50% - var(--space-grid-gutter-fzqbbi, 20px));
 }
-.awsui_columns_vj6p7_18uio_358.awsui_column-4_vj6p7_18uio_409 > .awsui_tile-container_vj6p7_18uio_312:not(#\9) {
+.awsui_columns_vj6p7_x18xx_363.awsui_column-4_vj6p7_x18xx_414 > .awsui_tile-container_vj6p7_x18xx_312:not(#\9) {
   margin-block: calc(var(--space-grid-gutter-fzqbbi, 20px) / 2);
   margin-inline: calc(var(--space-grid-gutter-fzqbbi, 20px) / 2);
   box-sizing: border-box;
   flex: 0 0 calc(100% - var(--space-grid-gutter-fzqbbi, 20px));
   max-inline-size: calc(100% - var(--space-grid-gutter-fzqbbi, 20px));
 }
-.awsui_columns_vj6p7_18uio_358.awsui_column-4_vj6p7_18uio_409 > .awsui_tile-container_vj6p7_18uio_312.awsui_breakpoint-xs_vj6p7_18uio_371:not(#\9) {
+.awsui_columns_vj6p7_x18xx_363.awsui_column-4_vj6p7_x18xx_414 > .awsui_tile-container_vj6p7_x18xx_312.awsui_breakpoint-xs_vj6p7_x18xx_376:not(#\9) {
   flex: 0 0 calc(25% - var(--space-grid-gutter-fzqbbi, 20px));
   max-inline-size: calc(25% - var(--space-grid-gutter-fzqbbi, 20px));
 }
-.awsui_columns_vj6p7_18uio_358.awsui_column-4_vj6p7_18uio_409 > .awsui_tile-container_vj6p7_18uio_312.awsui_breakpoint-xxs_vj6p7_18uio_375:not(#\9) {
+.awsui_columns_vj6p7_x18xx_363.awsui_column-4_vj6p7_x18xx_414 > .awsui_tile-container_vj6p7_x18xx_312.awsui_breakpoint-xxs_vj6p7_x18xx_380:not(#\9) {
   flex: 0 0 calc(50% - var(--space-grid-gutter-fzqbbi, 20px));
   max-inline-size: calc(50% - var(--space-grid-gutter-fzqbbi, 20px));
 }
-.awsui_control_vj6p7_18uio_425:not(#\9) {
+.awsui_control_vj6p7_x18xx_430:not(#\9) {
   flex-grow: 1;
   margin-block-end: var(--space-s-2025hl, 12px);
 }
-.awsui_control_vj6p7_18uio_425.awsui_no-image_vj6p7_18uio_429:not(#\9) {
+.awsui_control_vj6p7_x18xx_430.awsui_no-image_vj6p7_x18xx_434:not(#\9) {
   margin-block-end: 0;
 }
-.awsui_image_vj6p7_18uio_433:not(#\9) {
+.awsui_image_vj6p7_x18xx_438:not(#\9) {
   text-align: center;
 }
-.awsui_image_vj6p7_18uio_433 > img:not(#\9) {
+.awsui_image_vj6p7_x18xx_438 > img:not(#\9) {
   max-inline-size: 100%;
 }
-.awsui_image_vj6p7_18uio_433.awsui_disabled_vj6p7_18uio_342 > img:not(#\9) {
+.awsui_image_vj6p7_x18xx_438.awsui_disabled_vj6p7_x18xx_342 > img:not(#\9) {
   opacity: 0.3;
 }

package/lib/internal/template/tiles/styles.selectors.js CHANGED Viewed

@@ -2,34 +2,35 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "column-layout": "awsui_column-layout_vj6p7_18uio_97",
-  "grid": "awsui_grid_vj6p7_18uio_132",
-  "grid-no-gutters": "awsui_grid-no-gutters_vj6p7_18uio_138",
-  "grid-variant-text-grid": "awsui_grid-variant-text-grid_vj6p7_18uio_142",
-  "grid-breakpoint-default": "awsui_grid-breakpoint-default_vj6p7_18uio_150",
-  "grid-columns-1": "awsui_grid-columns-1_vj6p7_18uio_153",
-  "grid-breakpoint-xxs": "awsui_grid-breakpoint-xxs_vj6p7_18uio_153",
-  "grid-breakpoint-xs": "awsui_grid-breakpoint-xs_vj6p7_18uio_156",
-  "grid-columns-2": "awsui_grid-columns-2_vj6p7_18uio_159",
-  "grid-columns-3": "awsui_grid-columns-3_vj6p7_18uio_165",
-  "grid-columns-4": "awsui_grid-columns-4_vj6p7_18uio_171",
-  "grid-vertical-borders": "awsui_grid-vertical-borders_vj6p7_18uio_187",
-  "grid-horizontal-borders": "awsui_grid-horizontal-borders_vj6p7_18uio_220",
-  "root": "awsui_root_vj6p7_18uio_274",
-  "tile-container": "awsui_tile-container_vj6p7_18uio_312",
-  "refresh": "awsui_refresh_vj6p7_18uio_327",
-  "has-metadata": "awsui_has-metadata_vj6p7_18uio_331",
-  "selected": "awsui_selected_vj6p7_18uio_337",
-  "disabled": "awsui_disabled_vj6p7_18uio_342",
-  "columns": "awsui_columns_vj6p7_18uio_358",
-  "column-1": "awsui_column-1_vj6p7_18uio_364",
-  "breakpoint-xs": "awsui_breakpoint-xs_vj6p7_18uio_371",
-  "breakpoint-xxs": "awsui_breakpoint-xxs_vj6p7_18uio_375",
-  "column-2": "awsui_column-2_vj6p7_18uio_379",
-  "column-3": "awsui_column-3_vj6p7_18uio_394",
-  "column-4": "awsui_column-4_vj6p7_18uio_409",
-  "control": "awsui_control_vj6p7_18uio_425",
-  "no-image": "awsui_no-image_vj6p7_18uio_429",
-  "image": "awsui_image_vj6p7_18uio_433"
+  "column-layout": "awsui_column-layout_vj6p7_x18xx_97",
+  "grid": "awsui_grid_vj6p7_x18xx_132",
+  "grid-no-gutters": "awsui_grid-no-gutters_vj6p7_x18xx_138",
+  "grid-variant-text-grid": "awsui_grid-variant-text-grid_vj6p7_x18xx_142",
+  "grid-breakpoint-default": "awsui_grid-breakpoint-default_vj6p7_x18xx_150",
+  "grid-columns-1": "awsui_grid-columns-1_vj6p7_x18xx_153",
+  "grid-breakpoint-xxs": "awsui_grid-breakpoint-xxs_vj6p7_x18xx_153",
+  "grid-breakpoint-xs": "awsui_grid-breakpoint-xs_vj6p7_x18xx_156",
+  "grid-columns-2": "awsui_grid-columns-2_vj6p7_x18xx_159",
+  "grid-columns-3": "awsui_grid-columns-3_vj6p7_x18xx_165",
+  "grid-columns-4": "awsui_grid-columns-4_vj6p7_x18xx_171",
+  "grid-vertical-borders": "awsui_grid-vertical-borders_vj6p7_x18xx_187",
+  "grid-horizontal-borders": "awsui_grid-horizontal-borders_vj6p7_x18xx_220",
+  "root": "awsui_root_vj6p7_x18xx_274",
+  "tile-container": "awsui_tile-container_vj6p7_x18xx_312",
+  "refresh": "awsui_refresh_vj6p7_x18xx_327",
+  "has-metadata": "awsui_has-metadata_vj6p7_x18xx_331",
+  "selected": "awsui_selected_vj6p7_x18xx_337",
+  "disabled": "awsui_disabled_vj6p7_x18xx_342",
+  "readonly": "awsui_readonly_vj6p7_x18xx_347",
+  "columns": "awsui_columns_vj6p7_x18xx_363",
+  "column-1": "awsui_column-1_vj6p7_x18xx_369",
+  "breakpoint-xs": "awsui_breakpoint-xs_vj6p7_x18xx_376",
+  "breakpoint-xxs": "awsui_breakpoint-xxs_vj6p7_x18xx_380",
+  "column-2": "awsui_column-2_vj6p7_x18xx_384",
+  "column-3": "awsui_column-3_vj6p7_x18xx_399",
+  "column-4": "awsui_column-4_vj6p7_x18xx_414",
+  "control": "awsui_control_vj6p7_x18xx_430",
+  "no-image": "awsui_no-image_vj6p7_x18xx_434",
+  "image": "awsui_image_vj6p7_x18xx_438"
 };

package/lib/internal/template/tiles/tile.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ interface TileProps {
     name: string;
     breakpoint: ReturnType<typeof useContainerBreakpoints>[0];
     onChange: TilesProps['onChange'];
+    readOnly?: boolean;
 }
 export declare const Tile: React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/lib/internal/template/tiles/tile.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tile.d.ts","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAK9E,UAAU,SAAS;IACjB,IAAI,EAAE,UAAU,CAAC,eAAe,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;~~CAClC~~;AAED,eAAO,MAAM,IAAI,~~oFA4ChB~~,CAAC"}
1	+ {"version":3,"file":"tile.d.ts","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAK9E,UAAU,SAAS;IACjB,IAAI,EAAE,UAAU,CAAC,eAAe,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,IAAI,oFA8ChB,CAAC"}

package/lib/internal/template/tiles/tile.js CHANGED Viewed

@@ -7,13 +7,13 @@ import styles from './styles.css.js';
 import { fireNonCancelableEvent } from '../internal/events';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
-export const Tile = React.forwardRef(({ item, selected, name, breakpoint, onChange }, forwardedRef) => {
+export const Tile = React.forwardRef(({ item, selected, name, breakpoint, onChange, readOnly }, forwardedRef) => {
     const internalRef = useRef(null);
     const isVisualRefresh = useVisualRefresh();
     const mergedRef = useMergeRefs(internalRef, forwardedRef);
-    return (React.createElement("div", { className: clsx(styles['tile-container'], { [styles['has-metadata']]: item.description || item.image }, { [styles.selected]: selected }, { [styles.disabled]: !!item.disabled }, { [styles.refresh]: isVisualRefresh }, styles[`breakpoint-${breakpoint}`]), "data-value": item.value, onClick: () => {
+    return (React.createElement("div", { className: clsx(styles['tile-container'], { [styles['has-metadata']]: item.description || item.image }, { [styles.selected]: selected }, { [styles.disabled]: !!item.disabled }, { [styles.readonly]: readOnly }, { [styles.refresh]: isVisualRefresh }, styles[`breakpoint-${breakpoint}`]), "data-value": item.value, onClick: () => {
             var _a;
-            if (item.disabled) {
+            if (item.disabled || readOnly) {
                 return;
             }
             (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -22,7 +22,7 @@ export const Tile = React.forwardRef(({ item, selected, name, breakpoint, onChan
             }
         } },
         React.createElement("div", { className: clsx(styles.control, { [styles['no-image']]: !item.image }) },
-            React.createElement(RadioButton, { checked: selected, ref: mergedRef, name: name, value: item.value, label: item.label, description: item.description, disabled: item.disabled, controlId: item.controlId })),
+            React.createElement(RadioButton, { checked: selected, ref: mergedRef, name: name, value: item.value, label: item.label, description: item.description, disabled: item.disabled, controlId: item.controlId, readOnly: readOnly })),
         item.image && React.createElement("div", { className: clsx(styles.image, { [styles.disabled]: !!item.disabled }) }, item.image)));
 });
 //# sourceMappingURL=tile.js.map

package/lib/internal/template/tiles/tile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;~~AAUrE~~,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAa,EAAE,YAAyC,EAAE,EAAE;~~IACvG~~,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACnD,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAE3C,MAAM,SAAS,GAAG,YAAY,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;IAE1D,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,gBAAgB,CAAC,EACxB,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,EAC5D,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAC/B,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,EACtC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,eAAe,EAAE,EACrC,MAAM,CAAC,cAAc,UAAU,EAAE,CAAC,CACnC,gBACW,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,GAAG,EAAE;;YACZ,IAAI,IAAI,CAAC,QAAQ,EAAE;~~gBACjB~~,OAAO;aACR;YACD,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YAC7B,IAAI,CAAC,QAAQ,EAAE;gBACb,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;aACzD;QACH,CAAC;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YACzE,oBAAC,WAAW,IACV,OAAO,EAAE,QAAQ,EACjB,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,~~GACzB~~,CACE;QACL,IAAI,CAAC,KAAK,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAG,IAAI,CAAC,KAAK,CAAO,CACzG,CACP,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\n\nimport { TilesProps } from './interfaces';\nimport RadioButton from '../radio-group/radio-button';\nimport styles from './styles.css.js';\n\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\ninterface TileProps {\n item: TilesProps.TilesDefinition;\n selected: boolean;\n name: string;\n breakpoint: ReturnType<typeof useContainerBreakpoints>[0];\n onChange: TilesProps['onChange'];\n}\n\nexport const Tile = React.forwardRef(\n ({ item, selected, name, breakpoint, onChange }: TileProps, forwardedRef: React.Ref<HTMLInputElement>) => {\n const internalRef = useRef<HTMLInputElement>(null);\n const isVisualRefresh = useVisualRefresh();\n\n const mergedRef = useMergeRefs(internalRef, forwardedRef);\n\n return (\n <div\n className={clsx(\n styles['tile-container'],\n { [styles['has-metadata']]: item.description \|\| item.image },\n { [styles.selected]: selected },\n { [styles.disabled]: !!item.disabled },\n { [styles.refresh]: isVisualRefresh },\n styles[`breakpoint-${breakpoint}`]\n )}\n data-value={item.value}\n onClick={() => {\n if (item.disabled) {\n return;\n }\n internalRef.current?.focus();\n if (!selected) {\n fireNonCancelableEvent(onChange, { value: item.value });\n }\n }}\n >\n <div className={clsx(styles.control, { [styles['no-image']]: !item.image })}>\n <RadioButton\n checked={selected}\n ref={mergedRef}\n name={name}\n value={item.value}\n label={item.label}\n description={item.description}\n disabled={item.disabled}\n controlId={item.controlId}\n />\n </div>\n {item.image && <div className={clsx(styles.image, { [styles.disabled]: !!item.disabled })}>{item.image}</div>}\n </div>\n );\n }\n);\n"]}
1	+ {"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAWrE,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAa,EAAE,YAAyC,EAAE,EAAE;IACjH,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACnD,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAE3C,MAAM,SAAS,GAAG,YAAY,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;IAE1D,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,gBAAgB,CAAC,EACxB,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,EAC5D,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAC/B,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,EACtC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAC/B,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,eAAe,EAAE,EACrC,MAAM,CAAC,cAAc,UAAU,EAAE,CAAC,CACnC,gBACW,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,GAAG,EAAE;;YACZ,IAAI,IAAI,CAAC,QAAQ,IAAI,QAAQ,EAAE;gBAC7B,OAAO;aACR;YACD,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YAC7B,IAAI,CAAC,QAAQ,EAAE;gBACb,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;aACzD;QACH,CAAC;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YACzE,oBAAC,WAAW,IACV,OAAO,EAAE,QAAQ,EACjB,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,QAAQ,GAClB,CACE;QACL,IAAI,CAAC,KAAK,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAG,IAAI,CAAC,KAAK,CAAO,CACzG,CACP,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\n\nimport { TilesProps } from './interfaces';\nimport RadioButton from '../radio-group/radio-button';\nimport styles from './styles.css.js';\n\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\ninterface TileProps {\n item: TilesProps.TilesDefinition;\n selected: boolean;\n name: string;\n breakpoint: ReturnType<typeof useContainerBreakpoints>[0];\n onChange: TilesProps['onChange'];\n readOnly?: boolean;\n}\n\nexport const Tile = React.forwardRef(\n ({ item, selected, name, breakpoint, onChange, readOnly }: TileProps, forwardedRef: React.Ref<HTMLInputElement>) => {\n const internalRef = useRef<HTMLInputElement>(null);\n const isVisualRefresh = useVisualRefresh();\n\n const mergedRef = useMergeRefs(internalRef, forwardedRef);\n\n return (\n <div\n className={clsx(\n styles['tile-container'],\n { [styles['has-metadata']]: item.description \|\| item.image },\n { [styles.selected]: selected },\n { [styles.disabled]: !!item.disabled },\n { [styles.readonly]: readOnly },\n { [styles.refresh]: isVisualRefresh },\n styles[`breakpoint-${breakpoint}`]\n )}\n data-value={item.value}\n onClick={() => {\n if (item.disabled \|\| readOnly) {\n return;\n }\n internalRef.current?.focus();\n if (!selected) {\n fireNonCancelableEvent(onChange, { value: item.value });\n }\n }}\n >\n <div className={clsx(styles.control, { [styles['no-image']]: !item.image })}>\n <RadioButton\n checked={selected}\n ref={mergedRef}\n name={name}\n value={item.value}\n label={item.label}\n description={item.description}\n disabled={item.disabled}\n controlId={item.controlId}\n readOnly={readOnly}\n />\n </div>\n {item.image && <div className={clsx(styles.image, { [styles.disabled]: !!item.disabled })}>{item.image}</div>}\n </div>\n );\n }\n);\n"]}

package/lib/internal/template/toggle/internal.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,QAAA,MAAM,cAAc,~~uHAwEnB~~,CAAC;AAEF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,QAAA,MAAM,cAAc,uHA6EnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/internal/template/toggle/internal.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { getBaseProps } from '../internal/base-component';
 import styles from './styles.css.js';
 import { useFormFieldContext } from '../internal/context/form-field-context';
 const InternalToggle = React.forwardRef((_a, ref) => {
-    var { controlId, checked, name, disabled, children, description, ariaLabel, ariaControls, onFocus, onBlur, onChange, __internalRootRef = null } = _a, rest = __rest(_a, ["controlId", "checked", "name", "disabled", "children", "description", "ariaLabel", "ariaControls", "onFocus", "onBlur", "onChange", "__internalRootRef"]);
+    var { controlId, checked, name, disabled, readOnly, children, description, ariaLabel, ariaControls, onFocus, onBlur, onChange, __internalRootRef = null } = _a, rest = __rest(_a, ["controlId", "checked", "name", "disabled", "readOnly", "children", "description", "ariaLabel", "ariaControls", "onFocus", "onBlur", "onChange", "__internalRootRef"]);
     const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);
     const baseProps = getBaseProps(rest);
     const checkboxRef = useRef(null);
@@ -18,7 +18,8 @@ const InternalToggle = React.forwardRef((_a, ref) => {
     return (React.createElement(AbstractSwitch, Object.assign({}, baseProps, { className: clsx(styles.root, baseProps.className), controlClassName: clsx(styles['toggle-control'], {
             [styles['toggle-control-checked']]: checked,
             [styles['toggle-control-disabled']]: disabled,
-        }), outlineClassName: styles.outline, controlId: controlId, disabled: disabled, label: children, description: description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, ariaControls: ariaControls, nativeControl: nativeControlProps => (React.createElement("input", Object.assign({}, nativeControlProps, { ref: checkboxRef, type: "checkbox", checked: checked, name: name, onFocus: () => fireNonCancelableEvent(onFocus), onBlur: () => fireNonCancelableEvent(onBlur),
+            [styles['toggle-control-readonly']]: readOnly,
+        }), outlineClassName: styles.outline, controlId: controlId, disabled: disabled, readOnly: readOnly, label: children, description: description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, ariaControls: ariaControls, nativeControl: nativeControlProps => (React.createElement("input", Object.assign({}, nativeControlProps, { ref: checkboxRef, type: "checkbox", checked: checked, name: name, "aria-disabled": readOnly && !disabled ? 'true' : undefined, onFocus: () => fireNonCancelableEvent(onFocus), onBlur: () => fireNonCancelableEvent(onBlur),
             // empty handler to suppress React controllability warning
             onChange: () => { } }))), onClick: () => {
             var _a;
@@ -29,6 +30,7 @@ const InternalToggle = React.forwardRef((_a, ref) => {
         React.createElement("span", { className: clsx(styles['toggle-handle'], {
                 [styles['toggle-handle-checked']]: checked,
                 [styles['toggle-handle-disabled']]: disabled,
+                [styles['toggle-handle-readonly']]: readOnly,
             }) }), __internalRootRef: __internalRootRef })));
 });
 export default InternalToggle;

package/lib/internal/template/toggle/internal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,cAAc,MAAM,wCAAwC,CAAC;AACpE,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAI7E,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CACrC,CACE,~~EAcC~~,EACD,GAAG,EACH,EAAE;~~QAhBF~~,EACE,SAAS,EACT,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,SAAS,EACT,YAAY,EACZ,OAAO,EACP,MAAM,EACN,QAAQ,EACR,iBAAiB,GAAG,IAAI,OAEzB,EADI,IAAI,~~cAbT~~,~~0JAcC~~,CADQ;IAIT,MAAM,EAAE,eAAe,EAAE,cAAc,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;IACtE,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACnD,eAAe,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;IAElC,OAAO,CACL,oBAAC,cAAc,oBACT,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,EACjD,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE;YAC/C,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,OAAO;YAC3C,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,QAAQ;SAC9C,CAAC,EACF,gBAAgB,EAAE,MAAM,CAAC,OAAO,EAChC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,QAAQ,EACf,WAAW,EAAE,WAAW,EACxB,wBAAwB,EAAE,IAAI,EAC9B,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,kBAAkB,CAAC,EAAE,CAAC,CACnC,+CACM,kBAAkB,IACtB,GAAG,EAAE,WAAW,EAChB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,~~EACV~~,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAC9C,MAAM,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,MAAM,CAAC;YAC5C,0DAA0D;YAC1D,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,IAClB,CACH,EACD,OAAO,EAAE,GAAG,EAAE;;YACZ,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YAC7B,sBAAsB,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;QAC1D,CAAC,EACD,aAAa;QACX,yCAAyC;QACzC,8BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE;gBACvC,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,OAAO;gBAC1C,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,QAAQ;aAC7C,CAAC,GACF,EAEJ,iBAAiB,EAAE,iBAAiB,IACpC,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport styles from './styles.css.js';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { ToggleProps } from './interfaces';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\n\ntype InternalToggleProps = ToggleProps & InternalBaseComponentProps;\n\nconst InternalToggle = React.forwardRef<ToggleProps.Ref, InternalToggleProps>(\n (\n {\n controlId,\n checked,\n name,\n disabled,\n children,\n description,\n ariaLabel,\n ariaControls,\n onFocus,\n onBlur,\n onChange,\n __internalRootRef = null,\n ...rest\n },\n ref\n ) => {\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n const baseProps = getBaseProps(rest);\n const checkboxRef = useRef<HTMLInputElement>(null);\n useForwardFocus(ref, checkboxRef);\n\n return (\n <AbstractSwitch\n {...baseProps}\n className={clsx(styles.root, baseProps.className)}\n controlClassName={clsx(styles['toggle-control'], {\n [styles['toggle-control-checked']]: checked,\n [styles['toggle-control-disabled']]: disabled,\n })}\n outlineClassName={styles.outline}\n controlId={controlId}\n disabled={disabled}\n label={children}\n description={description}\n descriptionBottomPadding={true}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n ariaControls={ariaControls}\n nativeControl={nativeControlProps => (\n <input\n {...nativeControlProps}\n ref={checkboxRef}\n type=\"checkbox\"\n checked={checked}\n name={name}\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 })}\n />\n }\n __internalRootRef={__internalRootRef}\n />\n );\n }\n);\n\nexport default InternalToggle;\n"]}
1	+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/toggle/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,cAAc,MAAM,wCAAwC,CAAC;AACpE,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAI7E,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CACrC,CACE,EAeC,EACD,GAAG,EACH,EAAE;QAjBF,EACE,SAAS,EACT,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,SAAS,EACT,YAAY,EACZ,OAAO,EACP,MAAM,EACN,QAAQ,EACR,iBAAiB,GAAG,IAAI,OAEzB,EADI,IAAI,cAdT,sKAeC,CADQ;IAIT,MAAM,EAAE,eAAe,EAAE,cAAc,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;IACtE,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACnD,eAAe,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;IAElC,OAAO,CACL,oBAAC,cAAc,oBACT,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,EACjD,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE;YAC/C,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,OAAO;YAC3C,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,QAAQ;YAC7C,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,QAAQ;SAC9C,CAAC,EACF,gBAAgB,EAAE,MAAM,CAAC,OAAO,EAChC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,QAAQ,EACf,WAAW,EAAE,WAAW,EACxB,wBAAwB,EAAE,IAAI,EAC9B,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,kBAAkB,CAAC,EAAE,CAAC,CACnC,+CACM,kBAAkB,IACtB,GAAG,EAAE,WAAW,EAChB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,mBACK,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACzD,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAC9C,MAAM,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,MAAM,CAAC;YAC5C,0DAA0D;YAC1D,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,IAClB,CACH,EACD,OAAO,EAAE,GAAG,EAAE;;YACZ,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YAC7B,sBAAsB,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;QAC1D,CAAC,EACD,aAAa;QACX,yCAAyC;QACzC,8BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE;gBACvC,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,OAAO;gBAC1C,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,QAAQ;gBAC5C,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,QAAQ;aAC7C,CAAC,GACF,EAEJ,iBAAiB,EAAE,iBAAiB,IACpC,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport styles from './styles.css.js';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { ToggleProps } from './interfaces';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\n\ntype InternalToggleProps = ToggleProps & InternalBaseComponentProps;\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 __internalRootRef = null,\n ...rest\n },\n ref\n ) => {\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n const baseProps = getBaseProps(rest);\n const checkboxRef = useRef<HTMLInputElement>(null);\n useForwardFocus(ref, checkboxRef);\n\n return (\n <AbstractSwitch\n {...baseProps}\n className={clsx(styles.root, baseProps.className)}\n controlClassName={clsx(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 description={description}\n descriptionBottomPadding={true}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n ariaControls={ariaControls}\n nativeControl={nativeControlProps => (\n <input\n {...nativeControlProps}\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 />\n }\n __internalRootRef={__internalRootRef}\n />\n );\n }\n);\n\nexport default InternalToggle;\n"]}

package/lib/internal/template/toggle/styles.css.js CHANGED Viewed

@@ -1,13 +1,15 @@
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_4yi2u_kayyg_97",
-  "outline": "awsui_outline_4yi2u_kayyg_133",
-  "toggle-control": "awsui_toggle-control_4yi2u_kayyg_155",
-  "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_kayyg_168",
-  "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_kayyg_171",
-  "toggle-handle": "awsui_toggle-handle_4yi2u_kayyg_178",
-  "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_kayyg_193",
-  "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_kayyg_200"
+  "root": "awsui_root_4yi2u_1qca0_97",
+  "outline": "awsui_outline_4yi2u_1qca0_133",
+  "toggle-control": "awsui_toggle-control_4yi2u_1qca0_155",
+  "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_1qca0_168",
+  "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_1qca0_171",
+  "toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_1qca0_177",
+  "toggle-handle": "awsui_toggle-handle_4yi2u_1qca0_181",
+  "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_1qca0_196",
+  "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_1qca0_203",
+  "toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_1qca0_207"
 };