@workday/canvas-kit-react 8.4.0-299-next.0 → 8.4.0-303-next.2

package/dist/commonjs/layout/lib/Stack.d.ts

@@ -1,9 +1,30 @@
 import { FlexProps } from './Flex';
 import { StackStyleProps } from './utils/stack';
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export declare type StackProps = FlexProps & StackStyleProps;
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export declare const Stack: import("../../common").ElementComponent<"div", StackProps> & {
     Item: import("../../common").ElementComponent<"div", import("..").CommonStyleProps>;
 };
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export interface HStackProps extends StackProps {
     /**
      * sets the direction for the stack
@@ -11,9 +32,23 @@ export interface HStackProps extends StackProps {
      * */
     flexDirection?: 'row' | 'row-reverse';
 }
+/**
+ * ### ⚠️ HStack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export declare const HStack: import("../../common").ElementComponent<"div", HStackProps> & {
     Item: import("../../common").ElementComponent<"div", import("..").CommonStyleProps>;
 };
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export interface VStackProps extends StackProps {
     /**
      * sets the direction for the stack
@@ -21,6 +56,13 @@ export interface VStackProps extends StackProps {
      * */
     flexDirection?: 'column' | 'column-reverse';
 }
+/**
+ * ### ⚠️ VStack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export declare const VStack: import("../../common").ElementComponent<"div", VStackProps> & {
     Item: import("../../common").ElementComponent<"div", import("..").CommonStyleProps>;
 };

package/dist/commonjs/layout/lib/Stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Stack.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;AA2BrD,eAAO,MAAM,KAAK;;CAiBhB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C;;;SAGK;IACL,aAAa,CAAC,EAAE,KAAK,GAAG,aAAa,CAAC;CACvC;AAED,eAAO,MAAM,MAAM;;CAYjB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C;;;SAGK;IACL,aAAa,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC;CAC7C;AAED,eAAO,MAAM,MAAM;;CAYjB,CAAC"}
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Stack.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD;;;;;;GAMG;AACH,oBAAY,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;AAkCrD;;;;;;GAMG;AACH,eAAO,MAAM,KAAK;;CAiBhB,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C;;;SAGK;IACL,aAAa,CAAC,EAAE,KAAK,GAAG,aAAa,CAAC;CACvC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;;CAYjB,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C;;;SAGK;IACL,aAAa,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC;CAC7C;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;;CAYjB,CAAC"}

package/dist/commonjs/layout/lib/Stack.js

@@ -52,6 +52,13 @@ var Box_1 = require("./Box");
 var Flex_1 = require("./Flex");
 var getValidChildren_1 = require("./utils/getValidChildren");
 var stack_1 = require("./utils/stack");
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 var StackItem = common_1.createComponent('div')({
     displayName: 'Stack.Item',
     Component: function (_a, ref, Element) {
@@ -64,6 +71,13 @@ var shouldForwardProp = function (prop) {
     return prop !== 'spacing';
 };
 var StyledStack = styled_1.default(Flex_1.Flex, { shouldForwardProp: shouldForwardProp })(stack_1.stack);
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 exports.Stack = common_1.createComponent('div')({
     displayName: 'Stack',
     Component: function (_a, ref, Element) {
@@ -77,6 +91,13 @@ exports.Stack = common_1.createComponent('div')({
         Item: StackItem,
     },
 });
+/**
+ * ### ⚠️ HStack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 exports.HStack = common_1.createComponent('div')({
     displayName: 'HStack',
     Component: function (_a, ref, Element) {
@@ -87,6 +108,13 @@ exports.HStack = common_1.createComponent('div')({
         Item: StackItem,
     },
 });
+/**
+ * ### ⚠️ VStack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 exports.VStack = common_1.createComponent('div')({
     displayName: 'VStack',
     Component: function (_a, ref, Element) {

package/dist/commonjs/layout/lib/utils/stack.d.ts

@@ -1,9 +1,32 @@
 import { SystemPropValues } from './systemProps';
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export declare type StackDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
 declare const selector = "& > *:not(style) ~ *:not(style)";
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export declare type StackSpacing = SystemPropValues['space'];
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export declare type StackStyleProps = {
-    /** sets space values between child elements (bidirectional support) */
+    /** sets space values between child elements (bidirectional support)
+     * @deprecated
+     */
     spacing: StackSpacing;
     /**
      * sets the direction for the stack
@@ -12,10 +35,18 @@ export declare type StackStyleProps = {
     flexDirection?: StackDirection;
     /**
      * when `true` wraps each child element in a `Stack.Item`
+     * @deprecated
      * @default false
      * */
     shouldWrapChildren?: boolean;
 };
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export declare function stack<P extends StackStyleProps>(props: P): {
     "& > *:not(style) ~ *:not(style)": {};
 };

package/dist/commonjs/layout/lib/utils/stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/stack.ts"],"names":[],"mappings":"AACA,OAAO,EAAyB,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAEvE,oBAAY,cAAc,GAAG,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;AAEjF,QAAA,MAAM,QAAQ,oCAAoC,CAAC;AAEnD,oBAAY,YAAY,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAErD,oBAAY,eAAe,GAAG;IAC5B,uEAAuE;IACvE,OAAO,EAAE,YAAY,CAAC;IACtB;;;SAGK;IACL,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B;;;SAGK;IACL,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAMF,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,CAAC;;EAuBxD"}
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/stack.ts"],"names":[],"mappings":"AACA,OAAO,EAAyB,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAEvE;;;;;;GAMG;AACH,oBAAY,cAAc,GAAG,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;AAEjF,QAAA,MAAM,QAAQ,oCAAoC,CAAC;AAEnD;;;;;;GAMG;AACH,oBAAY,YAAY,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAErD;;;;;;GAMG;AACH,oBAAY,eAAe,GAAG;IAC5B;;OAEG;IACH,OAAO,EAAE,YAAY,CAAC;IACtB;;;SAGK;IACL,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B;;;;SAIK;IACL,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAMF;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,CAAC;;EAuBxD"}

package/dist/commonjs/layout/lib/utils/stack.js

@@ -6,6 +6,13 @@ var selector = '& > *:not(style) ~ *:not(style)';
 var getSpace = function (value) {
     return tokens_1.space[value] || value;
 };
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 function stack(props) {
     var _a;
     var _b = props.flexDirection, flexDirection = _b === void 0 ? 'row' : _b, spacing = props.spacing;

package/dist/commonjs/tabs/lib/TabsList.d.ts

@@ -229,4 +229,8 @@ export declare const TabsList: import("../../common").ElementComponentM<"div", T
     navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
     getId: (item: any) => string;
 }>;
+export declare const useTouchDirection: () => {
+    direction: string;
+    isDragging: boolean;
+};
 //# sourceMappingURL=TabsList.d.ts.map

package/dist/commonjs/tabs/lib/TabsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,KAAK,EAAC,MAAM,kCAAkC,CAAC;AAUvD,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG,CACnC,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACpE;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAOvB,CAAC;AAgBF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBnB,CAAC"}
+{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,KAAK,EAAC,MAAM,kCAAkC,CAAC;AAUvD,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG,CACnC,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACpE;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAOvB,CAAC;AAMF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BnB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;CA+B7B,CAAC"}

package/dist/commonjs/tabs/lib/TabsList.js

@@ -41,7 +41,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabsList = exports.useTabsList = void 0;
+exports.useTouchDirection = exports.TabsList = exports.useTabsList = void 0;
 var React = __importStar(require("react"));
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var common_1 = require("@workday/canvas-kit-react/common");
@@ -52,18 +52,11 @@ exports.useTabsList = common_1.composeHooks(common_1.createElemPropsHook(useTabs
     var modality = common_1.useModalityType();
     return { role: 'tablist', overflowX: modality === 'touch' ? 'auto' : undefined };
 }), collection_1.useOverflowListMeasure, collection_1.useListResetCursorOnBlur);
-var StyledStack = common_1.styled(layout_1.Stack)({
-    '::after': {
-        content: '""',
-        position: 'sticky',
-        height: 52,
-        minWidth: 30,
-        background: "linear-gradient(to right,rgba(255,255,255,0),white);",
-        zIndex: 1,
-        right: 0,
-        top: 0,
-        pointerEvents: 'none',
-    },
+var StyledStack = common_1.styled(layout_1.Stack)(function (_a) {
+    var maskImage = _a.maskImage;
+    return ({
+        maskImage: maskImage,
+    });
 });
 exports.TabsList = common_1.createSubcomponent('div')({
     displayName: 'Tabs.List',
@@ -72,7 +65,42 @@ exports.TabsList = common_1.createSubcomponent('div')({
 })(function (_a, Element, model) {
     var children = _a.children, overflowButton = _a.overflowButton, elemProps = __rest(_a, ["children", "overflowButton"]);
     var modality = common_1.useModalityType();
-    return (React.createElement(StyledStack, __assign({ as: Element, position: "relative", borderBottom: "1px solid " + tokens_1.commonColors.divider, paddingX: modality === 'touch' ? 'zero' : 'm', spacing: "xxxs" }, elemProps),
+    var touchStates = exports.useTouchDirection();
+    return (React.createElement(StyledStack, __assign({ as: Element, position: "relative", borderBottom: "1px solid " + tokens_1.commonColors.divider, paddingX: modality === 'touch' ? 'zero' : 'm', spacing: "xs", maskImage: modality === 'touch' && touchStates.isDragging
+            ? "linear-gradient(" + (touchStates.direction === 'left' ? 'to left' : 'to right') + ", white 80%, transparent)"
+            : undefined }, elemProps),
         collection_1.useListRenderItems(model, children),
         overflowButton));
 });
+var useTouchDirection = function () {
+    var _a = React.useState(false), isDragging = _a[0], setIsDragging = _a[1];
+    var _b = React.useState('right'), touchDir = _b[0], setTouchDirection = _b[1];
+    React.useEffect(function () {
+        var prevXPos = window.pageXOffset;
+        var handleTouchMove = function (e) {
+            var currXPos = e.touches[0].clientX;
+            setIsDragging(true);
+            if (currXPos > prevXPos) {
+                setTouchDirection('left');
+            }
+            else if (currXPos < prevXPos) {
+                setTouchDirection('right');
+            }
+            prevXPos = currXPos;
+            e.preventDefault();
+        };
+        var handleDragEnd = function () {
+            setIsDragging(false);
+        };
+        window.addEventListener('touchmove', handleTouchMove);
+        window.addEventListener('touchstart', handleDragEnd);
+        window.addEventListener('touchend', handleDragEnd);
+        return function () {
+            window.removeEventListener('touchmove', handleTouchMove);
+            window.removeEventListener('touchstart', handleDragEnd);
+            window.removeEventListener('touchend', handleDragEnd);
+        };
+    }, []);
+    return { direction: touchDir, isDragging: isDragging };
+};
+exports.useTouchDirection = useTouchDirection;

package/dist/es6/layout/lib/Stack.d.ts

@@ -1,9 +1,30 @@
 import { FlexProps } from './Flex';
 import { StackStyleProps } from './utils/stack';
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export declare type StackProps = FlexProps & StackStyleProps;
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export declare const Stack: import("../../common").ElementComponent<"div", StackProps> & {
     Item: import("../../common").ElementComponent<"div", import("..").CommonStyleProps>;
 };
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export interface HStackProps extends StackProps {
     /**
      * sets the direction for the stack
@@ -11,9 +32,23 @@ export interface HStackProps extends StackProps {
      * */
     flexDirection?: 'row' | 'row-reverse';
 }
+/**
+ * ### ⚠️ HStack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export declare const HStack: import("../../common").ElementComponent<"div", HStackProps> & {
     Item: import("../../common").ElementComponent<"div", import("..").CommonStyleProps>;
 };
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export interface VStackProps extends StackProps {
     /**
      * sets the direction for the stack
@@ -21,6 +56,13 @@ export interface VStackProps extends StackProps {
      * */
     flexDirection?: 'column' | 'column-reverse';
 }
+/**
+ * ### ⚠️ VStack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export declare const VStack: import("../../common").ElementComponent<"div", VStackProps> & {
     Item: import("../../common").ElementComponent<"div", import("..").CommonStyleProps>;
 };

package/dist/es6/layout/lib/Stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Stack.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;AA2BrD,eAAO,MAAM,KAAK;;CAiBhB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C;;;SAGK;IACL,aAAa,CAAC,EAAE,KAAK,GAAG,aAAa,CAAC;CACvC;AAED,eAAO,MAAM,MAAM;;CAYjB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C;;;SAGK;IACL,aAAa,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC;CAC7C;AAED,eAAO,MAAM,MAAM;;CAYjB,CAAC"}
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Stack.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD;;;;;;GAMG;AACH,oBAAY,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;AAkCrD;;;;;;GAMG;AACH,eAAO,MAAM,KAAK;;CAiBhB,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C;;;SAGK;IACL,aAAa,CAAC,EAAE,KAAK,GAAG,aAAa,CAAC;CACvC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;;CAYjB,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C;;;SAGK;IACL,aAAa,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC;CAC7C;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;;CAYjB,CAAC"}

package/dist/es6/layout/lib/Stack.js

@@ -27,6 +27,13 @@ import { Box } from './Box';
 import { Flex } from './Flex';
 import { getValidChildren } from './utils/getValidChildren';
 import { stack } from './utils/stack';
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 var StackItem = createComponent('div')({
     displayName: 'Stack.Item',
     Component: function (_a, ref, Element) {
@@ -39,6 +46,13 @@ var shouldForwardProp = function (prop) {
     return prop !== 'spacing';
 };
 var StyledStack = styled(Flex, { shouldForwardProp: shouldForwardProp })(stack);
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export var Stack = createComponent('div')({
     displayName: 'Stack',
     Component: function (_a, ref, Element) {
@@ -52,6 +66,13 @@ export var Stack = createComponent('div')({
         Item: StackItem,
     },
 });
+/**
+ * ### ⚠️ HStack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export var HStack = createComponent('div')({
     displayName: 'HStack',
     Component: function (_a, ref, Element) {
@@ -62,6 +83,13 @@ export var HStack = createComponent('div')({
         Item: StackItem,
     },
 });
+/**
+ * ### ⚠️ VStack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export var VStack = createComponent('div')({
     displayName: 'VStack',
     Component: function (_a, ref, Element) {

package/dist/es6/layout/lib/utils/stack.d.ts

@@ -1,9 +1,32 @@
 import { SystemPropValues } from './systemProps';
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export declare type StackDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
 declare const selector = "& > *:not(style) ~ *:not(style)";
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export declare type StackSpacing = SystemPropValues['space'];
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export declare type StackStyleProps = {
-    /** sets space values between child elements (bidirectional support) */
+    /** sets space values between child elements (bidirectional support)
+     * @deprecated
+     */
     spacing: StackSpacing;
     /**
      * sets the direction for the stack
@@ -12,10 +35,18 @@ export declare type StackStyleProps = {
     flexDirection?: StackDirection;
     /**
      * when `true` wraps each child element in a `Stack.Item`
+     * @deprecated
      * @default false
      * */
     shouldWrapChildren?: boolean;
 };
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export declare function stack<P extends StackStyleProps>(props: P): {
     "& > *:not(style) ~ *:not(style)": {};
 };

package/dist/es6/layout/lib/utils/stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/stack.ts"],"names":[],"mappings":"AACA,OAAO,EAAyB,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAEvE,oBAAY,cAAc,GAAG,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;AAEjF,QAAA,MAAM,QAAQ,oCAAoC,CAAC;AAEnD,oBAAY,YAAY,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAErD,oBAAY,eAAe,GAAG;IAC5B,uEAAuE;IACvE,OAAO,EAAE,YAAY,CAAC;IACtB;;;SAGK;IACL,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B;;;SAGK;IACL,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAMF,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,CAAC;;EAuBxD"}
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/stack.ts"],"names":[],"mappings":"AACA,OAAO,EAAyB,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAEvE;;;;;;GAMG;AACH,oBAAY,cAAc,GAAG,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;AAEjF,QAAA,MAAM,QAAQ,oCAAoC,CAAC;AAEnD;;;;;;GAMG;AACH,oBAAY,YAAY,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAErD;;;;;;GAMG;AACH,oBAAY,eAAe,GAAG;IAC5B;;OAEG;IACH,OAAO,EAAE,YAAY,CAAC;IACtB;;;SAGK;IACL,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B;;;;SAIK;IACL,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAMF;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,CAAC;;EAuBxD"}

package/dist/es6/layout/lib/utils/stack.js

@@ -3,6 +3,13 @@ var selector = '& > *:not(style) ~ *:not(style)';
 var getSpace = function (value) {
     return spaceTokens[value] || value;
 };
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export function stack(props) {
     var _a;
     var _b = props.flexDirection, flexDirection = _b === void 0 ? 'row' : _b, spacing = props.spacing;

package/dist/es6/tabs/lib/TabsList.d.ts

@@ -229,4 +229,8 @@ export declare const TabsList: import("../../common").ElementComponentM<"div", T
     navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
     getId: (item: any) => string;
 }>;
+export declare const useTouchDirection: () => {
+    direction: string;
+    isDragging: boolean;
+};
 //# sourceMappingURL=TabsList.d.ts.map

package/dist/es6/tabs/lib/TabsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,KAAK,EAAC,MAAM,kCAAkC,CAAC;AAUvD,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG,CACnC,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACpE;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAOvB,CAAC;AAgBF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBnB,CAAC"}
+{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,KAAK,EAAC,MAAM,kCAAkC,CAAC;AAUvD,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG,CACnC,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACpE;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAOvB,CAAC;AAMF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BnB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;CA+B7B,CAAC"}

package/dist/es6/tabs/lib/TabsList.js

@@ -30,18 +30,11 @@ export var useTabsList = composeHooks(createElemPropsHook(useTabsModel)(function
     var modality = useModalityType();
     return { role: 'tablist', overflowX: modality === 'touch' ? 'auto' : undefined };
 }), useOverflowListMeasure, useListResetCursorOnBlur);
-var StyledStack = styled(Stack)({
-    '::after': {
-        content: '""',
-        position: 'sticky',
-        height: 52,
-        minWidth: 30,
-        background: "linear-gradient(to right,rgba(255,255,255,0),white);",
-        zIndex: 1,
-        right: 0,
-        top: 0,
-        pointerEvents: 'none',
-    },
+var StyledStack = styled(Stack)(function (_a) {
+    var maskImage = _a.maskImage;
+    return ({
+        maskImage: maskImage,
+    });
 });
 export var TabsList = createSubcomponent('div')({
     displayName: 'Tabs.List',
@@ -50,7 +43,41 @@ export var TabsList = createSubcomponent('div')({
 })(function (_a, Element, model) {
     var children = _a.children, overflowButton = _a.overflowButton, elemProps = __rest(_a, ["children", "overflowButton"]);
     var modality = useModalityType();
-    return (React.createElement(StyledStack, __assign({ as: Element, position: "relative", borderBottom: "1px solid " + commonColors.divider, paddingX: modality === 'touch' ? 'zero' : 'm', spacing: "xxxs" }, elemProps),
+    var touchStates = useTouchDirection();
+    return (React.createElement(StyledStack, __assign({ as: Element, position: "relative", borderBottom: "1px solid " + commonColors.divider, paddingX: modality === 'touch' ? 'zero' : 'm', spacing: "xs", maskImage: modality === 'touch' && touchStates.isDragging
+            ? "linear-gradient(" + (touchStates.direction === 'left' ? 'to left' : 'to right') + ", white 80%, transparent)"
+            : undefined }, elemProps),
         useListRenderItems(model, children),
         overflowButton));
 });
+export var useTouchDirection = function () {
+    var _a = React.useState(false), isDragging = _a[0], setIsDragging = _a[1];
+    var _b = React.useState('right'), touchDir = _b[0], setTouchDirection = _b[1];
+    React.useEffect(function () {
+        var prevXPos = window.pageXOffset;
+        var handleTouchMove = function (e) {
+            var currXPos = e.touches[0].clientX;
+            setIsDragging(true);
+            if (currXPos > prevXPos) {
+                setTouchDirection('left');
+            }
+            else if (currXPos < prevXPos) {
+                setTouchDirection('right');
+            }
+            prevXPos = currXPos;
+            e.preventDefault();
+        };
+        var handleDragEnd = function () {
+            setIsDragging(false);
+        };
+        window.addEventListener('touchmove', handleTouchMove);
+        window.addEventListener('touchstart', handleDragEnd);
+        window.addEventListener('touchend', handleDragEnd);
+        return function () {
+            window.removeEventListener('touchmove', handleTouchMove);
+            window.removeEventListener('touchstart', handleDragEnd);
+            window.removeEventListener('touchend', handleDragEnd);
+        };
+    }, []);
+    return { direction: touchDir, isDragging: isDragging };
+};

package/layout/lib/Stack.tsx

@@ -6,8 +6,22 @@ import {Flex, FlexProps} from './Flex';
 import {getValidChildren} from './utils/getValidChildren';
 import {stack, StackStyleProps} from './utils/stack';
 
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export type StackProps = FlexProps & StackStyleProps;
 
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 const StackItem = createComponent('div')({
   displayName: 'Stack.Item',
   Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
@@ -33,6 +47,13 @@ const shouldForwardProp = (prop: string) => {
 
 const StyledStack = styled(Flex, {shouldForwardProp})<StyledType & StackProps>(stack);
 
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export const Stack = createComponent('div')({
   displayName: 'Stack',
   Component: ({children, shouldWrapChildren = false, ...elemProps}: StackProps, ref, Element) => {
@@ -52,6 +73,13 @@ export const Stack = createComponent('div')({
   },
 });
 
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export interface HStackProps extends StackProps {
   /**
    * sets the direction for the stack
@@ -60,6 +88,13 @@ export interface HStackProps extends StackProps {
   flexDirection?: 'row' | 'row-reverse';
 }
 
+/**
+ * ### ⚠️ HStack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export const HStack = createComponent('div')({
   displayName: 'HStack',
   Component: ({children, flexDirection = 'row', ...elemProps}: HStackProps, ref, Element) => {
@@ -74,6 +109,13 @@ export const HStack = createComponent('div')({
   },
 });
 
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export interface VStackProps extends StackProps {
   /**
    * sets the direction for the stack
@@ -82,6 +124,13 @@ export interface VStackProps extends StackProps {
   flexDirection?: 'column' | 'column-reverse';
 }
 
+/**
+ * ### ⚠️ VStack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export const VStack = createComponent('div')({
   displayName: 'VStack',
   Component: ({children, flexDirection = 'column', ...elemProps}: VStackProps, ref, Element) => {

package/layout/lib/utils/stack.ts

@@ -1,14 +1,37 @@
 import {space as spaceTokens} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemPropValues, SystemPropValues} from './systemProps';
 
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export type StackDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
 
 const selector = '& > *:not(style) ~ *:not(style)';
 
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export type StackSpacing = SystemPropValues['space'];
 
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export type StackStyleProps = {
-  /** sets space values between child elements (bidirectional support) */
+  /** sets space values between child elements (bidirectional support)
+   * @deprecated
+   */
   spacing: StackSpacing;
   /**
    * sets the direction for the stack
@@ -17,6 +40,7 @@ export type StackStyleProps = {
   flexDirection?: StackDirection;
   /**
    * when `true` wraps each child element in a `Stack.Item`
+   * @deprecated
    * @default false
    * */
   shouldWrapChildren?: boolean;
@@ -26,6 +50,13 @@ const getSpace = (value: SystemPropValues['space']) => {
   return spaceTokens[value as CanvasSystemPropValues['space']] || value;
 };
 
+/**
+ * ### ⚠️ Stack has been soft-deprecated and will be removed in v9 ⚠️
+ * - If you would like resolve this now, run this codemod: `npx @workday/canvas-kit-codemod softDeprecate/Stack [path]`
+ * - You can learn more about the codemod package [here](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+ * - There is more context [here]() as to why this decision was made
+ * @deprecated
+ */
 export function stack<P extends StackStyleProps>(props: P) {
   const {flexDirection = 'row', spacing} = props;
   let styles = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "8.4.0-299-next.0+8da934f1",
+  "version": "8.4.0-303-next.2+ef9246fe",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^8.4.0-299-next.0+8da934f1",
+    "@workday/canvas-kit-popup-stack": "^8.4.0-303-next.2+ef9246fe",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "8da934f10feb07d111653a1b124edd8a97867366"
+  "gitHead": "ef9246fe888c63f6f2603ff35df3b6822d05baa1"
 }

package/tabs/lib/TabsList.tsx

@@ -44,19 +44,9 @@ export const useTabsList = composeHooks(
   useListResetCursorOnBlur
 );
 
-const StyledStack = styled(Stack)<StyledType>({
-  '::after': {
-    content: '""',
-    position: 'sticky',
-    height: 52,
-    minWidth: 30,
-    background: `linear-gradient(to right,rgba(255,255,255,0),white);`,
-    zIndex: 1,
-    right: 0,
-    top: 0,
-    pointerEvents: 'none',
-  },
-});
+const StyledStack = styled(Stack)<StyledType & {maskImage?: string}>(({maskImage}) => ({
+  maskImage: maskImage,
+}));
 
 export const TabsList = createSubcomponent('div')({
   displayName: 'Tabs.List',
@@ -64,13 +54,21 @@ export const TabsList = createSubcomponent('div')({
   elemPropsHook: useTabsList,
 })<TabListProps>(({children, overflowButton, ...elemProps}, Element, model) => {
   const modality = useModalityType();
+  const touchStates = useTouchDirection();
   return (
     <StyledStack
       as={Element}
       position="relative"
       borderBottom={`1px solid ${commonColors.divider}`}
       paddingX={modality === 'touch' ? 'zero' : 'm'}
-      spacing="xxxs"
+      spacing="xs"
+      maskImage={
+        modality === 'touch' && touchStates.isDragging
+          ? `linear-gradient(${
+              touchStates.direction === 'left' ? 'to left' : 'to right'
+            }, white 80%, transparent)`
+          : undefined
+      }
       {...elemProps}
     >
       {useListRenderItems(model, children)}
@@ -78,3 +76,36 @@ export const TabsList = createSubcomponent('div')({
     </StyledStack>
   );
 });
+
+export const useTouchDirection = () => {
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [touchDir, setTouchDirection] = React.useState('right');
+
+  React.useEffect(() => {
+    let prevXPos = window.pageXOffset;
+    const handleTouchMove = function(e: TouchEvent) {
+      const currXPos = e.touches[0].clientX;
+      setIsDragging(true);
+      if (currXPos > prevXPos) {
+        setTouchDirection('left');
+      } else if (currXPos < prevXPos) {
+        setTouchDirection('right');
+      }
+      prevXPos = currXPos;
+      e.preventDefault();
+    };
+    const handleDragEnd = function() {
+      setIsDragging(false);
+    };
+    window.addEventListener('touchmove', handleTouchMove);
+    window.addEventListener('touchstart', handleDragEnd);
+    window.addEventListener('touchend', handleDragEnd);
+    return () => {
+      window.removeEventListener('touchmove', handleTouchMove);
+      window.removeEventListener('touchstart', handleDragEnd);
+      window.removeEventListener('touchend', handleDragEnd);
+    };
+  }, []);
+
+  return {direction: touchDir, isDragging: isDragging};
+};