@wix/patterns 1.317.0 → 1.319.0

package/src/components/Collapse/Collapse.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse1742912586";
+var _namespace_ = "Collapse1755154976";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Collapse1742912586__root","exit":"Collapse1742912586__exit"};
+export var classes = {"root":"Collapse1755154976__root","exit":"Collapse1755154976__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPage2205670101";
+var _namespace_ = "CollectionPage3762080823";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionPage2205670101__root"};
+export var classes = {"root":"CollectionPage3762080823__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/CollectionTable.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTable469532719";
+var _namespace_ = "CollectionTable3129949815";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionTable469532719__root"};
+export var classes = {"root":"CollectionTable3129949815__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/CollectionToolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar48805195";
+var _namespace_ = "CollectionToolbar2879403662";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionToolbar48805195__root","left":"CollectionToolbar48805195__left","right":"CollectionToolbar48805195__right","fullWidth":"CollectionToolbar48805195__fullWidth"};
+export var classes = {"root":"CollectionToolbar2879403662__root","left":"CollectionToolbar2879403662__left","right":"CollectionToolbar2879403662__right","fullWidth":"CollectionToolbar2879403662__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter1385992637";
+var _namespace_ = "SearchOrCustomFilter937376438";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SearchOrCustomFilter1385992637__root","search":"SearchOrCustomFilter1385992637__search","searchMobile":"SearchOrCustomFilter1385992637__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter937376438__root","search":"SearchOrCustomFilter937376438__search","searchMobile":"SearchOrCustomFilter937376438__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly4275111943";
+var _namespace_ = "AutoCompleteReadonly941113359";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"AutoCompleteReadonly4275111943__root"};
+export var classes = {"root":"AutoCompleteReadonly941113359__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ViewsDropdown71665548";
+var _namespace_ = "ViewsDropdown3467460843";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ViewsDropdown71665548__root"};
+export var classes = {"root":"ViewsDropdown3467460843__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/DragHandle/DragHandle.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle2097138654";
+var _namespace_ = "DragHandle1627605998";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"DragHandle2097138654__root"};
+export var classes = {"root":"DragHandle1627605998__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EntityPage/EntityPagePlain.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPagePlain3381948879";
+var _namespace_ = "EntityPagePlain2380551202";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EntityPagePlain3381948879__root"};
+export var classes = {"root":"EntityPagePlain2380551202__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Fade/Fade.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Fade195922068";
+var _namespace_ = "Fade1944937321";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Fade195922068__root"};
+export var classes = {"root":"Fade1944937321__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Heading/Heading.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading2772262609";
+var _namespace_ = "Heading1026412560";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Heading2772262609__root"};
+export var classes = {"root":"Heading1026412560__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/InputOverflow/InputOverflow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow2848822892";
+var _namespace_ = "InputOverflow1142665713";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"InputOverflow2848822892__root"};
+export var classes = {"root":"InputOverflow1142665713__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/LoadingRow/LoadingRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow3912306227";
+var _namespace_ = "LoadingRow3303753817";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow3912306227__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3912306227__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow3303753817__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow3303753817__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/MaxHeightText/MaxHeightText.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxHeightText3608932933";
+var _namespace_ = "MaxHeightText2883793613";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MaxHeightText3608932933__root"};
+export var classes = {"root":"MaxHeightText2883793613__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MaxLines/MaxLines.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxLines2519136276";
+var _namespace_ = "MaxLines798299606";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MaxLines2519136276__root"};
+export var classes = {"root":"MaxLines798299606__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MultiBulkActionToolbar/MultiBulkActionToolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar2871372921";
+var _namespace_ = "MultiBulkActionToolbar1570597090";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultiBulkActionToolbar2871372921__root","leftGroupWrapper":"MultiBulkActionToolbar2871372921__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2871372921__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2871372921__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar1570597090__root","leftGroupWrapper":"MultiBulkActionToolbar1570597090__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1570597090__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1570597090__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow1158360690";
+var _namespace_ = "NestedTablePlaceholderStatesRow2455751975";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTablePlaceholderStatesRow1158360690__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow2455751975__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow1108205947";
+var _namespace_ = "NestedTableRow3389528325";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableRow1108205947__root","firstLevel":"NestedTableRow1108205947__firstLevel","placeholder":"NestedTableRow1108205947__placeholder","parentHovered":"NestedTableRow1108205947__parentHovered"};
+export var classes = {"root":"NestedTableRow3389528325__root","firstLevel":"NestedTableRow3389528325__firstLevel","placeholder":"NestedTableRow3389528325__placeholder","parentHovered":"NestedTableRow3389528325__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect435668955";
+var _namespace_ = "MultipleDragOverlayEffect4213382554";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultipleDragOverlayEffect435668955__root"};
+export var classes = {"root":"MultipleDragOverlayEffect4213382554__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableDragAndDropRow64711421";
+var _namespace_ = "NestedTableDragAndDropRow3013387861";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableDragAndDropRow64711421__root"};
+export var classes = {"root":"NestedTableDragAndDropRow3013387861__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContent.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent3261273723";
+var _namespace_ = "PickerContent3697521998";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContent3261273723__root"};
+export var classes = {"root":"PickerContent3697521998__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep2051639453";
+var _namespace_ = "PickerContentAdditionalStep1178376272";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContentAdditionalStep2051639453__root","titles":"PickerContentAdditionalStep2051639453__titles","suffix":"PickerContentAdditionalStep2051639453__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1178376272__root","titles":"PickerContentAdditionalStep1178376272__titles","suffix":"PickerContentAdditionalStep1178376272__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerTableListItem/PickerTableListItem.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerTableListItem2181412847";
+var _namespace_ = "PickerTableListItem1427385186";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerTableListItem2181412847__root"};
+export var classes = {"root":"PickerTableListItem1427385186__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ScrollableContent/ScrollableContent.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent3215793638";
+var _namespace_ = "ScrollableContent1821868856";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ScrollableContent3215793638__root"};
+export var classes = {"root":"ScrollableContent1821868856__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SkeletonCard/SkeletonCard.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard837474356";
+var _namespace_ = "SkeletonCard600805724";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SkeletonCard837474356__root","headerLoading":"SkeletonCard837474356__headerLoading"};
+export var classes = {"root":"SkeletonCard600805724__root","headerLoading":"SkeletonCard600805724__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SlidingModal/SlidingModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SlidingModal1449859352";
+var _namespace_ = "SlidingModal3213389435";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SlidingModal1449859352__root"};
+export var classes = {"root":"SlidingModal3213389435__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SlidingModal/SlidingModal.tsx

@@ -7,6 +7,7 @@ import React, {
   useRef,
 } from 'react';
 import { st, classes } from './SlidingModal.st.css.js';
+import { scopeTab } from './scopeTab';
 
 export interface SlidingModalProps {
   dataHook?: string;
@@ -110,6 +111,11 @@ export function SlidingModal(props: SlidingModalProps) {
       onKeyDown={(e) => {
         if (e.nativeEvent.code === 'Escape') {
           onRequestClose?.();
+          return;
+        }
+        if (divRef.current && e.nativeEvent.code === 'Tab') {
+          scopeTab(divRef.current, e);
+          return;
         }
       }}
       ref={(el) => {

package/src/components/SlidingModal/scopeTab.ts

@@ -0,0 +1,83 @@
+import React from 'react';
+
+/**
+ * Constrains keyboard Tab navigation to stay within a given container element.
+ *
+ * This function implements a simple "focus loop" (a.k.a. focus trap) behavior.
+ * When the user presses Tab on the last focusable element, focus will wrap to
+ * the first focusable element. When pressing Shift+Tab on the first focusable
+ * element, focus will wrap to the last.
+ *
+ * Use this in keyboard event handlers (typically onKeyDown) when building
+ * components such as modals, popovers, drawers, or any UI that should trap
+ * focus within a defined scope.
+ *
+ * @param element - The container within which focus should be scoped.
+ * @param keyboardEvent - The keyboard event from React (usually from onKeyDown).
+ */
+export function scopeTab(
+  element: HTMLElement,
+  keyboardEvent: React.KeyboardEvent,
+) {
+  const focusableSelectors = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    "[tabindex]:not([tabindex='-1'])",
+  ];
+
+  const getFocusable = (): HTMLElement[] =>
+    Array.from(
+      element.querySelectorAll<HTMLElement>(focusableSelectors.join(',')),
+    ).filter(isVisible);
+
+  const focusables = getFocusable();
+  if (focusables.length === 0) {
+    return;
+  }
+
+  const first = focusables[0];
+  const last = focusables[focusables.length - 1];
+  const active = document.activeElement as HTMLElement | null;
+
+  if (element === active && keyboardEvent.shiftKey) {
+    // Shift + Tab on the container itself
+    keyboardEvent.preventDefault();
+    last.focus();
+  } else if (keyboardEvent.shiftKey) {
+    // Shift + Tab
+    if (active === first) {
+      keyboardEvent.preventDefault();
+      last.focus();
+    }
+  } else {
+    // Tab
+    if (active === last) {
+      keyboardEvent.preventDefault();
+      first.focus();
+    }
+  }
+}
+
+function isVisible(el: HTMLElement): boolean {
+  if (!el) {
+    return false;
+  }
+
+  const style = window.getComputedStyle(el);
+
+  if (style.display === 'none') {
+    return false;
+  }
+  if (style.visibility === 'hidden') {
+    return false;
+  }
+
+  if (el.getAttribute('aria-hidden') === 'true') {
+    return false;
+  }
+
+  return true;
+}

package/src/components/TabsFilter/TabsFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter496331046";
+var _namespace_ = "TabsFilter3081753966";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"TabsFilter496331046__root","title":"TabsFilter496331046__title"};
+export var classes = {"root":"TabsFilter3081753966__root","title":"TabsFilter3081753966__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal2626458466";
+var _namespace_ = "ManageTagsModal3954289106";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ManageTagsModal2626458466__root"};
+export var classes = {"root":"ManageTagsModal3954289106__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ToolbarItem/ToolbarItem.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem3939787072";
+var _namespace_ = "ToolbarItem3269418923";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ToolbarItem3939787072__root"};
+export var classes = {"root":"ToolbarItem3269418923__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};