@cloudscape-design/components 3.0.670 → 3.0.672

package/slider/styles.scoped.css

@@ -98,7 +98,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
 */
-.awsui_root_pcgz5_2titt_101:not(#\9) {
+.awsui_root_pcgz5_7y2du_101:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -139,11 +139,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline: calc(var(--space-m-udix3p, 16px) / 2);
 }
 
-.awsui_slider_pcgz5_2titt_141:not(#\9) {
+.awsui_slider_pcgz5_7y2du_141:not(#\9) {
   display: flex;
   align-items: center;
 }
-.awsui_slider-track_pcgz5_2titt_145:not(#\9), .awsui_slider-range_pcgz5_2titt_145:not(#\9) {
+.awsui_slider-track_pcgz5_7y2du_145:not(#\9), .awsui_slider-range_pcgz5_7y2du_145:not(#\9) {
   position: absolute;
   border-start-start-radius: 3px;
   border-start-end-radius: 3px;
@@ -152,63 +152,75 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-start: var(--space-xs-zb16t3, 8px);
   margin-inline: calc(var(--space-m-udix3p, 16px) / -2);
 }
-.awsui_slider-track_pcgz5_2titt_145:not(#\9) {
+.awsui_slider-track_pcgz5_7y2du_145.awsui_readonly_pcgz5_7y2du_154:not(#\9):not(.awsui_slider-track_pcgz5_7y2du_145.awsui_disabled_pcgz5_7y2du_154, .awsui_slider-range_pcgz5_7y2du_145.awsui_disabled_pcgz5_7y2du_154), .awsui_slider-range_pcgz5_7y2du_145.awsui_readonly_pcgz5_7y2du_154:not(#\9):not(.awsui_slider-track_pcgz5_7y2du_145.awsui_disabled_pcgz5_7y2du_154, .awsui_slider-range_pcgz5_7y2du_145.awsui_disabled_pcgz5_7y2du_154) {
+  margin-inline: calc(var(--space-s-34lx8l, 12px) / -2);
+}
+.awsui_slider-track_pcgz5_7y2du_145:not(#\9) {
   background-color: var(--color-background-slider-track-3m68rn, #7d8998);
   inline-size: calc(100% + var(--space-m-udix3p, 16px));
   block-size: 2px;
   cursor: pointer;
 }
-.awsui_slider-track_pcgz5_2titt_145.awsui_disabled_pcgz5_2titt_160:not(#\9) {
+.awsui_slider-track_pcgz5_7y2du_145.awsui_disabled_pcgz5_7y2du_154:not(#\9) {
+  cursor: default;
+  background-color: var(--color-background-control-disabled-pwkvgd, #d1d5db);
+}
+.awsui_slider-track_pcgz5_7y2du_145.awsui_readonly_pcgz5_7y2du_154:not(#\9):not(.awsui_slider-track_pcgz5_7y2du_145.awsui_disabled_pcgz5_7y2du_154) {
   cursor: default;
   background-color: var(--color-background-control-disabled-pwkvgd, #d1d5db);
+  inline-size: calc(100% + var(--space-s-34lx8l, 12px));
 }
-.awsui_slider-range_pcgz5_2titt_145:not(#\9) {
+.awsui_slider-range_pcgz5_7y2du_145:not(#\9) {
   background-color: var(--color-background-slider-handle-default-atrlod, #0972d3);
   block-size: 4px;
   inline-size: calc(var(--awsui-slider-range-inline-size-9rhwr5) + var(--space-m-udix3p, 16px));
 }
-.awsui_slider-range_pcgz5_2titt_145.awsui_error_pcgz5_2titt_169:not(#\9) {
+.awsui_slider-range_pcgz5_7y2du_145.awsui_error_pcgz5_7y2du_177:not(#\9) {
   background-color: var(--color-text-status-error-wdvepn, #d91515);
 }
-.awsui_slider-range_pcgz5_2titt_145.awsui_warning_pcgz5_2titt_172:not(#\9) {
+.awsui_slider-range_pcgz5_7y2du_145.awsui_warning_pcgz5_7y2du_180:not(#\9) {
   background-color: var(--color-text-status-warning-yik8vi, #8d6605);
 }
-.awsui_slider-range_pcgz5_2titt_145.awsui_active_pcgz5_2titt_175:not(#\9) {
+.awsui_slider-range_pcgz5_7y2du_145.awsui_active_pcgz5_7y2du_183:not(#\9) {
   background-color: var(--color-background-slider-handle-active-ccegzg, #065299);
 }
-.awsui_slider-range_pcgz5_2titt_145.awsui_error-active_pcgz5_2titt_178:not(#\9) {
+.awsui_slider-range_pcgz5_7y2du_145.awsui_error-active_pcgz5_7y2du_186:not(#\9) {
   background-color: var(--color-background-slider-error-pressed-g7oqnt, #7c2718);
 }
-.awsui_slider-range_pcgz5_2titt_145.awsui_warning-active_pcgz5_2titt_181:not(#\9) {
+.awsui_slider-range_pcgz5_7y2du_145.awsui_warning-active_pcgz5_7y2du_189:not(#\9) {
   background-color: var(--color-background-slider-warning-pressed-9xuhwf, #8d6605);
 }
-.awsui_slider-range_pcgz5_2titt_145.awsui_disabled_pcgz5_2titt_160:not(#\9) {
+.awsui_slider-range_pcgz5_7y2du_145.awsui_disabled_pcgz5_7y2du_154:not(#\9) {
   background-color: var(--color-background-control-disabled-pwkvgd, #d1d5db);
 }
+.awsui_slider-range_pcgz5_7y2du_145.awsui_readonly_pcgz5_7y2du_154:not(#\9):not(.awsui_slider-range_pcgz5_7y2du_145.awsui_disabled_pcgz5_7y2du_154) {
+  inline-size: calc(var(--awsui-slider-range-inline-size-9rhwr5) + var(--space-s-34lx8l, 12px));
+  background-color: var(--color-foreground-control-read-only-ibiswj, #5f6b7a);
+}
 
-.awsui_labels_pcgz5_2titt_188:not(#\9) {
+.awsui_labels_pcgz5_7y2du_200:not(#\9) {
   display: grid;
   grid-template-columns: 3fr repeat(calc((var(--awsui-slider-label-count-9rhwr5) - 2) / 2 + (var(--awsui-slider-label-count-9rhwr5) - 2) / 2 - 1), 2fr) 3fr;
   grid-auto-rows: 100%;
   padding-block-start: var(--space-m-udix3p, 16px);
 }
-.awsui_labels-noref_pcgz5_2titt_194:not(#\9) {
+.awsui_labels-noref_pcgz5_7y2du_206:not(#\9) {
   grid-template-columns: 1fr 1fr;
 }
-.awsui_labels-reference_pcgz5_2titt_197:not(#\9) {
+.awsui_labels-reference_pcgz5_7y2du_209:not(#\9) {
   grid-column-start: var(--awsui-slider-reference-column-9rhwr5);
   grid-column-end: var(--awsui-slider-next-reference-column-9rhwr5);
   grid-row: 1;
   justify-self: center;
   text-align: center;
 }
-.awsui_labels-min_pcgz5_2titt_204:not(#\9) {
+.awsui_labels-min_pcgz5_7y2du_216:not(#\9) {
   grid-column: 1;
   grid-row: 1;
   grid-column-end: var(--awsui-slider-min-end-9rhwr5);
   margin-inline-start: calc(var(--space-m-udix3p, 16px) / -2);
 }
-.awsui_labels-max_pcgz5_2titt_210:not(#\9) {
+.awsui_labels-max_pcgz5_7y2du_222:not(#\9) {
   text-align: end;
   justify-content: flex-end;
   grid-row: 1;
@@ -216,37 +228,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-column-start: var(--awsui-slider-max-start-9rhwr5);
   margin-inline-end: calc(var(--space-m-udix3p, 16px) / -2);
 }
-.awsui_labels-aria-description_pcgz5_2titt_218:not(#\9) {
+.awsui_labels-aria-description_pcgz5_7y2du_230:not(#\9) {
   display: none;
 }
 @media (max-width: 576px) {
-  .awsui_labels_pcgz5_2titt_188:not(#\9) {
+  .awsui_labels_pcgz5_7y2du_200:not(#\9) {
     grid-template-columns: 1fr 1fr;
   }
-  .awsui_labels-min_pcgz5_2titt_204:not(#\9) {
+  .awsui_labels-min_pcgz5_7y2du_216:not(#\9) {
     grid-column: 1;
   }
-  .awsui_labels-max_pcgz5_2titt_210:not(#\9) {
+  .awsui_labels-max_pcgz5_7y2du_222:not(#\9) {
     grid-column: 2;
   }
-  .awsui_labels_pcgz5_2titt_188 > .awsui_labels-reference_pcgz5_2titt_197:not(#\9) {
+  .awsui_labels_pcgz5_7y2du_200 > .awsui_labels-reference_pcgz5_7y2du_209:not(#\9) {
     display: none;
   }
 }
 
-.awsui_ticks_pcgz5_2titt_236:not(#\9) {
+.awsui_ticks_pcgz5_7y2du_248:not(#\9) {
   display: grid;
   grid-template-columns: repeat(var(--awsui-slider-tick-count-9rhwr5), 1fr);
   inline-size: calc(100% - var(--space-m-udix3p, 16px));
   margin-inline: calc(var(--space-m-udix3p, 16px) / 2);
 }
-.awsui_ticks-wrapper_pcgz5_2titt_242:not(#\9) {
+.awsui_ticks-wrapper_pcgz5_7y2du_254:not(#\9) {
   block-size: 0;
   display: flex;
   margin-inline: calc(var(--space-m-udix3p, 16px) / -2);
 }
 
-.awsui_tick_pcgz5_2titt_236:not(#\9) {
+.awsui_tick_pcgz5_7y2du_248:not(#\9) {
   grid-row: 1;
   block-size: var(--space-xs-zb16t3, 8px);
   inline-size: var(--space-xxxs-zbmxqb, 2px);
@@ -255,40 +267,51 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   background: var(--color-background-slider-track-3m68rn, #7d8998);
   inset-block-start: -4px;
 }
-.awsui_tick_pcgz5_2titt_236.awsui_middle_pcgz5_2titt_257:not(#\9):first-child, .awsui_tick_pcgz5_2titt_236.awsui_middle_pcgz5_2titt_257:not(#\9):last-child {
+.awsui_tick_pcgz5_7y2du_248.awsui_middle_pcgz5_7y2du_269:not(#\9):first-child, .awsui_tick_pcgz5_7y2du_248.awsui_middle_pcgz5_7y2du_269:not(#\9):last-child {
   visibility: hidden;
 }
-.awsui_tick_pcgz5_2titt_236.awsui_filled_pcgz5_2titt_260:not(#\9) {
+.awsui_tick_pcgz5_7y2du_248.awsui_filled_pcgz5_7y2du_272:not(#\9) {
   background: var(--color-background-slider-handle-default-atrlod, #0972d3);
 }
-.awsui_tick_pcgz5_2titt_236.awsui_active_pcgz5_2titt_175:not(#\9) {
+.awsui_tick_pcgz5_7y2du_248.awsui_filled_pcgz5_7y2du_272.awsui_readonly_pcgz5_7y2du_154:not(#\9):not(.awsui_tick-disabled_pcgz5_7y2du_275) {
+  background: var(--color-foreground-control-read-only-ibiswj, #5f6b7a);
+}
+.awsui_tick_pcgz5_7y2du_248.awsui_active_pcgz5_7y2du_183:not(#\9) {
   background: var(--color-background-slider-handle-active-ccegzg, #065299);
 }
-.awsui_tick_pcgz5_2titt_236.awsui_error_pcgz5_2titt_169:not(#\9) {
+.awsui_tick_pcgz5_7y2du_248.awsui_error_pcgz5_7y2du_177:not(#\9) {
   background: var(--color-text-status-error-wdvepn, #d91515);
 }
-.awsui_tick_pcgz5_2titt_236.awsui_warning_pcgz5_2titt_172:not(#\9) {
+.awsui_tick_pcgz5_7y2du_248.awsui_warning_pcgz5_7y2du_180:not(#\9) {
   background: var(--color-text-status-warning-yik8vi, #8d6605);
 }
-.awsui_tick_pcgz5_2titt_236.awsui_error-active_pcgz5_2titt_178:not(#\9) {
+.awsui_tick_pcgz5_7y2du_248.awsui_error-active_pcgz5_7y2du_186:not(#\9) {
   background-color: var(--color-background-slider-error-pressed-g7oqnt, #7c2718);
 }
-.awsui_tick_pcgz5_2titt_236.awsui_warning-active_pcgz5_2titt_181:not(#\9) {
+.awsui_tick_pcgz5_7y2du_248.awsui_warning-active_pcgz5_7y2du_189:not(#\9) {
   background-color: var(--color-background-slider-warning-pressed-9xuhwf, #8d6605);
 }
-.awsui_tick_pcgz5_2titt_236.awsui_disabled_pcgz5_2titt_160:not(#\9) {
+.awsui_tick_pcgz5_7y2du_248.awsui_disabled_pcgz5_7y2du_154:not(#\9) {
+  background: var(--color-background-control-disabled-pwkvgd, #d1d5db);
+}
+.awsui_tick_pcgz5_7y2du_248.awsui_readonly_pcgz5_7y2du_154:not(#\9) {
   background: var(--color-background-control-disabled-pwkvgd, #d1d5db);
 }
 
-.awsui_tooltip-thumb_pcgz5_2titt_282:not(#\9) {
+.awsui_tooltip-thumb_pcgz5_7y2du_300:not(#\9) {
   position: absolute;
   inline-size: var(--space-xxl-cu2m1r, 32px);
   block-size: var(--space-xxl-cu2m1r, 32px);
   margin-block-start: calc(var(--space-s-34lx8l, 12px) / -1);
   inset-inline-start: var(--awsui-slider-tooltip-position-9rhwr5);
 }
+.awsui_tooltip-thumb_pcgz5_7y2du_300.awsui_readonly_pcgz5_7y2du_154:not(#\9) {
+  inline-size: var(--space-xl-lmui9r, 24px);
+  block-size: var(--space-xl-lmui9r, 24px);
+  margin-block-start: calc(var(--space-xs-zb16t3, 8px) / -1);
+}
 
-.awsui_thumb_pcgz5_2titt_290:not(#\9) {
+.awsui_thumb_pcgz5_7y2du_313:not(#\9) {
   background: transparent;
   -webkit-appearance: none;
           appearance: none;
@@ -301,16 +324,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   cursor: pointer;
   touch-action: none;
 }
-.awsui_thumb_pcgz5_2titt_290.awsui_disabled_pcgz5_2titt_160:not(#\9) {
+.awsui_thumb_pcgz5_7y2du_313.awsui_disabled_pcgz5_7y2du_154:not(#\9) {
+  cursor: default;
+}
+.awsui_thumb_pcgz5_7y2du_313.awsui_readonly_pcgz5_7y2du_154:not(#\9):not(.awsui_thumb_pcgz5_7y2du_313.awsui_disabled_pcgz5_7y2du_154) {
   cursor: default;
 }
-.awsui_thumb_pcgz5_2titt_290.awsui_min_pcgz5_2titt_305:not(#\9) {
+.awsui_thumb_pcgz5_7y2du_313.awsui_readonly_pcgz5_7y2du_154:not(#\9):not(.awsui_thumb_pcgz5_7y2du_313.awsui_disabled_pcgz5_7y2du_154):focus::-webkit-slider-thumb, .awsui_thumb_pcgz5_7y2du_313.awsui_readonly_pcgz5_7y2du_154:not(#\9):not(.awsui_thumb_pcgz5_7y2du_313.awsui_disabled_pcgz5_7y2du_154):active::-webkit-slider-thumb {
+  block-size: var(--space-s-34lx8l, 12px);
+  inline-size: var(--space-s-34lx8l, 12px);
+  box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-foreground-control-read-only-ibiswj, #5f6b7a);
+  background: var(--color-foreground-control-read-only-ibiswj, #5f6b7a);
+  border-color: var(--color-background-slider-handle-active-ccegzg, #065299);
+  border-block-width: 2px;
+  border-inline-width: 2px;
+}
+.awsui_thumb_pcgz5_7y2du_313.awsui_readonly_pcgz5_7y2du_154:not(#\9):not(.awsui_thumb_pcgz5_7y2du_313.awsui_disabled_pcgz5_7y2du_154):focus::-moz-range-thumb, .awsui_thumb_pcgz5_7y2du_313.awsui_readonly_pcgz5_7y2du_154:not(#\9):not(.awsui_thumb_pcgz5_7y2du_313.awsui_disabled_pcgz5_7y2du_154):active::-moz-range-thumb {
+  block-size: var(--space-s-34lx8l, 12px);
+  inline-size: var(--space-s-34lx8l, 12px);
+  box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-foreground-control-read-only-ibiswj, #5f6b7a);
+  background: var(--color-foreground-control-read-only-ibiswj, #5f6b7a);
+  border-color: var(--color-background-slider-handle-active-ccegzg, #065299);
+  border-block-width: 2px;
+  border-inline-width: 2px;
+}
+.awsui_thumb_pcgz5_7y2du_313.awsui_min_pcgz5_7y2du_349:not(#\9) {
   margin-inline-start: calc(-1px + var(--space-m-udix3p, 16px) / -2);
 }
-.awsui_thumb_pcgz5_2titt_290.awsui_max_pcgz5_2titt_308:not(#\9) {
+.awsui_thumb_pcgz5_7y2du_313.awsui_max_pcgz5_7y2du_352:not(#\9) {
   margin-inline-start: calc(1px + var(--space-m-udix3p, 16px) / -2);
 }
-.awsui_thumb_pcgz5_2titt_290:not(#\9)::-webkit-slider-thumb {
+.awsui_thumb_pcgz5_7y2du_313:not(#\9)::-webkit-slider-thumb {
   -webkit-appearance: none;
           appearance: none;
   appearance: none;
@@ -329,7 +373,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   pointer-events: all;
   position: relative;
 }
-.awsui_thumb_pcgz5_2titt_290:not(#\9)::-moz-range-thumb {
+.awsui_thumb_pcgz5_7y2du_313:not(#\9)::-moz-range-thumb {
   appearance: none;
   appearance: none;
   background: var(--color-background-slider-handle-default-atrlod, #0972d3);
@@ -347,13 +391,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   pointer-events: all;
   position: relative;
 }
-.awsui_thumb_pcgz5_2titt_290:not(#\9):hover::-webkit-slider-thumb {
+.awsui_thumb_pcgz5_7y2du_313:not(#\9):hover::-webkit-slider-thumb {
   box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-background-slider-handle-default-atrlod, #0972d3);
 }
-.awsui_thumb_pcgz5_2titt_290:not(#\9):hover::-moz-range-thumb {
+.awsui_thumb_pcgz5_7y2du_313:not(#\9):hover::-moz-range-thumb {
   box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-background-slider-handle-default-atrlod, #0972d3);
 }
-.awsui_thumb_pcgz5_2titt_290:not(#\9):focus::-webkit-slider-thumb, .awsui_thumb_pcgz5_2titt_290:not(#\9):active::-webkit-slider-thumb {
+.awsui_thumb_pcgz5_7y2du_313:not(#\9):focus::-webkit-slider-thumb, .awsui_thumb_pcgz5_7y2du_313:not(#\9):active::-webkit-slider-thumb {
   block-size: 20px;
   inline-size: 20px;
   box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-background-slider-handle-active-ccegzg, #065299);
@@ -362,7 +406,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-block-width: 2px;
   border-inline-width: 2px;
 }
-.awsui_thumb_pcgz5_2titt_290:not(#\9):focus::-moz-range-thumb, .awsui_thumb_pcgz5_2titt_290:not(#\9):active::-moz-range-thumb {
+.awsui_thumb_pcgz5_7y2du_313:not(#\9):focus::-moz-range-thumb, .awsui_thumb_pcgz5_7y2du_313:not(#\9):active::-moz-range-thumb {
   block-size: 20px;
   inline-size: 20px;
   box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-background-slider-handle-active-ccegzg, #065299);
@@ -372,30 +416,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-inline-width: 2px;
 }
 
-.awsui_error_pcgz5_2titt_169:not(#\9)::-webkit-slider-thumb {
+.awsui_error_pcgz5_7y2du_177:not(#\9)::-webkit-slider-thumb {
   background-color: var(--color-text-status-error-wdvepn, #d91515);
   border-color: var(--color-text-status-error-wdvepn, #d91515);
 }
-.awsui_error_pcgz5_2titt_169:not(#\9)::-moz-range-thumb {
+.awsui_error_pcgz5_7y2du_177:not(#\9)::-moz-range-thumb {
   background-color: var(--color-text-status-error-wdvepn, #d91515);
   border-color: var(--color-text-status-error-wdvepn, #d91515);
 }
-.awsui_error_pcgz5_2titt_169:not(#\9):hover::-webkit-slider-thumb {
+.awsui_error_pcgz5_7y2du_177:not(#\9):hover::-webkit-slider-thumb {
   background-color: var(--color-text-status-error-wdvepn, #d91515);
   box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-text-status-error-wdvepn, #d91515);
 }
-.awsui_error_pcgz5_2titt_169:not(#\9):hover::-moz-range-thumb {
+.awsui_error_pcgz5_7y2du_177:not(#\9):hover::-moz-range-thumb {
   background-color: var(--color-text-status-error-wdvepn, #d91515);
   box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-text-status-error-wdvepn, #d91515);
 }
-.awsui_error_pcgz5_2titt_169:not(#\9):focus::-webkit-slider-thumb, .awsui_error_pcgz5_2titt_169:not(#\9):active::-webkit-slider-thumb {
+.awsui_error_pcgz5_7y2du_177:not(#\9):focus::-webkit-slider-thumb, .awsui_error_pcgz5_7y2du_177:not(#\9):active::-webkit-slider-thumb {
   background-color: var(--color-background-slider-error-pressed-g7oqnt, #7c2718);
   border-block-width: 2px;
   border-inline-width: 2px;
   border-color: var(--color-background-slider-error-pressed-g7oqnt, #7c2718);
   box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-background-slider-error-pressed-g7oqnt, #7c2718);
 }
-.awsui_error_pcgz5_2titt_169:not(#\9):focus::-moz-range-thumb, .awsui_error_pcgz5_2titt_169:not(#\9):active::-moz-range-thumb {
+.awsui_error_pcgz5_7y2du_177:not(#\9):focus::-moz-range-thumb, .awsui_error_pcgz5_7y2du_177:not(#\9):active::-moz-range-thumb {
   background-color: var(--color-background-slider-error-pressed-g7oqnt, #7c2718);
   border-block-width: 2px;
   border-inline-width: 2px;
@@ -403,30 +447,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-background-slider-error-pressed-g7oqnt, #7c2718);
 }
 
-.awsui_warning_pcgz5_2titt_172:not(#\9)::-webkit-slider-thumb {
+.awsui_warning_pcgz5_7y2du_180:not(#\9)::-webkit-slider-thumb {
   background-color: var(--color-text-status-warning-yik8vi, #8d6605);
   border-color: var(--color-text-status-warning-yik8vi, #8d6605);
 }
-.awsui_warning_pcgz5_2titt_172:not(#\9)::-moz-range-thumb {
+.awsui_warning_pcgz5_7y2du_180:not(#\9)::-moz-range-thumb {
   background-color: var(--color-text-status-warning-yik8vi, #8d6605);
   border-color: var(--color-text-status-warning-yik8vi, #8d6605);
 }
-.awsui_warning_pcgz5_2titt_172:not(#\9):hover::-webkit-slider-thumb {
+.awsui_warning_pcgz5_7y2du_180:not(#\9):hover::-webkit-slider-thumb {
   background-color: var(--color-text-status-warning-yik8vi, #8d6605);
   box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-text-status-warning-yik8vi, #8d6605);
 }
-.awsui_warning_pcgz5_2titt_172:not(#\9):hover::-moz-range-thumb {
+.awsui_warning_pcgz5_7y2du_180:not(#\9):hover::-moz-range-thumb {
   background-color: var(--color-text-status-warning-yik8vi, #8d6605);
   box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-text-status-warning-yik8vi, #8d6605);
 }
-.awsui_warning_pcgz5_2titt_172:not(#\9):focus::-webkit-slider-thumb, .awsui_warning_pcgz5_2titt_172:not(#\9):active::-webkit-slider-thumb {
+.awsui_warning_pcgz5_7y2du_180:not(#\9):focus::-webkit-slider-thumb, .awsui_warning_pcgz5_7y2du_180:not(#\9):active::-webkit-slider-thumb {
   background-color: var(--color-background-slider-warning-pressed-9xuhwf, #8d6605);
   border-block-width: 2px;
   border-inline-width: 2px;
   border-color: var(--color-background-slider-warning-pressed-9xuhwf, #8d6605);
   box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-background-slider-warning-pressed-9xuhwf, #8d6605);
 }
-.awsui_warning_pcgz5_2titt_172:not(#\9):focus::-moz-range-thumb, .awsui_warning_pcgz5_2titt_172:not(#\9):active::-moz-range-thumb {
+.awsui_warning_pcgz5_7y2du_180:not(#\9):focus::-moz-range-thumb, .awsui_warning_pcgz5_7y2du_180:not(#\9):active::-moz-range-thumb {
   background-color: var(--color-background-slider-warning-pressed-9xuhwf, #8d6605);
   border-block-width: 2px;
   border-inline-width: 2px;
@@ -434,19 +478,42 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-31445h, #ffffff), 0 0 0 4px var(--color-background-slider-warning-pressed-9xuhwf, #8d6605);
 }
 
-.awsui_disabled_pcgz5_2titt_160:not(#\9)::-webkit-slider-thumb,
-.awsui_disabled_pcgz5_2titt_160:not(#\9):hover::-webkit-slider-thumb,
-.awsui_disabled_pcgz5_2titt_160:not(#\9):active::-webkit-slider-thumb {
+.awsui_disabled_pcgz5_7y2du_154:not(#\9)::-webkit-slider-thumb,
+.awsui_disabled_pcgz5_7y2du_154:not(#\9):hover::-webkit-slider-thumb,
+.awsui_disabled_pcgz5_7y2du_154:not(#\9):active::-webkit-slider-thumb {
   background-color: var(--color-background-control-disabled-pwkvgd, #d1d5db);
   border-color: var(--color-background-control-disabled-pwkvgd, #d1d5db);
   box-shadow: none;
   pointer-events: none;
 }
-.awsui_disabled_pcgz5_2titt_160:not(#\9)::-moz-range-thumb,
-.awsui_disabled_pcgz5_2titt_160:not(#\9):hover::-moz-range-thumb,
-.awsui_disabled_pcgz5_2titt_160:not(#\9):active::-moz-range-thumb {
+.awsui_disabled_pcgz5_7y2du_154:not(#\9)::-moz-range-thumb,
+.awsui_disabled_pcgz5_7y2du_154:not(#\9):hover::-moz-range-thumb,
+.awsui_disabled_pcgz5_7y2du_154:not(#\9):active::-moz-range-thumb {
   background-color: var(--color-background-control-disabled-pwkvgd, #d1d5db);
   border-color: var(--color-background-control-disabled-pwkvgd, #d1d5db);
   box-shadow: none;
   pointer-events: none;
+}
+
+.awsui_readonly_pcgz5_7y2du_154:not(#\9):not(.awsui_disabled_pcgz5_7y2du_154)::-webkit-slider-thumb,
+.awsui_readonly_pcgz5_7y2du_154:not(#\9):not(.awsui_disabled_pcgz5_7y2du_154):hover::-webkit-slider-thumb,
+.awsui_readonly_pcgz5_7y2du_154:not(#\9):not(.awsui_disabled_pcgz5_7y2du_154):active::-webkit-slider-thumb {
+  block-size: var(--space-s-34lx8l, 12px);
+  inline-size: var(--space-s-34lx8l, 12px);
+  background-color: var(--color-foreground-control-read-only-ibiswj, #5f6b7a);
+  border-color: var(--color-foreground-control-read-only-ibiswj, #5f6b7a);
+  box-shadow: none;
+  pointer-events: none;
+  cursor: initial;
+}
+.awsui_readonly_pcgz5_7y2du_154:not(#\9):not(.awsui_disabled_pcgz5_7y2du_154)::-moz-range-thumb,
+.awsui_readonly_pcgz5_7y2du_154:not(#\9):not(.awsui_disabled_pcgz5_7y2du_154):hover::-moz-range-thumb,
+.awsui_readonly_pcgz5_7y2du_154:not(#\9):not(.awsui_disabled_pcgz5_7y2du_154):active::-moz-range-thumb {
+  block-size: var(--space-s-34lx8l, 12px);
+  inline-size: var(--space-s-34lx8l, 12px);
+  background-color: var(--color-foreground-control-read-only-ibiswj, #5f6b7a);
+  border-color: var(--color-foreground-control-read-only-ibiswj, #5f6b7a);
+  box-shadow: none;
+  pointer-events: none;
+  cursor: initial;
 }

package/slider/styles.selectors.js

@@ -2,30 +2,32 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_pcgz5_2titt_101",
-  "slider": "awsui_slider_pcgz5_2titt_141",
-  "slider-track": "awsui_slider-track_pcgz5_2titt_145",
-  "slider-range": "awsui_slider-range_pcgz5_2titt_145",
-  "disabled": "awsui_disabled_pcgz5_2titt_160",
-  "error": "awsui_error_pcgz5_2titt_169",
-  "warning": "awsui_warning_pcgz5_2titt_172",
-  "active": "awsui_active_pcgz5_2titt_175",
-  "error-active": "awsui_error-active_pcgz5_2titt_178",
-  "warning-active": "awsui_warning-active_pcgz5_2titt_181",
-  "labels": "awsui_labels_pcgz5_2titt_188",
-  "labels-noref": "awsui_labels-noref_pcgz5_2titt_194",
-  "labels-reference": "awsui_labels-reference_pcgz5_2titt_197",
-  "labels-min": "awsui_labels-min_pcgz5_2titt_204",
-  "labels-max": "awsui_labels-max_pcgz5_2titt_210",
-  "labels-aria-description": "awsui_labels-aria-description_pcgz5_2titt_218",
-  "ticks": "awsui_ticks_pcgz5_2titt_236",
-  "ticks-wrapper": "awsui_ticks-wrapper_pcgz5_2titt_242",
-  "tick": "awsui_tick_pcgz5_2titt_236",
-  "middle": "awsui_middle_pcgz5_2titt_257",
-  "filled": "awsui_filled_pcgz5_2titt_260",
-  "tooltip-thumb": "awsui_tooltip-thumb_pcgz5_2titt_282",
-  "thumb": "awsui_thumb_pcgz5_2titt_290",
-  "min": "awsui_min_pcgz5_2titt_305",
-  "max": "awsui_max_pcgz5_2titt_308"
+  "root": "awsui_root_pcgz5_7y2du_101",
+  "slider": "awsui_slider_pcgz5_7y2du_141",
+  "slider-track": "awsui_slider-track_pcgz5_7y2du_145",
+  "slider-range": "awsui_slider-range_pcgz5_7y2du_145",
+  "readonly": "awsui_readonly_pcgz5_7y2du_154",
+  "disabled": "awsui_disabled_pcgz5_7y2du_154",
+  "error": "awsui_error_pcgz5_7y2du_177",
+  "warning": "awsui_warning_pcgz5_7y2du_180",
+  "active": "awsui_active_pcgz5_7y2du_183",
+  "error-active": "awsui_error-active_pcgz5_7y2du_186",
+  "warning-active": "awsui_warning-active_pcgz5_7y2du_189",
+  "labels": "awsui_labels_pcgz5_7y2du_200",
+  "labels-noref": "awsui_labels-noref_pcgz5_7y2du_206",
+  "labels-reference": "awsui_labels-reference_pcgz5_7y2du_209",
+  "labels-min": "awsui_labels-min_pcgz5_7y2du_216",
+  "labels-max": "awsui_labels-max_pcgz5_7y2du_222",
+  "labels-aria-description": "awsui_labels-aria-description_pcgz5_7y2du_230",
+  "ticks": "awsui_ticks_pcgz5_7y2du_248",
+  "ticks-wrapper": "awsui_ticks-wrapper_pcgz5_7y2du_254",
+  "tick": "awsui_tick_pcgz5_7y2du_248",
+  "middle": "awsui_middle_pcgz5_7y2du_269",
+  "filled": "awsui_filled_pcgz5_7y2du_272",
+  "tick-disabled": "awsui_tick-disabled_pcgz5_7y2du_275",
+  "tooltip-thumb": "awsui_tooltip-thumb_pcgz5_7y2du_300",
+  "thumb": "awsui_thumb_pcgz5_7y2du_313",
+  "min": "awsui_min_pcgz5_7y2du_349",
+  "max": "awsui_max_pcgz5_7y2du_352"
 };
   

package/slider/tick-marks.d.ts

@@ -6,6 +6,7 @@ export interface SliderTicksProps {
     invalid?: boolean;
     warning?: boolean;
     disabled?: boolean;
+    readOnly?: boolean;
     min: number;
     max: number;
     step: number;

package/slider/tick-marks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tick-marks.d.ts","sourceRoot":"","sources":["../../../src/slider/tick-marks.tsx"],"names":[],"mappings":";AAQA,MAAM,WAAW,gBAAgB;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D,IAAI,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;CAC9B;AAiCD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,gBAAgB,eAmB9D"}
+{"version":3,"file":"tick-marks.d.ts","sourceRoot":"","sources":["../../../src/slider/tick-marks.tsx"],"names":[],"mappings":";AAQA,MAAM,WAAW,gBAAgB;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D,IAAI,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;CAC9B;AAkCD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,gBAAgB,eAmB9D"}

package/slider/tick-marks.js

@@ -6,7 +6,7 @@ import customCssProps from '../internal/generated/custom-css-properties/index.js
 import styles from './styles.css.js';
 import { getStepArray } from './utils.js';
 function TickMark(props) {
-    const { hideFillLine, value, isActive, invalid, warning, disabled, type, min, max, step } = props;
+    const { hideFillLine, value, isActive, invalid, warning, disabled, type, min, max, step, readOnly } = props;
     const showWarning = warning && !invalid;
     const getType = () => {
         if (type === 'min') {
@@ -25,6 +25,7 @@ function TickMark(props) {
             [styles['error-active']]: invalid && isActive && !hideFillLine && value > getType(),
             [styles['warning-active']]: showWarning && isActive && !hideFillLine && value > getType(),
             [styles.disabled]: disabled,
+            [styles.readonly]: readOnly,
             [styles.middle]: type === 'step',
         }) }));
 }

package/slider/tick-marks.js.map

@@ -1 +1 @@
-{"version":3,"file":"tick-marks.js","sourceRoot":"","sources":["../../../src/slider/tick-marks.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,cAAc,MAAM,sDAAsD,CAAC;AAClF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAkB1C,SAAS,QAAQ,CAAC,KAA0B;IAC1C,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAElG,MAAM,WAAW,GAAG,OAAO,IAAI,CAAC,OAAO,CAAC;IAExC,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,IAAI,IAAI,KAAK,KAAK,EAAE;YAClB,OAAO,GAAG,CAAC;SACZ;QACD,IAAI,IAAI,KAAK,KAAK,EAAE;YAClB,OAAO,GAAG,CAAC;SACZ;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YAC3B,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YACnD,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,YAAY,IAAI,QAAQ,IAAI,KAAK,GAAG,OAAO,EAAE;YAC/D,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,IAAI,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YAC7D,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,WAAW,IAAI,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YACnE,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,OAAO,IAAI,QAAQ,IAAI,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YACnF,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,WAAW,IAAI,QAAQ,IAAI,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YACzF,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,MAAM;SACjC,CAAC,GACF,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAuB;IAC7D,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjC,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC;QACrC,oBAAC,QAAQ,oBAAK,KAAK,IAAE,IAAI,EAAC,KAAK,IAAG;QAClC,6BACE,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,KAAK,EAAE;gBACL,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;aACjE,IAEA,YAAY,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACnD,oBAAC,QAAQ,oBAAK,KAAK,IAAE,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,KAAK,EAAE,IAAI,CACtE,CAAC,CACE;QACN,oBAAC,QAAQ,oBAAK,KAAK,IAAE,IAAI,EAAC,KAAK,IAAG,CAC9B,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport customCssProps from '../internal/generated/custom-css-properties/index.js';\nimport styles from './styles.css.js';\nimport { getStepArray } from './utils.js';\n\nexport interface SliderTicksProps {\n  hideFillLine?: boolean;\n  value: number;\n  isActive: boolean;\n  invalid?: boolean;\n  warning?: boolean;\n  disabled?: boolean;\n  min: number;\n  max: number;\n  step: number;\n}\n\nexport interface SliderTickMarkProps extends SliderTicksProps {\n  type: 'min' | 'max' | 'step';\n}\n\nfunction TickMark(props: SliderTickMarkProps) {\n  const { hideFillLine, value, isActive, invalid, warning, disabled, type, min, max, step } = props;\n\n  const showWarning = warning && !invalid;\n\n  const getType = () => {\n    if (type === 'min') {\n      return min;\n    }\n    if (type === 'max') {\n      return max;\n    }\n    return step;\n  };\n\n  return (\n    <div\n      className={clsx(styles.tick, {\n        [styles.filled]: !hideFillLine && value > getType(),\n        [styles.active]: !hideFillLine && isActive && value > getType(),\n        [styles.error]: invalid && !hideFillLine && value > getType(),\n        [styles.warning]: showWarning && !hideFillLine && value > getType(),\n        [styles['error-active']]: invalid && isActive && !hideFillLine && value > getType(),\n        [styles['warning-active']]: showWarning && isActive && !hideFillLine && value > getType(),\n        [styles.disabled]: disabled,\n        [styles.middle]: type === 'step',\n      })}\n    />\n  );\n}\n\nexport default function SliderTickMarks(props: SliderTicksProps) {\n  const { min, max, step } = props;\n\n  return (\n    <div className={styles['ticks-wrapper']}>\n      <TickMark {...props} type=\"min\" />\n      <div\n        className={styles.ticks}\n        style={{\n          [customCssProps.sliderTickCount]: Math.round((max - min) / step),\n        }}\n      >\n        {getStepArray(step, [min, max]).map((step, index) => (\n          <TickMark {...props} type=\"step\" step={step} key={`step-${index}`} />\n        ))}\n      </div>\n      <TickMark {...props} type=\"max\" />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"tick-marks.js","sourceRoot":"","sources":["../../../src/slider/tick-marks.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,cAAc,MAAM,sDAAsD,CAAC;AAClF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAmB1C,SAAS,QAAQ,CAAC,KAA0B;IAC1C,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE5G,MAAM,WAAW,GAAG,OAAO,IAAI,CAAC,OAAO,CAAC;IAExC,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,IAAI,IAAI,KAAK,KAAK,EAAE;YAClB,OAAO,GAAG,CAAC;SACZ;QACD,IAAI,IAAI,KAAK,KAAK,EAAE;YAClB,OAAO,GAAG,CAAC;SACZ;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YAC3B,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YACnD,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,YAAY,IAAI,QAAQ,IAAI,KAAK,GAAG,OAAO,EAAE;YAC/D,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,IAAI,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YAC7D,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,WAAW,IAAI,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YACnE,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,OAAO,IAAI,QAAQ,IAAI,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YACnF,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,WAAW,IAAI,QAAQ,IAAI,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YACzF,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,MAAM;SACjC,CAAC,GACF,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAuB;IAC7D,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjC,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC;QACrC,oBAAC,QAAQ,oBAAK,KAAK,IAAE,IAAI,EAAC,KAAK,IAAG;QAClC,6BACE,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,KAAK,EAAE;gBACL,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;aACjE,IAEA,YAAY,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACnD,oBAAC,QAAQ,oBAAK,KAAK,IAAE,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,KAAK,EAAE,IAAI,CACtE,CAAC,CACE;QACN,oBAAC,QAAQ,oBAAK,KAAK,IAAE,IAAI,EAAC,KAAK,IAAG,CAC9B,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport customCssProps from '../internal/generated/custom-css-properties/index.js';\nimport styles from './styles.css.js';\nimport { getStepArray } from './utils.js';\n\nexport interface SliderTicksProps {\n  hideFillLine?: boolean;\n  value: number;\n  isActive: boolean;\n  invalid?: boolean;\n  warning?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  min: number;\n  max: number;\n  step: number;\n}\n\nexport interface SliderTickMarkProps extends SliderTicksProps {\n  type: 'min' | 'max' | 'step';\n}\n\nfunction TickMark(props: SliderTickMarkProps) {\n  const { hideFillLine, value, isActive, invalid, warning, disabled, type, min, max, step, readOnly } = props;\n\n  const showWarning = warning && !invalid;\n\n  const getType = () => {\n    if (type === 'min') {\n      return min;\n    }\n    if (type === 'max') {\n      return max;\n    }\n    return step;\n  };\n\n  return (\n    <div\n      className={clsx(styles.tick, {\n        [styles.filled]: !hideFillLine && value > getType(),\n        [styles.active]: !hideFillLine && isActive && value > getType(),\n        [styles.error]: invalid && !hideFillLine && value > getType(),\n        [styles.warning]: showWarning && !hideFillLine && value > getType(),\n        [styles['error-active']]: invalid && isActive && !hideFillLine && value > getType(),\n        [styles['warning-active']]: showWarning && isActive && !hideFillLine && value > getType(),\n        [styles.disabled]: disabled,\n        [styles.readonly]: readOnly,\n        [styles.middle]: type === 'step',\n      })}\n    />\n  );\n}\n\nexport default function SliderTickMarks(props: SliderTicksProps) {\n  const { min, max, step } = props;\n\n  return (\n    <div className={styles['ticks-wrapper']}>\n      <TickMark {...props} type=\"min\" />\n      <div\n        className={styles.ticks}\n        style={{\n          [customCssProps.sliderTickCount]: Math.round((max - min) / step),\n        }}\n      >\n        {getStepArray(step, [min, max]).map((step, index) => (\n          <TickMark {...props} type=\"step\" step={step} key={`step-${index}`} />\n        ))}\n      </div>\n      <TickMark {...props} type=\"max\" />\n    </div>\n  );\n}\n"]}

package/slider/utils.d.ts

@@ -6,4 +6,5 @@ export declare const findLowerAndHigherValues: <T extends number>(array: readonl
 };
 export declare const valuesAreValid: (referenceValues: ReadonlyArray<number>) => boolean;
 export declare const THUMB_SIZE = 16;
+export declare const THUMB_READONLY_SIZE = 12;
 //# sourceMappingURL=utils.d.ts.map

package/slider/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/slider/utils.ts"],"names":[],"mappings":"AAGA,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,UAE1E;AAeD,eAAO,MAAM,YAAY,SAAU,MAAM,qDAiBxC,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;CAYpC,CAAC;AAEF,eAAO,MAAM,cAAc,oBAAqB,cAAc,MAAM,CAAC,YAIpE,CAAC;AAEF,eAAO,MAAM,UAAU,KAAK,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/slider/utils.ts"],"names":[],"mappings":"AAGA,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,UAE1E;AAeD,eAAO,MAAM,YAAY,SAAU,MAAM,qDAiBxC,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;CAYpC,CAAC;AAEF,eAAO,MAAM,cAAc,oBAAqB,cAAc,MAAM,CAAC,YAIpE,CAAC;AAEF,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,mBAAmB,KAAK,CAAC"}

package/slider/utils.js

@@ -42,4 +42,5 @@ export const valuesAreValid = (referenceValues) => {
     return valuesWithDecimals.length === 0;
 };
 export const THUMB_SIZE = 16;
+export const THUMB_READONLY_SIZE = 12;
 //# sourceMappingURL=utils.js.map

package/slider/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/slider/utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,MAAM,UAAU,UAAU,CAAC,KAAa,EAAE,KAAiC;IACzE,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;AAC5D,CAAC;AAED,SAAS,aAAa,CAAC,KAAa;;IAClC,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE;QAC/B,OAAO,CAAC,CAAC;KACV;IAED,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC;IACvC,gCAAgC;IAChC,IAAI,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE;QAC3B,OAAO,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC;KAC7C;IACD,OAAO,CAAA,MAAA,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,0CAAE,MAAM,KAAI,CAAC,CAAC;AACxC,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAY,EAAE,CAAC,GAAG,EAAE,GAAG,CAA6B,EAAE,EAAE;IACnF,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;IAEpB,iFAAiF;IACjF,0CAA0C;IAC1C,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;IAErD,IAAI,WAAW,GAAG,GAAG,CAAC;IAEtB,OAAO,WAAW,GAAG,GAAG,EAAE;QACxB,WAAW,GAAG,CAAC,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,UAAU,CAAC;QAC1E,IAAI,WAAW,IAAI,GAAG,EAAE;YACtB,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACzB;KACF;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,KAAuB,EACvB,KAAQ,EACyC,EAAE;IACnD,IAAI,WAAW,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC;IAC7B,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAEhD,MAAM,KAAK,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC9C,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,SAAS,CAAC;IAClD,MAAM,MAAM,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,SAAS,CAAC;IAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAC3B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,eAAsC,EAAE,EAAE;IACvE,MAAM,kBAAkB,GAAG,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAEtF,OAAO,kBAAkB,CAAC,MAAM,KAAK,CAAC,CAAC;AACzC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,EAAE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport function getPercent(value: number, range: [min: number, max: number]) {\n  return ((value - range[0]) / (range[1] - range[0])) * 100;\n}\n\nfunction countDecimals(value: number) {\n  if (Math.floor(value) === value) {\n    return 0;\n  }\n\n  const str = Math.abs(value).toString();\n  // very small numbers, e.g. 1e-9\n  if (str.indexOf('-') !== -1) {\n    return parseInt(str.split('-')[1], 10) || 0;\n  }\n  return str.split('.')[1]?.length || 0;\n}\n\nexport const getStepArray = (step: number, [min, max]: [min: number, max: number]) => {\n  const steps = [min];\n\n  // JS struggles with rounding errors when using decimals, so include a multiplier\n  // to make step calculations integer-based\n  const multiplier = Math.pow(10, countDecimals(step));\n\n  let currentStep = min;\n\n  while (currentStep < max) {\n    currentStep = (multiplier * currentStep + multiplier * step) / multiplier;\n    if (currentStep <= max) {\n      steps.push(currentStep);\n    }\n  }\n\n  return steps;\n};\n\nexport const findLowerAndHigherValues = <T extends number>(\n  array: ReadonlyArray<T>,\n  value: T\n): { lower: undefined | T; higher: undefined | T } => {\n  let sortedArray = [...array];\n  sortedArray = sortedArray.sort((a, b) => a - b);\n\n  const index = sortedArray.indexOf(value) || 0;\n  const lower = sortedArray[index - 1] || undefined;\n  const higher = sortedArray[index + 1] || undefined;\n\n  return { lower, higher };\n};\n\nexport const valuesAreValid = (referenceValues: ReadonlyArray<number>) => {\n  const valuesWithDecimals = referenceValues?.filter(value => !Number.isInteger(value));\n\n  return valuesWithDecimals.length === 0;\n};\n\nexport const THUMB_SIZE = 16;\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/slider/utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,MAAM,UAAU,UAAU,CAAC,KAAa,EAAE,KAAiC;IACzE,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;AAC5D,CAAC;AAED,SAAS,aAAa,CAAC,KAAa;;IAClC,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE;QAC/B,OAAO,CAAC,CAAC;KACV;IAED,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC;IACvC,gCAAgC;IAChC,IAAI,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE;QAC3B,OAAO,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC;KAC7C;IACD,OAAO,CAAA,MAAA,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,0CAAE,MAAM,KAAI,CAAC,CAAC;AACxC,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAY,EAAE,CAAC,GAAG,EAAE,GAAG,CAA6B,EAAE,EAAE;IACnF,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;IAEpB,iFAAiF;IACjF,0CAA0C;IAC1C,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;IAErD,IAAI,WAAW,GAAG,GAAG,CAAC;IAEtB,OAAO,WAAW,GAAG,GAAG,EAAE;QACxB,WAAW,GAAG,CAAC,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG,UAAU,CAAC;QAC1E,IAAI,WAAW,IAAI,GAAG,EAAE;YACtB,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACzB;KACF;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,KAAuB,EACvB,KAAQ,EACyC,EAAE;IACnD,IAAI,WAAW,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC;IAC7B,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAEhD,MAAM,KAAK,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC9C,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,SAAS,CAAC;IAClD,MAAM,MAAM,GAAG,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,SAAS,CAAC;IAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAC3B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,eAAsC,EAAE,EAAE;IACvE,MAAM,kBAAkB,GAAG,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAEtF,OAAO,kBAAkB,CAAC,MAAM,KAAK,CAAC,CAAC;AACzC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,EAAE,CAAC;AAC7B,MAAM,CAAC,MAAM,mBAAmB,GAAG,EAAE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport function getPercent(value: number, range: [min: number, max: number]) {\n  return ((value - range[0]) / (range[1] - range[0])) * 100;\n}\n\nfunction countDecimals(value: number) {\n  if (Math.floor(value) === value) {\n    return 0;\n  }\n\n  const str = Math.abs(value).toString();\n  // very small numbers, e.g. 1e-9\n  if (str.indexOf('-') !== -1) {\n    return parseInt(str.split('-')[1], 10) || 0;\n  }\n  return str.split('.')[1]?.length || 0;\n}\n\nexport const getStepArray = (step: number, [min, max]: [min: number, max: number]) => {\n  const steps = [min];\n\n  // JS struggles with rounding errors when using decimals, so include a multiplier\n  // to make step calculations integer-based\n  const multiplier = Math.pow(10, countDecimals(step));\n\n  let currentStep = min;\n\n  while (currentStep < max) {\n    currentStep = (multiplier * currentStep + multiplier * step) / multiplier;\n    if (currentStep <= max) {\n      steps.push(currentStep);\n    }\n  }\n\n  return steps;\n};\n\nexport const findLowerAndHigherValues = <T extends number>(\n  array: ReadonlyArray<T>,\n  value: T\n): { lower: undefined | T; higher: undefined | T } => {\n  let sortedArray = [...array];\n  sortedArray = sortedArray.sort((a, b) => a - b);\n\n  const index = sortedArray.indexOf(value) || 0;\n  const lower = sortedArray[index - 1] || undefined;\n  const higher = sortedArray[index + 1] || undefined;\n\n  return { lower, higher };\n};\n\nexport const valuesAreValid = (referenceValues: ReadonlyArray<number>) => {\n  const valuesWithDecimals = referenceValues?.filter(value => !Number.isInteger(value));\n\n  return valuesWithDecimals.length === 0;\n};\n\nexport const THUMB_SIZE = 16;\nexport const THUMB_READONLY_SIZE = 12;\n"]}

package/tiles/interfaces.d.ts

@@ -49,6 +49,12 @@ export interface TilesProps extends BaseComponentProps, FormFieldControlProps {
      * If the component controls any secondary content (for example, another form field), use this to provide an ID referring to the secondary content.
      */
     ariaControls?: string;
+    /**
+     * Specifies if the control is read-only, which prevents the
+     * user from modifying the value, but does not prevent the value from
+     * being included in a form submission. A read-only control is still focusable.
+     */
+    readOnly?: boolean;
 }
 export declare namespace TilesProps {
     type Breakpoint = _Breakpoint;

package/tiles/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tiles/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,qBAAqB;IAC3E;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IAElD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAE9D;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,UAAU,GAAG,WAAW,CAAC;IACrC,UAAiB,eAAe;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;IAED,UAAiB,YAAY;QAC3B,KAAK,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tiles/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,qBAAqB;IAC3E;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IAElD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAE9D;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,UAAU,GAAG,WAAW,CAAC;IACrC,UAAiB,eAAe;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;IAED,UAAiB,YAAY;QAC3B,KAAK,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}

package/tiles/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tiles/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { FormFieldControlProps } from '../internal/context/form-field-context';\nimport { Breakpoint as _Breakpoint } from '../internal/breakpoints';\n\nexport interface TilesProps extends BaseComponentProps, FormFieldControlProps {\n  /**\n   * Specify a custom name for the native radio buttons. If not provided, the tiles component generates a random name.\n   */\n  name?: string;\n\n  /**\n   * Specifies the value of the selected tile.\n   * If you want to clear the selection, use `null`.\n   */\n  value: string | null;\n\n  /**\n   * List of tile definitions. Each tile has the following properties:\n   *\n   * - `value` [string] - The value that will be associated with the tile. This is the value the tiles will get when the radio button is selected.\n   * - `label` [ReactNode] - A short description for the option the tile represents.\n   * - `description` [ReactNode] - (Optional) Further explanatory guidance on the tile option, shown below the `label`.\n   * - `image` [ReactNode] - (Optional) Visually distinctive image for the tile option, shown below the `description`.\n   * - `disabled` [boolean] - (Optional) Specifies whether the tile is disabled. Users can't select disabled tiles.\n   * - `controlId` [string] - (Optional) The ID of the internal input. You can use this to relate a label element's `for` attribute to this control.\n   *            We recommend that you don't set this property because it's automatically set by the tiles component.\n   */\n  items?: ReadonlyArray<TilesProps.TilesDefinition>;\n\n  /**\n   * Adds `aria-label` on the group. Don't set this property if you are using this form element within a form field\n   * because the form field component automatically sets the correct labels to make the component accessible.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Adds `aria-required` on the group.\n   */\n  ariaRequired?: boolean;\n\n  /**\n   * The number of columns for the tiles to be displayed in. Valid values are integers between 1 and 4.\n   * If no value is specified, the number of columns is determined based on the number of items, with a maximum of 3.\n   * It is set to 2 if 4 or 8 items are supplied in order to optimize the layout.\n   */\n  columns?: number;\n\n  /**\n   * Called when the user selects a different tile.\n   */\n  onChange?: NonCancelableEventHandler<TilesProps.ChangeDetail>;\n\n  /**\n   * Adds `aria-controls` attribute to the component.\n   * If the component controls any secondary content (for example, another form field), use this to provide an ID referring to the secondary content.\n   */\n  ariaControls?: string;\n}\n\nexport namespace TilesProps {\n  export type Breakpoint = _Breakpoint;\n  export interface TilesDefinition {\n    value: string;\n    label: React.ReactNode;\n    description?: React.ReactNode;\n    image?: React.ReactNode;\n    disabled?: boolean;\n    controlId?: string;\n  }\n\n  export interface ChangeDetail {\n    value: string;\n  }\n\n  export interface Ref {\n    /**\n     * Sets input focus onto the UI control.\n     */\n    focus(): void;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tiles/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { FormFieldControlProps } from '../internal/context/form-field-context';\nimport { Breakpoint as _Breakpoint } from '../internal/breakpoints';\n\nexport interface TilesProps extends BaseComponentProps, FormFieldControlProps {\n  /**\n   * Specify a custom name for the native radio buttons. If not provided, the tiles component generates a random name.\n   */\n  name?: string;\n\n  /**\n   * Specifies the value of the selected tile.\n   * If you want to clear the selection, use `null`.\n   */\n  value: string | null;\n\n  /**\n   * List of tile definitions. Each tile has the following properties:\n   *\n   * - `value` [string] - The value that will be associated with the tile. This is the value the tiles will get when the radio button is selected.\n   * - `label` [ReactNode] - A short description for the option the tile represents.\n   * - `description` [ReactNode] - (Optional) Further explanatory guidance on the tile option, shown below the `label`.\n   * - `image` [ReactNode] - (Optional) Visually distinctive image for the tile option, shown below the `description`.\n   * - `disabled` [boolean] - (Optional) Specifies whether the tile is disabled. Users can't select disabled tiles.\n   * - `controlId` [string] - (Optional) The ID of the internal input. You can use this to relate a label element's `for` attribute to this control.\n   *            We recommend that you don't set this property because it's automatically set by the tiles component.\n   */\n  items?: ReadonlyArray<TilesProps.TilesDefinition>;\n\n  /**\n   * Adds `aria-label` on the group. Don't set this property if you are using this form element within a form field\n   * because the form field component automatically sets the correct labels to make the component accessible.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Adds `aria-required` on the group.\n   */\n  ariaRequired?: boolean;\n\n  /**\n   * The number of columns for the tiles to be displayed in. Valid values are integers between 1 and 4.\n   * If no value is specified, the number of columns is determined based on the number of items, with a maximum of 3.\n   * It is set to 2 if 4 or 8 items are supplied in order to optimize the layout.\n   */\n  columns?: number;\n\n  /**\n   * Called when the user selects a different tile.\n   */\n  onChange?: NonCancelableEventHandler<TilesProps.ChangeDetail>;\n\n  /**\n   * Adds `aria-controls` attribute to the component.\n   * If the component controls any secondary content (for example, another form field), use this to provide an ID referring to the secondary content.\n   */\n  ariaControls?: string;\n\n  /**\n   * Specifies if the control is read-only, which prevents the\n   * user from modifying the value, but does not prevent the value from\n   * being included in a form submission. A read-only control is still focusable.\n   */\n  readOnly?: boolean;\n}\n\nexport namespace TilesProps {\n  export type Breakpoint = _Breakpoint;\n  export interface TilesDefinition {\n    value: string;\n    label: React.ReactNode;\n    description?: React.ReactNode;\n    image?: React.ReactNode;\n    disabled?: boolean;\n    controlId?: string;\n  }\n\n  export interface ChangeDetail {\n    value: string;\n  }\n\n  export interface Ref {\n    /**\n     * Sets input focus onto the UI control.\n     */\n    focus(): void;\n  }\n}\n"]}

package/tiles/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/tiles/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AASlF,QAAA,MAAM,aAAa,qHAuDlB,CAAC;AAqBF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/tiles/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AASlF,QAAA,MAAM,aAAa,qHA0DlB,CAAC;AAqBF,eAAe,aAAa,CAAC"}