@workday/canvas-kit-react 15.0.0-alpha.0008-next.0 → 15.0.0-alpha.0023-next.0

package/dist/es6/text-input/lib/TextInput.js

@@ -7,15 +7,15 @@ export const textInputStencil = createStencil({
     vars: {
         width: '',
     },
-    base: { name: "3s226n", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);display:block;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1-half));height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;padding:var(--cnvs-sys-space-x2);margin:0rem;width:var(--width-text-input-ea22d2);min-width:var(--width-text-input-ea22d2, calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10)));color:var(--cnvs-sys-color-text-default);text-overflow:ellipsis;::-ms-clear{display:none;}&::placeholder{color:var(--cnvs-sys-color-text-hint);}&:is(:hover, .hover){border-color:var(--cnvs-sys-color-border-input-strong);}&:is(:focus-visible, .focus):where(:not([disabled])){border-color:var(--cnvs-brand-common-focus-outline);box-shadow:inset 0 0 0 1px var(--cnvs-brand-common-focus-outline);outline:0.125rem solid transparent;}&:is(:disabled, .disabled){background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);color:var(--cnvs-sys-color-fg-disabled);&::placeholder{color:var(--cnvs-sys-color-fg-disabled);}}" },
+    base: { name: "1xyity", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);display:block;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1-half));height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;padding:var(--cnvs-sys-space-x2);margin:0rem;width:var(--width-text-input-ea22d2);min-width:var(--width-text-input-ea22d2, calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10)));color:var(--cnvs-sys-color-text-default);text-overflow:ellipsis;::-ms-clear{display:none;}&::placeholder{color:var(--cnvs-sys-color-text-hint);}&:is(:hover, .hover){border-color:var(--cnvs-sys-color-border-input-strong);}&:is(:focus-visible, .focus):where(:not([disabled])){border-color:var(--cnvs-brand-common-focus-outline);box-shadow:inset 0 0 0 1px var(--cnvs-brand-common-focus-outline);outline:0.125rem solid transparent;}&:is(:disabled, .disabled){background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);color:var(--cnvs-sys-color-fg-disabled);&::placeholder{color:var(--cnvs-sys-color-fg-disabled);}}" },
     modifiers: {
         grow: {
-            true: { name: "3dphom", styles: "width:100%;resize:vertical;" },
-            false: { name: "t9jec", styles: "width:initial;" }
+            true: { name: "3bp98q", styles: "width:100%;resize:vertical;" },
+            false: { name: "122vde", styles: "width:initial;" }
         },
         error: {
-            error: { name: "1hs6e0", styles: "border-color:var(--cnvs-brand-common-error-inner);border-width:0.125rem;background-color:var(--cnvs-brand-error-lightest);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-common-error-inner);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);outline-offset:0.125rem;}" },
-            caution: { name: "3corvi", styles: "border-color:var(--cnvs-brand-common-alert-outer);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner);background-color:var(--cnvs-brand-alert-lightest);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-common-alert-outer);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner),\n        0 0 0 2px var(--cnvs-sys-color-border-inverse),\n        0 0 0 4px var(--cnvs-brand-common-focus-outline);}outline-offset:0.125rem;" }
+            error: { name: "2lkrur", styles: "border-color:var(--cnvs-brand-common-error-inner);border-width:0.125rem;background-color:var(--cnvs-brand-error-lightest);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-common-error-inner);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);outline-offset:0.125rem;}" },
+            caution: { name: "1dus1s", styles: "border-color:var(--cnvs-brand-common-alert-outer);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner);background-color:var(--cnvs-brand-alert-lightest);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-common-alert-outer);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner),\n        0 0 0 2px var(--cnvs-sys-color-border-inverse),\n        0 0 0 4px var(--cnvs-brand-common-focus-outline);}outline-offset:0.125rem;" }
         }
     },
     defaultModifiers: {

package/dist/es6/toast/lib/Toast.js

@@ -42,7 +42,7 @@ const getAriaAttributes = (mode, id) => {
     }
 };
 const toastStencil = createStencil({
-    base: { name: "1pflhw", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:calc(calc(var(--cnvs-sys-space-x20) * 4) + var(--cnvs-sys-space-x10));padding:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);" }
+    base: { name: "1c3ckf", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:calc(calc(var(--cnvs-sys-space-x20) * 4) + var(--cnvs-sys-space-x10));padding:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);" }
 }, "toast-55513d");
 /**
  * Toast is a compound component that has different modes based on its contents. The modes add the proper aria attributes for accessibility

package/dist/es6/toast/lib/ToastBody.js

@@ -4,7 +4,7 @@ import { Flex, mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const toastBodyStencil = createStencil({
-    base: { name: "34kb6l", styles: "box-sizing:border-box;align-items:flex-start;flex-direction:column;justify-content:center;padding-top:var(--cnvs-sys-space-x4);padding-bottom:var(--cnvs-sys-space-x4);flex-grow:1;gap:var(--cnvs-sys-space-x1);" }
+    base: { name: "2rl7r1", styles: "box-sizing:border-box;align-items:flex-start;flex-direction:column;justify-content:center;padding-top:var(--cnvs-sys-space-x4);padding-bottom:var(--cnvs-sys-space-x4);flex-grow:1;gap:var(--cnvs-sys-space-x1);" }
 }, "toast-body-ac2901");
 export const ToastBody = createComponent('div')({
     displayName: 'Toast.Body',

package/dist/es6/toast/lib/ToastCloseIcon.js

@@ -4,7 +4,7 @@ import { Popup } from '@workday/canvas-kit-react/popup';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 export const toastCloseIconStencil = createStencil({
-    base: { name: "la0ic", styles: "box-sizing:border-box;position:relative;" }
+    base: { name: "2teyxt", styles: "box-sizing:border-box;position:relative;" }
 }, "toast-close-icon-f7cf19");
 export const ToastCloseIcon = createComponent('button')({
     displayName: 'Toast.CloseIcon',

package/dist/es6/toast/lib/ToastIcon.js

@@ -4,7 +4,7 @@ import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const toastIconStencil = createStencil({
-    base: { name: "f6atw", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x3);" }
+    base: { name: "3k41qi", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x3);" }
 }, "toast-icon-22b05a");
 export const ToastIcon = createComponent('div')({
     displayName: 'Toast.Icon',

package/dist/es6/toast/lib/ToastMessage.js

@@ -6,7 +6,7 @@ import { createStencil } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { system } from '@workday/canvas-tokens-web';
 export const toastMessageStencil = createStencil({
-    base: { name: "3cch7p", styles: "box-sizing:border-box;word-break:break-word;margin-block-start:var(--cnvs-sys-space-zero);margin-block-end:var(--cnvs-sys-space-zero);" }
+    base: { name: "22dnqr", styles: "box-sizing:border-box;word-break:break-word;margin-block-start:var(--cnvs-sys-space-zero);margin-block-end:var(--cnvs-sys-space-zero);" }
 }, "toast-message-19d226");
 export const ToastMessage = createSubcomponent('p')({
     modelHook: useToastModel,

package/dist/es6/tooltip/lib/TooltipContainer.js

@@ -11,13 +11,13 @@ const tooltipTranslateVars = createVars({ id: "9bc811", args: ["positionX", "pos
 /**
  * Keyframe for the Tooltip animation.
  */
-const tooltipAnimation = keyframes({ name: "14lr2r", styles: "0%{opacity:0;transform:translate(var(--positionX-9bc811), var(--positionY-9bc811));}100%{opacity:1;transform:translate(0);}" });
+const tooltipAnimation = keyframes({ name: "yco6h", styles: "0%{opacity:0;transform:translate(var(--positionX-9bc811), var(--positionY-9bc811));}100%{opacity:1;transform:translate(0);}" });
 export const tooltipContainerStencil = createStencil({
     vars: {
         tooltipTransformOriginHorizontal: '',
         tooltipTransformOriginVertical: '',
     },
-    base: { name: "31umax", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);display:inline-flex;position:relative;padding:var(--cnvs-sys-space-x3);color:var(--cnvs-sys-color-text-inverse);animation-name:animation-14lr2r;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-6c30a8) var(--tooltipTransformOriginHorizontal-tooltip-container-6c30a8);a{color:var(--cnvs-sys-color-text-inverse);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-x1);outline:0.0625rem solid transparent;outline-offset:-0.0625rem;z-index:-1;margin:var(--cnvs-sys-space-x1);background-color:var(--cnvs-sys-color-bg-translucent);position:absolute;top:0;left:0;right:0;bottom:0;}body:has(:focus-visible, .focus) &{padding:calc(var(--cnvs-sys-space-x4) - calc(var(--cnvs-sys-space-x1) / 2));&:before{margin:calc(var(--cnvs-sys-space-x1) + calc(var(--cnvs-sys-space-x1) / 2));}}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-sys-space-x1) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-sys-space-x1) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-sys-space-x1) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-sys-space-x1) * -1);}" }
+    base: { name: "vg2zp", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);display:inline-flex;position:relative;padding:var(--cnvs-sys-space-x3);color:var(--cnvs-sys-color-text-inverse);animation-name:animation-yco6h;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-6c30a8) var(--tooltipTransformOriginHorizontal-tooltip-container-6c30a8);a{color:var(--cnvs-sys-color-text-inverse);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-x1);outline:0.0625rem solid transparent;outline-offset:-0.0625rem;z-index:-1;margin:var(--cnvs-sys-space-x1);background-color:var(--cnvs-sys-color-bg-translucent);position:absolute;top:0;left:0;right:0;bottom:0;}body:has(:focus-visible, .focus) &{padding:calc(var(--cnvs-sys-space-x4) - calc(var(--cnvs-sys-space-x1) / 2));&:before{margin:calc(var(--cnvs-sys-space-x1) + calc(var(--cnvs-sys-space-x1) / 2));}}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-sys-space-x1) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-sys-space-x1) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-sys-space-x1) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-sys-space-x1) * -1);}" }
 }, "tooltip-container-6c30a8");
 export const TooltipContainer = createComponent('div')({
     displayName: 'TooltipContainer',

package/dist/es6/version/lib/version.js

@@ -1 +1 @@
-export const version = '14.1.19';
+export const version = '14.1.21';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "15.0.0-alpha.0008-next.0",
+  "version": "15.0.0-alpha.0023-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -52,9 +52,9 @@
     "@popperjs/core": "^2.5.4",
     "@tanstack/react-virtual": "^3.13.9",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^15.0.0-alpha.0008-next.0",
-    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0008-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.0008-next.0",
+    "@workday/canvas-kit-popup-stack": "^15.0.0-alpha.0023-next.0",
+    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0023-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.0023-next.0",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "4.0.0-alpha.3",
     "@workday/design-assets-types": "^0.2.10",
@@ -69,5 +69,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "26a8bc06dba5ae759ca62ae8922aeaa7bba7015c"
+  "gitHead": "13b3abf5b4752be5738a78f3c37e31b6252077dc"
 }

package/pagination/lib/Pagination/Controls.tsx

@@ -11,7 +11,6 @@ import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {system} from '@workday/canvas-tokens-web';
 
-import {useRTL} from './common/utils/useRTL';
 import {PaginationContext} from './usePaginationModel';
 
 export interface ControlButtonProps extends ExtractProps<typeof TertiaryButton, never> {
@@ -28,6 +27,16 @@ export const paginationControlsStencil = createStencil({
   },
 });
 
+const controlButtonStencil = createStencil({
+  base: {
+    '&:dir(rtl)': {
+      '& .wd-icon': {
+        transform: 'scaleX(-1)',
+      },
+    },
+  },
+});
+
 export const PaginationControls = createComponent('div')({
   displayName: 'Pagination.Controls',
   Component(elemProps: PaginationControlsProps, ref, Element) {
@@ -47,8 +56,6 @@ export const JumpToFirstButton = createComponent('button')({
       onClick?.(e);
       model.events.setCurrentPage(model.state.firstPage);
     };
-    const {shouldUseRTL} = useRTL();
-    const icon = shouldUseRTL ? chevron2xRightSmallIcon : chevron2xLeftSmallIcon;
 
     return (
       <TertiaryButton
@@ -56,9 +63,9 @@ export const JumpToFirstButton = createComponent('button')({
         as={Element}
         aria-disabled={isDisabled || undefined}
         size="small"
-        icon={icon}
+        icon={chevron2xLeftSmallIcon}
         onClick={handleClick}
-        {...restProps}
+        {...mergeStyles(restProps, controlButtonStencil())}
       />
     );
   },
@@ -76,17 +83,16 @@ export const StepToPreviousButton = createComponent('button')({
       onClick?.(e);
       model.events.setCurrentPage(model.state.currentPage - 1);
     };
-    const {shouldUseRTL} = useRTL();
-    const icon = shouldUseRTL ? chevronRightSmallIcon : chevronLeftSmallIcon;
+
     return (
       <TertiaryButton
         ref={ref}
         as={Element}
         aria-disabled={isDisabled || undefined}
         size="small"
-        icon={icon}
+        icon={chevronLeftSmallIcon}
         onClick={handleClick}
-        {...restProps}
+        {...mergeStyles(restProps, controlButtonStencil())}
       />
     );
   },
@@ -104,17 +110,16 @@ export const StepToNextButton = createComponent('button')({
       onClick?.(e);
       model.events.setCurrentPage(model.state.currentPage + 1);
     };
-    const {shouldUseRTL} = useRTL();
-    const icon = shouldUseRTL ? chevronLeftSmallIcon : chevronRightSmallIcon;
+
     return (
       <TertiaryButton
         ref={ref}
         as={Element}
         aria-disabled={isDisabled || undefined}
         size="small"
-        icon={icon}
+        icon={chevronRightSmallIcon}
         onClick={handleClick}
-        {...restProps}
+        {...mergeStyles(restProps, controlButtonStencil())}
       />
     );
   },
@@ -132,17 +137,16 @@ export const JumpToLastButton = createComponent('button')({
       onClick?.(e);
       model.events.setCurrentPage(model.state.lastPage);
     };
-    const {shouldUseRTL} = useRTL();
-    const icon = shouldUseRTL ? chevron2xLeftSmallIcon : chevron2xRightSmallIcon;
+
     return (
       <TertiaryButton
         ref={ref}
         as={Element}
         aria-disabled={isDisabled || undefined}
         size="small"
-        icon={icon}
+        icon={chevron2xRightSmallIcon}
         onClick={handleClick}
-        {...restProps}
+        {...mergeStyles(restProps, controlButtonStencil())}
       />
     );
   },

package/segmented-control/index.ts

@@ -1 +1,4 @@
 export * from './lib/SegmentedControl';
+export * from './lib/hooks/useSegmentedControlModel';
+export * from './lib/hooks/useSegmentedControlItem';
+export * from './lib/SegmentedControlList';

package/segmented-control/lib/SegmentedControl.tsx

@@ -1,86 +1,57 @@
-import * as React from 'react';
+import React from 'react';
+import {createContainer} from '@workday/canvas-kit-react/common';
 
-import {createComponent} from '@workday/canvas-kit-react/common';
-import {SegmentedControlButton, SegmentedControlButtonProps} from './SegmentedControlButton';
+import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
+import {SegmentedControlList} from './SegmentedControlList';
+import {SegmentedControlItem} from './SegmentedControlItem';
 
-/**
- * @deprecated ⚠️ `SegmentedControlProps` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
- */
 export interface SegmentedControlProps {
-  /**
-   * The Button children of the SegmentedControl (must be at least two).
-   * TODO: Add support for text children
-   */
-  children: React.ReactElement<SegmentedControlButtonProps>[];
-
-  /**
-   * The value or index of the Button that the SegmentedControl should be toggled on to.
-   * If a string is provided, the Button with the corresponding value will be selected.
-   * If a number is provided, the Button with the corresponding index will be selected.
-   * @default 0
-   */
-  value?: string | number;
-
-  /**
-   * The function called when a button in the SegmentedControl is toggled.
-   * If the selected button has a value, that value will be passed to the callback function;
-   * otherwise, the index of the button will be passed.
-   */
-  onChange?: (value: string | number) => void;
+  children: React.ReactNode;
 }
 
-const onButtonClick = (
-  existingOnClick: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined,
-  onChange: ((value: string | number) => void) | undefined,
-  index: number,
-  event: React.MouseEvent<HTMLButtonElement>
-): void => {
-  if (existingOnClick) {
-    existingOnClick(event);
-  }
-
-  const target = event.currentTarget;
-  if (target && onChange) {
-    if (target.value) {
-      onChange(target.value);
-    } else {
-      onChange(index);
-    }
-  }
-};
-
 /**
- * @deprecated ⚠️ `SegmentedControl` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
+ * `SegmentedControl` is a container component that is responsible for creating a
+ * {@link SegmentedControlModel} and sharing it with its subcomponents using React context. It does
+ * not represent a real element.
+ *
+ * ```tsx
+ * <SegmentedControl items={[]}>{Child components}</SegmentedControl>
+ * ```
+ *
+ * Alternatively, you may pass in a model using the [hoisted model
+ * pattern](/getting-started/for-developers/resources/compound-components/#configuring-a-model).
+ *
+ * ```tsx
+ * const model = useSegmentedControlModel({
+ *   items: [],
+ * });
+ *
+ * <SegmentedControl model={model}>{Child components}</SegmentedControl>;
+ * ```
  */
-export const SegmentedControl = createComponent('div')({
+export const SegmentedControl = createContainer()({
   displayName: 'SegmentedControl',
-  Component: ({value = 0, children, onChange, ...elemProps}: SegmentedControlProps, ref) => {
-    return (
-      <div {...elemProps}>
-        {React.Children.map(
-          children,
-          (
-            child: React.ReactElement<
-              SegmentedControlButtonProps & {
-                onClick?: React.MouseEventHandler<HTMLButtonElement>;
-              } & React.HTMLAttributes<HTMLButtonElement> // segmented control button will have correct props
-            >,
-            index: number
-          ) => {
-            if (typeof child.type === typeof SegmentedControlButton) {
-              return React.cloneElement(child, {
-                toggled: typeof value === 'number' ? index === value : child.props.value === value,
-                onClick: onButtonClick.bind(undefined, child.props.onClick, onChange, index),
-              });
-            }
-
-            return child;
-          }
-        )}
-      </div>
-    );
-  },
+  modelHook: useSegmentedControlModel,
   subComponents: {
-    Button: SegmentedControlButton,
+    /**
+     * `SegmentedControl.List` renders {@link Grid} under the hood. It is a container for
+     * {@link SegmentedControlItem SegmentedControl.Item} subcomponents.
+     *
+     * ```tsx
+     * <SegmentedControl.List>{SegmentedControl.Items}</SegmentedControl.List>
+     * ```
+     */
+    List: SegmentedControlList,
+    /**
+     * `SegmentedControl.Item` is a `button` element built on `BaseButton`. `SegmentedControl.Item`
+     * has a `data-id` prop to handle `onSelect` properly.
+     *
+     * ```tsx
+     * <SegmentedControl.Item data-id="table">Table</SegmentedControl.Item>
+     * ```
+     */
+    Item: SegmentedControlItem,
   },
+})<SegmentedControlProps>(({children}) => {
+  return <>{children}</>;
 });

package/segmented-control/lib/SegmentedControlItem.tsx

@@ -0,0 +1,230 @@
+import * as React from 'react';
+
+import {BaseButton, ButtonContainerProps, buttonStencil} from '@workday/canvas-kit-react/button';
+import {CanvasSystemIcon} from '@workday/design-assets-types';
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {Tooltip, TooltipProps} from '@workday/canvas-kit-react/tooltip';
+import {Text} from '@workday/canvas-kit-react/text';
+import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
+import {useSegmentedControlItem} from './hooks/useSegmentedControlItem';
+
+export interface ItemProps extends ButtonContainerProps {
+  /**
+   * Optionally pass index to the item. This should be done if `SegmentedControl.Item` components were created
+   * via a `[Array::map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)` function. This index will ensure keyboard navigation works even if items are
+   * inserted out of order.
+   */
+  index?: number;
+  /**
+   * The contents of the item. This is text used as the accessible name of the button for screen readers.
+   */
+  children?: React.ReactNode;
+  /**
+   * The identifier of the item. This identifier will be used in change events and for `initialTab`.
+   * If this property is not provided, it will default to a string representation
+   * of the the zero-based index of the item when it was initialized.
+   */
+  'data-id'?: string;
+  /**
+   * Optional id. If not set, it will inherit the ID passed to the `SegmentedControl` component and append the
+   * index at the end. Only set this for advanced cases.
+   */
+  id?: string;
+  /**
+   * Part of the ARIA specification for buttons. Lets screen readers know which button is active. This
+   * should either be `true` or `false`. This is automatically set by the
+   * component and should only be used in advanced cases.
+   */
+  'aria-pressed'?: boolean;
+  /**
+   * The icon of the button.
+   */
+  icon?: CanvasSystemIcon;
+  /**
+   * Tooltip Props
+   */
+  tooltipProps?: Omit<TooltipProps, 'children'>;
+}
+
+export const segmentedControlItemStencil = createStencil({
+  extends: buttonStencil,
+  base: {
+    ...system.type.subtext.large,
+    fontWeight: system.fontWeight.bold,
+    textAlign: 'start',
+    paddingInline: system.space.zero,
+    gap: system.space.x1,
+
+    [buttonStencil.vars.borderRadius]: system.shape.x1,
+    [buttonStencil.vars.label]: system.color.fg.muted.strong,
+    [systemIconStencil.vars.color]: system.color.fg.muted.strong,
+
+    '&:hover, &.hover': {
+      [buttonStencil.vars.background]: system.color.bg.alt.strong,
+      [buttonStencil.vars.label]: system.color.fg.muted.strong,
+      [systemIconStencil.vars.color]: system.color.fg.muted.strong,
+    },
+
+    '&:active, &.active': {
+      [buttonStencil.vars.background]: system.color.bg.alt.strong,
+      [buttonStencil.vars.label]: system.color.fg.muted.strong,
+      [systemIconStencil.vars.color]: system.color.fg.muted.strong,
+    },
+
+    '&:focus-visible, &.focus': {
+      [buttonStencil.vars.label]: system.color.fg.muted.strong,
+      [systemIconStencil.vars.color]: system.color.fg.muted.strong,
+    },
+
+    '&:disabled, &.disabled': {
+      [buttonStencil.vars.background]: system.color.bg.alt.soft,
+    },
+
+    "&[aria-pressed='true']": {
+      [buttonStencil.vars.background]: system.color.bg.default,
+      [buttonStencil.vars.border]: system.color.border.input.default,
+      [systemIconStencil.vars.color]: system.color.fg.strong,
+      [buttonStencil.vars.label]: system.color.fg.strong,
+
+      '&:hover, &.hover': {
+        [systemIconStencil.vars.color]: system.color.fg.strong,
+        [buttonStencil.vars.label]: system.color.fg.strong,
+      },
+
+      '&:disabled, &.disabled': {
+        [buttonStencil.vars.border]: system.color.border.input.default,
+        [buttonStencil.vars.label]: system.color.fg.strong,
+        [systemIconStencil.vars.color]: system.color.fg.strong,
+      },
+    },
+    ':dir(rtl)': {
+      svg: {
+        transform: 'scaleX(-1)',
+      },
+    },
+  },
+  modifiers: {
+    size: {
+      large: {
+        height: system.space.x10,
+        gap: system.space.x2,
+      },
+      medium: {
+        height: system.space.x8,
+      },
+      small: {
+        ...system.type.subtext.medium,
+        fontWeight: system.fontWeight.bold,
+        height: system.space.x6,
+      },
+    },
+    variant: {
+      iconOnly: {},
+      textOnly: {},
+      iconWithText: {},
+    },
+  },
+  compound: [
+    {
+      modifiers: {size: 'large', variant: 'iconOnly'},
+      styles: {
+        minWidth: system.space.x10,
+      },
+    },
+    {
+      modifiers: {size: 'large', variant: 'iconWithText'},
+      styles: {
+        paddingInline: `${px2rem(20)} ${system.space.x6}`,
+      },
+    },
+    {
+      modifiers: {size: 'large', variant: 'textOnly'},
+      styles: {
+        paddingInline: system.space.x6,
+      },
+    },
+    {
+      modifiers: {size: 'medium', variant: 'iconOnly'},
+      styles: {
+        minWidth: system.space.x8,
+      },
+    },
+    {
+      modifiers: {size: 'medium', variant: 'iconWithText'},
+      styles: {
+        paddingInline: `${system.space.x4} ${px2rem(20)}`,
+      },
+    },
+    {
+      modifiers: {size: 'medium', variant: 'textOnly'},
+      styles: {
+        paddingInline: px2rem(20),
+      },
+    },
+    {
+      modifiers: {size: 'small', variant: 'iconOnly'},
+      styles: {
+        minWidth: system.space.x6,
+      },
+    },
+    {
+      modifiers: {size: 'small', variant: 'iconWithText'},
+      styles: {
+        paddingInline: `${system.space.x2} ${system.space.x3}`,
+      },
+    },
+    {
+      modifiers: {size: 'small', variant: 'textOnly'},
+      styles: {
+        paddingInline: system.space.x3,
+      },
+    },
+  ],
+});
+
+type ContainerProps = {
+  tooltipProps?: Omit<TooltipProps, 'children'>;
+  children: React.ReactElement;
+};
+
+const Container = ({tooltipProps, children}: ContainerProps) => {
+  return tooltipProps ? (
+    <Tooltip {...tooltipProps}>{children}</Tooltip>
+  ) : (
+    <React.Fragment>{children}</React.Fragment>
+  );
+};
+
+const getVariant = (icon: CanvasSystemIcon | undefined, children: React.ReactNode) => {
+  if (icon && children) {
+    return 'iconWithText';
+  } else if (!icon && children) {
+    return 'textOnly';
+  } else {
+    return 'iconOnly';
+  }
+};
+
+export const SegmentedControlItem = createSubcomponent('button')({
+  displayName: 'SegmentedControl.Item',
+  modelHook: useSegmentedControlModel,
+  elemPropsHook: useSegmentedControlItem,
+})<ItemProps>(({children, icon, tooltipProps, ...elemProps}, Element, {state: {size}}) => {
+  const variant = getVariant(icon, children);
+  const iconSize = size === 'small' ? 'extraSmall' : 'small';
+
+  return (
+    <Container tooltipProps={tooltipProps}>
+      <BaseButton
+        as={Element}
+        {...handleCsProp(elemProps, segmentedControlItemStencil({size, variant}))}
+      >
+        {icon && <BaseButton.Icon icon={icon} size={iconSize} />}
+        {children && <Text>{children}</Text>}
+      </BaseButton>
+    </Container>
+  );
+});