@cloudscape-design/components-themeable 3.0.1303 → 3.0.1305

package/lib/internal/template/input/styles.scoped.css

@@ -142,11 +142,11 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_root_2rhyz_1v8xp_145:not(#\9) {
+.awsui_root_2rhyz_sr97g_145:not(#\9) {
   /* used in test-utils for component to distinguish input from other input-like components, for example autosuggest */
 }
 
-.awsui_input_2rhyz_1v8xp_149:not(#\9) {
+.awsui_input_2rhyz_sr97g_149:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -178,177 +178,177 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
   padding-block: var(--space-field-vertical-dgs6s0, 4px);
   padding-inline: var(--space-field-horizontal-n5peob, 8px);
-  color: var(--awsui-style-color-default-6b9ypa, var(--color-text-body-default-5qid0u, #16191f));
+  color: var(--awsui-style-color-default-jsjyte, var(--color-text-body-default-5qid0u, #16191f));
   inline-size: 100%;
   cursor: text;
   box-sizing: border-box;
-  background-color: var(--awsui-style-background-default-6b9ypa, var(--color-background-input-default-1z2buq, #ffffff));
+  background-color: var(--awsui-style-background-default-jsjyte, var(--color-background-input-default-1z2buq, #ffffff));
   border-start-start-radius: var(--border-radius-input-4vr9on, 2px);
   border-start-end-radius: var(--border-radius-input-4vr9on, 2px);
   border-end-start-radius: var(--border-radius-input-4vr9on, 2px);
   border-end-end-radius: var(--border-radius-input-4vr9on, 2px);
-  border-block: var(--border-width-field-9k1tdz, 1px) solid var(--awsui-style-border-color-default-6b9ypa, var(--color-border-input-default-txli8y, #687078));
-  border-inline: var(--border-width-field-9k1tdz, 1px) solid var(--awsui-style-border-color-default-6b9ypa, var(--color-border-input-default-txli8y, #687078));
-  box-shadow: var(--awsui-style-box-shadow-default-6b9ypa);
+  border-block: var(--border-width-field-9k1tdz, 1px) solid var(--awsui-style-border-color-default-jsjyte, var(--color-border-input-default-txli8y, #687078));
+  border-inline: var(--border-width-field-9k1tdz, 1px) solid var(--awsui-style-border-color-default-jsjyte, var(--color-border-input-default-txli8y, #687078));
+  box-shadow: var(--awsui-style-box-shadow-default-jsjyte);
   font-size: var(--font-size-body-m-vv54cm, 14px);
   line-height: var(--line-height-body-m-bedeoh, 22px);
   min-block-size: var(--size-vertical-input-8gzd1t, 32px);
 }
-.awsui_input_2rhyz_1v8xp_149:not(#\9):hover {
-  border-color: var(--awsui-style-border-color-hover-6b9ypa, var(--awsui-style-border-color-default-6b9ypa, var(--color-border-input-default-txli8y, #687078)));
-  color: var(--awsui-style-color-hover-6b9ypa, var(--awsui-style-border-color-default-6b9ypa, var(--color-text-body-default-5qid0u, #16191f)));
-  background-color: var(--awsui-style-background-hover-6b9ypa, var(--awsui-style-background-default-6b9ypa, var(--color-background-input-default-1z2buq, #ffffff)));
-  box-shadow: var(--awsui-style-box-shadow-hover-6b9ypa, --awsui-style-box-shadow-default-6b9ypa);
-}
-.awsui_input_2rhyz_1v8xp_149.awsui_input-readonly_2rhyz_1v8xp_203:not(#\9) {
-  background-color: var(--awsui-style-background-readonly-6b9ypa, var(--awsui-style-background-default-6b9ypa, var(--color-background-input-default-1z2buq, #ffffff)));
-  border-block: var(--border-width-field-9k1tdz, 1px) solid var(--awsui-style-border-color-readonly-6b9ypa, var(--awsui-style-border-color-default-6b9ypa, var(--color-border-input-disabled-tz38ro, #eaeded)));
-  border-inline: var(--border-width-field-9k1tdz, 1px) solid var(--awsui-style-border-color-readonly-6b9ypa, var(--awsui-style-border-color-default-6b9ypa, var(--color-border-input-disabled-tz38ro, #eaeded)));
-  color: var(--awsui-style-color-readonly-6b9ypa, var(--awsui-style-color-default-6b9ypa, var(--color-text-body-default-5qid0u, #16191f)));
-  box-shadow: var(--awsui-style-box-shadow-readonly-6b9ypa);
-}
-.awsui_input_2rhyz_1v8xp_149:not(#\9)::-webkit-input-placeholder {
-  color: var(--awsui-style-placeholder-color-6b9ypa, var(--color-text-input-placeholder-hvcry0, #687078));
-  font-size: var(--awsui-style-placeholder-font-size-6b9ypa);
-  font-style: var(--awsui-style-placeholder-font-style-6b9ypa, italic);
-  font-weight: var(--awsui-style-placeholder-font-weight-6b9ypa);
+.awsui_input_2rhyz_sr97g_149:not(#\9):hover {
+  border-color: var(--awsui-style-border-color-hover-jsjyte, var(--awsui-style-border-color-default-jsjyte, var(--color-border-input-default-txli8y, #687078)));
+  color: var(--awsui-style-color-hover-jsjyte, var(--awsui-style-border-color-default-jsjyte, var(--color-text-body-default-5qid0u, #16191f)));
+  background-color: var(--awsui-style-background-hover-jsjyte, var(--awsui-style-background-default-jsjyte, var(--color-background-input-default-1z2buq, #ffffff)));
+  box-shadow: var(--awsui-style-box-shadow-hover-jsjyte, --awsui-style-box-shadow-default-jsjyte);
+}
+.awsui_input_2rhyz_sr97g_149.awsui_input-readonly_2rhyz_sr97g_203:not(#\9) {
+  background-color: var(--awsui-style-background-readonly-jsjyte, var(--awsui-style-background-default-jsjyte, var(--color-background-input-default-1z2buq, #ffffff)));
+  border-block: var(--border-width-field-9k1tdz, 1px) solid var(--awsui-style-border-color-readonly-jsjyte, var(--awsui-style-border-color-default-jsjyte, var(--color-border-input-disabled-tz38ro, #eaeded)));
+  border-inline: var(--border-width-field-9k1tdz, 1px) solid var(--awsui-style-border-color-readonly-jsjyte, var(--awsui-style-border-color-default-jsjyte, var(--color-border-input-disabled-tz38ro, #eaeded)));
+  color: var(--awsui-style-color-readonly-jsjyte, var(--awsui-style-color-default-jsjyte, var(--color-text-body-default-5qid0u, #16191f)));
+  box-shadow: var(--awsui-style-box-shadow-readonly-jsjyte);
+}
+.awsui_input_2rhyz_sr97g_149:not(#\9)::-webkit-input-placeholder {
+  color: var(--awsui-style-placeholder-color-jsjyte, var(--color-text-input-placeholder-hvcry0, #687078));
+  font-size: var(--awsui-style-placeholder-font-size-jsjyte);
+  font-style: var(--awsui-style-placeholder-font-style-jsjyte, italic);
+  font-weight: var(--awsui-style-placeholder-font-weight-jsjyte);
   -webkit-user-select: none;
           user-select: none;
 }
-.awsui_input_2rhyz_1v8xp_149:not(#\9)::-moz-placeholder {
-  color: var(--awsui-style-placeholder-color-6b9ypa, var(--color-text-input-placeholder-hvcry0, #687078));
-  font-size: var(--awsui-style-placeholder-font-size-6b9ypa);
-  font-style: var(--awsui-style-placeholder-font-style-6b9ypa, italic);
-  font-weight: var(--awsui-style-placeholder-font-weight-6b9ypa);
+.awsui_input_2rhyz_sr97g_149:not(#\9)::-moz-placeholder {
+  color: var(--awsui-style-placeholder-color-jsjyte, var(--color-text-input-placeholder-hvcry0, #687078));
+  font-size: var(--awsui-style-placeholder-font-size-jsjyte);
+  font-style: var(--awsui-style-placeholder-font-style-jsjyte, italic);
+  font-weight: var(--awsui-style-placeholder-font-weight-jsjyte);
   opacity: 1;
 }
-.awsui_input_2rhyz_1v8xp_149:not(#\9):-moz-placeholder {
-  color: var(--awsui-style-placeholder-color-6b9ypa, var(--color-text-input-placeholder-hvcry0, #687078));
-  font-size: var(--awsui-style-placeholder-font-size-6b9ypa);
-  font-style: var(--awsui-style-placeholder-font-style-6b9ypa, italic);
-  font-weight: var(--awsui-style-placeholder-font-weight-6b9ypa);
+.awsui_input_2rhyz_sr97g_149:not(#\9):-moz-placeholder {
+  color: var(--awsui-style-placeholder-color-jsjyte, var(--color-text-input-placeholder-hvcry0, #687078));
+  font-size: var(--awsui-style-placeholder-font-size-jsjyte);
+  font-style: var(--awsui-style-placeholder-font-style-jsjyte, italic);
+  font-weight: var(--awsui-style-placeholder-font-weight-jsjyte);
   opacity: 1;
 }
-.awsui_input_2rhyz_1v8xp_149:not(#\9):focus {
+.awsui_input_2rhyz_sr97g_149:not(#\9):focus {
   outline: 2px dotted transparent;
-  border-block: var(--border-width-field-9k1tdz, 1px) solid var(--awsui-style-border-color-focus-6b9ypa, var(--color-border-input-focused-lslq4r, #0073bb));
-  border-inline: var(--border-width-field-9k1tdz, 1px) solid var(--awsui-style-border-color-focus-6b9ypa, var(--color-border-input-focused-lslq4r, #0073bb));
+  border-block: var(--border-width-field-9k1tdz, 1px) solid var(--awsui-style-border-color-focus-jsjyte, var(--color-border-input-focused-lslq4r, #0073bb));
+  border-inline: var(--border-width-field-9k1tdz, 1px) solid var(--awsui-style-border-color-focus-jsjyte, var(--color-border-input-focused-lslq4r, #0073bb));
   border-start-start-radius: var(--border-radius-input-4vr9on, 2px);
   border-start-end-radius: var(--border-radius-input-4vr9on, 2px);
   border-end-start-radius: var(--border-radius-input-4vr9on, 2px);
   border-end-end-radius: var(--border-radius-input-4vr9on, 2px);
-  box-shadow: var(--awsui-style-box-shadow-focus-6b9ypa, 0 0 0 var(--border-control-focus-ring-shadow-spread-ql2vj7, 1px) var(--color-border-item-focused-r5f6xl, #0073bb));
-  color: var(--awsui-style-color-focus-6b9ypa, var(--color-text-body-default-5qid0u, #16191f));
-  background-color: var(--awsui-style-background-focus-6b9ypa, var(--color-background-input-default-1z2buq, #ffffff));
-}
-.awsui_input_2rhyz_1v8xp_149:not(#\9):disabled {
-  background-color: var(--awsui-style-background-disabled-6b9ypa, var(--color-background-input-disabled-4vlau3, #eaeded));
-  border-block: var(--border-width-field-9k1tdz, 1px) solid var(--awsui-style-border-color-disabled-6b9ypa, var(--color-border-input-disabled-tz38ro, #eaeded));
-  border-inline: var(--border-width-field-9k1tdz, 1px) solid var(--awsui-style-border-color-disabled-6b9ypa, var(--color-border-input-disabled-tz38ro, #eaeded));
-  color: var(--awsui-style-color-disabled-6b9ypa, var(--color-text-input-disabled-y5t5v9, #879596));
+  box-shadow: var(--awsui-style-box-shadow-focus-jsjyte, 0 0 0 var(--border-control-focus-ring-shadow-spread-ql2vj7, 1px) var(--color-border-item-focused-r5f6xl, #0073bb));
+  color: var(--awsui-style-color-focus-jsjyte, var(--color-text-body-default-5qid0u, #16191f));
+  background-color: var(--awsui-style-background-focus-jsjyte, var(--color-background-input-default-1z2buq, #ffffff));
+}
+.awsui_input_2rhyz_sr97g_149:not(#\9):disabled {
+  background-color: var(--awsui-style-background-disabled-jsjyte, var(--color-background-input-disabled-4vlau3, #eaeded));
+  border-block: var(--border-width-field-9k1tdz, 1px) solid var(--awsui-style-border-color-disabled-jsjyte, var(--color-border-input-disabled-tz38ro, #eaeded));
+  border-inline: var(--border-width-field-9k1tdz, 1px) solid var(--awsui-style-border-color-disabled-jsjyte, var(--color-border-input-disabled-tz38ro, #eaeded));
+  color: var(--awsui-style-color-disabled-jsjyte, var(--color-text-input-disabled-y5t5v9, #879596));
   cursor: default;
-  box-shadow: var(--awsui-style-box-shadow-disabled-6b9ypa);
+  box-shadow: var(--awsui-style-box-shadow-disabled-jsjyte);
 }
-.awsui_input_2rhyz_1v8xp_149:not(#\9):disabled::-webkit-input-placeholder {
-  color: var(--awsui-style-placeholder-color-6b9ypa, var(--color-text-input-placeholder-disabled-x4lauf, #687078));
+.awsui_input_2rhyz_sr97g_149:not(#\9):disabled::-webkit-input-placeholder {
+  color: var(--awsui-style-placeholder-color-jsjyte, var(--color-text-input-placeholder-disabled-x4lauf, #687078));
   -webkit-user-select: none;
           user-select: none;
 }
-.awsui_input_2rhyz_1v8xp_149:not(#\9):disabled::-moz-placeholder {
-  color: var(--awsui-style-placeholder-color-6b9ypa, var(--color-text-input-placeholder-disabled-x4lauf, #687078));
+.awsui_input_2rhyz_sr97g_149:not(#\9):disabled::-moz-placeholder {
+  color: var(--awsui-style-placeholder-color-jsjyte, var(--color-text-input-placeholder-disabled-x4lauf, #687078));
   opacity: 1;
 }
-.awsui_input_2rhyz_1v8xp_149:not(#\9):disabled:-moz-placeholder {
-  color: var(--awsui-style-placeholder-color-6b9ypa, var(--color-text-input-placeholder-disabled-x4lauf, #687078));
+.awsui_input_2rhyz_sr97g_149:not(#\9):disabled:-moz-placeholder {
+  color: var(--awsui-style-placeholder-color-jsjyte, var(--color-text-input-placeholder-disabled-x4lauf, #687078));
   opacity: 1;
 }
-.awsui_input_2rhyz_1v8xp_149:not(#\9):invalid {
+.awsui_input_2rhyz_sr97g_149:not(#\9):invalid {
   box-shadow: none;
 }
-.awsui_input_2rhyz_1v8xp_149.awsui_input-invalid_2rhyz_1v8xp_266:not(#\9) {
-  color: var(--awsui-style-color-default-6b9ypa, var(--color-text-status-error-aknuvu, #d13212));
-  border-color: var(--awsui-style-border-color-default-6b9ypa, var(--color-text-status-error-aknuvu, #d13212));
+.awsui_input_2rhyz_sr97g_149.awsui_input-invalid_2rhyz_sr97g_266:not(#\9) {
+  color: var(--awsui-style-color-default-jsjyte, var(--color-text-status-error-aknuvu, #d13212));
+  border-color: var(--awsui-style-border-color-default-jsjyte, var(--color-text-status-error-aknuvu, #d13212));
   padding-inline-start: calc(var(--space-field-horizontal-n5peob, 8px) - (var(--border-invalid-width-z5cnpo, 4px) - var(--border-width-field-9k1tdz, 1px)));
   border-inline-start-width: var(--border-invalid-width-z5cnpo, 4px);
 }
-.awsui_input_2rhyz_1v8xp_149.awsui_input-invalid_2rhyz_1v8xp_266:not(#\9):focus {
-  box-shadow: var(--awsui-style-box-shadow-focus-6b9ypa, 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-t0us6n, 1px) var(--color-border-item-focused-r5f6xl, #0073bb));
+.awsui_input_2rhyz_sr97g_149.awsui_input-invalid_2rhyz_sr97g_266:not(#\9):focus {
+  box-shadow: var(--awsui-style-box-shadow-focus-jsjyte, 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-t0us6n, 1px) var(--color-border-item-focused-r5f6xl, #0073bb));
 }
-.awsui_input_2rhyz_1v8xp_149.awsui_input-invalid_2rhyz_1v8xp_266.awsui_input-has-icon-left_2rhyz_1v8xp_275:not(#\9) {
+.awsui_input_2rhyz_sr97g_149.awsui_input-invalid_2rhyz_sr97g_266.awsui_input-has-icon-left_2rhyz_sr97g_275:not(#\9) {
   padding-inline-start: calc(var(--space-field-icon-offset-ihoxql, 32px) - (var(--border-invalid-width-z5cnpo, 4px) - var(--border-width-field-9k1tdz, 1px)));
 }
-.awsui_input_2rhyz_1v8xp_149.awsui_input-warning_2rhyz_1v8xp_278:not(#\9) {
-  color: var(--awsui-style-color-default-6b9ypa, var(--color-text-status-warning-9b45qh, #906806));
-  border-color: var(--awsui-style-border-color-default-6b9ypa, var(--color-text-status-warning-9b45qh, #906806));
+.awsui_input_2rhyz_sr97g_149.awsui_input-warning_2rhyz_sr97g_278:not(#\9) {
+  color: var(--awsui-style-color-default-jsjyte, var(--color-text-status-warning-9b45qh, #906806));
+  border-color: var(--awsui-style-border-color-default-jsjyte, var(--color-text-status-warning-9b45qh, #906806));
   padding-inline-start: calc(var(--space-field-horizontal-n5peob, 8px) - (var(--border-invalid-width-z5cnpo, 4px) - var(--border-width-field-9k1tdz, 1px)));
   border-inline-start-width: var(--border-invalid-width-z5cnpo, 4px);
 }
-.awsui_input_2rhyz_1v8xp_149.awsui_input-warning_2rhyz_1v8xp_278:not(#\9):focus {
-  box-shadow: var(--awsui-style-box-shadow-focus-6b9ypa, 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-t0us6n, 1px) var(--color-border-item-focused-r5f6xl, #0073bb));
+.awsui_input_2rhyz_sr97g_149.awsui_input-warning_2rhyz_sr97g_278:not(#\9):focus {
+  box-shadow: var(--awsui-style-box-shadow-focus-jsjyte, 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-t0us6n, 1px) var(--color-border-item-focused-r5f6xl, #0073bb));
 }
-.awsui_input_2rhyz_1v8xp_149.awsui_input-warning_2rhyz_1v8xp_278.awsui_input-has-icon-left_2rhyz_1v8xp_275:not(#\9) {
+.awsui_input_2rhyz_sr97g_149.awsui_input-warning_2rhyz_sr97g_278.awsui_input-has-icon-left_2rhyz_sr97g_275:not(#\9) {
   padding-inline-start: calc(var(--space-field-icon-offset-ihoxql, 32px) - (var(--border-invalid-width-z5cnpo, 4px) - var(--border-width-field-9k1tdz, 1px)));
 }
-.awsui_input_2rhyz_1v8xp_149.awsui_input-type-search_2rhyz_1v8xp_290:not(#\9) {
+.awsui_input_2rhyz_sr97g_149.awsui_input-type-search_2rhyz_sr97g_290:not(#\9) {
   box-sizing: border-box;
   -webkit-appearance: none;
 }
-.awsui_input_2rhyz_1v8xp_149.awsui_input-type-search_2rhyz_1v8xp_290:not(#\9)::-webkit-search-decoration {
+.awsui_input_2rhyz_sr97g_149.awsui_input-type-search_2rhyz_sr97g_290:not(#\9)::-webkit-search-decoration {
   -webkit-appearance: none;
 }
-.awsui_input_2rhyz_1v8xp_149.awsui_input-type-search_2rhyz_1v8xp_290:not(#\9)::-webkit-search-cancel-button {
+.awsui_input_2rhyz_sr97g_149.awsui_input-type-search_2rhyz_sr97g_290:not(#\9)::-webkit-search-cancel-button {
   display: none;
 }
-.awsui_input_2rhyz_1v8xp_149.awsui_input-has-icon-left_2rhyz_1v8xp_275:not(#\9) {
+.awsui_input_2rhyz_sr97g_149.awsui_input-has-icon-left_2rhyz_sr97g_275:not(#\9) {
   padding-inline-start: var(--space-field-icon-offset-ihoxql, 32px);
 }
-.awsui_input_2rhyz_1v8xp_149.awsui_input-has-icon-right_2rhyz_1v8xp_303:not(#\9) {
+.awsui_input_2rhyz_sr97g_149.awsui_input-has-icon-right_2rhyz_sr97g_303:not(#\9) {
   padding-inline-end: var(--space-field-icon-offset-ihoxql, 32px);
 }
-.awsui_input_2rhyz_1v8xp_149.awsui_input-has-no-border-radius_2rhyz_1v8xp_306:not(#\9) {
+.awsui_input_2rhyz_sr97g_149.awsui_input-has-no-border-radius_2rhyz_sr97g_306:not(#\9) {
   border-start-start-radius: var(--border-radius-dropdown-oaxffg, 0px);
   border-start-end-radius: var(--border-radius-dropdown-oaxffg, 0px);
   border-end-start-radius: var(--border-radius-dropdown-oaxffg, 0px);
   border-end-end-radius: var(--border-radius-dropdown-oaxffg, 0px);
 }
 
-.awsui_input-container_2rhyz_1v8xp_313:not(#\9) {
+.awsui_input-container_2rhyz_sr97g_313:not(#\9) {
   display: flex;
   position: relative;
 }
 
-.awsui_input-icon-left_2rhyz_1v8xp_318:not(#\9) {
+.awsui_input-icon-left_2rhyz_sr97g_318:not(#\9) {
   position: absolute;
   pointer-events: none;
   inset-inline-start: var(--space-field-horizontal-n5peob, 8px);
   inset-block-start: calc(50% - var(--line-height-body-m-bedeoh, 22px) / 2);
 }
 
-.awsui_input-icon-right_2rhyz_1v8xp_325:not(#\9) {
+.awsui_input-icon-right_2rhyz_sr97g_325:not(#\9) {
   position: absolute;
   inset-block-start: calc(calc(50% - var(--line-height-body-m-bedeoh, 22px) / 2) - var(--space-xxxs-3w1kr2, 2px));
   inset-inline-end: calc(var(--space-field-horizontal-n5peob, 8px) - var(--space-xxs-jnczic, 4px));
 }
 
-.awsui_input-button-right_2rhyz_1v8xp_331:not(#\9) {
+.awsui_input-button-right_2rhyz_sr97g_331:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_inline-label-trigger-wrapper_2rhyz_1v8xp_335:not(#\9) {
+.awsui_inline-label-trigger-wrapper_2rhyz_sr97g_335:not(#\9) {
   margin-block-start: -7px;
 }
-.awsui_inline-label-trigger-wrapper-full-width_2rhyz_1v8xp_338:not(#\9) {
+.awsui_inline-label-trigger-wrapper-full-width_2rhyz_sr97g_338:not(#\9) {
   inline-size: 100%;
 }
 
-.awsui_inline-label-wrapper_2rhyz_1v8xp_342:not(#\9) {
+.awsui_inline-label-wrapper_2rhyz_sr97g_342:not(#\9) {
   margin-block-start: calc(var(--space-scaled-xs-sppte9, 8px) * -1);
 }
-.awsui_inline-label-wrapper-full-width_2rhyz_1v8xp_345:not(#\9) {
+.awsui_inline-label-wrapper-full-width_2rhyz_sr97g_345:not(#\9) {
   inline-size: 100%;
 }
 
-.awsui_inline-label_2rhyz_1v8xp_335:not(#\9) {
+.awsui_inline-label_2rhyz_sr97g_335:not(#\9) {
   background: linear-gradient(to bottom, var(--color-background-layout-main-05m5y6, #f2f3f3), var(--color-background-input-default-1z2buq, #ffffff));
   border-start-start-radius: 2px;
   border-start-end-radius: 2px;

package/lib/internal/template/input/styles.selectors.js

@@ -2,23 +2,23 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_2rhyz_1v8xp_145",
-  "input": "awsui_input_2rhyz_1v8xp_149",
-  "input-readonly": "awsui_input-readonly_2rhyz_1v8xp_203",
-  "input-invalid": "awsui_input-invalid_2rhyz_1v8xp_266",
-  "input-has-icon-left": "awsui_input-has-icon-left_2rhyz_1v8xp_275",
-  "input-warning": "awsui_input-warning_2rhyz_1v8xp_278",
-  "input-type-search": "awsui_input-type-search_2rhyz_1v8xp_290",
-  "input-has-icon-right": "awsui_input-has-icon-right_2rhyz_1v8xp_303",
-  "input-has-no-border-radius": "awsui_input-has-no-border-radius_2rhyz_1v8xp_306",
-  "input-container": "awsui_input-container_2rhyz_1v8xp_313",
-  "input-icon-left": "awsui_input-icon-left_2rhyz_1v8xp_318",
-  "input-icon-right": "awsui_input-icon-right_2rhyz_1v8xp_325",
-  "input-button-right": "awsui_input-button-right_2rhyz_1v8xp_331",
-  "inline-label-trigger-wrapper": "awsui_inline-label-trigger-wrapper_2rhyz_1v8xp_335",
-  "inline-label-trigger-wrapper-full-width": "awsui_inline-label-trigger-wrapper-full-width_2rhyz_1v8xp_338",
-  "inline-label-wrapper": "awsui_inline-label-wrapper_2rhyz_1v8xp_342",
-  "inline-label-wrapper-full-width": "awsui_inline-label-wrapper-full-width_2rhyz_1v8xp_345",
-  "inline-label": "awsui_inline-label_2rhyz_1v8xp_335"
+  "root": "awsui_root_2rhyz_sr97g_145",
+  "input": "awsui_input_2rhyz_sr97g_149",
+  "input-readonly": "awsui_input-readonly_2rhyz_sr97g_203",
+  "input-invalid": "awsui_input-invalid_2rhyz_sr97g_266",
+  "input-has-icon-left": "awsui_input-has-icon-left_2rhyz_sr97g_275",
+  "input-warning": "awsui_input-warning_2rhyz_sr97g_278",
+  "input-type-search": "awsui_input-type-search_2rhyz_sr97g_290",
+  "input-has-icon-right": "awsui_input-has-icon-right_2rhyz_sr97g_303",
+  "input-has-no-border-radius": "awsui_input-has-no-border-radius_2rhyz_sr97g_306",
+  "input-container": "awsui_input-container_2rhyz_sr97g_313",
+  "input-icon-left": "awsui_input-icon-left_2rhyz_sr97g_318",
+  "input-icon-right": "awsui_input-icon-right_2rhyz_sr97g_325",
+  "input-button-right": "awsui_input-button-right_2rhyz_sr97g_331",
+  "inline-label-trigger-wrapper": "awsui_inline-label-trigger-wrapper_2rhyz_sr97g_335",
+  "inline-label-trigger-wrapper-full-width": "awsui_inline-label-trigger-wrapper-full-width_2rhyz_sr97g_338",
+  "inline-label-wrapper": "awsui_inline-label-wrapper_2rhyz_sr97g_342",
+  "inline-label-wrapper-full-width": "awsui_inline-label-wrapper-full-width_2rhyz_sr97g_345",
+  "inline-label": "awsui_inline-label_2rhyz_sr97g_335"
 };
   

package/lib/internal/template/internal/base-component/styles.scoped.css

@@ -344,6 +344,11 @@
     --color-background-avatar-default-yhbpq4:var(--color-neutral-650-92yp10);
     --color-text-avatar-3ceqkg:var(--color-white-jf0w15);
     --color-background-loading-bar-gen-ai-dx9ipo:linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%);
+    --color-background-status-indicator-error-621sf8:transparent;
+    --color-background-status-indicator-warning-3kccdi:transparent;
+    --color-background-status-indicator-success-9mizpw:transparent;
+    --color-background-status-indicator-info-zw9ljm:transparent;
+    --color-background-status-indicator-neutral-50dvgi:transparent;
     --color-background-chat-bubble-outgoing-ramyaa:transparent;
     --color-background-chat-bubble-incoming-m85frs:var(--color-neutral-200-z3mmn9);
     --color-text-chat-bubble-outgoing-8zncvj:var(--color-text-body-default-5qid0u);
@@ -634,60 +639,62 @@
     --border-line-chart-dash-array-9wbxtz:3 5;
     --border-line-chart-line-join-azfkix:miter;
     --border-line-chart-width-aeswqs:2px;
+    --border-link-focus-ring-outline-c5423y:5px auto Highlight;
+    --border-link-focus-ring-shadow-spread-woh62o:0px;
     --border-panel-header-width-r62i4a:0px;
     --border-panel-top-width-a8j764:0px;
+    --border-radius-action-card-default-lfmdfw:var(--border-radius-card-default-45b7vy);
+    --border-radius-action-card-embedded-yc37lz:var(--border-radius-card-embedded-gvuteo);
     --border-radius-alert-v9spjj:var(--border-radius-input-4vr9on);
     --border-radius-badge-o70tla:16px;
     --border-radius-button-vm1lh4:2px;
     --border-radius-calendar-day-focus-ring-1443fe:2px;
-    --border-radius-code-editor-pxxwyo:var(--border-radius-item-xggxkd);
     --border-radius-card-default-45b7vy:var(--border-radius-container-l30zxy);
     --border-radius-card-embedded-gvuteo:var(--border-radius-chat-bubble-yzqw4v);
-    --border-radius-item-card-default-puscs7:var(--border-radius-card-default-45b7vy);
-    --border-radius-item-card-embedded-z6yq9n:var(--border-radius-card-embedded-gvuteo);
+    --border-radius-chat-bubble-yzqw4v:2px;
+    --border-radius-code-editor-pxxwyo:var(--border-radius-item-xggxkd);
     --border-radius-container-l30zxy:0px;
     --border-radius-control-circular-focus-ring-0v2apg:50%;
     --border-radius-control-default-focus-ring-9xsko1:var(--border-radius-input-4vr9on);
     --border-radius-dropdown-oaxffg:var(--border-radius-item-xggxkd);
     --border-radius-dropzone-n713ay:0px;
     --border-radius-flashbar-4ael4o:0px;
-    --border-radius-item-xggxkd:0px;
     --border-radius-input-4vr9on:2px;
+    --border-radius-item-xggxkd:0px;
+    --border-radius-item-card-default-puscs7:var(--border-radius-card-default-45b7vy);
+    --border-radius-item-card-embedded-z6yq9n:var(--border-radius-card-embedded-gvuteo);
     --border-radius-popover-emyrcc:var(--border-radius-input-4vr9on);
+    --border-radius-skeleton-r8data:8px;
+    --border-radius-status-indicator-42rwc5:var(--border-radius-badge-o70tla);
     --border-radius-tabs-focus-ring-ciyqfm:0px;
     --border-radius-tiles-5li9yd:var(--border-radius-input-4vr9on);
     --border-radius-token-8arsz0:var(--border-radius-input-4vr9on);
-    --border-radius-chat-bubble-yzqw4v:2px;
     --border-radius-tutorial-panel-item-9xcrp2:var(--border-radius-input-4vr9on);
     --border-table-sticky-width-o9kqes:0px;
-    --border-link-focus-ring-outline-c5423y:5px auto Highlight;
-    --border-link-focus-ring-shadow-spread-woh62o:0px;
-    --border-width-card-xmgn65:0px;
-    --border-width-card-selected-8fhyq1:var(--border-item-width-acvlhx);
-    --border-width-item-card-qzwn4s:var(--border-width-card-xmgn65);
-    --border-width-item-selected-7rbija:var(--border-item-width-acvlhx);
+    --border-width-action-card-active-qw9sq5:1px;
+    --border-width-action-card-default-hax7i5:1px;
+    --border-width-action-card-disabled-8qg2x7:1px;
+    --border-width-action-card-hover-v5f1fk:1px;
     --border-width-alert-5zfcv3:1px;
-    --border-width-alert-block-start-oj3q3w:var(--border-width-alert-5zfcv3);
     --border-width-alert-block-end-97hkl4:var(--border-width-alert-5zfcv3);
-    --border-width-alert-inline-start-18a8dl:var(--border-width-alert-5zfcv3);
+    --border-width-alert-block-start-oj3q3w:var(--border-width-alert-5zfcv3);
     --border-width-alert-inline-end-ftlxmm:var(--border-width-alert-5zfcv3);
+    --border-width-alert-inline-start-18a8dl:var(--border-width-alert-5zfcv3);
     --border-width-button-40y1n5:1px;
+    --border-width-card-xmgn65:0px;
+    --border-width-card-selected-8fhyq1:var(--border-item-width-acvlhx);
     --border-width-dropdown-qic2p4:1px;
     --border-width-field-9k1tdz:1px;
     --border-width-popover-dgqo1x:1px;
     --border-width-token-cwl2sl:1px;
+    --border-width-icon-x-small-ffpus7:1.5px;
     --border-width-icon-small-vdkeni:2px;
     --border-width-icon-normal-yqojud:2px;
     --border-width-icon-medium-hkvbnl:2px;
     --border-width-icon-big-bbcgm5:3px;
     --border-width-icon-large-d362l9:4px;
-    --border-radius-action-card-default-lfmdfw:var(--border-radius-card-default-45b7vy);
-    --border-radius-action-card-embedded-yc37lz:var(--border-radius-card-embedded-gvuteo);
-    --border-width-action-card-default-hax7i5:1px;
-    --border-width-action-card-hover-v5f1fk:1px;
-    --border-width-action-card-active-qw9sq5:1px;
-    --border-width-action-card-disabled-8qg2x7:1px;
-    --border-radius-skeleton-r8data:8px;
+    --border-width-item-card-qzwn4s:var(--border-width-card-xmgn65);
+    --border-width-item-selected-7rbija:var(--border-item-width-acvlhx);
     --motion-duration-extra-slow-j8l6m4:270ms;
     --motion-duration-fast-okdxjh:90ms;
     --motion-duration-moderate-24bai8:135ms;
@@ -731,6 +738,7 @@
     --size-icon-large-gj7xfw:48px;
     --size-icon-medium-3ovt3t:16px;
     --size-icon-normal-2f5zkr:16px;
+    --size-icon-x-small-719lnc:12px;
     --size-table-selection-horizontal-udsu00:54px;
     --size-vertical-input-8gzd1t:32px;
     --size-vertical-panel-icon-offset-1tiizm:15px;
@@ -812,6 +820,7 @@
     --space-action-card-description-padding-top-h441rh:var(--space-scaled-xxs-jatbiv);
     --space-option-padding-vertical-uomfe1:var(--space-xxs-jnczic);
     --space-option-padding-horizontal-kfszlb:var(--space-l-3cws6j);
+    --space-status-indicator-padding-horizontal-hzqgcr:var(--space-none-ilazlc);
     --space-scaled-2x-xxs-is489k:var(--space-xxs-jnczic);
     --space-scaled-2x-m-gw45gq:var(--space-m-n2lypl);
     --space-scaled-2x-l-hgjmqp:var(--space-l-3cws6j);
@@ -1862,36 +1871,36 @@
     --border-invalid-width-z5cnpo:8px;
     --border-item-width-acvlhx:2px;
     --border-line-chart-line-join-azfkix:round;
+    --border-link-focus-ring-outline-c5423y:0;
+    --border-link-focus-ring-shadow-spread-woh62o:2px;
     --border-panel-header-width-r62i4a:1px;
     --border-panel-top-width-a8j764:1px;
     --border-radius-alert-v9spjj:var(--border-radius-flashbar-4ael4o);
     --border-radius-badge-o70tla:4px;
     --border-radius-button-vm1lh4:20px;
     --border-radius-calendar-day-focus-ring-1443fe:3px;
+    --border-radius-chat-bubble-yzqw4v:8px;
     --border-radius-code-editor-pxxwyo:var(--border-radius-input-4vr9on);
     --border-radius-container-l30zxy:16px;
     --border-radius-control-circular-focus-ring-0v2apg:4px;
     --border-radius-control-default-focus-ring-9xsko1:4px;
     --border-radius-dropzone-n713ay:12px;
     --border-radius-flashbar-4ael4o:12px;
-    --border-radius-item-xggxkd:8px;
     --border-radius-input-4vr9on:8px;
+    --border-radius-item-xggxkd:8px;
     --border-radius-tabs-focus-ring-ciyqfm:20px;
-    --border-radius-chat-bubble-yzqw4v:8px;
     --border-table-sticky-width-o9kqes:1px;
-    --border-link-focus-ring-outline-c5423y:0;
-    --border-link-focus-ring-shadow-spread-woh62o:2px;
-    --border-width-card-xmgn65:var(--border-divider-section-width-sznrdy);
-    --border-width-item-selected-7rbija:2px;
+    --border-width-action-card-active-qw9sq5:var(--border-width-card-xmgn65);
+    --border-width-action-card-default-hax7i5:var(--border-width-card-xmgn65);
+    --border-width-action-card-disabled-8qg2x7:var(--border-width-card-xmgn65);
+    --border-width-action-card-hover-v5f1fk:var(--border-width-card-xmgn65);
     --border-width-alert-5zfcv3:2px;
     --border-width-button-40y1n5:2px;
+    --border-width-card-xmgn65:var(--border-divider-section-width-sznrdy);
     --border-width-dropdown-qic2p4:2px;
     --border-width-popover-dgqo1x:2px;
     --border-width-token-cwl2sl:2px;
-    --border-width-action-card-default-hax7i5:var(--border-width-card-xmgn65);
-    --border-width-action-card-hover-v5f1fk:var(--border-width-card-xmgn65);
-    --border-width-action-card-active-qw9sq5:var(--border-width-card-xmgn65);
-    --border-width-action-card-disabled-8qg2x7:var(--border-width-card-xmgn65);
+    --border-width-item-selected-7rbija:2px;
     --motion-duration-refresh-only-fast-v9rk6z:115ms;
     --motion-duration-refresh-only-medium-h3wrr6:165ms;
     --motion-duration-refresh-only-slow-zil3nj:250ms;
@@ -2160,23 +2169,24 @@
     --font-weight-key-value-pairs-label-n8tgha:var(--font-display-label-weight-ise9n2);
     --line-height-form-label-kzgcrc:var(--line-height-body-m-bedeoh);
     --line-height-key-value-pairs-label-c69v6r:var(--line-height-body-m-bedeoh);
+    --border-radius-action-card-default-lfmdfw:var(--border-radius-card-default-45b7vy);
+    --border-radius-action-card-embedded-yc37lz:var(--border-radius-card-embedded-gvuteo);
     --border-radius-card-default-45b7vy:var(--border-radius-container-l30zxy);
     --border-radius-card-embedded-gvuteo:var(--border-radius-chat-bubble-yzqw4v);
+    --border-radius-dropdown-oaxffg:var(--border-radius-item-xggxkd);
     --border-radius-item-card-default-puscs7:var(--border-radius-card-default-45b7vy);
     --border-radius-item-card-embedded-z6yq9n:var(--border-radius-card-embedded-gvuteo);
-    --border-radius-dropdown-oaxffg:var(--border-radius-item-xggxkd);
     --border-radius-popover-emyrcc:var(--border-radius-input-4vr9on);
+    --border-radius-status-indicator-42rwc5:var(--border-radius-badge-o70tla);
     --border-radius-tiles-5li9yd:var(--border-radius-input-4vr9on);
     --border-radius-token-8arsz0:var(--border-radius-input-4vr9on);
     --border-radius-tutorial-panel-item-9xcrp2:var(--border-radius-input-4vr9on);
-    --border-width-card-selected-8fhyq1:var(--border-item-width-acvlhx);
-    --border-width-item-card-qzwn4s:var(--border-width-card-xmgn65);
-    --border-width-alert-block-start-oj3q3w:var(--border-width-alert-5zfcv3);
     --border-width-alert-block-end-97hkl4:var(--border-width-alert-5zfcv3);
-    --border-width-alert-inline-start-18a8dl:var(--border-width-alert-5zfcv3);
+    --border-width-alert-block-start-oj3q3w:var(--border-width-alert-5zfcv3);
     --border-width-alert-inline-end-ftlxmm:var(--border-width-alert-5zfcv3);
-    --border-radius-action-card-default-lfmdfw:var(--border-radius-card-default-45b7vy);
-    --border-radius-action-card-embedded-yc37lz:var(--border-radius-card-embedded-gvuteo);
+    --border-width-alert-inline-start-18a8dl:var(--border-width-alert-5zfcv3);
+    --border-width-card-selected-8fhyq1:var(--border-item-width-acvlhx);
+    --border-width-item-card-qzwn4s:var(--border-width-card-xmgn65);
     --space-item-card-vertical-default-uncyor:var(--space-card-vertical-default-wltzyi);
     --space-table-footer-horizontal-x9dbll:var(--space-table-header-horizontal-2rvxep);
     --space-action-card-vertical-default-ootu94:var(--space-card-vertical-default-wltzyi);
@@ -3704,5 +3714,5 @@
   }
 }
 :root {
-  --awsui-version-info-bc6c9867: true;
+  --awsui-version-info-beb6f0a4: true;
 }

package/lib/internal/template/internal/components/drag-handle/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAOlD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAM/C,QAAA,MAAM,gBAAgB,kaA0ErB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAOlD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAM/C,QAAA,MAAM,gBAAgB,kaA2ErB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/internal/template/internal/components/drag-handle/button.js

@@ -31,7 +31,7 @@ const DragHandleButton = forwardRef(({ variant = 'drag-indicator', size = 'norma
     // (See https://bugs.webkit.org/show_bug.cgi?id=22261)
     // Otherwise, we can't reliably catch keyboard events coming from the handle
     // when it is being dragged.
-    React.createElement("div", { ref: useMergeRefs(ref, dragHandleRefObject), role: ariaValue ? 'slider' : 'application', tabIndex: 0, className: clsx(className, styles.handle, testUtilsStyles.root, styles[`handle-${variant}`], styles[`handle-size-${size}`], disabled && styles['handle-disabled'], active && styles.active), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-valuemax": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMax, "aria-valuemin": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMin, "aria-valuenow": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueNow, onPointerDown: onPointerDown, onClick: onClick, onKeyDown: onKeyDown },
+    React.createElement("div", { ref: useMergeRefs(ref, dragHandleRefObject), role: ariaValue ? 'slider' : 'button', tabIndex: 0, className: clsx(className, styles.handle, testUtilsStyles.root, styles[`handle-${variant}`], styles[`handle-size-${size}`], disabled && styles['handle-disabled'], active && styles.active), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-pressed": ariaValue ? undefined : active, "aria-valuemax": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMax, "aria-valuemin": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMin, "aria-valuenow": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueNow, onPointerDown: onPointerDown, onClick: onClick, onKeyDown: onKeyDown },
         React.createElement("div", { className: styles['prevent-pointer'] },
             React.createElement(InternalIcon, { ...iconProps }))));
 });

package/lib/internal/template/internal/components/drag-handle/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAG7E,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,MAAM,gBAAgB,GAAG,UAAU,CACjC,CACE,EACE,OAAO,GAAG,gBAAgB,EAC1B,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,KAAK,EACd,SAAS,EACT,SAAS,EACT,cAAc,EACd,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,OAAO,EACP,SAAS,GACO,EAClB,GAAuB,EACvB,EAAE;IACF,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,MAAM,SAAS,GAAc,CAAC,GAAG,EAAE;QACjC,MAAM,MAAM,GAAG;YACb,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAE,UAAoB,CAAC,CAAC,CAAC,SAAS;YACrD,IAAI;SACL,CAAC;QACF,QAAQ,OAAO,EAAE,CAAC;YAChB,KAAK,gBAAgB;gBACnB,OAAO,EAAE,GAAG,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC;YAC/C,KAAK,aAAa;gBAChB,OAAO,EAAE,GAAG,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;YAC5C,KAAK,mBAAmB;gBACtB,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,YAAY,GAAG,EAAE,CAAC;YACjE,KAAK,iBAAiB;gBACpB,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,UAAU,GAAG,EAAE,CAAC;QACjE,CAAC;IACH,CAAC,CAAC,EAAE,CAAC;IAEL,OAAO;IACL,4DAA4D;IAC5D,oDAAoD;IACpD,sDAAsD;IACtD,4EAA4E;IAC5E,4BAA4B;IAC5B,6BACE,GAAG,EAAE,YAAY,CAAC,GAAG,EAAE,mBAAmB,CAAC,EAC3C,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,EAC1C,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,MAAM,EACb,eAAe,CAAC,IAAI,EACpB,MAAM,CAAC,UAAU,OAAO,EAAE,CAAC,EAC3B,MAAM,CAAC,eAAe,IAAI,EAAE,CAAC,EAC7B,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC,EACrC,MAAM,IAAI,MAAM,CAAC,MAAM,CACxB,gBACW,SAAS,qBACJ,cAAc,sBACb,eAAe,mBAClB,QAAQ,mBACR,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,EAClC,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS;QAGpB,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;YACvC,oBAAC,YAAY,OAAK,SAAS,GAAI,CAC3B,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport { DragHandleProps } from './interfaces';\nimport { ResizeIcon } from './resize-icon';\n\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\nconst DragHandleButton = forwardRef(\n  (\n    {\n      variant = 'drag-indicator',\n      size = 'normal',\n      active = false,\n      className,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedby,\n      ariaValue,\n      disabled,\n      onPointerDown,\n      onClick,\n      onKeyDown,\n    }: DragHandleProps,\n    ref: React.Ref<Element>\n  ) => {\n    const dragHandleRefObject = useRef<HTMLDivElement>(null);\n\n    const iconProps: IconProps = (() => {\n      const shared = {\n        variant: disabled ? ('disabled' as const) : undefined,\n        size,\n      };\n      switch (variant) {\n        case 'drag-indicator':\n          return { ...shared, name: 'drag-indicator' };\n        case 'resize-area':\n          return { ...shared, name: 'resize-area' };\n        case 'resize-horizontal':\n          return { ...shared, svg: <ResizeIcon variant=\"horizontal\" /> };\n        case 'resize-vertical':\n          return { ...shared, svg: <ResizeIcon variant=\"vertical\" /> };\n      }\n    })();\n\n    return (\n      // We need to use a div with button role instead of a button\n      // so that Safari will focus on it when clicking it.\n      // (See https://bugs.webkit.org/show_bug.cgi?id=22261)\n      // Otherwise, we can't reliably catch keyboard events coming from the handle\n      // when it is being dragged.\n      <div\n        ref={useMergeRefs(ref, dragHandleRefObject)}\n        role={ariaValue ? 'slider' : 'application'}\n        tabIndex={0}\n        className={clsx(\n          className,\n          styles.handle,\n          testUtilsStyles.root,\n          styles[`handle-${variant}`],\n          styles[`handle-size-${size}`],\n          disabled && styles['handle-disabled'],\n          active && styles.active\n        )}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedby}\n        aria-disabled={disabled}\n        aria-valuemax={ariaValue?.valueMax}\n        aria-valuemin={ariaValue?.valueMin}\n        aria-valuenow={ariaValue?.valueNow}\n        onPointerDown={onPointerDown}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n      >\n        {/* ensure that events happen on the parent div, not the icon */}\n        <div className={styles['prevent-pointer']}>\n          <InternalIcon {...iconProps} />\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default DragHandleButton;\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAG7E,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,MAAM,gBAAgB,GAAG,UAAU,CACjC,CACE,EACE,OAAO,GAAG,gBAAgB,EAC1B,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,KAAK,EACd,SAAS,EACT,SAAS,EACT,cAAc,EACd,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,OAAO,EACP,SAAS,GACO,EAClB,GAAuB,EACvB,EAAE;IACF,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,MAAM,SAAS,GAAc,CAAC,GAAG,EAAE;QACjC,MAAM,MAAM,GAAG;YACb,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAE,UAAoB,CAAC,CAAC,CAAC,SAAS;YACrD,IAAI;SACL,CAAC;QACF,QAAQ,OAAO,EAAE,CAAC;YAChB,KAAK,gBAAgB;gBACnB,OAAO,EAAE,GAAG,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC;YAC/C,KAAK,aAAa;gBAChB,OAAO,EAAE,GAAG,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;YAC5C,KAAK,mBAAmB;gBACtB,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,YAAY,GAAG,EAAE,CAAC;YACjE,KAAK,iBAAiB;gBACpB,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,UAAU,GAAG,EAAE,CAAC;QACjE,CAAC;IACH,CAAC,CAAC,EAAE,CAAC;IAEL,OAAO;IACL,4DAA4D;IAC5D,oDAAoD;IACpD,sDAAsD;IACtD,4EAA4E;IAC5E,4BAA4B;IAC5B,6BACE,GAAG,EAAE,YAAY,CAAC,GAAG,EAAE,mBAAmB,CAAC,EAC3C,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EACrC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,MAAM,EACb,eAAe,CAAC,IAAI,EACpB,MAAM,CAAC,UAAU,OAAO,EAAE,CAAC,EAC3B,MAAM,CAAC,eAAe,IAAI,EAAE,CAAC,EAC7B,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC,EACrC,MAAM,IAAI,MAAM,CAAC,MAAM,CACxB,gBACW,SAAS,qBACJ,cAAc,sBACb,eAAe,mBAClB,QAAQ,kBACT,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,mBAC7B,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,EAClC,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS;QAGpB,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;YACvC,oBAAC,YAAY,OAAK,SAAS,GAAI,CAC3B,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport { DragHandleProps } from './interfaces';\nimport { ResizeIcon } from './resize-icon';\n\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\nconst DragHandleButton = forwardRef(\n  (\n    {\n      variant = 'drag-indicator',\n      size = 'normal',\n      active = false,\n      className,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedby,\n      ariaValue,\n      disabled,\n      onPointerDown,\n      onClick,\n      onKeyDown,\n    }: DragHandleProps,\n    ref: React.Ref<Element>\n  ) => {\n    const dragHandleRefObject = useRef<HTMLDivElement>(null);\n\n    const iconProps: IconProps = (() => {\n      const shared = {\n        variant: disabled ? ('disabled' as const) : undefined,\n        size,\n      };\n      switch (variant) {\n        case 'drag-indicator':\n          return { ...shared, name: 'drag-indicator' };\n        case 'resize-area':\n          return { ...shared, name: 'resize-area' };\n        case 'resize-horizontal':\n          return { ...shared, svg: <ResizeIcon variant=\"horizontal\" /> };\n        case 'resize-vertical':\n          return { ...shared, svg: <ResizeIcon variant=\"vertical\" /> };\n      }\n    })();\n\n    return (\n      // We need to use a div with button role instead of a button\n      // so that Safari will focus on it when clicking it.\n      // (See https://bugs.webkit.org/show_bug.cgi?id=22261)\n      // Otherwise, we can't reliably catch keyboard events coming from the handle\n      // when it is being dragged.\n      <div\n        ref={useMergeRefs(ref, dragHandleRefObject)}\n        role={ariaValue ? 'slider' : 'button'}\n        tabIndex={0}\n        className={clsx(\n          className,\n          styles.handle,\n          testUtilsStyles.root,\n          styles[`handle-${variant}`],\n          styles[`handle-size-${size}`],\n          disabled && styles['handle-disabled'],\n          active && styles.active\n        )}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedby}\n        aria-disabled={disabled}\n        aria-pressed={ariaValue ? undefined : active}\n        aria-valuemax={ariaValue?.valueMax}\n        aria-valuemin={ariaValue?.valueMin}\n        aria-valuenow={ariaValue?.valueNow}\n        onPointerDown={onPointerDown}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n      >\n        {/* ensure that events happen on the parent div, not the icon */}\n        <div className={styles['prevent-pointer']}>\n          <InternalIcon {...iconProps} />\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default DragHandleButton;\n"]}