@cloudscape-design/components 3.0.901 → 3.0.903

package/prompt-input/styles.scoped.css

@@ -143,7 +143,7 @@
 */
 /* 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_1cygr_146:not(#\9) {
+.awsui_root_55fkh_14pjo_146:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -183,12 +183,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-block: var(--border-width-field-h1g7tw, 2px) solid var(--color-border-input-default-l7v83d, #8c8c94);
   border-inline: var(--border-width-field-h1g7tw, 2px) solid var(--color-border-input-default-l7v83d, #8c8c94);
 }
-.awsui_root_55fkh_1cygr_146.awsui_textarea-readonly_55fkh_1cygr_185:not(#\9) {
+.awsui_root_55fkh_14pjo_146.awsui_textarea-readonly_55fkh_14pjo_185:not(#\9) {
   background-color: var(--color-background-input-default-u56ls1, #ffffff);
   border-block: var(--border-width-field-h1g7tw, 2px) solid var(--color-border-input-disabled-lb7zn3, #ebebf0);
   border-inline: var(--border-width-field-h1g7tw, 2px) solid var(--color-border-input-disabled-lb7zn3, #ebebf0);
 }
-.awsui_root_55fkh_1cygr_146.awsui_disabled_55fkh_1cygr_190:not(#\9) {
+.awsui_root_55fkh_14pjo_146.awsui_disabled_55fkh_14pjo_190:not(#\9) {
   background-color: var(--color-background-input-disabled-gvxsk4, #ebebf0);
   border-block: var(--border-width-field-h1g7tw, 2px) solid var(--color-border-input-disabled-lb7zn3, #ebebf0);
   border-inline: var(--border-width-field-h1g7tw, 2px) solid var(--color-border-input-disabled-lb7zn3, #ebebf0);
@@ -196,57 +196,57 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   cursor: auto;
   cursor: default;
 }
-.awsui_root_55fkh_1cygr_146.awsui_textarea-invalid_55fkh_1cygr_198:not(#\9) {
+.awsui_root_55fkh_14pjo_146.awsui_textarea-invalid_55fkh_14pjo_198:not(#\9) {
   color: var(--color-text-status-error-5676bj, #db0000);
   border-color: var(--color-text-status-error-5676bj, #db0000);
   padding-inline-start: calc(var(--space-field-horizontal-gg19kw, 12px) - (var(--border-invalid-width-5ktjp2, 8px) - var(--border-width-field-h1g7tw, 2px)));
   border-inline-start-width: var(--border-invalid-width-5ktjp2, 8px);
 }
-.awsui_root_55fkh_1cygr_146.awsui_textarea-invalid_55fkh_1cygr_198:not(#\9):focus {
+.awsui_root_55fkh_14pjo_146.awsui_textarea-invalid_55fkh_14pjo_198:not(#\9):focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-fhmbjn, 2px) var(--color-border-item-focused-nv6mhz, #006ce0);
 }
-.awsui_root_55fkh_1cygr_146.awsui_textarea-invalid_55fkh_1cygr_198:not(#\9) {
+.awsui_root_55fkh_14pjo_146.awsui_textarea-invalid_55fkh_14pjo_198:not(#\9) {
   padding-inline-start: 0;
 }
-.awsui_root_55fkh_1cygr_146.awsui_textarea-invalid_55fkh_1cygr_198:not(#\9):focus-within, .awsui_root_55fkh_1cygr_146.awsui_textarea-invalid_55fkh_1cygr_198:not(#\9):focus {
+.awsui_root_55fkh_14pjo_146.awsui_textarea-invalid_55fkh_14pjo_198:not(#\9):focus-within, .awsui_root_55fkh_14pjo_146.awsui_textarea-invalid_55fkh_14pjo_198:not(#\9):focus {
   color: var(--color-text-status-error-5676bj, #db0000);
   border-color: var(--color-text-status-error-5676bj, #db0000);
   padding-inline-start: calc(var(--space-field-horizontal-gg19kw, 12px) - (var(--border-invalid-width-5ktjp2, 8px) - var(--border-width-field-h1g7tw, 2px)));
   border-inline-start-width: var(--border-invalid-width-5ktjp2, 8px);
 }
-.awsui_root_55fkh_1cygr_146.awsui_textarea-invalid_55fkh_1cygr_198:not(#\9):focus-within:focus, .awsui_root_55fkh_1cygr_146.awsui_textarea-invalid_55fkh_1cygr_198:not(#\9):focus:focus {
+.awsui_root_55fkh_14pjo_146.awsui_textarea-invalid_55fkh_14pjo_198:not(#\9):focus-within:focus, .awsui_root_55fkh_14pjo_146.awsui_textarea-invalid_55fkh_14pjo_198:not(#\9):focus:focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-fhmbjn, 2px) var(--color-border-item-focused-nv6mhz, #006ce0);
 }
-.awsui_root_55fkh_1cygr_146.awsui_textarea-invalid_55fkh_1cygr_198:not(#\9):focus-within, .awsui_root_55fkh_1cygr_146.awsui_textarea-invalid_55fkh_1cygr_198:not(#\9):focus {
+.awsui_root_55fkh_14pjo_146.awsui_textarea-invalid_55fkh_14pjo_198:not(#\9):focus-within, .awsui_root_55fkh_14pjo_146.awsui_textarea-invalid_55fkh_14pjo_198:not(#\9):focus {
   padding-inline-start: 0;
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-fhmbjn, 2px) var(--color-border-item-focused-nv6mhz, #006ce0);
 }
-.awsui_root_55fkh_1cygr_146.awsui_textarea-warning_55fkh_1cygr_223:not(#\9) {
+.awsui_root_55fkh_14pjo_146.awsui_textarea-warning_55fkh_14pjo_223:not(#\9) {
   color: var(--color-text-status-warning-csaw41, #855900);
   border-color: var(--color-text-status-warning-csaw41, #855900);
   padding-inline-start: calc(var(--space-field-horizontal-gg19kw, 12px) - (var(--border-invalid-width-5ktjp2, 8px) - var(--border-width-field-h1g7tw, 2px)));
   border-inline-start-width: var(--border-invalid-width-5ktjp2, 8px);
 }
-.awsui_root_55fkh_1cygr_146.awsui_textarea-warning_55fkh_1cygr_223:not(#\9):focus {
+.awsui_root_55fkh_14pjo_146.awsui_textarea-warning_55fkh_14pjo_223:not(#\9):focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-fhmbjn, 2px) var(--color-border-item-focused-nv6mhz, #006ce0);
 }
-.awsui_root_55fkh_1cygr_146.awsui_textarea-warning_55fkh_1cygr_223:not(#\9) {
+.awsui_root_55fkh_14pjo_146.awsui_textarea-warning_55fkh_14pjo_223:not(#\9) {
   padding-inline-start: 0;
 }
-.awsui_root_55fkh_1cygr_146.awsui_textarea-warning_55fkh_1cygr_223:not(#\9):focus-within, .awsui_root_55fkh_1cygr_146.awsui_textarea-warning_55fkh_1cygr_223:not(#\9):focus {
+.awsui_root_55fkh_14pjo_146.awsui_textarea-warning_55fkh_14pjo_223:not(#\9):focus-within, .awsui_root_55fkh_14pjo_146.awsui_textarea-warning_55fkh_14pjo_223:not(#\9):focus {
   color: var(--color-text-status-warning-csaw41, #855900);
   border-color: var(--color-text-status-warning-csaw41, #855900);
   padding-inline-start: calc(var(--space-field-horizontal-gg19kw, 12px) - (var(--border-invalid-width-5ktjp2, 8px) - var(--border-width-field-h1g7tw, 2px)));
   border-inline-start-width: var(--border-invalid-width-5ktjp2, 8px);
 }
-.awsui_root_55fkh_1cygr_146.awsui_textarea-warning_55fkh_1cygr_223:not(#\9):focus-within:focus, .awsui_root_55fkh_1cygr_146.awsui_textarea-warning_55fkh_1cygr_223:not(#\9):focus:focus {
+.awsui_root_55fkh_14pjo_146.awsui_textarea-warning_55fkh_14pjo_223:not(#\9):focus-within:focus, .awsui_root_55fkh_14pjo_146.awsui_textarea-warning_55fkh_14pjo_223:not(#\9):focus:focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-fhmbjn, 2px) var(--color-border-item-focused-nv6mhz, #006ce0);
 }
-.awsui_root_55fkh_1cygr_146.awsui_textarea-warning_55fkh_1cygr_223:not(#\9):focus-within, .awsui_root_55fkh_1cygr_146.awsui_textarea-warning_55fkh_1cygr_223:not(#\9):focus {
+.awsui_root_55fkh_14pjo_146.awsui_textarea-warning_55fkh_14pjo_223:not(#\9):focus-within, .awsui_root_55fkh_14pjo_146.awsui_textarea-warning_55fkh_14pjo_223:not(#\9):focus {
   padding-inline-start: 0;
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-fhmbjn, 2px) var(--color-border-item-focused-nv6mhz, #006ce0);
 }
-.awsui_root_55fkh_1cygr_146:not(#\9):focus-within, .awsui_root_55fkh_1cygr_146:not(#\9):focus {
+.awsui_root_55fkh_14pjo_146:not(#\9):focus-within, .awsui_root_55fkh_14pjo_146:not(#\9):focus {
   outline: 2px dotted transparent;
   border-block: var(--border-width-field-h1g7tw, 2px) solid var(--color-border-input-focused-c6w5i5, #002b66);
   border-inline: var(--border-width-field-h1g7tw, 2px) solid var(--color-border-input-focused-c6w5i5, #002b66);
@@ -257,7 +257,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-0ctpjf, 0px) var(--color-border-item-focused-nv6mhz, #006ce0);
 }
 
-.awsui_textarea_55fkh_1cygr_185:not(#\9) {
+.awsui_textarea_55fkh_14pjo_185:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -307,25 +307,25 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-sizing: border-box;
   border: 0;
 }
-.awsui_textarea_55fkh_1cygr_185:not(#\9)::placeholder {
+.awsui_textarea_55fkh_14pjo_185:not(#\9)::placeholder {
   color: var(--color-text-input-placeholder-f3x213, #656871);
   font-style: italic;
   opacity: 1;
 }
-.awsui_textarea_55fkh_1cygr_185:not(#\9):-ms-input-placeholder {
+.awsui_textarea_55fkh_14pjo_185:not(#\9):-ms-input-placeholder {
   color: var(--color-text-input-placeholder-f3x213, #656871);
   font-style: italic;
 }
-.awsui_textarea_55fkh_1cygr_185:not(#\9):focus {
+.awsui_textarea_55fkh_14pjo_185:not(#\9):focus {
   outline: none;
 }
-.awsui_textarea_55fkh_1cygr_185:not(#\9):invalid {
+.awsui_textarea_55fkh_14pjo_185:not(#\9):invalid {
   box-shadow: none;
 }
-.awsui_textarea_55fkh_1cygr_185.awsui_invalid_55fkh_1cygr_323:not(#\9), .awsui_textarea_55fkh_1cygr_185.awsui_warning_55fkh_1cygr_323:not(#\9) {
+.awsui_textarea_55fkh_14pjo_185.awsui_invalid_55fkh_14pjo_323:not(#\9), .awsui_textarea_55fkh_14pjo_185.awsui_warning_55fkh_14pjo_323:not(#\9) {
   padding-inline-start: calc(var(--space-field-horizontal-gg19kw, 12px) - (var(--border-invalid-width-5ktjp2, 8px) - var(--border-width-field-h1g7tw, 2px)));
 }
-.awsui_textarea_55fkh_1cygr_185:not(#\9):disabled {
+.awsui_textarea_55fkh_14pjo_185:not(#\9):disabled {
   background-color: var(--color-background-input-disabled-gvxsk4, #ebebf0);
   border-block: var(--border-width-field-h1g7tw, 2px) solid var(--color-border-input-disabled-lb7zn3, #ebebf0);
   border-inline: var(--border-width-field-h1g7tw, 2px) solid var(--color-border-input-disabled-lb7zn3, #ebebf0);
@@ -334,33 +334,33 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border: 0;
   cursor: default;
 }
-.awsui_textarea_55fkh_1cygr_185:not(#\9):disabled::placeholder {
+.awsui_textarea_55fkh_14pjo_185:not(#\9):disabled::placeholder {
   color: var(--color-text-input-placeholder-disabled-7v2f7f, #b4b4bb);
   opacity: 1;
 }
-.awsui_textarea_55fkh_1cygr_185:not(#\9):disabled:-ms-input-placeholder {
+.awsui_textarea_55fkh_14pjo_185:not(#\9):disabled:-ms-input-placeholder {
   color: var(--color-text-input-placeholder-disabled-7v2f7f, #b4b4bb);
 }
-.awsui_textarea-wrapper_55fkh_1cygr_342:not(#\9) {
+.awsui_textarea-wrapper_55fkh_14pjo_342:not(#\9) {
   display: flex;
 }
 
-.awsui_button_55fkh_1cygr_346:not(#\9) {
+.awsui_button_55fkh_14pjo_346:not(#\9) {
   align-self: flex-end;
   padding-inline: calc(var(--space-field-horizontal-gg19kw, 12px) / 2);
   padding-block-end: var(--space-scaled-xxxs-27y4hv, 2px);
 }
-.awsui_button_55fkh_1cygr_346 > .awsui_action-button_55fkh_1cygr_351:not(#\9) {
+.awsui_button_55fkh_14pjo_346 > .awsui_action-button_55fkh_14pjo_351:not(#\9) {
   padding: 0;
 }
-body[data-awsui-focus-visible=true] .awsui_button_55fkh_1cygr_346 > .awsui_action-button_55fkh_1cygr_351:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_button_55fkh_14pjo_346 > .awsui_action-button_55fkh_14pjo_351:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_button_55fkh_1cygr_346 > .awsui_action-button_55fkh_1cygr_351:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_button_55fkh_14pjo_346 > .awsui_action-button_55fkh_14pjo_351:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(calc((var(--space-xxxs-zbmxqb, 2px)) - 1px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_button_55fkh_1cygr_346 > .awsui_action-button_55fkh_1cygr_351:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_button_55fkh_14pjo_346 > .awsui_action-button_55fkh_14pjo_351:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -375,7 +375,7 @@ body[data-awsui-focus-visible=true] .awsui_button_55fkh_1cygr_346 > .awsui_actio
   box-shadow: 0 0 0 2px var(--color-border-item-focused-nv6mhz, #006ce0);
 }
 
-.awsui_secondary-content_55fkh_1cygr_376:not(#\9) {
+.awsui_secondary-content_55fkh_14pjo_376:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -411,17 +411,17 @@ body[data-awsui-focus-visible=true] .awsui_button_55fkh_1cygr_346 > .awsui_actio
   border-end-start-radius: var(--border-radius-input-plgbrq, 8px);
   border-end-end-radius: var(--border-radius-input-plgbrq, 8px);
 }
-.awsui_secondary-content_55fkh_1cygr_376.awsui_with-paddings_55fkh_1cygr_411:not(#\9) {
+.awsui_secondary-content_55fkh_14pjo_376.awsui_with-paddings_55fkh_14pjo_411:not(#\9) {
   padding-block-start: var(--space-scaled-s-aqzyko, 12px);
   padding-block-end: var(--space-scaled-s-aqzyko, 12px);
   padding-inline-start: var(--space-field-horizontal-gg19kw, 12px);
   padding-inline-end: var(--space-field-horizontal-gg19kw, 12px);
 }
-.awsui_secondary-content_55fkh_1cygr_376.awsui_with-paddings_55fkh_1cygr_411.awsui_invalid_55fkh_1cygr_323:not(#\9), .awsui_secondary-content_55fkh_1cygr_376.awsui_with-paddings_55fkh_1cygr_411.awsui_warning_55fkh_1cygr_323:not(#\9) {
+.awsui_secondary-content_55fkh_14pjo_376.awsui_with-paddings_55fkh_14pjo_411.awsui_invalid_55fkh_14pjo_323:not(#\9), .awsui_secondary-content_55fkh_14pjo_376.awsui_with-paddings_55fkh_14pjo_411.awsui_warning_55fkh_14pjo_323:not(#\9) {
   padding-inline-start: calc(var(--space-field-horizontal-gg19kw, 12px) - (var(--border-invalid-width-5ktjp2, 8px) - var(--border-width-field-h1g7tw, 2px)));
 }
 
-.awsui_secondary-actions_55fkh_1cygr_421:not(#\9) {
+.awsui_secondary-actions_55fkh_14pjo_421:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -460,17 +460,23 @@ body[data-awsui-focus-visible=true] .awsui_button_55fkh_1cygr_346 > .awsui_actio
   justify-content: space-between;
   align-items: flex-end;
 }
-.awsui_secondary-actions_55fkh_1cygr_421.awsui_with-paddings_55fkh_1cygr_411:not(#\9) {
+.awsui_secondary-actions_55fkh_14pjo_421.awsui_with-paddings_55fkh_14pjo_411:not(#\9) {
   padding-inline-start: var(--space-field-horizontal-gg19kw, 12px);
   padding-block-start: var(--space-scaled-s-aqzyko, 12px);
   padding-block-end: var(--space-scaled-xxs-7597g1, 4px);
 }
-.awsui_secondary-actions_55fkh_1cygr_421.awsui_with-paddings_55fkh_1cygr_411.awsui_invalid_55fkh_1cygr_323:not(#\9), .awsui_secondary-actions_55fkh_1cygr_421.awsui_with-paddings_55fkh_1cygr_411.awsui_warning_55fkh_1cygr_323:not(#\9) {
+.awsui_secondary-actions_55fkh_14pjo_421.awsui_with-paddings_55fkh_14pjo_411.awsui_invalid_55fkh_14pjo_323:not(#\9), .awsui_secondary-actions_55fkh_14pjo_421.awsui_with-paddings_55fkh_14pjo_411.awsui_warning_55fkh_14pjo_323:not(#\9) {
   padding-inline-start: calc(var(--space-field-horizontal-gg19kw, 12px) - (var(--border-invalid-width-5ktjp2, 8px) - var(--border-width-field-h1g7tw, 2px)));
 }
-.awsui_secondary-actions_55fkh_1cygr_421.awsui_with-paddings_55fkh_1cygr_411 > .awsui_button_55fkh_1cygr_346:not(#\9) {
+.awsui_secondary-actions_55fkh_14pjo_421.awsui_with-paddings_55fkh_14pjo_411 > .awsui_button_55fkh_14pjo_346:not(#\9) {
   padding-block-end: 0;
 }
-.awsui_secondary-actions_55fkh_1cygr_421 > .awsui_button_55fkh_1cygr_346:not(#\9) {
+.awsui_secondary-actions_55fkh_14pjo_421 > .awsui_button_55fkh_14pjo_346:not(#\9) {
   padding-block-end: var(--space-scaled-xxs-7597g1, 4px);
+}
+
+.awsui_buffer_55fkh_14pjo_474:not(#\9) {
+  flex: 1;
+  align-self: stretch;
+  cursor: text;
 }

package/prompt-input/styles.selectors.js

@@ -2,19 +2,20 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_55fkh_1cygr_146",
-  "textarea-readonly": "awsui_textarea-readonly_55fkh_1cygr_185",
-  "disabled": "awsui_disabled_55fkh_1cygr_190",
-  "textarea-invalid": "awsui_textarea-invalid_55fkh_1cygr_198",
-  "textarea-warning": "awsui_textarea-warning_55fkh_1cygr_223",
-  "textarea": "awsui_textarea_55fkh_1cygr_185",
-  "invalid": "awsui_invalid_55fkh_1cygr_323",
-  "warning": "awsui_warning_55fkh_1cygr_323",
-  "textarea-wrapper": "awsui_textarea-wrapper_55fkh_1cygr_342",
-  "button": "awsui_button_55fkh_1cygr_346",
-  "action-button": "awsui_action-button_55fkh_1cygr_351",
-  "secondary-content": "awsui_secondary-content_55fkh_1cygr_376",
-  "with-paddings": "awsui_with-paddings_55fkh_1cygr_411",
-  "secondary-actions": "awsui_secondary-actions_55fkh_1cygr_421"
+  "root": "awsui_root_55fkh_14pjo_146",
+  "textarea-readonly": "awsui_textarea-readonly_55fkh_14pjo_185",
+  "disabled": "awsui_disabled_55fkh_14pjo_190",
+  "textarea-invalid": "awsui_textarea-invalid_55fkh_14pjo_198",
+  "textarea-warning": "awsui_textarea-warning_55fkh_14pjo_223",
+  "textarea": "awsui_textarea_55fkh_14pjo_185",
+  "invalid": "awsui_invalid_55fkh_14pjo_323",
+  "warning": "awsui_warning_55fkh_14pjo_323",
+  "textarea-wrapper": "awsui_textarea-wrapper_55fkh_14pjo_342",
+  "button": "awsui_button_55fkh_14pjo_346",
+  "action-button": "awsui_action-button_55fkh_14pjo_351",
+  "secondary-content": "awsui_secondary-content_55fkh_14pjo_376",
+  "with-paddings": "awsui_with-paddings_55fkh_14pjo_411",
+  "secondary-actions": "awsui_secondary-actions_55fkh_14pjo_421",
+  "buffer": "awsui_buffer_55fkh_14pjo_474"
 };
   

package/select/parts/plain-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plain-list.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/plain-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAE7E,OAAO,EAAE,aAAa,EAAE,MAAM,mEAAmE,CAAC;AAGlG,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAIhE,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,SAAS,CAAC;IACrB,cAAc,EAAE,cAAc,CAAC;IAC/B,eAAe,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC/C,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;;AAkDD,wBAAqC"}
+{"version":3,"file":"plain-list.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/plain-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAE7E,OAAO,EAAE,aAAa,EAAE,MAAM,mEAAmE,CAAC;AAGlG,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAIhE,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,SAAS,CAAC;IACrB,cAAc,EAAE,cAAc,CAAC;IAC/B,eAAe,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC/C,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;;AAsDD,wBAAqC"}

package/select/parts/plain-list.js

@@ -8,10 +8,14 @@ import styles from './styles.css.js';
 const PlainList = ({ menuProps, getOptionProps, filteredOptions, filteringValue, highlightType, checkboxes, hasDropdownStatus, listBottom, useInteractiveGroups, screenReaderContent, }, ref) => {
     const menuRef = menuProps.ref;
     useImperativeHandle(ref, () => (index) => {
-        var _a;
+        var _a, _b, _c;
         const item = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-mouse-target="${index}"]`);
         if (highlightType.moveFocus && item) {
-            scrollElementIntoView(item);
+            // In edge case dropdown can be very small, scrolling can cause side effect AWSUI-60318
+            if (((_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight) !== undefined && ((_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight) > 15) {
+                /* istanbul ignore next: clientHeight always returns 0 in JSDOM, the line is covered by integ tests */
+                scrollElementIntoView(item);
+            }
         }
     }, [highlightType, menuRef]);
     return (React.createElement(OptionsList, Object.assign({}, menuProps),

package/select/parts/plain-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"plain-list.js","sourceRoot":"","sources":["../../../../src/select/parts/plain-list.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,WAAW,MAAM,wCAAwC,CAAC;AAEjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGxD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAmBrC,MAAM,SAAS,GAAG,CAChB,EACE,SAAS,EACT,cAAc,EACd,eAAe,EACf,cAAc,EACd,aAAa,EACb,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,oBAAoB,EACpB,mBAAmB,GACH,EAClB,GAA6C,EAC7C,EAAE;IACF,MAAM,OAAO,GAAG,SAAS,CAAC,GAAG,CAAC;IAC9B,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC,KAAa,EAAE,EAAE;;QACtB,MAAM,IAAI,GAAG,MAAA,OAAO,CAAC,OAAO,0CAAE,aAAa,CAAc,uBAAuB,KAAK,IAAI,CAAC,CAAC;QAC3F,IAAI,aAAa,CAAC,SAAS,IAAI,IAAI,EAAE;YACnC,qBAAqB,CAAC,IAAI,CAAC,CAAC;SAC7B;IACH,CAAC,EACD,CAAC,aAAa,EAAE,OAAO,CAAC,CACzB,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,oBAAK,SAAS;QACvB,aAAa,CAAC;YACb,OAAO,EAAE,eAAe;YACxB,cAAc;YACd,cAAc;YACd,aAAa;YACb,UAAU;YACV,iBAAiB;YACjB,oBAAoB;YACpB,mBAAmB;SACpB,CAAC;QACD,UAAU,CAAC,CAAC,CAAC,CACZ,4BAAI,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,IAC/C,UAAU,CACR,CACN,CAAC,CAAC,CAAC,IAAI,CACI,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC,SAAS,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useImperativeHandle } from 'react';\n\nimport { DropdownOption } from '../../internal/components/option/interfaces';\nimport OptionsList from '../../internal/components/options-list';\nimport { HighlightType } from '../../internal/components/options-list/utils/use-highlight-option';\nimport { scrollElementIntoView } from '../../internal/utils/scrollable-containers';\nimport { renderOptions } from '../utils/render-options';\nimport { GetOptionProps, MenuProps } from '../utils/use-select';\n\nimport styles from './styles.css.js';\n\nexport interface SelectListProps {\n  menuProps: MenuProps;\n  getOptionProps: GetOptionProps;\n  filteredOptions: ReadonlyArray<DropdownOption>;\n  filteringValue: string;\n  highlightType: HighlightType;\n  checkboxes?: boolean;\n  hasDropdownStatus?: boolean;\n  listBottom?: React.ReactNode;\n  useInteractiveGroups?: boolean;\n  screenReaderContent?: string;\n}\n\nexport namespace SelectListProps {\n  export type SelectListRef = (index: number) => void;\n}\n\nconst PlainList = (\n  {\n    menuProps,\n    getOptionProps,\n    filteredOptions,\n    filteringValue,\n    highlightType,\n    checkboxes,\n    hasDropdownStatus,\n    listBottom,\n    useInteractiveGroups,\n    screenReaderContent,\n  }: SelectListProps,\n  ref: React.Ref<SelectListProps.SelectListRef>\n) => {\n  const menuRef = menuProps.ref;\n  useImperativeHandle(\n    ref,\n    () => (index: number) => {\n      const item = menuRef.current?.querySelector<HTMLElement>(`[data-mouse-target=\"${index}\"]`);\n      if (highlightType.moveFocus && item) {\n        scrollElementIntoView(item);\n      }\n    },\n    [highlightType, menuRef]\n  );\n\n  return (\n    <OptionsList {...menuProps}>\n      {renderOptions({\n        options: filteredOptions,\n        getOptionProps,\n        filteringValue,\n        highlightType,\n        checkboxes,\n        hasDropdownStatus,\n        useInteractiveGroups,\n        screenReaderContent,\n      })}\n      {listBottom ? (\n        <li role=\"option\" className={styles['list-bottom']}>\n          {listBottom}\n        </li>\n      ) : null}\n    </OptionsList>\n  );\n};\n\nexport default forwardRef(PlainList);\n"]}
+{"version":3,"file":"plain-list.js","sourceRoot":"","sources":["../../../../src/select/parts/plain-list.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,WAAW,MAAM,wCAAwC,CAAC;AAEjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGxD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAmBrC,MAAM,SAAS,GAAG,CAChB,EACE,SAAS,EACT,cAAc,EACd,eAAe,EACf,cAAc,EACd,aAAa,EACb,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,oBAAoB,EACpB,mBAAmB,GACH,EAClB,GAA6C,EAC7C,EAAE;IACF,MAAM,OAAO,GAAG,SAAS,CAAC,GAAG,CAAC;IAC9B,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC,KAAa,EAAE,EAAE;;QACtB,MAAM,IAAI,GAAG,MAAA,OAAO,CAAC,OAAO,0CAAE,aAAa,CAAc,uBAAuB,KAAK,IAAI,CAAC,CAAC;QAC3F,IAAI,aAAa,CAAC,SAAS,IAAI,IAAI,EAAE;YACnC,uFAAuF;YACvF,IAAI,CAAA,MAAA,OAAO,CAAC,OAAO,0CAAE,YAAY,MAAK,SAAS,IAAI,CAAA,MAAA,OAAO,CAAC,OAAO,0CAAE,YAAY,IAAG,EAAE,EAAE;gBACrF,sGAAsG;gBACtG,qBAAqB,CAAC,IAAI,CAAC,CAAC;aAC7B;SACF;IACH,CAAC,EACD,CAAC,aAAa,EAAE,OAAO,CAAC,CACzB,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,oBAAK,SAAS;QACvB,aAAa,CAAC;YACb,OAAO,EAAE,eAAe;YACxB,cAAc;YACd,cAAc;YACd,aAAa;YACb,UAAU;YACV,iBAAiB;YACjB,oBAAoB;YACpB,mBAAmB;SACpB,CAAC;QACD,UAAU,CAAC,CAAC,CAAC,CACZ,4BAAI,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,IAC/C,UAAU,CACR,CACN,CAAC,CAAC,CAAC,IAAI,CACI,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC,SAAS,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useImperativeHandle } from 'react';\n\nimport { DropdownOption } from '../../internal/components/option/interfaces';\nimport OptionsList from '../../internal/components/options-list';\nimport { HighlightType } from '../../internal/components/options-list/utils/use-highlight-option';\nimport { scrollElementIntoView } from '../../internal/utils/scrollable-containers';\nimport { renderOptions } from '../utils/render-options';\nimport { GetOptionProps, MenuProps } from '../utils/use-select';\n\nimport styles from './styles.css.js';\n\nexport interface SelectListProps {\n  menuProps: MenuProps;\n  getOptionProps: GetOptionProps;\n  filteredOptions: ReadonlyArray<DropdownOption>;\n  filteringValue: string;\n  highlightType: HighlightType;\n  checkboxes?: boolean;\n  hasDropdownStatus?: boolean;\n  listBottom?: React.ReactNode;\n  useInteractiveGroups?: boolean;\n  screenReaderContent?: string;\n}\n\nexport namespace SelectListProps {\n  export type SelectListRef = (index: number) => void;\n}\n\nconst PlainList = (\n  {\n    menuProps,\n    getOptionProps,\n    filteredOptions,\n    filteringValue,\n    highlightType,\n    checkboxes,\n    hasDropdownStatus,\n    listBottom,\n    useInteractiveGroups,\n    screenReaderContent,\n  }: SelectListProps,\n  ref: React.Ref<SelectListProps.SelectListRef>\n) => {\n  const menuRef = menuProps.ref;\n  useImperativeHandle(\n    ref,\n    () => (index: number) => {\n      const item = menuRef.current?.querySelector<HTMLElement>(`[data-mouse-target=\"${index}\"]`);\n      if (highlightType.moveFocus && item) {\n        // In edge case dropdown can be very small, scrolling can cause side effect AWSUI-60318\n        if (menuRef.current?.clientHeight !== undefined && menuRef.current?.clientHeight > 15) {\n          /* istanbul ignore next: clientHeight always returns 0 in JSDOM, the line is covered by integ tests */\n          scrollElementIntoView(item);\n        }\n      }\n    },\n    [highlightType, menuRef]\n  );\n\n  return (\n    <OptionsList {...menuProps}>\n      {renderOptions({\n        options: filteredOptions,\n        getOptionProps,\n        filteringValue,\n        highlightType,\n        checkboxes,\n        hasDropdownStatus,\n        useInteractiveGroups,\n        screenReaderContent,\n      })}\n      {listBottom ? (\n        <li role=\"option\" className={styles['list-bottom']}>\n          {listBottom}\n        </li>\n      ) : null}\n    </OptionsList>\n  );\n};\n\nexport default forwardRef(PlainList);\n"]}

package/tabs/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { TabsProps } from './interfaces';
 export { TabsProps };
-export default function Tabs({ tabs, variant, onChange, activeTabId: controlledTabId, ariaLabel, ariaLabelledby, disableContentPaddings, i18nStrings, fitHeight, ...rest }: TabsProps): JSX.Element;
+export default function Tabs({ tabs, variant, onChange, activeTabId: controlledTabId, ariaLabel, ariaLabelledby, disableContentPaddings, i18nStrings, fitHeight, keyboardActivationMode, actions, ...rest }: TabsProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tabs/index.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAUrB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,OAAmB,EACnB,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,SAAS,EACT,cAAc,EACd,sBAA8B,EAC9B,WAAW,EACX,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,eAuHX"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tabs/index.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAsBrB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,OAAmB,EACnB,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,SAAS,EACT,cAAc,EACd,sBAA8B,EAC9B,WAAW,EACX,SAAS,EACT,sBAAoC,EACpC,OAAO,EACP,GAAG,IAAI,EACR,EAAE,SAAS,eAkIX"}

package/tabs/index.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useRef } from 'react';
 import clsx from 'clsx';
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 import InternalContainer from '../container/internal';
@@ -22,17 +22,31 @@ function firstEnabledTab(tabs) {
     }
     return null;
 }
+function shouldRenderTabContent(tab, viewedTabs) {
+    switch (tab.contentRenderStrategy) {
+        case 'active':
+            return false; // rendering active tab is handled directly in component
+        case 'eager':
+            return true;
+        case 'lazy':
+            return viewedTabs.has(tab.id);
+    }
+    return false;
+}
 export default function Tabs(_a) {
     var _b, _c;
-    var { tabs, variant = 'default', onChange, activeTabId: controlledTabId, ariaLabel, ariaLabelledby, disableContentPaddings = false, i18nStrings, fitHeight } = _a, rest = __rest(_a, ["tabs", "variant", "onChange", "activeTabId", "ariaLabel", "ariaLabelledby", "disableContentPaddings", "i18nStrings", "fitHeight"]);
+    var { tabs, variant = 'default', onChange, activeTabId: controlledTabId, ariaLabel, ariaLabelledby, disableContentPaddings = false, i18nStrings, fitHeight, keyboardActivationMode = 'automatic', actions } = _a, rest = __rest(_a, ["tabs", "variant", "onChange", "activeTabId", "ariaLabel", "ariaLabelledby", "disableContentPaddings", "i18nStrings", "fitHeight", "keyboardActivationMode", "actions"]);
     for (const tab of tabs) {
         checkSafeUrl('Tabs', tab.href);
     }
     const { __internalRootRef } = useBaseComponent('Tabs', {
-        props: { disableContentPaddings, variant, fitHeight },
+        props: { disableContentPaddings, variant, fitHeight, keyboardActivationMode },
         metadata: {
             hasActions: tabs.some(tab => !!tab.action),
+            hasHeaderActions: !!actions,
             hasDisabledReasons: tabs.some(tab => !!tab.disabledReason),
+            hasEagerLoadedTabs: tabs.some(tab => tab.contentRenderStrategy === 'eager'),
+            hasLazyLoadedTabs: tabs.some(tab => tab.contentRenderStrategy === 'lazy'),
         },
     });
     const idNamespace = useUniqueId('awsui-tabs-');
@@ -41,6 +55,10 @@ export default function Tabs(_a) {
         controlledProp: 'activeTabId',
         changeHandler: 'onChange',
     });
+    const viewedTabs = useRef(new Set());
+    if (activeTabId !== undefined) {
+        viewedTabs.current.add(activeTabId);
+    }
     const baseProps = getBaseProps(rest);
     const analyticsComponentMetadata = {
         name: 'awsui.Tabs',
@@ -70,8 +88,8 @@ export default function Tabs(_a) {
                 tabIndex: 0,
                 'aria-labelledby': getTabElementId({ namespace: idNamespace, tabId: tab.id }),
             };
-            const isContentShown = isTabSelected && !selectedTab.disabled;
-            return React.createElement("div", Object.assign({}, contentAttributes), isContentShown && selectedTab.content);
+            const isContentShown = !tab.disabled && (isTabSelected || shouldRenderTabContent(tab, viewedTabs.current));
+            return React.createElement("div", Object.assign({}, contentAttributes), isContentShown && tab.content);
         };
         return (React.createElement("div", { className: clsx(variant === 'container' || variant === 'stacked'
                 ? styles['tabs-container-content-wrapper']
@@ -79,10 +97,10 @@ export default function Tabs(_a) {
                 [styles['with-paddings']]: !disableContentPaddings,
             }) }, tabs.map(renderContent)));
     };
-    const header = (React.createElement(TabHeaderBar, { activeTabId: activeTabId, variant: variant, idNamespace: idNamespace, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, tabs: tabs, onChange: changeDetail => {
+    const header = (React.createElement(TabHeaderBar, { activeTabId: activeTabId, variant: variant, idNamespace: idNamespace, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, tabs: tabs, actions: actions, onChange: changeDetail => {
             setActiveTabId(changeDetail.activeTabId);
             fireNonCancelableEvent(onChange, changeDetail);
-        }, i18nStrings: i18nStrings }));
+        }, i18nStrings: i18nStrings, keyboardActivationMode: keyboardActivationMode }));
     if (variant === 'container' || variant === 'stacked') {
         return (React.createElement(InternalContainer, Object.assign({ header: header, disableHeaderPaddings: true }, baseProps, { className: clsx(baseProps.className, styles.root), __internalRootRef: __internalRootRef, disableContentPaddings: true, variant: variant === 'stacked' ? 'stacked' : 'default', fitHeight: fitHeight }, getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })), content()));
     }

package/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/index.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 { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalContainer from '../container/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { GeneratedAnalyticsMetadataTabsComponent } from './analytics-metadata/interfaces';\nimport { TabsProps } from './interfaces';\nimport { getTabElementId, TabHeaderBar } from './tab-header-bar';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { TabsProps };\n\nfunction firstEnabledTab(tabs: ReadonlyArray<TabsProps.Tab>) {\n  const enabledTabs = tabs.filter(tab => !tab.disabled);\n  if (enabledTabs.length > 0) {\n    return enabledTabs[0];\n  }\n  return null;\n}\n\nexport default function Tabs({\n  tabs,\n  variant = 'default',\n  onChange,\n  activeTabId: controlledTabId,\n  ariaLabel,\n  ariaLabelledby,\n  disableContentPaddings = false,\n  i18nStrings,\n  fitHeight,\n  ...rest\n}: TabsProps) {\n  for (const tab of tabs) {\n    checkSafeUrl('Tabs', tab.href);\n  }\n  const { __internalRootRef } = useBaseComponent('Tabs', {\n    props: { disableContentPaddings, variant, fitHeight },\n    metadata: {\n      hasActions: tabs.some(tab => !!tab.action),\n      hasDisabledReasons: tabs.some(tab => !!tab.disabledReason),\n    },\n  });\n  const idNamespace = useUniqueId('awsui-tabs-');\n\n  const [activeTabId, setActiveTabId] = useControllable(controlledTabId, onChange, firstEnabledTab(tabs)?.id ?? '', {\n    componentName: 'Tabs',\n    controlledProp: 'activeTabId',\n    changeHandler: 'onChange',\n  });\n\n  const baseProps = getBaseProps(rest);\n\n  const analyticsComponentMetadata: GeneratedAnalyticsMetadataTabsComponent = {\n    name: 'awsui.Tabs',\n    label: `.${analyticsSelectors['tabs-header-list']}`,\n  };\n\n  if (activeTabId) {\n    analyticsComponentMetadata.properties = {\n      activeTabId,\n      activeTabLabel: `.${analyticsSelectors['active-tab-header']} .${analyticsSelectors['tab-label']}`,\n      activeTabPosition: `${tabs.findIndex(tab => tab.id === activeTabId) + 1}`,\n      tabsCount: `${tabs.length}`,\n    };\n  }\n\n  const content = () => {\n    const selectedTab = tabs.filter(tab => tab.id === activeTabId)[0];\n    const renderContent = (tab: TabsProps.Tab) => {\n      const isTabSelected = tab === selectedTab;\n\n      const classes = clsx({\n        [styles['tabs-content']]: true,\n        [styles['tabs-content-active']]: isTabSelected,\n      });\n\n      const contentAttributes: JSX.IntrinsicElements['div'] = {\n        className: classes,\n        role: 'tabpanel',\n        id: `${idNamespace}-${tab.id}-panel`,\n        key: `${idNamespace}-${tab.id}-panel`,\n        tabIndex: 0,\n        'aria-labelledby': getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n      };\n\n      const isContentShown = isTabSelected && !selectedTab.disabled;\n      return <div {...contentAttributes}>{isContentShown && selectedTab.content}</div>;\n    };\n\n    return (\n      <div\n        className={clsx(\n          variant === 'container' || variant === 'stacked'\n            ? styles['tabs-container-content-wrapper']\n            : styles['tabs-content-wrapper'],\n          {\n            [styles['with-paddings']]: !disableContentPaddings,\n          }\n        )}\n      >\n        {tabs.map(renderContent)}\n      </div>\n    );\n  };\n\n  const header = (\n    <TabHeaderBar\n      activeTabId={activeTabId}\n      variant={variant}\n      idNamespace={idNamespace}\n      ariaLabel={ariaLabel}\n      ariaLabelledby={ariaLabelledby}\n      tabs={tabs}\n      onChange={changeDetail => {\n        setActiveTabId(changeDetail.activeTabId);\n        fireNonCancelableEvent(onChange, changeDetail);\n      }}\n      i18nStrings={i18nStrings}\n    />\n  );\n\n  if (variant === 'container' || variant === 'stacked') {\n    return (\n      <InternalContainer\n        header={header}\n        disableHeaderPaddings={true}\n        {...baseProps}\n        className={clsx(baseProps.className, styles.root)}\n        __internalRootRef={__internalRootRef}\n        disableContentPaddings={true}\n        variant={variant === 'stacked' ? 'stacked' : 'default'}\n        fitHeight={fitHeight}\n        {...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })}\n      >\n        {content()}\n      </InternalContainer>\n    );\n  }\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root, styles.tabs, { [styles['fit-height']]: fitHeight })}\n      ref={__internalRootRef}\n      {...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })}\n    >\n      {header}\n      {content()}\n    </div>\n  );\n}\n\napplyDisplayName(Tabs, 'Tabs');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/index.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 { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalContainer from '../container/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { GeneratedAnalyticsMetadataTabsComponent } from './analytics-metadata/interfaces';\nimport { TabsProps } from './interfaces';\nimport { getTabElementId, TabHeaderBar } from './tab-header-bar';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { TabsProps };\n\nfunction firstEnabledTab(tabs: ReadonlyArray<TabsProps.Tab>) {\n  const enabledTabs = tabs.filter(tab => !tab.disabled);\n  if (enabledTabs.length > 0) {\n    return enabledTabs[0];\n  }\n  return null;\n}\n\nfunction shouldRenderTabContent(tab: TabsProps.Tab, viewedTabs: Set<string>) {\n  switch (tab.contentRenderStrategy) {\n    case 'active':\n      return false; // rendering active tab is handled directly in component\n    case 'eager':\n      return true;\n    case 'lazy':\n      return viewedTabs.has(tab.id);\n  }\n  return false;\n}\n\nexport default function Tabs({\n  tabs,\n  variant = 'default',\n  onChange,\n  activeTabId: controlledTabId,\n  ariaLabel,\n  ariaLabelledby,\n  disableContentPaddings = false,\n  i18nStrings,\n  fitHeight,\n  keyboardActivationMode = 'automatic',\n  actions,\n  ...rest\n}: TabsProps) {\n  for (const tab of tabs) {\n    checkSafeUrl('Tabs', tab.href);\n  }\n  const { __internalRootRef } = useBaseComponent('Tabs', {\n    props: { disableContentPaddings, variant, fitHeight, keyboardActivationMode },\n    metadata: {\n      hasActions: tabs.some(tab => !!tab.action),\n      hasHeaderActions: !!actions,\n      hasDisabledReasons: tabs.some(tab => !!tab.disabledReason),\n      hasEagerLoadedTabs: tabs.some(tab => tab.contentRenderStrategy === 'eager'),\n      hasLazyLoadedTabs: tabs.some(tab => tab.contentRenderStrategy === 'lazy'),\n    },\n  });\n  const idNamespace = useUniqueId('awsui-tabs-');\n\n  const [activeTabId, setActiveTabId] = useControllable(controlledTabId, onChange, firstEnabledTab(tabs)?.id ?? '', {\n    componentName: 'Tabs',\n    controlledProp: 'activeTabId',\n    changeHandler: 'onChange',\n  });\n\n  const viewedTabs = useRef(new Set<string>());\n  if (activeTabId !== undefined) {\n    viewedTabs.current.add(activeTabId);\n  }\n\n  const baseProps = getBaseProps(rest);\n\n  const analyticsComponentMetadata: GeneratedAnalyticsMetadataTabsComponent = {\n    name: 'awsui.Tabs',\n    label: `.${analyticsSelectors['tabs-header-list']}`,\n  };\n\n  if (activeTabId) {\n    analyticsComponentMetadata.properties = {\n      activeTabId,\n      activeTabLabel: `.${analyticsSelectors['active-tab-header']} .${analyticsSelectors['tab-label']}`,\n      activeTabPosition: `${tabs.findIndex(tab => tab.id === activeTabId) + 1}`,\n      tabsCount: `${tabs.length}`,\n    };\n  }\n\n  const content = () => {\n    const selectedTab = tabs.filter(tab => tab.id === activeTabId)[0];\n    const renderContent = (tab: TabsProps.Tab) => {\n      const isTabSelected = tab === selectedTab;\n\n      const classes = clsx({\n        [styles['tabs-content']]: true,\n        [styles['tabs-content-active']]: isTabSelected,\n      });\n\n      const contentAttributes: JSX.IntrinsicElements['div'] = {\n        className: classes,\n        role: 'tabpanel',\n        id: `${idNamespace}-${tab.id}-panel`,\n        key: `${idNamespace}-${tab.id}-panel`,\n        tabIndex: 0,\n        'aria-labelledby': getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n      };\n\n      const isContentShown = !tab.disabled && (isTabSelected || shouldRenderTabContent(tab, viewedTabs.current));\n\n      return <div {...contentAttributes}>{isContentShown && tab.content}</div>;\n    };\n\n    return (\n      <div\n        className={clsx(\n          variant === 'container' || variant === 'stacked'\n            ? styles['tabs-container-content-wrapper']\n            : styles['tabs-content-wrapper'],\n          {\n            [styles['with-paddings']]: !disableContentPaddings,\n          }\n        )}\n      >\n        {tabs.map(renderContent)}\n      </div>\n    );\n  };\n\n  const header = (\n    <TabHeaderBar\n      activeTabId={activeTabId}\n      variant={variant}\n      idNamespace={idNamespace}\n      ariaLabel={ariaLabel}\n      ariaLabelledby={ariaLabelledby}\n      tabs={tabs}\n      actions={actions}\n      onChange={changeDetail => {\n        setActiveTabId(changeDetail.activeTabId);\n        fireNonCancelableEvent(onChange, changeDetail);\n      }}\n      i18nStrings={i18nStrings}\n      keyboardActivationMode={keyboardActivationMode}\n    />\n  );\n\n  if (variant === 'container' || variant === 'stacked') {\n    return (\n      <InternalContainer\n        header={header}\n        disableHeaderPaddings={true}\n        {...baseProps}\n        className={clsx(baseProps.className, styles.root)}\n        __internalRootRef={__internalRootRef}\n        disableContentPaddings={true}\n        variant={variant === 'stacked' ? 'stacked' : 'default'}\n        fitHeight={fitHeight}\n        {...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })}\n      >\n        {content()}\n      </InternalContainer>\n    );\n  }\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root, styles.tabs, { [styles['fit-height']]: fitHeight })}\n      ref={__internalRootRef}\n      {...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })}\n    >\n      {header}\n      {content()}\n    </div>\n  );\n}\n\napplyDisplayName(Tabs, 'Tabs');\n"]}

package/tabs/interfaces.d.ts

@@ -23,8 +23,19 @@ export interface TabsProps extends BaseComponentProps {
      *    ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,
      *    if your application routing can handle such deep links. You can manually update routing on the current page
      *    using the `activeTabHref` property of the `change` event's detail.
+     * - `contentRenderStrategy` (string) - (Optional) Determines when tab content is rendered:
+         - `'active'`: (Default) Only render content when the tab is active.
+     *   - `'eager'`: Always render tab content (hidden when the tab is not active).
+     *   - `'lazy'`: Like 'eager', but content is only rendered after the tab is first activated.
      */
     tabs: ReadonlyArray<TabsProps.Tab>;
+    /**
+     * Actions for the tabs header, displayed next to the list of tabs.
+     * Use this to add a button or button dropdown that performs actions on the
+     * entire tab list. We recommend a maximum of one interactive element to
+     * minimize the number of keyboard tab stops between the tab list and content.
+     */
+    actions?: React.ReactNode;
     /**
      * The possible visual variants of tabs are the following:
      * * `default` - Use in any context.
@@ -69,6 +80,16 @@ export interface TabsProps extends BaseComponentProps {
      * If the tab content is too short, it will stretch. If the tab content is too long, a vertical scrollbar will be shown.
      */
     fitHeight?: boolean;
+    /**
+     * Determines how the active tab is switched when navigating using
+     * the keyboard. The options are:
+     * - 'automatic' (default): the active tab is switched using the arrow keys.
+     * - 'manual': a tab must be explicitly activated using the enter/space key.
+     * We recommend using 'automatic' in most situations to provide consistent
+     * and quick switching between tabs. Use 'manual' only if there is a specific
+     * need to introduce friction to the switching of tabs.
+     */
+    keyboardActivationMode?: 'automatic' | 'manual';
 }
 export declare namespace TabsProps {
     type Variant = 'default' | 'container' | 'stacked';
@@ -124,6 +145,13 @@ export declare namespace TabsProps {
          * using the `activeTabHref` property of the `change` event's detail.
          */
         href?: string;
+        /**
+         * Determines when tab content is rendered:
+         * - 'active' (default): Only render content when the tab is active.
+         * - 'eager': Always render tab content (hidden when the tab is not active).
+         * - 'lazy': Like 'eager', but content is only rendered after the tab is first activated.
+         */
+        contentRenderStrategy?: 'active' | 'eager' | 'lazy';
     }
     interface ChangeDetail {
         /**

package/tabs/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IAEnC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAE7D;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AACD,yBAAiB,SAAS,CAAC;IACzB,KAAY,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IAE1D,UAAiB,GAAG;QAClB;;WAEG;QACH,EAAE,EAAE,MAAM,CAAC;QACX;;WAEG;QACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B;;WAEG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;;WAGG;QACH,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB;;WAEG;QACH,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB;;WAEG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B;;;;WAIG;QACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB;;WAEG;QACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QACnC;;;;;;WAMG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,YAAY;QAC3B;;WAEG;QACH,WAAW,EAAE,MAAM,CAAC;QACpB;;WAEG;QACH,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB;IAED,UAAiB,WAAW;QAC1B;;WAEG;QACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B;;WAEG;QACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B;;;WAGG;QACH,kCAAkC,CAAC,EAAE,MAAM,CAAC;KAC7C;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IAEnC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAE7D;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;OAQG;IACH,sBAAsB,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;CACjD;AACD,yBAAiB,SAAS,CAAC;IACzB,KAAY,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IAE1D,UAAiB,GAAG;QAClB;;WAEG;QACH,EAAE,EAAE,MAAM,CAAC;QACX;;WAEG;QACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B;;WAEG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;;WAGG;QACH,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB;;WAEG;QACH,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB;;WAEG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B;;;;WAIG;QACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB;;WAEG;QACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QACnC;;;;;;WAMG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;;;;WAKG;QACH,qBAAqB,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;KACrD;IAED,UAAiB,YAAY;QAC3B;;WAEG;QACH,WAAW,EAAE,MAAM,CAAC;QACpB;;WAEG;QACH,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB;IAED,UAAiB,WAAW;QAC1B;;WAEG;QACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B;;WAEG;QACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B;;;WAGG;QACH,kCAAkC,CAAC,EAAE,MAAM,CAAC;KAC7C;CACF"}

package/tabs/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ButtonProps } from '../button/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface TabsProps extends BaseComponentProps {\n  /**\n   * Specifies the tabs to display. Each tab object has the following properties:\n   *\n   * - `id` (string) - The tab identifier. This value needs to be passed to the Tabs component as `activeTabId` to select this tab.\n   * - `label` (ReactNode) - Tab label shown in the UI.\n   * - `content` (ReactNode) - (Optional) Tab content to render in the container.\n   * - `disabled` (boolean) - (Optional) Specifies if this tab is disabled.\n   * - `disabledReason` (string) - (Optional) Displays tooltip near the tab when disabled. Use to provide additional context.\n   * - `dismissible` (boolean) - (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.\n   * - `dismissLabel` (boolean) - (Optional) Specifies an aria-label for the dismiss icon button.\n   * - `dismissDisabled` (boolean) - (Optional) Determines whether the dismiss button is disabled.\n   * - `action` (ReactNode) - (Optional) Action for the tab, rendered next to its corresponding label.\n   *    Although it is technically possible to insert any content, our UX guidelines only allow you to add\n   *    an icon button or icon button dropdown.\n   * - `onDismiss` (ButtonProps['onClick']) - (Optional) Called when a user clicks on the dismiss button.\n   * - `href` (string) - (Optional) You can use this parameter to change the default `href` of the internal tab anchor. The\n   *    `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (that is, CTRL,\n   *    ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,\n   *    if your application routing can handle such deep links. You can manually update routing on the current page\n   *    using the `activeTabHref` property of the `change` event's detail.\n   */\n  tabs: ReadonlyArray<TabsProps.Tab>;\n\n  /**\n   * The possible visual variants of tabs are the following:\n   * * `default` - Use in any context.\n   * * `container` - Use this variant to have the tabs displayed within a container header.\n   * * `stacked` - Use this variant directly adjacent to other stacked containers (such as a container, table).\n   * @visualrefresh `stacked` variant\n   */\n  variant?: TabsProps.Variant;\n\n  /**\n   * Called whenever the user selects a different tab.\n   * The event's `detail` contains the new `activeTabId`.\n   */\n  onChange?: NonCancelableEventHandler<TabsProps.ChangeDetail>;\n\n  /**\n   * The `id` of the currently active tab.\n   * * If you don't set this property, the component activates the first tab and switches tabs automatically when a tab header is clicked (that is, uncontrolled behavior).\n   * * If you explicitly set this property, you must set define an `onChange` handler to update the property when a tab header is clicked (that is, controlled behavior).\n   */\n  activeTabId?: string;\n\n  /**\n   * Provides an `aria-label` to the tab container.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Sets the `aria-labelledby` property on the tab container.\n   * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Determines whether the tab content has padding. If `true`, removes the default padding from the tab content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: TabsProps.I18nStrings;\n  /**\n   * Enabling this property makes the tab content fit to the available height.\n   * If the tab content is too short, it will stretch. If the tab content is too long, a vertical scrollbar will be shown.\n   */\n  fitHeight?: boolean;\n}\nexport namespace TabsProps {\n  export type Variant = 'default' | 'container' | 'stacked';\n\n  export interface Tab {\n    /**\n     * The tab id. This value will be need to be passed to the Tabs component as `activeTabId` to select this tab.\n     */\n    id: string;\n    /**\n     * Tab label shown in the UI.\n     */\n    label: React.ReactNode;\n    /**\n     * Tab content to render in the container.\n     */\n    content?: React.ReactNode;\n    /**\n     * Whether this tab is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Provides a reason why this tab is disabled.\n     */\n    disabledReason?: string;\n    /**\n     * (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.\n     * When a user clicks on this button the onDismiss handler is called.\n     */\n    dismissible?: boolean;\n    /**\n     * (Optional) Specifies an aria-label for the dismiss icon button.\n     */\n    dismissLabel?: string;\n    /**\n     * (Optional) Determines whether the dismiss button is disabled.\n     */\n    dismissDisabled?: boolean;\n    /**\n     * (Optional) Action for the tab, rendered next to its corresponding label.\n     * Although it is technically possible to insert any content, our UX guidelines only allow you to add\n     * an icon button or icon button dropdown.\n     */\n    action?: React.ReactNode;\n    /**\n     * (event => void) Called when a user clicks on the dismiss button.\n     */\n    onDismiss?: ButtonProps['onClick'];\n    /**\n     * You can use this parameter to change the default `href` of the internal tab anchor. The\n     * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (CTRL,\n     * ALT, SHIFT, META). This allows to open new browser tabs with an initially selected component tab,\n     * when the routing can handle such deep links. You can manually update routing on the current page\n     * using the `activeTabHref` property of the `change` event's detail.\n     */\n    href?: string;\n  }\n\n  export interface ChangeDetail {\n    /**\n     * The ID of the clicked tab.\n     */\n    activeTabId: string;\n    /**\n     * The `href` attribute of the clicked tab, if defined.\n     */\n    activeTabHref?: string;\n  }\n\n  export interface I18nStrings {\n    /**\n     * ARIA label for the scroll left button that appears when the tab header is wider than the container.\n     */\n    scrollLeftAriaLabel?: string;\n    /**\n     * ARIA label for the scroll right button that appears when the tab header is wider than the container.\n     */\n    scrollRightAriaLabel?: string;\n    /**\n     * ARIA role description for the Tabs component when an action or dismissible prop is in use. This is used\n     * with role=\"application\" to provide further information on the purpose of this component\n     */\n    tabsWithActionsAriaRoleDescription?: string;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tabs/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ButtonProps } from '../button/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface TabsProps extends BaseComponentProps {\n  /**\n   * Specifies the tabs to display. Each tab object has the following properties:\n   *\n   * - `id` (string) - The tab identifier. This value needs to be passed to the Tabs component as `activeTabId` to select this tab.\n   * - `label` (ReactNode) - Tab label shown in the UI.\n   * - `content` (ReactNode) - (Optional) Tab content to render in the container.\n   * - `disabled` (boolean) - (Optional) Specifies if this tab is disabled.\n   * - `disabledReason` (string) - (Optional) Displays tooltip near the tab when disabled. Use to provide additional context.\n   * - `dismissible` (boolean) - (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.\n   * - `dismissLabel` (boolean) - (Optional) Specifies an aria-label for the dismiss icon button.\n   * - `dismissDisabled` (boolean) - (Optional) Determines whether the dismiss button is disabled.\n   * - `action` (ReactNode) - (Optional) Action for the tab, rendered next to its corresponding label.\n   *    Although it is technically possible to insert any content, our UX guidelines only allow you to add\n   *    an icon button or icon button dropdown.\n   * - `onDismiss` (ButtonProps['onClick']) - (Optional) Called when a user clicks on the dismiss button.\n   * - `href` (string) - (Optional) You can use this parameter to change the default `href` of the internal tab anchor. The\n   *    `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (that is, CTRL,\n   *    ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,\n   *    if your application routing can handle such deep links. You can manually update routing on the current page\n   *    using the `activeTabHref` property of the `change` event's detail.\n   * - `contentRenderStrategy` (string) - (Optional) Determines when tab content is rendered:\n       - `'active'`: (Default) Only render content when the tab is active.\n   *   - `'eager'`: Always render tab content (hidden when the tab is not active).\n   *   - `'lazy'`: Like 'eager', but content is only rendered after the tab is first activated.\n   */\n  tabs: ReadonlyArray<TabsProps.Tab>;\n\n  /**\n   * Actions for the tabs header, displayed next to the list of tabs.\n   * Use this to add a button or button dropdown that performs actions on the\n   * entire tab list. We recommend a maximum of one interactive element to\n   * minimize the number of keyboard tab stops between the tab list and content.\n   */\n  actions?: React.ReactNode;\n\n  /**\n   * The possible visual variants of tabs are the following:\n   * * `default` - Use in any context.\n   * * `container` - Use this variant to have the tabs displayed within a container header.\n   * * `stacked` - Use this variant directly adjacent to other stacked containers (such as a container, table).\n   * @visualrefresh `stacked` variant\n   */\n  variant?: TabsProps.Variant;\n\n  /**\n   * Called whenever the user selects a different tab.\n   * The event's `detail` contains the new `activeTabId`.\n   */\n  onChange?: NonCancelableEventHandler<TabsProps.ChangeDetail>;\n\n  /**\n   * The `id` of the currently active tab.\n   * * If you don't set this property, the component activates the first tab and switches tabs automatically when a tab header is clicked (that is, uncontrolled behavior).\n   * * If you explicitly set this property, you must set define an `onChange` handler to update the property when a tab header is clicked (that is, controlled behavior).\n   */\n  activeTabId?: string;\n\n  /**\n   * Provides an `aria-label` to the tab container.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Sets the `aria-labelledby` property on the tab container.\n   * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Determines whether the tab content has padding. If `true`, removes the default padding from the tab content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: TabsProps.I18nStrings;\n  /**\n   * Enabling this property makes the tab content fit to the available height.\n   * If the tab content is too short, it will stretch. If the tab content is too long, a vertical scrollbar will be shown.\n   */\n  fitHeight?: boolean;\n  /**\n   * Determines how the active tab is switched when navigating using\n   * the keyboard. The options are:\n   * - 'automatic' (default): the active tab is switched using the arrow keys.\n   * - 'manual': a tab must be explicitly activated using the enter/space key.\n   * We recommend using 'automatic' in most situations to provide consistent\n   * and quick switching between tabs. Use 'manual' only if there is a specific\n   * need to introduce friction to the switching of tabs.\n   */\n  keyboardActivationMode?: 'automatic' | 'manual';\n}\nexport namespace TabsProps {\n  export type Variant = 'default' | 'container' | 'stacked';\n\n  export interface Tab {\n    /**\n     * The tab id. This value will be need to be passed to the Tabs component as `activeTabId` to select this tab.\n     */\n    id: string;\n    /**\n     * Tab label shown in the UI.\n     */\n    label: React.ReactNode;\n    /**\n     * Tab content to render in the container.\n     */\n    content?: React.ReactNode;\n    /**\n     * Whether this tab is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Provides a reason why this tab is disabled.\n     */\n    disabledReason?: string;\n    /**\n     * (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.\n     * When a user clicks on this button the onDismiss handler is called.\n     */\n    dismissible?: boolean;\n    /**\n     * (Optional) Specifies an aria-label for the dismiss icon button.\n     */\n    dismissLabel?: string;\n    /**\n     * (Optional) Determines whether the dismiss button is disabled.\n     */\n    dismissDisabled?: boolean;\n    /**\n     * (Optional) Action for the tab, rendered next to its corresponding label.\n     * Although it is technically possible to insert any content, our UX guidelines only allow you to add\n     * an icon button or icon button dropdown.\n     */\n    action?: React.ReactNode;\n    /**\n     * (event => void) Called when a user clicks on the dismiss button.\n     */\n    onDismiss?: ButtonProps['onClick'];\n    /**\n     * You can use this parameter to change the default `href` of the internal tab anchor. The\n     * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (CTRL,\n     * ALT, SHIFT, META). This allows to open new browser tabs with an initially selected component tab,\n     * when the routing can handle such deep links. You can manually update routing on the current page\n     * using the `activeTabHref` property of the `change` event's detail.\n     */\n    href?: string;\n    /**\n     * Determines when tab content is rendered:\n     * - 'active' (default): Only render content when the tab is active.\n     * - 'eager': Always render tab content (hidden when the tab is not active).\n     * - 'lazy': Like 'eager', but content is only rendered after the tab is first activated.\n     */\n    contentRenderStrategy?: 'active' | 'eager' | 'lazy';\n  }\n\n  export interface ChangeDetail {\n    /**\n     * The ID of the clicked tab.\n     */\n    activeTabId: string;\n    /**\n     * The `href` attribute of the clicked tab, if defined.\n     */\n    activeTabHref?: string;\n  }\n\n  export interface I18nStrings {\n    /**\n     * ARIA label for the scroll left button that appears when the tab header is wider than the container.\n     */\n    scrollLeftAriaLabel?: string;\n    /**\n     * ARIA label for the scroll right button that appears when the tab header is wider than the container.\n     */\n    scrollRightAriaLabel?: string;\n    /**\n     * ARIA role description for the Tabs component when an action or dismissible prop is in use. This is used\n     * with role=\"application\" to provide further information on the purpose of this component\n     */\n    tabsWithActionsAriaRoleDescription?: string;\n  }\n}\n"]}