@cloudscape-design/components-themeable 3.0.1383 → 3.0.1385

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

@@ -7,7 +7,7 @@
 /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
 /* 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_55fkh_2nevg_10:not(#\9) {
+.awsui_root_55fkh_p5zjs_10:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -47,18 +47,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-default-ka4djm, var(--color-border-input-default-jtkw9d, #687078));
   box-shadow: var(--awsui-prompt-input-style-box-shadow-default-ka4djm);
 }
-.awsui_root_55fkh_2nevg_10:not(#\9):hover {
+.awsui_root_55fkh_p5zjs_10:not(#\9):hover {
   background-color: var(--awsui-prompt-input-style-background-hover-ka4djm, var(--awsui-prompt-input-style-background-default-ka4djm, var(--color-background-input-default-1u0v1p, #ffffff)));
   border-color: var(--awsui-prompt-input-style-border-color-hover-ka4djm, var(--awsui-prompt-input-style-border-color-default-ka4djm, var(--color-border-input-default-jtkw9d, #687078)));
   box-shadow: var(--awsui-prompt-input-style-box-shadow-hover-ka4djm, var(--awsui-prompt-input-style-box-shadow-default-ka4djm));
 }
-.awsui_root_55fkh_2nevg_10.awsui_textarea-readonly_55fkh_2nevg_55:not(#\9) {
+.awsui_root_55fkh_p5zjs_10.awsui_textarea-readonly_55fkh_p5zjs_55:not(#\9) {
   background-color: var(--awsui-prompt-input-style-background-readonly-ka4djm, var(--awsui-prompt-input-style-background-default-ka4djm, var(--color-background-input-default-1u0v1p, #ffffff)));
   border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-readonly-ka4djm, var(--awsui-prompt-input-style-border-color-default-ka4djm, var(--color-border-input-disabled-5m31k6, #eaeded)));
   border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-readonly-ka4djm, var(--awsui-prompt-input-style-border-color-default-ka4djm, var(--color-border-input-disabled-5m31k6, #eaeded)));
   box-shadow: var(--awsui-prompt-input-style-box-shadow-readonly-ka4djm);
 }
-.awsui_root_55fkh_2nevg_10.awsui_disabled_55fkh_2nevg_61:not(#\9) {
+.awsui_root_55fkh_p5zjs_10.awsui_disabled_55fkh_p5zjs_61:not(#\9) {
   background-color: var(--awsui-prompt-input-style-background-disabled-ka4djm, var(--color-background-input-disabled-pyvhb1, #eaeded));
   border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-disabled-ka4djm, var(--color-border-input-disabled-5m31k6, #eaeded));
   border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-disabled-ka4djm, var(--color-border-input-disabled-5m31k6, #eaeded));
@@ -66,70 +66,70 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   cursor: default;
   box-shadow: var(--awsui-prompt-input-style-box-shadow-disabled-ka4djm);
 }
-.awsui_root_55fkh_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_69:not(#\9) {
+.awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69:not(#\9) {
   color: var(--awsui-prompt-input-style-color-default-ka4djm, var(--color-text-status-error-ri38gt, #d13212));
   border-color: var(--awsui-prompt-input-style-border-color-default-ka4djm, var(--color-text-status-error-ri38gt, #d13212));
   padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
   border-inline-start-width: var(--border-invalid-width-b183os, 4px);
 }
-.awsui_root_55fkh_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_69:not(#\9):focus {
+.awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69:not(#\9):focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb);
 }
-.awsui_root_55fkh_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_69:not(#\9) {
+.awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69:not(#\9) {
   padding-inline-start: 0;
 }
-.awsui_root_55fkh_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_69:not(#\9):focus-within, .awsui_root_55fkh_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_69:not(#\9):focus {
+.awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69:not(#\9):focus-within, .awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69:not(#\9):focus {
   color: var(--awsui-prompt-input-style-color-default-ka4djm, var(--color-text-status-error-ri38gt, #d13212));
   border-color: var(--awsui-prompt-input-style-border-color-default-ka4djm, var(--color-text-status-error-ri38gt, #d13212));
   padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
   border-inline-start-width: var(--border-invalid-width-b183os, 4px);
 }
-.awsui_root_55fkh_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_69:not(#\9):focus-within:focus, .awsui_root_55fkh_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_69:not(#\9):focus:focus {
+.awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69:not(#\9):focus-within:focus, .awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69:not(#\9):focus:focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb);
 }
-.awsui_root_55fkh_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_69:not(#\9):focus-within, .awsui_root_55fkh_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_69:not(#\9):focus {
+.awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69:not(#\9):focus-within, .awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69:not(#\9):focus {
   padding-inline-start: 0;
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb);
 }
-.awsui_root_55fkh_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_69.awsui_disabled_55fkh_2nevg_61:not(#\9):focus-within, .awsui_root_55fkh_2nevg_10.awsui_textarea-invalid_55fkh_2nevg_69.awsui_disabled_55fkh_2nevg_61:not(#\9):focus {
+.awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69.awsui_disabled_55fkh_p5zjs_61:not(#\9):focus-within, .awsui_root_55fkh_p5zjs_10.awsui_textarea-invalid_55fkh_p5zjs_69.awsui_disabled_55fkh_p5zjs_61:not(#\9):focus {
   box-shadow: var(--awsui-prompt-input-style-box-shadow-disabled-ka4djm);
 }
-.awsui_root_55fkh_2nevg_10.awsui_textarea-warning_55fkh_2nevg_97:not(#\9) {
+.awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97:not(#\9) {
   color: var(--awsui-prompt-input-style-color-default-ka4djm, var(--color-text-status-warning-fabq6h, #906806));
   border-color: var(--awsui-prompt-input-style-border-color-default-ka4djm, var(--color-text-status-warning-fabq6h, #906806));
   padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
   border-inline-start-width: var(--border-invalid-width-b183os, 4px);
 }
-.awsui_root_55fkh_2nevg_10.awsui_textarea-warning_55fkh_2nevg_97:not(#\9):focus {
+.awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97:not(#\9):focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb);
 }
-.awsui_root_55fkh_2nevg_10.awsui_textarea-warning_55fkh_2nevg_97:not(#\9) {
+.awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97:not(#\9) {
   padding-inline-start: 0;
 }
-.awsui_root_55fkh_2nevg_10.awsui_textarea-warning_55fkh_2nevg_97:not(#\9):focus-within, .awsui_root_55fkh_2nevg_10.awsui_textarea-warning_55fkh_2nevg_97:not(#\9):focus {
+.awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97:not(#\9):focus-within, .awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97:not(#\9):focus {
   color: var(--awsui-prompt-input-style-color-default-ka4djm, var(--color-text-status-warning-fabq6h, #906806));
   border-color: var(--awsui-prompt-input-style-border-color-default-ka4djm, var(--color-text-status-warning-fabq6h, #906806));
   padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
   border-inline-start-width: var(--border-invalid-width-b183os, 4px);
 }
-.awsui_root_55fkh_2nevg_10.awsui_textarea-warning_55fkh_2nevg_97:not(#\9):focus-within:focus, .awsui_root_55fkh_2nevg_10.awsui_textarea-warning_55fkh_2nevg_97:not(#\9):focus:focus {
+.awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97:not(#\9):focus-within:focus, .awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97:not(#\9):focus:focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb);
 }
-.awsui_root_55fkh_2nevg_10.awsui_textarea-warning_55fkh_2nevg_97:not(#\9):focus-within, .awsui_root_55fkh_2nevg_10.awsui_textarea-warning_55fkh_2nevg_97:not(#\9):focus {
+.awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97:not(#\9):focus-within, .awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97:not(#\9):focus {
   padding-inline-start: 0;
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb);
 }
-.awsui_root_55fkh_2nevg_10.awsui_textarea-warning_55fkh_2nevg_97.awsui_disabled_55fkh_2nevg_61:not(#\9):focus-within, .awsui_root_55fkh_2nevg_10.awsui_textarea-warning_55fkh_2nevg_97.awsui_disabled_55fkh_2nevg_61:not(#\9):focus {
+.awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97.awsui_disabled_55fkh_p5zjs_61:not(#\9):focus-within, .awsui_root_55fkh_p5zjs_10.awsui_textarea-warning_55fkh_p5zjs_97.awsui_disabled_55fkh_p5zjs_61:not(#\9):focus {
   box-shadow: var(--awsui-prompt-input-style-box-shadow-disabled-ka4djm);
 }
-.awsui_root_55fkh_2nevg_10:not(#\9):focus-within:not(.awsui_textarea-invalid_55fkh_2nevg_69):not(.awsui_textarea-warning_55fkh_2nevg_97), .awsui_root_55fkh_2nevg_10:not(#\9):focus:not(.awsui_textarea-invalid_55fkh_2nevg_69):not(.awsui_textarea-warning_55fkh_2nevg_97) {
+.awsui_root_55fkh_p5zjs_10:not(#\9):focus-within:not(.awsui_textarea-invalid_55fkh_p5zjs_69):not(.awsui_textarea-warning_55fkh_p5zjs_97), .awsui_root_55fkh_p5zjs_10:not(#\9):focus:not(.awsui_textarea-invalid_55fkh_p5zjs_69):not(.awsui_textarea-warning_55fkh_p5zjs_97) {
   outline: 2px dotted transparent;
   border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-focus-ka4djm, var(--color-border-input-focused-ppoq5z, #0073bb));
   border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-focus-ka4djm, var(--color-border-input-focused-ppoq5z, #0073bb));
   box-shadow: var(--awsui-prompt-input-style-box-shadow-focus-ka4djm, 0 0 0 var(--border-control-focus-ring-shadow-spread-iijyo6, 1px) var(--color-border-item-focused-sewkzn, #0073bb));
   background-color: var(--awsui-prompt-input-style-background-focus-ka4djm, var(--color-background-input-default-1u0v1p, #ffffff));
 }
-.awsui_root_55fkh_2nevg_10.awsui_disabled_55fkh_2nevg_61:not(#\9):focus-within:not(.awsui_textarea-invalid_55fkh_2nevg_69):not(.awsui_textarea-warning_55fkh_2nevg_97), .awsui_root_55fkh_2nevg_10.awsui_disabled_55fkh_2nevg_61:not(#\9):focus:not(.awsui_textarea-invalid_55fkh_2nevg_69):not(.awsui_textarea-warning_55fkh_2nevg_97) {
+.awsui_root_55fkh_p5zjs_10.awsui_disabled_55fkh_p5zjs_61:not(#\9):focus-within:not(.awsui_textarea-invalid_55fkh_p5zjs_69):not(.awsui_textarea-warning_55fkh_p5zjs_97), .awsui_root_55fkh_p5zjs_10.awsui_disabled_55fkh_p5zjs_61:not(#\9):focus:not(.awsui_textarea-invalid_55fkh_p5zjs_69):not(.awsui_textarea-warning_55fkh_p5zjs_97) {
   background-color: var(--awsui-prompt-input-style-background-disabled-ka4djm, var(--color-background-input-disabled-pyvhb1, #eaeded));
   border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-disabled-ka4djm, var(--color-border-input-disabled-5m31k6, #eaeded));
   border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-prompt-input-style-border-color-disabled-ka4djm, var(--color-border-input-disabled-5m31k6, #eaeded));
@@ -138,7 +138,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-shadow: var(--awsui-prompt-input-style-box-shadow-disabled-ka4djm);
 }
 
-.awsui_textarea_55fkh_2nevg_55:not(#\9) {
+.awsui_textarea_55fkh_p5zjs_55:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -174,6 +174,8 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-input-k1q34z, 2px);
   font-size: var(--font-size-body-m-tq5a14, 14px);
   line-height: var(--line-height-body-m-5xw6xo, 22px);
+  font-size: inherit;
+  font-weight: inherit;
   resize: none;
   cursor: text;
   white-space: pre-wrap;
@@ -187,15 +189,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-sizing: border-box;
   border: 0;
 }
-.awsui_textarea_55fkh_2nevg_55.awsui_placeholder-visible_55fkh_2nevg_190:not(#\9) {
+.awsui_textarea_55fkh_p5zjs_55.awsui_placeholder-visible_55fkh_p5zjs_192:not(#\9) {
   display: grid;
   grid-template-columns: 1fr;
 }
-.awsui_textarea_55fkh_2nevg_55.awsui_placeholder-visible_55fkh_2nevg_190:not(#\9)::before, .awsui_textarea_55fkh_2nevg_55.awsui_placeholder-visible_55fkh_2nevg_190 > *:not(#\9) {
+.awsui_textarea_55fkh_p5zjs_55.awsui_placeholder-visible_55fkh_p5zjs_192:not(#\9)::before, .awsui_textarea_55fkh_p5zjs_55.awsui_placeholder-visible_55fkh_p5zjs_192 > *:not(#\9) {
   grid-column: 1;
   grid-row: 1;
 }
-.awsui_textarea_55fkh_2nevg_55.awsui_placeholder-visible_55fkh_2nevg_190:not(#\9)::before {
+.awsui_textarea_55fkh_p5zjs_55.awsui_placeholder-visible_55fkh_p5zjs_192:not(#\9)::before {
   content: attr(data-placeholder);
   color: var(--awsui-prompt-input-style-placeholder-color-ka4djm, var(--color-text-input-placeholder-l6klmg, #687078));
   font-size: var(--awsui-prompt-input-style-placeholder-font-size-ka4djm);
@@ -206,75 +208,75 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   align-self: start;
   min-inline-size: 0;
 }
-.awsui_textarea_55fkh_2nevg_55:not(#\9):hover {
+.awsui_textarea_55fkh_p5zjs_55:not(#\9):hover {
   color: var(--awsui-prompt-input-style-color-hover-ka4djm, var(--awsui-prompt-input-style-color-default-ka4djm, var(--color-text-body-default-b2us04, #16191f)));
 }
-.awsui_textarea_55fkh_2nevg_55:not(#\9):focus {
+.awsui_textarea_55fkh_p5zjs_55:not(#\9):focus {
   outline: none;
   color: var(--awsui-prompt-input-style-color-focus-ka4djm, var(--awsui-prompt-input-style-color-default-ka4djm, var(--color-text-body-default-b2us04, #16191f)));
 }
-.awsui_textarea_55fkh_2nevg_55:not(#\9):invalid {
+.awsui_textarea_55fkh_p5zjs_55:not(#\9):invalid {
   box-shadow: none;
 }
-.awsui_textarea_55fkh_2nevg_55:not(#\9)::placeholder {
+.awsui_textarea_55fkh_p5zjs_55:not(#\9)::placeholder {
   color: var(--awsui-prompt-input-style-placeholder-color-ka4djm, var(--color-text-input-placeholder-l6klmg, #687078));
   font-size: var(--awsui-prompt-input-style-placeholder-font-size-ka4djm);
   font-style: var(--awsui-prompt-input-style-placeholder-font-style-ka4djm, italic);
   font-weight: var(--awsui-prompt-input-style-placeholder-font-weight-ka4djm);
   opacity: 1;
 }
-.awsui_textarea_55fkh_2nevg_55.awsui_invalid_55fkh_2nevg_226:not(#\9), .awsui_textarea_55fkh_2nevg_55.awsui_warning_55fkh_2nevg_226:not(#\9) {
+.awsui_textarea_55fkh_p5zjs_55.awsui_invalid_55fkh_p5zjs_228:not(#\9), .awsui_textarea_55fkh_p5zjs_55.awsui_warning_55fkh_p5zjs_228:not(#\9) {
   padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
 }
-.awsui_textarea_55fkh_2nevg_55:not(#\9):disabled, .awsui_textarea_55fkh_2nevg_55.awsui_textarea-disabled_55fkh_2nevg_229:not(#\9) {
+.awsui_textarea_55fkh_p5zjs_55:not(#\9):disabled, .awsui_textarea_55fkh_p5zjs_55.awsui_textarea-disabled_55fkh_p5zjs_231:not(#\9) {
   color: var(--awsui-prompt-input-style-color-disabled-ka4djm, var(--color-text-input-disabled-s4k7tb, #879596));
   cursor: default;
   overflow-y: hidden;
 }
-.awsui_textarea_55fkh_2nevg_55:not(#\9):disabled::placeholder, .awsui_textarea_55fkh_2nevg_55.awsui_textarea-disabled_55fkh_2nevg_229:not(#\9)::placeholder {
+.awsui_textarea_55fkh_p5zjs_55:not(#\9):disabled::placeholder, .awsui_textarea_55fkh_p5zjs_55.awsui_textarea-disabled_55fkh_p5zjs_231:not(#\9)::placeholder {
   color: var(--color-text-input-placeholder-disabled-8cf69l, #687078);
   opacity: 1;
 }
-.awsui_textarea-readonly_55fkh_2nevg_55:not(#\9) {
+.awsui_textarea-readonly_55fkh_p5zjs_55:not(#\9) {
   color: var(--awsui-prompt-input-style-color-readonly-ka4djm, var(--awsui-prompt-input-style-color-default-ka4djm, var(--color-text-body-default-b2us04, #16191f)));
 }
-.awsui_textarea_55fkh_2nevg_55.awsui_textarea-disabled_55fkh_2nevg_229.awsui_placeholder-visible_55fkh_2nevg_190:not(#\9)::before {
+.awsui_textarea_55fkh_p5zjs_55.awsui_textarea-disabled_55fkh_p5zjs_231.awsui_placeholder-visible_55fkh_p5zjs_192:not(#\9)::before {
   color: var(--color-text-input-placeholder-disabled-8cf69l, #687078);
   opacity: 1;
   pointer-events: none;
 }
-.awsui_textarea-wrapper_55fkh_2nevg_246:not(#\9) {
+.awsui_textarea-wrapper_55fkh_p5zjs_248:not(#\9) {
   display: flex;
   position: relative;
 }
 
-.awsui_editable-wrapper_55fkh_2nevg_251:not(#\9) {
+.awsui_editable-wrapper_55fkh_p5zjs_253:not(#\9) {
   flex: 1;
   min-inline-size: 0;
   position: relative;
 }
 
-.awsui_editable-element_55fkh_2nevg_257:not(#\9) {
+.awsui_editable-element_55fkh_p5zjs_259:not(#\9) {
   word-wrap: break-word;
   overflow-wrap: break-word;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
-.awsui_primary-action_55fkh_2nevg_264:not(#\9) {
+.awsui_primary-action_55fkh_p5zjs_266:not(#\9) {
   align-self: flex-end;
   flex-shrink: 0;
   padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) / 2);
 }
-.awsui_textarea-wrapper_55fkh_2nevg_246 > .awsui_primary-action_55fkh_2nevg_264:not(#\9) {
+.awsui_textarea-wrapper_55fkh_p5zjs_248 > .awsui_primary-action_55fkh_p5zjs_266:not(#\9) {
   padding-inline-end: calc(var(--space-field-horizontal-anki5k, 8px) / 2);
 }
-.awsui_textarea-wrapper_55fkh_2nevg_246 > .awsui_primary-action_55fkh_2nevg_264 > .awsui_action-button_55fkh_2nevg_272:not(#\9) {
+.awsui_textarea-wrapper_55fkh_p5zjs_248 > .awsui_primary-action_55fkh_p5zjs_266 > .awsui_action-button_55fkh_p5zjs_274:not(#\9) {
   margin-block-end: var(--space-scaled-xxxs-n0ri6o, 2px);
   padding: 0;
 }
 
-.awsui_secondary-content_55fkh_2nevg_277:not(#\9) {
+.awsui_secondary-content_55fkh_p5zjs_279:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -309,17 +311,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-start-radius: var(--border-radius-input-k1q34z, 2px);
   border-end-end-radius: var(--border-radius-input-k1q34z, 2px);
 }
-.awsui_secondary-content_55fkh_2nevg_277.awsui_with-paddings_55fkh_2nevg_312:not(#\9) {
+.awsui_secondary-content_55fkh_p5zjs_279.awsui_with-paddings_55fkh_p5zjs_314:not(#\9) {
   padding-block-start: var(--space-scaled-s-2crg2b, 12px);
   padding-block-end: var(--space-scaled-s-2crg2b, 12px);
   padding-inline-start: var(--space-field-horizontal-anki5k, 8px);
   padding-inline-end: var(--space-field-horizontal-anki5k, 8px);
 }
-.awsui_secondary-content_55fkh_2nevg_277.awsui_with-paddings_55fkh_2nevg_312.awsui_invalid_55fkh_2nevg_226:not(#\9), .awsui_secondary-content_55fkh_2nevg_277.awsui_with-paddings_55fkh_2nevg_312.awsui_warning_55fkh_2nevg_226:not(#\9) {
+.awsui_secondary-content_55fkh_p5zjs_279.awsui_with-paddings_55fkh_p5zjs_314.awsui_invalid_55fkh_p5zjs_228:not(#\9), .awsui_secondary-content_55fkh_p5zjs_279.awsui_with-paddings_55fkh_p5zjs_314.awsui_warning_55fkh_p5zjs_228:not(#\9) {
   padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
 }
 
-.awsui_action-stripe_55fkh_2nevg_322:not(#\9) {
+.awsui_action-stripe_55fkh_p5zjs_324:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -358,7 +360,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   align-items: flex-end;
 }
 
-.awsui_secondary-actions_55fkh_2nevg_361:not(#\9) {
+.awsui_secondary-actions_55fkh_p5zjs_363:not(#\9) {
   flex-basis: max-content;
   flex-grow: 0;
   flex-shrink: 1;
@@ -368,25 +370,25 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   overflow: hidden;
   padding-inline-end: var(--space-scaled-xxs-j00t0m, 4px);
 }
-.awsui_secondary-actions_55fkh_2nevg_361.awsui_with-paddings_55fkh_2nevg_312:not(#\9) {
+.awsui_secondary-actions_55fkh_p5zjs_363.awsui_with-paddings_55fkh_p5zjs_314:not(#\9) {
   padding-inline: var(--space-field-horizontal-anki5k, 8px);
   padding-block-start: var(--space-scaled-s-2crg2b, 12px);
   padding-block-end: var(--space-field-vertical-77df8s, 4px);
 }
-.awsui_secondary-actions_55fkh_2nevg_361.awsui_with-paddings_55fkh_2nevg_312.awsui_invalid_55fkh_2nevg_226:not(#\9), .awsui_secondary-actions_55fkh_2nevg_361.awsui_with-paddings_55fkh_2nevg_312.awsui_warning_55fkh_2nevg_226:not(#\9) {
+.awsui_secondary-actions_55fkh_p5zjs_363.awsui_with-paddings_55fkh_p5zjs_314.awsui_invalid_55fkh_p5zjs_228:not(#\9), .awsui_secondary-actions_55fkh_p5zjs_363.awsui_with-paddings_55fkh_p5zjs_314.awsui_warning_55fkh_p5zjs_228:not(#\9) {
   padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
 }
-.awsui_secondary-actions_55fkh_2nevg_361.awsui_with-paddings-and-actions_55fkh_2nevg_379:not(#\9) {
+.awsui_secondary-actions_55fkh_p5zjs_363.awsui_with-paddings-and-actions_55fkh_p5zjs_381:not(#\9) {
   padding-inline-end: 0;
 }
 
-.awsui_buffer_55fkh_2nevg_383:not(#\9) {
+.awsui_buffer_55fkh_p5zjs_385:not(#\9) {
   flex: 1;
   align-self: stretch;
   cursor: text;
 }
 
-.awsui_token-container_55fkh_2nevg_389:not(#\9) {
+.awsui_token-container_55fkh_p5zjs_391:not(#\9) {
   display: inline-block;
   user-select: all;
   -webkit-user-select: all;
@@ -394,21 +396,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-inline: var(--space-xxxs-3ulqs3, 2px);
 }
 
-.awsui_reference-wrapper_55fkh_2nevg_397:not(#\9) {
+.awsui_reference-wrapper_55fkh_p5zjs_399:not(#\9) {
   unicode-bidi: isolate;
 }
 
-.awsui_trigger-base_55fkh_2nevg_401:not(#\9) {
+.awsui_trigger-base_55fkh_p5zjs_403:not(#\9) {
   unicode-bidi: isolate;
 }
 
-.awsui_trigger-token_55fkh_2nevg_405:not(#\9) {
+.awsui_trigger-token_55fkh_p5zjs_407:not(#\9) {
   text-decoration: underline dashed currentColor;
   text-decoration-thickness: var(--border-divider-list-width-2qbfmz, 1px);
   text-underline-offset: var(--space-xxxs-3ulqs3, 2px);
 }
 
-.awsui_paragraph_55fkh_2nevg_411:not(#\9) {
+.awsui_paragraph_55fkh_p5zjs_413:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -442,4 +444,6 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding: 0;
   white-space: pre-wrap;
   color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
 }

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

@@ -2,31 +2,31 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_55fkh_2nevg_10",
-  "textarea-readonly": "awsui_textarea-readonly_55fkh_2nevg_55",
-  "disabled": "awsui_disabled_55fkh_2nevg_61",
-  "textarea-invalid": "awsui_textarea-invalid_55fkh_2nevg_69",
-  "textarea-warning": "awsui_textarea-warning_55fkh_2nevg_97",
-  "textarea": "awsui_textarea_55fkh_2nevg_55",
-  "placeholder-visible": "awsui_placeholder-visible_55fkh_2nevg_190",
-  "invalid": "awsui_invalid_55fkh_2nevg_226",
-  "warning": "awsui_warning_55fkh_2nevg_226",
-  "textarea-disabled": "awsui_textarea-disabled_55fkh_2nevg_229",
-  "textarea-wrapper": "awsui_textarea-wrapper_55fkh_2nevg_246",
-  "editable-wrapper": "awsui_editable-wrapper_55fkh_2nevg_251",
-  "editable-element": "awsui_editable-element_55fkh_2nevg_257",
-  "primary-action": "awsui_primary-action_55fkh_2nevg_264",
-  "action-button": "awsui_action-button_55fkh_2nevg_272",
-  "secondary-content": "awsui_secondary-content_55fkh_2nevg_277",
-  "with-paddings": "awsui_with-paddings_55fkh_2nevg_312",
-  "action-stripe": "awsui_action-stripe_55fkh_2nevg_322",
-  "secondary-actions": "awsui_secondary-actions_55fkh_2nevg_361",
-  "with-paddings-and-actions": "awsui_with-paddings-and-actions_55fkh_2nevg_379",
-  "buffer": "awsui_buffer_55fkh_2nevg_383",
-  "token-container": "awsui_token-container_55fkh_2nevg_389",
-  "reference-wrapper": "awsui_reference-wrapper_55fkh_2nevg_397",
-  "trigger-base": "awsui_trigger-base_55fkh_2nevg_401",
-  "trigger-token": "awsui_trigger-token_55fkh_2nevg_405",
-  "paragraph": "awsui_paragraph_55fkh_2nevg_411"
+  "root": "awsui_root_55fkh_p5zjs_10",
+  "textarea-readonly": "awsui_textarea-readonly_55fkh_p5zjs_55",
+  "disabled": "awsui_disabled_55fkh_p5zjs_61",
+  "textarea-invalid": "awsui_textarea-invalid_55fkh_p5zjs_69",
+  "textarea-warning": "awsui_textarea-warning_55fkh_p5zjs_97",
+  "textarea": "awsui_textarea_55fkh_p5zjs_55",
+  "placeholder-visible": "awsui_placeholder-visible_55fkh_p5zjs_192",
+  "invalid": "awsui_invalid_55fkh_p5zjs_228",
+  "warning": "awsui_warning_55fkh_p5zjs_228",
+  "textarea-disabled": "awsui_textarea-disabled_55fkh_p5zjs_231",
+  "textarea-wrapper": "awsui_textarea-wrapper_55fkh_p5zjs_248",
+  "editable-wrapper": "awsui_editable-wrapper_55fkh_p5zjs_253",
+  "editable-element": "awsui_editable-element_55fkh_p5zjs_259",
+  "primary-action": "awsui_primary-action_55fkh_p5zjs_266",
+  "action-button": "awsui_action-button_55fkh_p5zjs_274",
+  "secondary-content": "awsui_secondary-content_55fkh_p5zjs_279",
+  "with-paddings": "awsui_with-paddings_55fkh_p5zjs_314",
+  "action-stripe": "awsui_action-stripe_55fkh_p5zjs_324",
+  "secondary-actions": "awsui_secondary-actions_55fkh_p5zjs_363",
+  "with-paddings-and-actions": "awsui_with-paddings-and-actions_55fkh_p5zjs_381",
+  "buffer": "awsui_buffer_55fkh_p5zjs_385",
+  "token-container": "awsui_token-container_55fkh_p5zjs_391",
+  "reference-wrapper": "awsui_reference-wrapper_55fkh_p5zjs_399",
+  "trigger-base": "awsui_trigger-base_55fkh_p5zjs_403",
+  "trigger-token": "awsui_trigger-token_55fkh_p5zjs_407",
+  "paragraph": "awsui_paragraph_55fkh_p5zjs_413"
 };
   

package/lib/internal/template/segmented-control/internal-segmented-control.d.ts

@@ -1,8 +1,8 @@
-import { GroupedControlPosition } from '../internal/context/control-group-context';
+import { GroupedControlContextProps } from '../internal/context/control-group-context';
 import { SegmentedControlProps } from './interfaces';
 interface InternalSegmentedControlComponentProps extends SegmentedControlProps {
-    groupedControlPosition?: GroupedControlPosition | null;
+    groupedControlProps?: GroupedControlContextProps;
 }
-export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, style, groupedControlPosition, }: InternalSegmentedControlComponentProps): JSX.Element;
+export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, style, groupedControlProps, }: InternalSegmentedControlComponentProps): JSX.Element;
 export {};
 //# sourceMappingURL=internal-segmented-control.d.ts.map

package/lib/internal/template/segmented-control/internal-segmented-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal-segmented-control.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,sBAAsB,EAAE,MAAM,2CAA2C,CAAC;AAKnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAMrD,UAAU,sCAAuC,SAAQ,qBAAqB;IAC5E,sBAAsB,CAAC,EAAE,sBAAsB,GAAG,IAAI,CAAC;CACxD;AAED,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,KAAK,EACL,sBAAsB,GACvB,EAAE,sCAAsC,eAmFxC"}
+{"version":3,"file":"internal-segmented-control.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AAKvF,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAMrD,UAAU,sCAAuC,SAAQ,qBAAqB;IAC5E,mBAAmB,CAAC,EAAE,0BAA0B,CAAC;CAClD;AAED,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,KAAK,EACL,mBAAmB,GACpB,EAAE,sCAAsC,eAwFxC"}

package/lib/internal/template/segmented-control/internal-segmented-control.js

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useRef } from 'react';
 import clsx from 'clsx';
+import { getGroupedControlClassNames } from '../internal/components/control-group/grouped-control-styles';
 import { fireNonCancelableEvent } from '../internal/events';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { KeyCode } from '../internal/keycode';
@@ -9,7 +10,7 @@ import handleKey from '../internal/utils/handle-key';
 import { Segment } from './segment';
 import { getSegmentedControlRootStyles } from './style';
 import styles from './styles.css.js';
-export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, style, groupedControlPosition, }) {
+export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, style, groupedControlProps, }) {
     const segmentByIdRef = useRef({});
     const selectedOptions = (options || []).filter(option => {
         return option.id === selectedId;
@@ -30,10 +31,12 @@ export default function InternalSegmentedControl({ selectedId, options, label, a
         (_a = segmentByIdRef.current[nextSegmentId]) === null || _a === void 0 ? void 0 : _a.focus();
     };
     const isVisualRefresh = useVisualRefresh();
-    return (React.createElement("div", { className: clsx(styles['segment-part'], styles[`segment-count-${options === null || options === void 0 ? void 0 : options.length}`], {
+    const isGrouped = !!(groupedControlProps === null || groupedControlProps === void 0 ? void 0 : groupedControlProps.position);
+    const isGroupedVertical = isGrouped && (groupedControlProps === null || groupedControlProps === void 0 ? void 0 : groupedControlProps.direction) === 'vertical';
+    const groupedControlClassNames = isGrouped ? getGroupedControlClassNames(styles, groupedControlProps) : [];
+    return (React.createElement("div", { className: clsx(styles['segment-part'], styles[`segment-count-${options === null || options === void 0 ? void 0 : options.length}`], ...groupedControlClassNames, {
             [styles.refresh]: isVisualRefresh,
-            [styles.grouped]: !!groupedControlPosition,
-            [styles[`grouped-${groupedControlPosition}`]]: !!groupedControlPosition,
+            [styles['grouped-vertical']]: isGroupedVertical,
         }), "aria-label": label, "aria-labelledby": ariaLabelledby, role: "toolbar", style: getSegmentedControlRootStyles(style) }, options &&
         options.map((option, index) => {
             const isActive = selectedId === option.id;
@@ -56,7 +59,7 @@ export default function InternalSegmentedControl({ selectedId, options, label, a
                     if (selectedId !== option.id) {
                         fireNonCancelableEvent(onChange, { selectedId: option.id });
                     }
-                }, onKeyDown: event => moveHighlight(event, focusableSegmentIndex), style: style }));
+                }, onKeyDown: event => moveHighlight(event, focusableSegmentIndex), style: style, fullWidth: isGroupedVertical }));
         })));
 }
 //# sourceMappingURL=internal-segmented-control.js.map

package/lib/internal/template/segmented-control/internal-segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal-segmented-control.js","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { GroupedControlPosition } from '../internal/context/control-group-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { KeyCode } from '../internal/keycode';\nimport handleKey from '../internal/utils/handle-key';\nimport { SegmentedControlProps } from './interfaces';\nimport { Segment } from './segment';\nimport { getSegmentedControlRootStyles } from './style';\n\nimport styles from './styles.css.js';\n\ninterface InternalSegmentedControlComponentProps extends SegmentedControlProps {\n  groupedControlPosition?: GroupedControlPosition | null;\n}\n\nexport default function InternalSegmentedControl({\n  selectedId,\n  options,\n  label,\n  ariaLabelledby,\n  onChange,\n  style,\n  groupedControlPosition,\n}: InternalSegmentedControlComponentProps) {\n  const segmentByIdRef = useRef<{ [id: string]: HTMLButtonElement }>({});\n  const selectedOptions = (options || []).filter(option => {\n    return option.id === selectedId;\n  });\n  const currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;\n  const focusableSegments = (options || []).filter(\n    option => !option.disabled || (option.disabled && !!option.disabledReason)\n  );\n\n  const moveHighlight = (event: React.KeyboardEvent<HTMLButtonElement>, activeIndex: number) => {\n    if (event.keyCode !== KeyCode.right && event.keyCode !== KeyCode.left) {\n      return;\n    }\n\n    let nextIndex = activeIndex;\n\n    handleKey(event, {\n      onInlineStart: () => (nextIndex = activeIndex === 0 ? focusableSegments.length - 1 : activeIndex - 1),\n      onInlineEnd: () => (nextIndex = activeIndex + 1 === focusableSegments.length ? 0 : activeIndex + 1),\n    });\n\n    const nextSegmentId = focusableSegments[nextIndex].id;\n    segmentByIdRef.current[nextSegmentId]?.focus();\n  };\n  const isVisualRefresh = useVisualRefresh();\n\n  return (\n    <div\n      className={clsx(styles['segment-part'], styles[`segment-count-${options?.length}`], {\n        [styles.refresh]: isVisualRefresh,\n        [styles.grouped]: !!groupedControlPosition,\n        [styles[`grouped-${groupedControlPosition}`]]: !!groupedControlPosition,\n      })}\n      aria-label={label}\n      aria-labelledby={ariaLabelledby}\n      role=\"toolbar\"\n      style={getSegmentedControlRootStyles(style)}\n    >\n      {options &&\n        options.map((option: SegmentedControlProps.Option, index) => {\n          const isActive = selectedId === option.id;\n          const focusableSegmentIndex = focusableSegments.indexOf(option);\n          let tabIndex = isActive ? 0 : -1;\n          if (currentSelectedOption === null && focusableSegmentIndex === 0) {\n            tabIndex = 0;\n          }\n          return (\n            <Segment\n              key={index}\n              id={option.id}\n              disabled={!!option.disabled}\n              disabledReason={option.disabledReason}\n              iconName={option.iconName}\n              iconAlt={option.iconAlt}\n              iconUrl={option.iconUrl}\n              iconSvg={option.iconSvg}\n              text={option.text}\n              isActive={isActive}\n              tabIndex={tabIndex}\n              ref={node => {\n                if (node) {\n                  segmentByIdRef.current[option.id] = node;\n                } else {\n                  delete segmentByIdRef.current[option.id];\n                }\n              }}\n              onClick={() => {\n                if (option.disabled) {\n                  return;\n                }\n\n                if (selectedId !== option.id) {\n                  fireNonCancelableEvent(onChange, { selectedId: option.id });\n                }\n              }}\n              onKeyDown={event => moveHighlight(event, focusableSegmentIndex)}\n              style={style}\n            />\n          );\n        })}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal-segmented-control.js","sourceRoot":"","sources":["../../../src/segmented-control/internal-segmented-control.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getGroupedControlClassNames } from '../internal/components/control-group/grouped-control-styles';\nimport { GroupedControlContextProps } from '../internal/context/control-group-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { KeyCode } from '../internal/keycode';\nimport handleKey from '../internal/utils/handle-key';\nimport { SegmentedControlProps } from './interfaces';\nimport { Segment } from './segment';\nimport { getSegmentedControlRootStyles } from './style';\n\nimport styles from './styles.css.js';\n\ninterface InternalSegmentedControlComponentProps extends SegmentedControlProps {\n  groupedControlProps?: GroupedControlContextProps;\n}\n\nexport default function InternalSegmentedControl({\n  selectedId,\n  options,\n  label,\n  ariaLabelledby,\n  onChange,\n  style,\n  groupedControlProps,\n}: InternalSegmentedControlComponentProps) {\n  const segmentByIdRef = useRef<{ [id: string]: HTMLButtonElement }>({});\n  const selectedOptions = (options || []).filter(option => {\n    return option.id === selectedId;\n  });\n  const currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;\n  const focusableSegments = (options || []).filter(\n    option => !option.disabled || (option.disabled && !!option.disabledReason)\n  );\n\n  const moveHighlight = (event: React.KeyboardEvent<HTMLButtonElement>, activeIndex: number) => {\n    if (event.keyCode !== KeyCode.right && event.keyCode !== KeyCode.left) {\n      return;\n    }\n\n    let nextIndex = activeIndex;\n\n    handleKey(event, {\n      onInlineStart: () => (nextIndex = activeIndex === 0 ? focusableSegments.length - 1 : activeIndex - 1),\n      onInlineEnd: () => (nextIndex = activeIndex + 1 === focusableSegments.length ? 0 : activeIndex + 1),\n    });\n\n    const nextSegmentId = focusableSegments[nextIndex].id;\n    segmentByIdRef.current[nextSegmentId]?.focus();\n  };\n  const isVisualRefresh = useVisualRefresh();\n\n  const isGrouped = !!groupedControlProps?.position;\n  const isGroupedVertical = isGrouped && groupedControlProps?.direction === 'vertical';\n\n  const groupedControlClassNames = isGrouped ? getGroupedControlClassNames(styles, groupedControlProps) : [];\n\n  return (\n    <div\n      className={clsx(styles['segment-part'], styles[`segment-count-${options?.length}`], ...groupedControlClassNames, {\n        [styles.refresh]: isVisualRefresh,\n        [styles['grouped-vertical']]: isGroupedVertical,\n      })}\n      aria-label={label}\n      aria-labelledby={ariaLabelledby}\n      role=\"toolbar\"\n      style={getSegmentedControlRootStyles(style)}\n    >\n      {options &&\n        options.map((option: SegmentedControlProps.Option, index) => {\n          const isActive = selectedId === option.id;\n          const focusableSegmentIndex = focusableSegments.indexOf(option);\n          let tabIndex = isActive ? 0 : -1;\n          if (currentSelectedOption === null && focusableSegmentIndex === 0) {\n            tabIndex = 0;\n          }\n          return (\n            <Segment\n              key={index}\n              id={option.id}\n              disabled={!!option.disabled}\n              disabledReason={option.disabledReason}\n              iconName={option.iconName}\n              iconAlt={option.iconAlt}\n              iconUrl={option.iconUrl}\n              iconSvg={option.iconSvg}\n              text={option.text}\n              isActive={isActive}\n              tabIndex={tabIndex}\n              ref={node => {\n                if (node) {\n                  segmentByIdRef.current[option.id] = node;\n                } else {\n                  delete segmentByIdRef.current[option.id];\n                }\n              }}\n              onClick={() => {\n                if (option.disabled) {\n                  return;\n                }\n\n                if (selectedId !== option.id) {\n                  fireNonCancelableEvent(onChange, { selectedId: option.id });\n                }\n              }}\n              onKeyDown={event => moveHighlight(event, focusableSegmentIndex)}\n              style={style}\n              fullWidth={isGroupedVertical}\n            />\n          );\n        })}\n    </div>\n  );\n}\n"]}

package/lib/internal/template/segmented-control/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAKrD,KAAK,6BAA6B,GAAG,qBAAqB,GAAG,0BAA0B,CAAC;AAExF,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,iBAAiB,EACjB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,6BAA6B,eAgD/B"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/internal.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAKrD,KAAK,6BAA6B,GAAG,qBAAqB,GAAG,0BAA0B,CAAC;AAExF,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,iBAAiB,EACjB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,6BAA6B,eA2C/B"}

package/lib/internal/template/segmented-control/internal.js

@@ -4,6 +4,7 @@ import React from 'react';
 import clsx from 'clsx';
 import InternalFormField from '../form-field/internal';
 import { getBaseProps } from '../internal/base-component';
+import { getGroupedControlClassNames } from '../internal/components/control-group/grouped-control-styles';
 import { useGroupedControlContext } from '../internal/context/control-group-context';
 import { fireNonCancelableEvent } from '../internal/events';
 import InternalSelect from '../select/internal';
@@ -11,7 +12,7 @@ import InternalSegmentedControlComponent from './internal-segmented-control';
 import styles from './styles.css.js';
 export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, __internalRootRef, style, ...props }) {
     const baseProps = getBaseProps(props);
-    const { position: groupedControlPosition } = useGroupedControlContext();
+    const groupedControlProps = useGroupedControlContext();
     const selectOptions = (options || []).map(option => {
         const label = option.text || option.iconAlt;
         return { ...option, label, value: option.id };
@@ -27,11 +28,8 @@ export default function InternalSegmentedControl({ selectedId, options, label, a
         onChange: event => fireNonCancelableEvent(onChange, { selectedId: event.detail.selectedOption.value }),
     };
     return (React.createElement("div", { ...baseProps, className: clsx(baseProps.className, styles.root), ref: __internalRootRef },
-        React.createElement(InternalSegmentedControlComponent, { selectedId: selectedId, options: options, label: label, ariaLabelledby: ariaLabelledby, onChange: onChange, style: style, groupedControlPosition: groupedControlPosition }),
-        React.createElement("div", { className: clsx(styles.select, {
-                [styles.grouped]: !!groupedControlPosition,
-                [styles[`grouped-${groupedControlPosition}`]]: !!groupedControlPosition,
-            }) },
+        React.createElement(InternalSegmentedControlComponent, { selectedId: selectedId, options: options, label: label, ariaLabelledby: ariaLabelledby, onChange: onChange, style: style, groupedControlProps: groupedControlProps }),
+        React.createElement("div", { className: clsx(styles.select, ...getGroupedControlClassNames(styles, groupedControlProps)) },
             ariaLabelledby && React.createElement(InternalSelect, { ...selectProps, ariaLabelledby: ariaLabelledby }),
             !ariaLabelledby && label && (React.createElement(InternalFormField, { label: label, stretch: true },
                 React.createElement(InternalSelect, { ...selectProps }))),

package/lib/internal/template/segmented-control/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/segmented-control/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport InternalFormField from '../form-field/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { useGroupedControlContext } from '../internal/context/control-group-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport InternalSelect, { InternalSelectProps } from '../select/internal';\nimport { SegmentedControlProps } from './interfaces';\nimport InternalSegmentedControlComponent from './internal-segmented-control';\n\nimport styles from './styles.css.js';\n\ntype InternalSegmentedControlProps = SegmentedControlProps & InternalBaseComponentProps;\n\nexport default function InternalSegmentedControl({\n  selectedId,\n  options,\n  label,\n  ariaLabelledby,\n  onChange,\n  __internalRootRef,\n  style,\n  ...props\n}: InternalSegmentedControlProps) {\n  const baseProps = getBaseProps(props);\n  const { position: groupedControlPosition } = useGroupedControlContext();\n\n  const selectOptions = (options || []).map(option => {\n    const label = option.text || option.iconAlt;\n    return { ...option, label, value: option.id };\n  });\n\n  const selectedOptions = selectOptions.filter(option => {\n    return option.value === selectedId;\n  });\n  const currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;\n\n  const selectProps: InternalSelectProps = {\n    options: selectOptions,\n    selectedOption: currentSelectedOption,\n    triggerVariant: 'option',\n    onChange: event => fireNonCancelableEvent(onChange, { selectedId: event.detail.selectedOption.value! }),\n  };\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n      <InternalSegmentedControlComponent\n        selectedId={selectedId}\n        options={options}\n        label={label}\n        ariaLabelledby={ariaLabelledby}\n        onChange={onChange}\n        style={style}\n        groupedControlPosition={groupedControlPosition}\n      />\n      <div\n        className={clsx(styles.select, {\n          [styles.grouped]: !!groupedControlPosition,\n          [styles[`grouped-${groupedControlPosition}`]]: !!groupedControlPosition,\n        })}\n      >\n        {ariaLabelledby && <InternalSelect {...selectProps} ariaLabelledby={ariaLabelledby} />}\n        {!ariaLabelledby && label && (\n          <InternalFormField label={label} stretch={true}>\n            <InternalSelect {...selectProps} />\n          </InternalFormField>\n        )}\n        {!ariaLabelledby && !label && <InternalSelect {...selectProps} />}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/segmented-control/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,2BAA2B,EAAE,MAAM,6DAA6D,CAAC;AAC1G,OAAO,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC;AACrF,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,cAAuC,MAAM,oBAAoB,CAAC;AAEzE,OAAO,iCAAiC,MAAM,8BAA8B,CAAC;AAE7E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,iBAAiB,EACjB,KAAK,EACL,GAAG,KAAK,EACsB;IAC9B,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,mBAAmB,GAAG,wBAAwB,EAAE,CAAC;IAEvD,MAAM,aAAa,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QACjD,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,OAAO,CAAC;QAC5C,OAAO,EAAE,GAAG,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE;QACpD,OAAO,MAAM,CAAC,KAAK,KAAK,UAAU,CAAC;IACrC,CAAC,CAAC,CAAC;IACH,MAAM,qBAAqB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAEjF,MAAM,WAAW,GAAwB;QACvC,OAAO,EAAE,aAAa;QACtB,cAAc,EAAE,qBAAqB;QACrC,cAAc,EAAE,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,QAAQ,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,KAAM,EAAE,CAAC;KACxG,CAAC;IAEF,OAAO,CACL,gCAAS,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,iBAAiB;QAC3F,oBAAC,iCAAiC,IAChC,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,mBAAmB,EAAE,mBAAmB,GACxC;QACF,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,2BAA2B,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;YAC7F,cAAc,IAAI,oBAAC,cAAc,OAAK,WAAW,EAAE,cAAc,EAAE,cAAc,GAAI;YACrF,CAAC,cAAc,IAAI,KAAK,IAAI,CAC3B,oBAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI;gBAC5C,oBAAC,cAAc,OAAK,WAAW,GAAI,CACjB,CACrB;YACA,CAAC,cAAc,IAAI,CAAC,KAAK,IAAI,oBAAC,cAAc,OAAK,WAAW,GAAI,CAC7D,CACF,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';\n\nimport InternalFormField from '../form-field/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { getGroupedControlClassNames } from '../internal/components/control-group/grouped-control-styles';\nimport { useGroupedControlContext } from '../internal/context/control-group-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport InternalSelect, { InternalSelectProps } from '../select/internal';\nimport { SegmentedControlProps } from './interfaces';\nimport InternalSegmentedControlComponent from './internal-segmented-control';\n\nimport styles from './styles.css.js';\n\ntype InternalSegmentedControlProps = SegmentedControlProps & InternalBaseComponentProps;\n\nexport default function InternalSegmentedControl({\n  selectedId,\n  options,\n  label,\n  ariaLabelledby,\n  onChange,\n  __internalRootRef,\n  style,\n  ...props\n}: InternalSegmentedControlProps) {\n  const baseProps = getBaseProps(props);\n  const groupedControlProps = useGroupedControlContext();\n\n  const selectOptions = (options || []).map(option => {\n    const label = option.text || option.iconAlt;\n    return { ...option, label, value: option.id };\n  });\n\n  const selectedOptions = selectOptions.filter(option => {\n    return option.value === selectedId;\n  });\n  const currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;\n\n  const selectProps: InternalSelectProps = {\n    options: selectOptions,\n    selectedOption: currentSelectedOption,\n    triggerVariant: 'option',\n    onChange: event => fireNonCancelableEvent(onChange, { selectedId: event.detail.selectedOption.value! }),\n  };\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n      <InternalSegmentedControlComponent\n        selectedId={selectedId}\n        options={options}\n        label={label}\n        ariaLabelledby={ariaLabelledby}\n        onChange={onChange}\n        style={style}\n        groupedControlProps={groupedControlProps}\n      />\n      <div className={clsx(styles.select, ...getGroupedControlClassNames(styles, groupedControlProps))}>\n        {ariaLabelledby && <InternalSelect {...selectProps} ariaLabelledby={ariaLabelledby} />}\n        {!ariaLabelledby && label && (\n          <InternalFormField label={label} stretch={true}>\n            <InternalSelect {...selectProps} />\n          </InternalFormField>\n        )}\n        {!ariaLabelledby && !label && <InternalSelect {...selectProps} />}\n      </div>\n    </div>\n  );\n}\n"]}

package/lib/internal/template/segmented-control/segment.d.ts

@@ -6,6 +6,7 @@ interface SegmentProps extends SegmentedControlProps.Option {
     isActive: boolean;
     tabIndex: number;
     style: SegmentedControlProps['style'];
+    fullWidth?: boolean;
 }
 export declare const Segment: React.ForwardRefExoticComponent<SegmentProps & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/lib/internal/template/segmented-control/segment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segment.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAShD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAKrD,UAAU,YAAa,SAAQ,qBAAqB,CAAC,MAAM;IACzD,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnE,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC;CACvC;AAED,eAAO,MAAM,OAAO,wFAiFnB,CAAC"}
+{"version":3,"file":"segment.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAShD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAKrD,UAAU,YAAa,SAAQ,qBAAqB,CAAC,MAAM;IACzD,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnE,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,wFAmFnB,CAAC"}

package/lib/internal/template/segmented-control/segment.js

@@ -9,13 +9,13 @@ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import Tooltip from '../tooltip/internal.js';
 import { getSegmentedControlSegmentStyles } from './style';
 import styles from './styles.css.js';
-export const Segment = React.forwardRef(({ disabled, disabledReason, text, iconName, iconAlt, iconUrl, iconSvg, isActive, onClick, onKeyDown, tabIndex, id, style, }, ref) => {
+export const Segment = React.forwardRef(({ disabled, disabledReason, text, iconName, iconAlt, iconUrl, iconSvg, isActive, onClick, onKeyDown, tabIndex, id, style, fullWidth, }, ref) => {
     const buttonRef = useRef(null);
     const [showTooltip, setShowTooltip] = useState(false);
     const isDisabledWithReason = disabled && !!disabledReason;
     const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);
     const isVisualRefresh = useVisualRefresh();
-    return (React.createElement("button", { className: clsx(styles.segment, { [styles.disabled]: !!disabled }, { [styles.selected]: isActive }, { [styles.refresh]: isVisualRefresh }), ref: useMergeRefs(ref, buttonRef), onClick: onClick, onKeyDown: onKeyDown, disabled: disabled && !disabledReason, "aria-disabled": isDisabledWithReason ? 'true' : undefined, type: "button", tabIndex: tabIndex, "aria-pressed": isActive ? 'true' : 'false', "aria-label": !text ? iconAlt : undefined, onFocus: isDisabledWithReason ? () => setShowTooltip(true) : undefined, onBlur: isDisabledWithReason ? () => setShowTooltip(false) : undefined, onMouseEnter: isDisabledWithReason ? () => setShowTooltip(true) : undefined, onMouseLeave: isDisabledWithReason ? () => setShowTooltip(false) : undefined, ...(isDisabledWithReason ? targetProps : {}), "data-testid": id, "data-awsui-motion-trigger": "hover", "data-awsui-motion-target": "", style: getSegmentedControlSegmentStyles(style) },
+    return (React.createElement("button", { className: clsx(styles.segment, { [styles.disabled]: !!disabled }, { [styles.selected]: isActive }, { [styles.refresh]: isVisualRefresh }, { [styles['full-width']]: fullWidth }), ref: useMergeRefs(ref, buttonRef), onClick: onClick, onKeyDown: onKeyDown, disabled: disabled && !disabledReason, "aria-disabled": isDisabledWithReason ? 'true' : undefined, type: "button", tabIndex: tabIndex, "aria-pressed": isActive ? 'true' : 'false', "aria-label": !text ? iconAlt : undefined, onFocus: isDisabledWithReason ? () => setShowTooltip(true) : undefined, onBlur: isDisabledWithReason ? () => setShowTooltip(false) : undefined, onMouseEnter: isDisabledWithReason ? () => setShowTooltip(true) : undefined, onMouseLeave: isDisabledWithReason ? () => setShowTooltip(false) : undefined, ...(isDisabledWithReason ? targetProps : {}), "data-testid": id, "data-awsui-motion-trigger": "hover", "data-awsui-motion-target": "", style: getSegmentedControlSegmentStyles(style) },
         (iconName || iconUrl || iconSvg) && (React.createElement(InternalIcon, { className: clsx(styles.icon, text ? styles['with-text'] : styles['with-no-text']), name: iconName, url: iconUrl, svg: iconSvg, alt: iconAlt, variant: disabled ? 'disabled' : 'normal' })),
         React.createElement("span", null, text),
         isDisabledWithReason && (React.createElement(React.Fragment, null,