@cloudscape-design/components-themeable 3.0.1092 → 3.0.1093

package/lib/internal/template/internal/components/selectable-item/styles.scoped.css

@@ -142,7 +142,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_selectable-item_15o6u_178gi_145:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145:not(#\9) {
   font-size: var(--font-size-body-m-vv54cm, 14px);
   line-height: var(--line-height-body-m-bedeoh, 22px);
   color: var(--color-text-body-default-5qid0u, #16191f);
@@ -164,17 +164,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block: calc(var(--space-xxs-jnczic, 4px) + var(--border-item-width-acvlhx, 1px) - var(--border-divider-list-width-8ggz94, 1px));
   padding-inline: calc(var(--space-field-horizontal-n5peob, 8px) + var(--border-item-width-acvlhx, 1px));
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_pad-bottom_15o6u_178gi_167:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_pad-bottom_15o6u_k1eqb_167:not(#\9) {
   padding-block-end: calc(calc(var(--space-xxs-jnczic, 4px) + var(--border-item-width-acvlhx, 1px) - var(--border-divider-list-width-8ggz94, 1px)) + var(--space-xxxs-3w1kr2, 2px));
   border-block-end-color: transparent;
 }
-.awsui_selectable-item_15o6u_178gi_145:not(#\9):not(:first-child), .awsui_selectable-item_15o6u_178gi_145.awsui_virtual_15o6u_178gi_171:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145:not(#\9):not(:first-child), .awsui_selectable-item_15o6u_k1eqb_145.awsui_virtual_15o6u_k1eqb_171:not(#\9) {
   margin-block-start: calc(-1 * var(--border-item-width-acvlhx, 1px));
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_has-background_15o6u_178gi_174:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_has-background_15o6u_k1eqb_174:not(#\9) {
   background-color: var(--color-background-dropdown-item-hover-353r6f, #f2f3f3);
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_highlighted_15o6u_178gi_177:not(#\9), .awsui_selectable-item_15o6u_178gi_145.awsui_selected_15o6u_178gi_177:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_highlighted_15o6u_k1eqb_177:not(#\9), .awsui_selectable-item_15o6u_k1eqb_145.awsui_selected_15o6u_k1eqb_177:not(#\9) {
   color: var(--color-text-dropdown-item-highlighted-bchk26, #16191f);
   border-width: var(--border-item-width-acvlhx, 1px);
   border-start-start-radius: var(--border-radius-item-xggxkd, 0px);
@@ -184,135 +184,135 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block: var(--space-xxs-jnczic, 4px);
   padding-inline: var(--space-field-horizontal-n5peob, 8px);
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_highlighted_15o6u_178gi_177.awsui_pad-bottom_15o6u_178gi_167:not(#\9), .awsui_selectable-item_15o6u_178gi_145.awsui_selected_15o6u_178gi_177.awsui_pad-bottom_15o6u_178gi_167:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_highlighted_15o6u_k1eqb_177.awsui_pad-bottom_15o6u_k1eqb_167:not(#\9), .awsui_selectable-item_15o6u_k1eqb_145.awsui_selected_15o6u_k1eqb_177.awsui_pad-bottom_15o6u_k1eqb_167:not(#\9) {
   padding-block-end: calc(var(--space-xxs-jnczic, 4px) + var(--space-xxxs-3w1kr2, 2px));
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_highlighted_15o6u_178gi_177:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_highlighted_15o6u_k1eqb_177:not(#\9) {
   z-index: 3;
   background-color: var(--color-background-dropdown-item-hover-353r6f, #f2f3f3);
   border-color: var(--color-border-dropdown-item-hover-vony6u, #879596);
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_highlighted_15o6u_178gi_177.awsui_disabled_15o6u_178gi_195:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_highlighted_15o6u_k1eqb_177.awsui_disabled_15o6u_k1eqb_195:not(#\9) {
   color: var(--color-text-dropdown-item-dimmed-0xf8v3, #aab7b8);
   border-color: var(--color-border-dropdown-item-dimmed-hover-twsd8z, #879596);
   background-color: var(--color-background-dropdown-item-dimmed-2hwvu9, transparent);
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_highlighted_15o6u_178gi_177.awsui_is-keyboard_15o6u_178gi_200:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_highlighted_15o6u_k1eqb_177.awsui_is-keyboard_15o6u_k1eqb_200:not(#\9) {
   border-color: var(--color-border-dropdown-item-focused-xty1zx, #0073bb);
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_highlighted_15o6u_178gi_177.awsui_is-keyboard_15o6u_178gi_200:not(#\9):not(.awsui_visual-refresh_15o6u_178gi_203) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_highlighted_15o6u_k1eqb_177.awsui_is-keyboard_15o6u_k1eqb_200:not(#\9):not(.awsui_visual-refresh_15o6u_k1eqb_203) {
   box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-ql2vj7, 1px) var(--color-border-item-focused-r5f6xl, #0073bb);
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_selected_15o6u_178gi_177:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_selected_15o6u_k1eqb_177:not(#\9) {
   z-index: 2;
   background-color: var(--color-background-dropdown-item-selected-1c9k0x, #f1faff);
   border-color: var(--color-border-dropdown-item-selected-88v7h2, #eaeded);
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_selected_15o6u_178gi_177.awsui_next-item-selected_15o6u_178gi_211:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_selected_15o6u_k1eqb_177.awsui_next-item-selected_15o6u_k1eqb_211:not(#\9) {
   border-end-start-radius: 0;
   border-end-end-radius: 0;
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_selected_15o6u_178gi_177.awsui_highlighted_15o6u_178gi_177:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_selected_15o6u_k1eqb_177.awsui_highlighted_15o6u_k1eqb_177:not(#\9) {
   border-color: var(--color-border-dropdown-item-selected-88v7h2, #eaeded);
   z-index: 3;
   outline: var(--border-item-width-acvlhx, 1px) solid var(--color-border-dropdown-item-hover-vony6u, #879596);
   outline-offset: calc(-2 * var(--border-item-width-acvlhx, 1px));
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_selected_15o6u_178gi_177.awsui_highlighted_15o6u_178gi_177.awsui_is-keyboard_15o6u_178gi_200:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_selected_15o6u_k1eqb_177.awsui_highlighted_15o6u_k1eqb_177.awsui_is-keyboard_15o6u_k1eqb_200:not(#\9) {
   border-color: var(--color-border-dropdown-item-selected-88v7h2, #eaeded);
   outline-color: var(--color-border-dropdown-item-focused-xty1zx, #0073bb);
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_selected_15o6u_178gi_177.awsui_highlighted_15o6u_178gi_177:not(#\9):not(.awsui_visual-refresh_15o6u_178gi_203) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_selected_15o6u_k1eqb_177.awsui_highlighted_15o6u_k1eqb_177:not(#\9):not(.awsui_visual-refresh_15o6u_k1eqb_203) {
   border-color: var(--color-border-dropdown-item-hover-vony6u, #879596);
   outline: none;
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_selected_15o6u_178gi_177.awsui_highlighted_15o6u_178gi_177:not(#\9):not(.awsui_visual-refresh_15o6u_178gi_203).awsui_is-keyboard_15o6u_178gi_200 {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_selected_15o6u_k1eqb_177.awsui_highlighted_15o6u_k1eqb_177:not(#\9):not(.awsui_visual-refresh_15o6u_k1eqb_203).awsui_is-keyboard_15o6u_k1eqb_200 {
   border-color: var(--color-border-dropdown-item-focused-xty1zx, #0073bb);
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_selected_15o6u_178gi_177 + .awsui_selectable-item_15o6u_178gi_145.awsui_selected_15o6u_178gi_177:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_selected_15o6u_k1eqb_177 + .awsui_selectable-item_15o6u_k1eqb_145.awsui_selected_15o6u_k1eqb_177:not(#\9), .awsui_selectable-item_15o6u_k1eqb_145.awsui_selected_15o6u_k1eqb_177.awsui_previous-item-selected_15o6u_k1eqb_232:not(#\9) {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_parent_15o6u_178gi_236:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_parent_15o6u_k1eqb_236:not(#\9) {
   font-weight: bold;
   color: var(--color-text-dropdown-group-label-7pa4nd, #545b64);
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_parent_15o6u_178gi_236:not(#\9):not(.awsui_interactiveGroups_15o6u_178gi_240) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_parent_15o6u_k1eqb_236:not(#\9):not(.awsui_interactiveGroups_15o6u_k1eqb_240) {
   border-block-start-color: var(--color-border-dropdown-group-dg9zg5, #eaeded);
   padding-block: var(--space-xs-kw7k3v, 8px);
   padding-inline: var(--space-xs-kw7k3v, 8px);
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_parent_15o6u_178gi_236.awsui_interactiveGroups_15o6u_178gi_240:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_parent_15o6u_k1eqb_236.awsui_interactiveGroups_15o6u_k1eqb_240:not(#\9) {
   padding-block: calc(var(--space-xs-kw7k3v, 8px) + var(--border-item-width-acvlhx, 1px) - var(--border-divider-list-width-8ggz94, 1px));
   padding-inline: calc(var(--space-field-horizontal-n5peob, 8px) + var(--border-item-width-acvlhx, 1px));
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_parent_15o6u_178gi_236.awsui_interactiveGroups_15o6u_178gi_240.awsui_highlighted_15o6u_178gi_177:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_parent_15o6u_k1eqb_236.awsui_interactiveGroups_15o6u_k1eqb_240.awsui_highlighted_15o6u_k1eqb_177:not(#\9) {
   color: var(--color-text-dropdown-item-highlighted-bchk26, #16191f);
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_parent_15o6u_178gi_236.awsui_interactiveGroups_15o6u_178gi_240.awsui_highlighted_15o6u_178gi_177:not(#\9), .awsui_selectable-item_15o6u_178gi_145.awsui_parent_15o6u_178gi_236.awsui_interactiveGroups_15o6u_178gi_240.awsui_selected_15o6u_178gi_177:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_parent_15o6u_k1eqb_236.awsui_interactiveGroups_15o6u_k1eqb_240.awsui_highlighted_15o6u_k1eqb_177:not(#\9), .awsui_selectable-item_15o6u_k1eqb_145.awsui_parent_15o6u_k1eqb_236.awsui_interactiveGroups_15o6u_k1eqb_240.awsui_selected_15o6u_k1eqb_177:not(#\9) {
   padding-block: var(--space-xs-kw7k3v, 8px);
   padding-inline: var(--space-field-horizontal-n5peob, 8px);
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_child_15o6u_178gi_256:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_child_15o6u_k1eqb_256:not(#\9) {
   padding-inline-start: calc(var(--space-xxl-q0lyvp, 32px) + var(--border-item-width-acvlhx, 1px));
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_child_15o6u_178gi_256.awsui_highlighted_15o6u_178gi_177:not(#\9), .awsui_selectable-item_15o6u_178gi_145.awsui_child_15o6u_178gi_256.awsui_selected_15o6u_178gi_177:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_child_15o6u_k1eqb_256.awsui_highlighted_15o6u_k1eqb_177:not(#\9), .awsui_selectable-item_15o6u_k1eqb_145.awsui_child_15o6u_k1eqb_256.awsui_selected_15o6u_k1eqb_177:not(#\9) {
   padding-inline-start: var(--space-xxl-q0lyvp, 32px);
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_sticky_15o6u_178gi_262:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_sticky_15o6u_k1eqb_262:not(#\9) {
   position: sticky;
   inset-block-start: 0;
   margin-block-end: calc(var(--border-item-width-acvlhx, 1px) - var(--border-divider-list-width-8ggz94, 1px));
   z-index: 4;
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_sticky_15o6u_178gi_262:not(#\9):not(.awsui_highlighted_15o6u_178gi_177):not(.awsui_selected_15o6u_178gi_177) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_sticky_15o6u_k1eqb_262:not(#\9):not(.awsui_highlighted_15o6u_k1eqb_177):not(.awsui_selected_15o6u_k1eqb_177) {
   border-inline-start-width: var(--border-item-width-acvlhx, 1px);
   border-inline-start-color: var(--color-border-dropdown-container-w99bbi, transparent);
   border-inline-end-color: var(--color-border-dropdown-container-w99bbi, transparent);
   padding-inline: var(--space-field-horizontal-n5peob, 8px);
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_sticky_15o6u_178gi_262:not(#\9):not(.awsui_highlighted_15o6u_178gi_177):not(.awsui_selected_15o6u_178gi_177):not(.awsui_with-scrollbar_15o6u_178gi_274) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_sticky_15o6u_k1eqb_262:not(#\9):not(.awsui_highlighted_15o6u_k1eqb_177):not(.awsui_selected_15o6u_k1eqb_177):not(.awsui_with-scrollbar_15o6u_k1eqb_274) {
   border-inline-end-width: var(--border-item-width-acvlhx, 1px);
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_sticky_15o6u_178gi_262:not(#\9):not(.awsui_highlighted_15o6u_178gi_177):not(.awsui_selected_15o6u_178gi_177).awsui_with-scrollbar_15o6u_178gi_274 {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_sticky_15o6u_k1eqb_262:not(#\9):not(.awsui_highlighted_15o6u_k1eqb_177):not(.awsui_selected_15o6u_k1eqb_177).awsui_with-scrollbar_15o6u_k1eqb_274 {
   border-inline-end-width: 0;
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_sticky_15o6u_178gi_262:not(#\9):not(.awsui_highlighted_15o6u_178gi_177):not(.awsui_selected_15o6u_178gi_177):not(.awsui_after-header_15o6u_178gi_280) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_sticky_15o6u_k1eqb_262:not(#\9):not(.awsui_highlighted_15o6u_k1eqb_177):not(.awsui_selected_15o6u_k1eqb_177):not(.awsui_after-header_15o6u_k1eqb_280) {
   border-start-start-radius: var(--border-radius-item-xggxkd, 0px);
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_sticky_15o6u_178gi_262:not(#\9):not(.awsui_highlighted_15o6u_178gi_177):not(.awsui_selected_15o6u_178gi_177):not(.awsui_after-header_15o6u_178gi_280):not(.awsui_selectable-item_15o6u_178gi_145.awsui_sticky_15o6u_178gi_262:not(.awsui_highlighted_15o6u_178gi_177):not(.awsui_selected_15o6u_178gi_177):not(.awsui_after-header_15o6u_178gi_280).awsui_with-scrollbar_15o6u_178gi_274) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_sticky_15o6u_k1eqb_262:not(#\9):not(.awsui_highlighted_15o6u_k1eqb_177):not(.awsui_selected_15o6u_k1eqb_177):not(.awsui_after-header_15o6u_k1eqb_280):not(.awsui_selectable-item_15o6u_k1eqb_145.awsui_sticky_15o6u_k1eqb_262:not(.awsui_highlighted_15o6u_k1eqb_177):not(.awsui_selected_15o6u_k1eqb_177):not(.awsui_after-header_15o6u_k1eqb_280).awsui_with-scrollbar_15o6u_k1eqb_274) {
   border-start-end-radius: var(--border-radius-item-xggxkd, 0px);
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_sticky_15o6u_178gi_262:not(#\9):not(.awsui_highlighted_15o6u_178gi_177):not(.awsui_selected_15o6u_178gi_177).awsui_after-header_15o6u_178gi_280 {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_sticky_15o6u_k1eqb_262:not(#\9):not(.awsui_highlighted_15o6u_k1eqb_177):not(.awsui_selected_15o6u_k1eqb_177).awsui_after-header_15o6u_k1eqb_280 {
   border-block-start-color: var(--color-background-dropdown-item-default-fhmksr, #ffffff);
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_sticky_15o6u_178gi_262.awsui_disabled_15o6u_178gi_195.awsui_highlighted_15o6u_178gi_177:not(#\9), .awsui_selectable-item_15o6u_178gi_145.awsui_sticky_15o6u_178gi_262.awsui_disabled_15o6u_178gi_195.awsui_selected_15o6u_178gi_177:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_sticky_15o6u_k1eqb_262.awsui_disabled_15o6u_k1eqb_195.awsui_highlighted_15o6u_k1eqb_177:not(#\9), .awsui_selectable-item_15o6u_k1eqb_145.awsui_sticky_15o6u_k1eqb_262.awsui_disabled_15o6u_k1eqb_195.awsui_selected_15o6u_k1eqb_177:not(#\9) {
   border-block-end-color: transparent;
   border-block-start-color: transparent;
   border-inline-start-color: transparent;
   border-inline-end-color: transparent;
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_disabled_15o6u_178gi_195:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_disabled_15o6u_k1eqb_195:not(#\9) {
   color: var(--color-text-dropdown-item-disabled-oysy8n, #aab7b8);
 }
-.awsui_selectable-item_15o6u_178gi_145:not(#\9):not(.awsui_disabled_15o6u_178gi_195):not(.awsui_parent_15o6u_178gi_236) {
+.awsui_selectable-item_15o6u_k1eqb_145:not(#\9):not(.awsui_disabled_15o6u_k1eqb_195):not(.awsui_parent_15o6u_k1eqb_236) {
   cursor: pointer;
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_interactiveGroups_15o6u_178gi_240:not(#\9):not(.awsui_disabled_15o6u_178gi_195) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_interactiveGroups_15o6u_k1eqb_240:not(#\9):not(.awsui_disabled_15o6u_k1eqb_195) {
   cursor: pointer;
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_virtual_15o6u_178gi_171:not(#\9) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_virtual_15o6u_k1eqb_171:not(#\9) {
   position: absolute;
   inset-block-start: var(--border-dropdown-virtual-offset-width-1fzwg5, 0px);
   inset-inline-start: 0;
   inline-size: 100%;
   box-sizing: border-box;
 }
-.awsui_selectable-item_15o6u_178gi_145.awsui_virtual_15o6u_178gi_171:not(#\9):first-of-type:not(.awsui_selected_15o6u_178gi_177, .awsui_highlighted_15o6u_178gi_177) {
+.awsui_selectable-item_15o6u_k1eqb_145.awsui_virtual_15o6u_k1eqb_171:not(#\9):first-of-type:not(.awsui_selected_15o6u_k1eqb_177, .awsui_highlighted_15o6u_k1eqb_177) {
   border-block-start-color: var(--color-border-dropdown-item-top-znzfoj, #eaeded);
 }
 
-.awsui_measure-strut_15o6u_178gi_315:not(#\9) {
+.awsui_measure-strut_15o6u_k1eqb_315:not(#\9) {
   position: absolute;
   pointer-events: none;
   block-size: 100%;
@@ -321,20 +321,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-inline-start: 0;
   padding-block-start: var(--border-divider-list-width-8ggz94, 1px);
 }
-.awsui_measure-strut-first_15o6u_178gi_324:not(#\9) {
+.awsui_measure-strut-first_15o6u_k1eqb_324:not(#\9) {
   padding-block-end: var(--border-divider-list-width-8ggz94, 1px);
 }
 
-.awsui_screenreader-content_15o6u_178gi_328:not(#\9) {
+.awsui_screenreader-content_15o6u_k1eqb_328:not(#\9) {
   position: absolute !important;
   inset-block-start: -9999px !important;
   inset-inline-start: -9999px !important;
 }
 
-.awsui_option-content_15o6u_178gi_334:not(#\9) {
+.awsui_option-content_15o6u_k1eqb_334:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_select-all_15o6u_178gi_338:not(#\9) {
+.awsui_select-all_15o6u_k1eqb_338:not(#\9) {
   /* used in test-utils */
 }

package/lib/internal/template/internal/components/selectable-item/styles.selectors.js

@@ -2,26 +2,27 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "selectable-item": "awsui_selectable-item_15o6u_178gi_145",
-  "pad-bottom": "awsui_pad-bottom_15o6u_178gi_167",
-  "virtual": "awsui_virtual_15o6u_178gi_171",
-  "has-background": "awsui_has-background_15o6u_178gi_174",
-  "highlighted": "awsui_highlighted_15o6u_178gi_177",
-  "selected": "awsui_selected_15o6u_178gi_177",
-  "disabled": "awsui_disabled_15o6u_178gi_195",
-  "is-keyboard": "awsui_is-keyboard_15o6u_178gi_200",
-  "visual-refresh": "awsui_visual-refresh_15o6u_178gi_203",
-  "next-item-selected": "awsui_next-item-selected_15o6u_178gi_211",
-  "parent": "awsui_parent_15o6u_178gi_236",
-  "interactiveGroups": "awsui_interactiveGroups_15o6u_178gi_240",
-  "child": "awsui_child_15o6u_178gi_256",
-  "sticky": "awsui_sticky_15o6u_178gi_262",
-  "with-scrollbar": "awsui_with-scrollbar_15o6u_178gi_274",
-  "after-header": "awsui_after-header_15o6u_178gi_280",
-  "measure-strut": "awsui_measure-strut_15o6u_178gi_315",
-  "measure-strut-first": "awsui_measure-strut-first_15o6u_178gi_324",
-  "screenreader-content": "awsui_screenreader-content_15o6u_178gi_328",
-  "option-content": "awsui_option-content_15o6u_178gi_334",
-  "select-all": "awsui_select-all_15o6u_178gi_338"
+  "selectable-item": "awsui_selectable-item_15o6u_k1eqb_145",
+  "pad-bottom": "awsui_pad-bottom_15o6u_k1eqb_167",
+  "virtual": "awsui_virtual_15o6u_k1eqb_171",
+  "has-background": "awsui_has-background_15o6u_k1eqb_174",
+  "highlighted": "awsui_highlighted_15o6u_k1eqb_177",
+  "selected": "awsui_selected_15o6u_k1eqb_177",
+  "disabled": "awsui_disabled_15o6u_k1eqb_195",
+  "is-keyboard": "awsui_is-keyboard_15o6u_k1eqb_200",
+  "visual-refresh": "awsui_visual-refresh_15o6u_k1eqb_203",
+  "next-item-selected": "awsui_next-item-selected_15o6u_k1eqb_211",
+  "previous-item-selected": "awsui_previous-item-selected_15o6u_k1eqb_232",
+  "parent": "awsui_parent_15o6u_k1eqb_236",
+  "interactiveGroups": "awsui_interactiveGroups_15o6u_k1eqb_240",
+  "child": "awsui_child_15o6u_k1eqb_256",
+  "sticky": "awsui_sticky_15o6u_k1eqb_262",
+  "with-scrollbar": "awsui_with-scrollbar_15o6u_k1eqb_274",
+  "after-header": "awsui_after-header_15o6u_k1eqb_280",
+  "measure-strut": "awsui_measure-strut_15o6u_k1eqb_315",
+  "measure-strut-first": "awsui_measure-strut-first_15o6u_k1eqb_324",
+  "screenreader-content": "awsui_screenreader-content_15o6u_k1eqb_328",
+  "option-content": "awsui_option-content_15o6u_k1eqb_334",
+  "select-all": "awsui_select-all_15o6u_k1eqb_338"
 };
   

package/lib/internal/template/internal/environment.js

@@ -1,6 +1,6 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (52c36f0c)";
-export var GIT_SHA = "52c36f0c";
+export var PACKAGE_VERSION = "3.0.0 (9f816a3e)";
+export var GIT_SHA = "9f816a3e";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "console";
 export var ALWAYS_VISUAL_REFRESH = true;

package/lib/internal/template/internal/environment.json

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (52c36f0c)",
-  "GIT_SHA": "52c36f0c",
+  "PACKAGE_VERSION": "3.0.0 (9f816a3e)",
+  "GIT_SHA": "9f816a3e",
   "THEME": "default",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": false

package/lib/internal/template/multiselect/use-multiselect.d.ts

@@ -45,10 +45,11 @@ export declare function useMultiselect({ options, filteringType, filteringResult
         onMouseUp?: ((itemIndex: number) => void) | undefined;
         nativeAttributes?: Record<string, any> | undefined;
         ariaLabel?: string | undefined;
+        tagOverride?: "div" | "ul" | undefined;
         statusType: DropdownStatusProps.StatusType;
         decreaseBlockMargin?: boolean | undefined;
         stickyItemBlockSize?: number | null | undefined;
-        ref: React.RefObject<HTMLUListElement>;
+        ref: React.RefObject<HTMLDivElement>;
     };
     getOptionProps: (option: DropdownOption, index: number) => any;
     getTokenProps: () => {

package/lib/internal/template/multiselect/use-multiselect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-multiselect.d.ts","sourceRoot":"","sources":["../../../src/multiselect/use-multiselect.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAE,mBAAmB,EAAqB,MAAM,wCAAwC,CAAC;AAChG,OAAO,EAAE,cAAc,EAAiC,MAAM,0CAA0C,CAAC;AAIzG,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAO7D,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD,KAAK,qBAAqB,GAAG,YAAY,CACvC,IAAI,CACF,gBAAgB,EACd,SAAS,GACT,iBAAiB,GACjB,eAAe,GACf,sBAAsB,GACtB,UAAU,GACV,SAAS,GACT,2BAA2B,GAC3B,mBAAmB,GACnB,UAAU,GACV,QAAQ,GACR,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,iBAAiB,GACjB,aAAa,CAChB,GACC,mBAAmB,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;CAC9C,EACH,SAAS,GAAG,iBAAiB,GAAG,eAAe,GAAG,YAAY,GAAG,UAAU,CAC5E,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE3B,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,aAAa,EACb,oBAAoB,EACpB,QAAQ,EACR,UAAU,EACV,KAAK,EACL,WAAW,EACX,YAAY,EACZ,SAAS,EACT,OAAO,EACP,yBAAyB,EACzB,eAAe,EACf,iBAAiB,EACjB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,WAAW,EACX,QAAQ,EACR,SAAS,EACT,WAAW,EACX,QAAQ,EACR,cAAc,EACd,iBAAiB,EACjB,WAAW,EACX,QAAQ,EACR,eAAe,EACf,WAAW,EACX,GAAG,SAAS,EACb,EAAE,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BAuLc,gBAAgB;;;;;;;;;;EA0CrD"}
+{"version":3,"file":"use-multiselect.d.ts","sourceRoot":"","sources":["../../../src/multiselect/use-multiselect.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAE,mBAAmB,EAAqB,MAAM,wCAAwC,CAAC;AAChG,OAAO,EAAE,cAAc,EAAiC,MAAM,0CAA0C,CAAC;AAIzG,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAO7D,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD,KAAK,qBAAqB,GAAG,YAAY,CACvC,IAAI,CACF,gBAAgB,EACd,SAAS,GACT,iBAAiB,GACjB,eAAe,GACf,sBAAsB,GACtB,UAAU,GACV,SAAS,GACT,2BAA2B,GAC3B,mBAAmB,GACnB,UAAU,GACV,QAAQ,GACR,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,iBAAiB,GACjB,aAAa,CAChB,GACC,mBAAmB,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;CAC9C,EACH,SAAS,GAAG,iBAAiB,GAAG,eAAe,GAAG,YAAY,GAAG,UAAU,CAC5E,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE3B,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,aAAa,EACb,oBAAoB,EACpB,QAAQ,EACR,UAAU,EACV,KAAK,EACL,WAAW,EACX,YAAY,EACZ,SAAS,EACT,OAAO,EACP,yBAAyB,EACzB,eAAe,EACf,iBAAiB,EACjB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,WAAW,EACX,QAAQ,EACR,SAAS,EACT,WAAW,EACX,QAAQ,EACR,cAAc,EACd,iBAAiB,EACjB,WAAW,EACX,QAAQ,EACR,eAAe,EACf,WAAW,EACX,GAAG,SAAS,EACb,EAAE,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BAuLc,gBAAgB;;;;;;;;;;EA0CrD"}

package/lib/internal/template/navigable-group/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { NavigableGroupProps } from './interfaces';
+export { NavigableGroupProps };
+/**
+ * @awsuiSystem core
+ */
+declare const NavigableGroup: React.ForwardRefExoticComponent<NavigableGroupProps & React.RefAttributes<NavigableGroupProps.Ref>>;
+export default NavigableGroup;
+//# sourceMappingURL=index.d.ts.map

package/lib/internal/template/navigable-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/navigable-group/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGnD,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B;;GAEG;AACH,QAAA,MAAM,cAAc,qGAMlB,CAAC;AAGH,eAAe,cAAc,CAAC"}

package/lib/internal/template/navigable-group/index.js

@@ -0,0 +1,23 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+'use client';
+import { __rest } from "tslib";
+import React from 'react';
+import { getBaseProps } from '../internal/base-component';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import { getExternalProps } from '../internal/utils/external-props';
+import InternalNavigableGroup from './internal';
+/**
+ * @awsuiSystem core
+ */
+const NavigableGroup = React.forwardRef((_a, ref) => {
+    var rest = __rest(_a, []);
+    const baseProps = getBaseProps(rest);
+    const baseComponentProps = useBaseComponent('NavigableGroup');
+    const externalProps = getExternalProps(rest);
+    return React.createElement(InternalNavigableGroup, Object.assign({}, baseProps, baseComponentProps, externalProps, { ref: ref }));
+});
+applyDisplayName(NavigableGroup, 'NavigableGroup');
+export default NavigableGroup;
+//# sourceMappingURL=index.js.map

package/lib/internal/template/navigable-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/navigable-group/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,sBAAsB,MAAM,YAAY,CAAC;AAIhD;;GAEG;AACH,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAgC,EAAE,GAAuC,EAAE,EAAE;QAAxE,IAAI,cAAT,EAAW,CAAF;IAChD,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC9D,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAE7C,OAAO,oBAAC,sBAAsB,oBAAK,SAAS,EAAM,kBAAkB,EAAM,aAAa,IAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AACxG,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AACnD,eAAe,cAAc,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { NavigableGroupProps } from './interfaces';\nimport InternalNavigableGroup from './internal';\n\nexport { NavigableGroupProps };\n\n/**\n * @awsuiSystem core\n */\nconst NavigableGroup = React.forwardRef(({ ...rest }: NavigableGroupProps, ref: React.Ref<NavigableGroupProps.Ref>) => {\n  const baseProps = getBaseProps(rest);\n  const baseComponentProps = useBaseComponent('NavigableGroup');\n  const externalProps = getExternalProps(rest);\n\n  return <InternalNavigableGroup {...baseProps} {...baseComponentProps} {...externalProps} ref={ref} />;\n});\n\napplyDisplayName(NavigableGroup, 'NavigableGroup');\nexport default NavigableGroup;\n"]}

package/lib/internal/template/navigable-group/interfaces.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { BaseComponentProps } from '../internal/base-component';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+export interface NavigableGroupProps extends BaseComponentProps {
+    /**
+     * The children that will be rendered inside the navigation group.
+     *
+     * The following Cloudscape components are supported, but do not
+     * need to be direct children of the group:
+     * - Button
+     * - Button dropdown
+     * - Toggle button
+     * - Link
+     */
+    children: React.ReactNode;
+    /**
+     * A method that should return a unique identifier for a given element.
+     * The element passed will be the first focusable descendent of a child component.
+     */
+    getItemKey: (element: HTMLElement) => string;
+    /**
+     * Determines which arrow keys move focus sequentially within the group:
+     * - `horizontal` - left and right arrow keys
+     * - `vertical` - up and down arrow keys
+     * - `both` - all arrow keys
+     */
+    navigationDirection?: 'horizontal' | 'vertical' | 'both';
+}
+export interface InternalNavigableGroupProps extends NavigableGroupProps, InternalBaseComponentProps {
+}
+export declare namespace NavigableGroupProps {
+    interface Ref {
+        /**
+         * Focuses the first focusable element (or previously focused element) in the navigation group.
+         */
+        focus(): void;
+    }
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/navigable-group/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/navigable-group/interfaces.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D;;;;;;;;;OASG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,MAAM,CAAC;IAC7C;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;CAC1D;AAED,MAAM,WAAW,2BAA4B,SAAQ,mBAAmB,EAAE,0BAA0B;CAAG;AAEvG,yBAAiB,mBAAmB,CAAC;IACnC,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}

package/lib/internal/template/navigable-group/interfaces.js

@@ -0,0 +1,4 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export {};
+//# sourceMappingURL=interfaces.js.map

package/lib/internal/template/navigable-group/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/navigable-group/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface NavigableGroupProps extends BaseComponentProps {\n  /**\n   * The children that will be rendered inside the navigation group.\n   *\n   * The following Cloudscape components are supported, but do not\n   * need to be direct children of the group:\n   * - Button\n   * - Button dropdown\n   * - Toggle button\n   * - Link\n   */\n  children: React.ReactNode;\n  /**\n   * A method that should return a unique identifier for a given element.\n   * The element passed will be the first focusable descendent of a child component.\n   */\n  getItemKey: (element: HTMLElement) => string;\n  /**\n   * Determines which arrow keys move focus sequentially within the group:\n   * - `horizontal` - left and right arrow keys\n   * - `vertical` - up and down arrow keys\n   * - `both` - all arrow keys\n   */\n  navigationDirection?: 'horizontal' | 'vertical' | 'both';\n}\n\nexport interface InternalNavigableGroupProps extends NavigableGroupProps, InternalBaseComponentProps {}\n\nexport namespace NavigableGroupProps {\n  export interface Ref {\n    /**\n     * Focuses the first focusable element (or previously focused element) in the navigation group.\n     */\n    focus(): void;\n  }\n}\n"]}

package/lib/internal/template/navigable-group/internal.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { InternalNavigableGroupProps, NavigableGroupProps } from './interfaces';
+declare const InternalNavigableGroup: React.ForwardRefExoticComponent<InternalNavigableGroupProps & React.RefAttributes<NavigableGroupProps.Ref>>;
+export default InternalNavigableGroup;
+//# sourceMappingURL=internal.d.ts.map

package/lib/internal/template/navigable-group/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/navigable-group/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAelF,OAAO,EAAE,2BAA2B,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAKhF,QAAA,MAAM,sBAAsB,6GA+I3B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/lib/internal/template/navigable-group/internal.js

@@ -0,0 +1,125 @@
+import { __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import clsx from 'clsx';
+import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
+import { SingleTabStopNavigationProvider, } from '@cloudscape-design/component-toolkit/internal';
+import { getBaseProps } from '../internal/base-component';
+import { getAllFocusables } from '../internal/components/focus-lock/utils';
+import { hasModifierKeys } from '../internal/events';
+import { KeyCode } from '../internal/keycode';
+import { circleIndex } from '../internal/utils/circle-index';
+import handleKey from '../internal/utils/handle-key';
+import styles from './styles.css.js';
+import testUtilStyles from './test-classes/styles.css.js';
+const InternalNavigableGroup = forwardRef((_a, ref) => {
+    var { children, getItemKey, navigationDirection = 'horizontal', __internalRootRef } = _a, props = __rest(_a, ["children", "getItemKey", "navigationDirection", "__internalRootRef"]);
+    const baseProps = getBaseProps(props);
+    const navigationAPI = useRef(null);
+    const containerObjectRef = useRef(null);
+    const containerRef = useMergeRefs(containerObjectRef, __internalRootRef);
+    const focusedIdRef = useRef();
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            const target = getNextFocusTarget();
+            if (target) {
+                target.focus();
+            }
+        },
+    }));
+    function getNextFocusTarget() {
+        var _a, _b;
+        if (containerObjectRef.current) {
+            const focusables = getFocusablesFrom(containerObjectRef.current);
+            return (_b = (_a = focusables.find(el => getItemKey(el) === focusedIdRef.current)) !== null && _a !== void 0 ? _a : focusables[0]) !== null && _b !== void 0 ? _b : null;
+        }
+        return null;
+    }
+    function onUnregisterActive(focusableElement) {
+        var _a;
+        // Only refocus when the node is actually removed (no such element anymore).
+        const target = (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.getFocusTarget();
+        if (target && getItemKey(target) !== getItemKey(focusableElement)) {
+            target.focus();
+        }
+    }
+    useEffect(() => {
+        var _a;
+        (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.updateFocusTarget();
+    });
+    function onFocus(event) {
+        var _a, _b;
+        if (event.target instanceof HTMLElement && ((_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.isRegistered(event.target))) {
+            focusedIdRef.current = getItemKey(event.target);
+        }
+        (_b = navigationAPI.current) === null || _b === void 0 ? void 0 : _b.updateFocusTarget();
+    }
+    function onBlur() {
+        var _a;
+        (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.updateFocusTarget();
+    }
+    function onKeyDown(event) {
+        var _a, _b;
+        const focusTarget = (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.getFocusTarget();
+        let specialKeys = [];
+        switch (navigationDirection) {
+            case 'horizontal':
+                specialKeys = [KeyCode.right, KeyCode.left];
+                break;
+            case 'vertical':
+                specialKeys = [KeyCode.down, KeyCode.up];
+                break;
+            case 'both':
+                specialKeys = [KeyCode.right, KeyCode.left, KeyCode.down, KeyCode.up];
+                break;
+        }
+        specialKeys.push(KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown);
+        if (hasModifierKeys(event) || specialKeys.indexOf(event.keyCode) === -1) {
+            return;
+        }
+        if (!containerObjectRef.current || !focusTarget) {
+            return;
+        }
+        // Ignore navigation when the focused element is not a registered focusable.
+        if (document.activeElement && !((_b = navigationAPI.current) === null || _b === void 0 ? void 0 : _b.isRegistered(document.activeElement))) {
+            return;
+        }
+        event.preventDefault();
+        const focusables = getFocusablesFrom(containerObjectRef.current);
+        const activeIndex = focusables.indexOf(focusTarget);
+        const getNextIndex = (delta) => {
+            const newIndex = activeIndex + delta;
+            return circleIndex(newIndex, [0, focusables.length - 1]);
+        };
+        handleKey(event, {
+            onHome: () => focusElement(focusables[0]),
+            onEnd: () => focusElement(focusables[focusables.length - 1]),
+            onInlineStart: () => focusElement(focusables[getNextIndex(-1)]),
+            onBlockStart: () => focusElement(focusables[getNextIndex(-1)]),
+            onInlineEnd: () => focusElement(focusables[getNextIndex(1)]),
+            onBlockEnd: () => focusElement(focusables[getNextIndex(1)]),
+        });
+    }
+    function focusElement(element) {
+        element.focus();
+    }
+    // List all non-disabled and registered focusables: those are eligible for keyboard navigation.
+    function getFocusablesFrom(target) {
+        function isElementRegistered(element) {
+            var _a, _b;
+            return (_b = (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.isRegistered(element)) !== null && _b !== void 0 ? _b : false;
+        }
+        function isElementDisabled(element) {
+            if ('disabled' in element) {
+                return element.disabled;
+            }
+            return false;
+        }
+        return getAllFocusables(target).filter(el => isElementRegistered(el) && !isElementDisabled(el));
+    }
+    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(styles.root, testUtilStyles.root, baseProps.className), ref: containerRef, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown }),
+        React.createElement(SingleTabStopNavigationProvider, { ref: navigationAPI, navigationActive: true, getNextFocusTarget: getNextFocusTarget, onUnregisterActive: onUnregisterActive }, children)));
+});
+export default InternalNavigableGroup;
+//# sourceMappingURL=internal.js.map

package/lib/internal/template/navigable-group/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/navigable-group/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClF,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAC7E,OAAO,EAEL,+BAA+B,GAChC,MAAM,+CAA+C,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,SAAS,MAAM,8BAA8B,CAAC;AAGrD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAE1D,MAAM,sBAAsB,GAAG,UAAU,CACvC,CACE,EAM8B,EAC9B,GAAuC,EACvC,EAAE;QARF,EACE,QAAQ,EACR,UAAU,EACV,mBAAmB,GAAG,YAAY,EAClC,iBAAiB,OAEW,EADzB,KAAK,cALV,sEAMC,CADS;IAIV,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,aAAa,GAAG,MAAM,CAA6B,IAAI,CAAC,CAAC;IAC/D,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,YAAY,GAAG,YAAY,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CAAC;IACzE,MAAM,YAAY,GAAG,MAAM,EAAU,CAAC;IAEtC,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,KAAK,EAAE,GAAG,EAAE;YACV,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;YACpC,IAAI,MAAM,EAAE;gBACV,MAAM,CAAC,KAAK,EAAE,CAAC;aAChB;QACH,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,SAAS,kBAAkB;;QACzB,IAAI,kBAAkB,CAAC,OAAO,EAAE;YAC9B,MAAM,UAAU,GAAG,iBAAiB,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;YACjE,OAAO,MAAA,MAAA,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,YAAY,CAAC,OAAO,CAAC,mCAAI,UAAU,CAAC,CAAC,CAAC,mCAAI,IAAI,CAAC;SAChG;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,SAAS,kBAAkB,CAAC,gBAA6B;;QACvD,4EAA4E;QAC5E,MAAM,MAAM,GAAG,MAAA,aAAa,CAAC,OAAO,0CAAE,cAAc,EAAE,CAAC;QAEvD,IAAI,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC,KAAK,UAAU,CAAC,gBAAgB,CAAC,EAAE;YACjE,MAAM,CAAC,KAAK,EAAE,CAAC;SAChB;IACH,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;;QACb,MAAA,aAAa,CAAC,OAAO,0CAAE,iBAAiB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,SAAS,OAAO,CAAC,KAAuB;;QACtC,IAAI,KAAK,CAAC,MAAM,YAAY,WAAW,KAAI,MAAA,aAAa,CAAC,OAAO,0CAAE,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA,EAAE;YAC5F,YAAY,CAAC,OAAO,GAAG,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SACjD;QACD,MAAA,aAAa,CAAC,OAAO,0CAAE,iBAAiB,EAAE,CAAC;IAC7C,CAAC;IAED,SAAS,MAAM;;QACb,MAAA,aAAa,CAAC,OAAO,0CAAE,iBAAiB,EAAE,CAAC;IAC7C,CAAC;IAED,SAAS,SAAS,CAAC,KAA0B;;QAC3C,MAAM,WAAW,GAAG,MAAA,aAAa,CAAC,OAAO,0CAAE,cAAc,EAAE,CAAC;QAC5D,IAAI,WAAW,GAAG,EAAE,CAAC;QACrB,QAAQ,mBAAmB,EAAE;YAC3B,KAAK,YAAY;gBACf,WAAW,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;gBAC5C,MAAM;YACR,KAAK,UAAU;gBACb,WAAW,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC;gBACzC,MAAM;YACR,KAAK,MAAM;gBACT,WAAW,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC;gBACtE,MAAM;SACT;QACD,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;QAC9E,IAAI,eAAe,CAAC,KAAK,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE;YACvE,OAAO;SACR;QACD,IAAI,CAAC,kBAAkB,CAAC,OAAO,IAAI,CAAC,WAAW,EAAE;YAC/C,OAAO;SACR;QACD,4EAA4E;QAC5E,IAAI,QAAQ,CAAC,aAAa,IAAI,CAAC,CAAA,MAAA,aAAa,CAAC,OAAO,0CAAE,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAA,EAAE;YAC1F,OAAO;SACR;QACD,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,MAAM,UAAU,GAAG,iBAAiB,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;QACjE,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QACpD,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;YACrC,MAAM,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;YACrC,OAAO,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;QAC3D,CAAC,CAAC;QAEF,SAAS,CAAC,KAAY,EAAE;YACtB,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;YACzC,KAAK,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAC5D,aAAa,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC/D,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC9D,WAAW,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;YAC5D,UAAU,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;SAC5D,CAAC,CAAC;IACL,CAAC;IAED,SAAS,YAAY,CAAC,OAAoB;QACxC,OAAO,CAAC,KAAK,EAAE,CAAC;IAClB,CAAC;IAED,+FAA+F;IAC/F,SAAS,iBAAiB,CAAC,MAAmB;QAC5C,SAAS,mBAAmB,CAAC,OAAoB;;YAC/C,OAAO,MAAA,MAAA,aAAa,CAAC,OAAO,0CAAE,YAAY,CAAC,OAAO,CAAC,mCAAI,KAAK,CAAC;QAC/D,CAAC;QAED,SAAS,iBAAiB,CAAC,OAAoB;YAC7C,IAAI,UAAU,IAAI,OAAO,EAAE;gBACzB,OAAO,OAAO,CAAC,QAAQ,CAAC;aACzB;YAED,OAAO,KAAK,CAAC;QACf,CAAC;QAED,OAAO,gBAAgB,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,mBAAmB,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC,CAAC;IAClG,CAAC;IAED,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,cAAc,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,EACtE,GAAG,EAAE,YAAY,EACjB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS;QAEpB,oBAAC,+BAA+B,IAC9B,GAAG,EAAE,aAAa,EAClB,gBAAgB,EAAE,IAAI,EACtB,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,IAErC,QAAQ,CACuB,CAC9B,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport {\n  SingleTabStopNavigationAPI,\n  SingleTabStopNavigationProvider,\n} from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { getAllFocusables } from '../internal/components/focus-lock/utils';\nimport { hasModifierKeys } from '../internal/events';\nimport { KeyCode } from '../internal/keycode';\nimport { circleIndex } from '../internal/utils/circle-index';\nimport handleKey from '../internal/utils/handle-key';\nimport { InternalNavigableGroupProps, NavigableGroupProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\nconst InternalNavigableGroup = forwardRef(\n  (\n    {\n      children,\n      getItemKey,\n      navigationDirection = 'horizontal',\n      __internalRootRef,\n      ...props\n    }: InternalNavigableGroupProps,\n    ref: React.Ref<NavigableGroupProps.Ref>\n  ) => {\n    const baseProps = getBaseProps(props);\n    const navigationAPI = useRef<SingleTabStopNavigationAPI>(null);\n    const containerObjectRef = useRef<HTMLDivElement>(null);\n    const containerRef = useMergeRefs(containerObjectRef, __internalRootRef);\n    const focusedIdRef = useRef<string>();\n\n    useImperativeHandle(ref, () => ({\n      focus: () => {\n        const target = getNextFocusTarget();\n        if (target) {\n          target.focus();\n        }\n      },\n    }));\n\n    function getNextFocusTarget(): null | HTMLElement {\n      if (containerObjectRef.current) {\n        const focusables = getFocusablesFrom(containerObjectRef.current);\n        return focusables.find(el => getItemKey(el) === focusedIdRef.current) ?? focusables[0] ?? null;\n      }\n      return null;\n    }\n\n    function onUnregisterActive(focusableElement: HTMLElement) {\n      // Only refocus when the node is actually removed (no such element anymore).\n      const target = navigationAPI.current?.getFocusTarget();\n\n      if (target && getItemKey(target) !== getItemKey(focusableElement)) {\n        target.focus();\n      }\n    }\n\n    useEffect(() => {\n      navigationAPI.current?.updateFocusTarget();\n    });\n\n    function onFocus(event: React.FocusEvent) {\n      if (event.target instanceof HTMLElement && navigationAPI.current?.isRegistered(event.target)) {\n        focusedIdRef.current = getItemKey(event.target);\n      }\n      navigationAPI.current?.updateFocusTarget();\n    }\n\n    function onBlur() {\n      navigationAPI.current?.updateFocusTarget();\n    }\n\n    function onKeyDown(event: React.KeyboardEvent) {\n      const focusTarget = navigationAPI.current?.getFocusTarget();\n      let specialKeys = [];\n      switch (navigationDirection) {\n        case 'horizontal':\n          specialKeys = [KeyCode.right, KeyCode.left];\n          break;\n        case 'vertical':\n          specialKeys = [KeyCode.down, KeyCode.up];\n          break;\n        case 'both':\n          specialKeys = [KeyCode.right, KeyCode.left, KeyCode.down, KeyCode.up];\n          break;\n      }\n      specialKeys.push(KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown);\n      if (hasModifierKeys(event) || specialKeys.indexOf(event.keyCode) === -1) {\n        return;\n      }\n      if (!containerObjectRef.current || !focusTarget) {\n        return;\n      }\n      // Ignore navigation when the focused element is not a registered focusable.\n      if (document.activeElement && !navigationAPI.current?.isRegistered(document.activeElement)) {\n        return;\n      }\n      event.preventDefault();\n\n      const focusables = getFocusablesFrom(containerObjectRef.current);\n      const activeIndex = focusables.indexOf(focusTarget);\n      const getNextIndex = (delta: number) => {\n        const newIndex = activeIndex + delta;\n        return circleIndex(newIndex, [0, focusables.length - 1]);\n      };\n\n      handleKey(event as any, {\n        onHome: () => focusElement(focusables[0]),\n        onEnd: () => focusElement(focusables[focusables.length - 1]),\n        onInlineStart: () => focusElement(focusables[getNextIndex(-1)]),\n        onBlockStart: () => focusElement(focusables[getNextIndex(-1)]),\n        onInlineEnd: () => focusElement(focusables[getNextIndex(1)]),\n        onBlockEnd: () => focusElement(focusables[getNextIndex(1)]),\n      });\n    }\n\n    function focusElement(element: HTMLElement) {\n      element.focus();\n    }\n\n    // List all non-disabled and registered focusables: those are eligible for keyboard navigation.\n    function getFocusablesFrom(target: HTMLElement) {\n      function isElementRegistered(element: HTMLElement) {\n        return navigationAPI.current?.isRegistered(element) ?? false;\n      }\n\n      function isElementDisabled(element: HTMLElement) {\n        if ('disabled' in element) {\n          return element.disabled;\n        }\n\n        return false;\n      }\n\n      return getAllFocusables(target).filter(el => isElementRegistered(el) && !isElementDisabled(el));\n    }\n\n    return (\n      <div\n        {...baseProps}\n        className={clsx(styles.root, testUtilStyles.root, baseProps.className)}\n        ref={containerRef}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={onKeyDown}\n      >\n        <SingleTabStopNavigationProvider\n          ref={navigationAPI}\n          navigationActive={true}\n          getNextFocusTarget={getNextFocusTarget}\n          onUnregisterActive={onUnregisterActive}\n        >\n          {children}\n        </SingleTabStopNavigationProvider>\n      </div>\n    );\n  }\n);\n\nexport default InternalNavigableGroup;\n"]}

package/lib/internal/template/navigable-group/styles.css.js

@@ -0,0 +1,6 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_ghvqw_1g0cx_5"
+};
+  

package/lib/internal/template/navigable-group/styles.scoped.css

@@ -0,0 +1,7 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_ghvqw_1g0cx_5:not(#\9) {
+  display: contents;
+}

package/lib/internal/template/navigable-group/styles.selectors.js

@@ -0,0 +1,7 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_ghvqw_1g0cx_5"
+};
+