@workday/canvas-kit-react 16.0.0-alpha.0462-next.0 → 16.0.0-alpha.0464-next.0

package/dist/es6/segmented-control/lib/SegmentedControlItem.js

@@ -5,64 +5,64 @@ import { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { systemIconStencil } from '@workday/canvas-kit-react/icon';
 import { Text } from '@workday/canvas-kit-react/text';
 import { Tooltip } from '@workday/canvas-kit-react/tooltip';
-import { colorSpace, createStencil, handleCsProp } from '@workday/canvas-kit-styling';
-import { system } from '@workday/canvas-tokens-web';
+import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { base, system } from '@workday/canvas-tokens-web';
 import { useSegmentedControlItem } from './hooks/useSegmentedControlItem';
 import { useSegmentedControlModel } from './hooks/useSegmentedControlModel';
 export const segmentedControlItemStencil = createStencil({
     extends: buttonStencil,
-    base: { name: "2mfbpc", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));font-weight:var(--cnvs-sys-font-weight-bold);text-align:start;padding-inline:0;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));--borderRadius-button-a19f67:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));--label-button-a19f67:var(--cnvs-sys-color-fg-muted-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);&:hover, &.hover{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:active, &.active{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:focus-visible, &.focus{--label-button-a19f67:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-strong);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--label-button-a19f67:var(--cnvs-sys-color-fg-muted-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);}&[aria-pressed='true']{--background-button-a19f67:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--border-button-a19f67:var(--cnvs-sys-color-border-input-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);&:hover, &.hover{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);}}:dir(rtl){svg{transform:scaleX(-1);}}" },
+    base: { name: "1a5vzh", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);text-align:start;padding-inline:0;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-muted-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-hover-default);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-pressed-default);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:focus-visible, &.focus{--label-button-a19f67:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-strong);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--label-button-a19f67:var(--cnvs-sys-color-fg-muted-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);}&[aria-pressed='true']{--background-button-a19f67:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);box-shadow:var(--cnvs-sys-depth-2);&:hover, &.hover{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);}&:focus-visible, &.focus{box-shadow:0 0 0 0.125rem var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1))),0 0 0 0.25rem var(--cnvs-sys-color-brand-border-primary);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);}}:dir(rtl){svg{transform:scaleX(-1);}}" },
     modifiers: {
         size: {
-            large: { name: "26cc28", styles: "height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" },
-            medium: { name: "3mhjwq", styles: "height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));" },
-            small: { name: "2fxe0a", styles: "font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));font-weight:var(--cnvs-sys-font-weight-bold);height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));" }
+            large: { name: "3ofsmr", styles: "height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));" },
+            medium: { name: "2vjldc", styles: "height:var(--cnvs-base-size-350, 1.75rem);font-weight:var(--cnvs-sys-font-weight-semibold, 600);" },
+            small: { name: "3hli5n", styles: "font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));font-weight:var(--cnvs-sys-font-weight-medium);height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));gap:var(--cnvs-base-size-25, 0.125rem);" }
         },
         variant: {
-            iconOnly: { name: "482srq", styles: "" },
-            textOnly: { name: "1gvs2d", styles: "" },
-            iconWithText: { name: "2gnle5", styles: "" }
+            iconOnly: { name: "3j27lk", styles: "" },
+            textOnly: { name: "1k758v", styles: "" },
+            iconWithText: { name: "2kn9nw", styles: "" }
         }
     },
     compound: [
         {
             modifiers: { size: 'large', variant: 'iconOnly' },
-            styles: { name: "2dqtcf", styles: "min-width:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" }
+            styles: { name: "2g2eij", styles: "min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));" }
         },
         {
             modifiers: { size: 'large', variant: 'iconWithText' },
-            styles: { name: "bj6ly", styles: "padding-inline:var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem)) var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));" }
+            styles: { name: "2i43bn", styles: "padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));" }
         },
         {
             modifiers: { size: 'large', variant: 'textOnly' },
-            styles: { name: "2wqchc", styles: "padding-inline:var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));" }
+            styles: { name: "2mrwg2", styles: "padding-inline:var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));" }
         },
         {
             modifiers: { size: 'medium', variant: 'iconOnly' },
-            styles: { name: "1cigiy", styles: "min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));" }
+            styles: { name: "1w5x7w", styles: "min-width:var(--cnvs-base-size-350, 1.75rem);" }
         },
         {
             modifiers: { size: 'medium', variant: 'iconWithText' },
-            styles: { name: "pfwr1", styles: "padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));" }
+            styles: { name: "10t3qa", styles: "padding-inline:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
         },
         {
             modifiers: { size: 'medium', variant: 'textOnly' },
-            styles: { name: "3d4865", styles: "padding-inline:var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));" }
+            styles: { name: "sgty4", styles: "padding-inline:var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));" }
         },
         {
             modifiers: { size: 'small', variant: 'iconOnly' },
-            styles: { name: "csa7w", styles: "min-width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));" }
+            styles: { name: "36lfmb", styles: "min-width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));" }
         },
         {
             modifiers: { size: 'small', variant: 'iconWithText' },
-            styles: { name: "32c5wa", styles: "padding-inline:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
+            styles: { name: "3haxrq", styles: "padding-inline:var(--cnvs-base-size-75, 0.375rem) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
         },
         {
             modifiers: { size: 'small', variant: 'textOnly' },
-            styles: { name: "3tat0u", styles: "padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
+            styles: { name: "akzny", styles: "padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
         }
     ]
-}, "segmented-control-item-7b0971");
+}, "segmented-control-item-652603");
 const Container = ({ tooltipProps, children }) => {
     return tooltipProps ? (_jsx(Tooltip, { ...tooltipProps, children: children })) : (_jsx(React.Fragment, { children: children }));
 };

package/dist/es6/segmented-control/lib/SegmentedControlList.d.ts

@@ -6,6 +6,18 @@ export interface SegmentedControlListProps<T = any> extends Omit<Partial<Extract
     children: ((item: T) => React.ReactNode) | React.ReactNode;
 }
 export declare const segmentedControlListStencil: import("@workday/canvas-kit-styling").Stencil<{
+    size: {
+        large: {
+            padding: "var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem))";
+        };
+        medium: {
+            padding: "var(--cnvs-base-size-25, 0.125rem)";
+        };
+        small: {
+            padding: "var(--cnvs-base-size-25, 0.125rem)";
+            gap: "var(--cnvs-base-size-25, 0.125rem)";
+        };
+    };
     orientation: {
         vertical: ({ items }: {
             items: `--${string}`;

package/dist/es6/segmented-control/lib/SegmentedControlList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlList.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAMtD,MAAM,WAAW,yBAAyB,CAAC,CAAC,GAAG,GAAG,CAChD,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACnE,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CAC5D;AAED,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;gBAsBtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkB/B,CAAC"}
+{"version":3,"file":"SegmentedControlList.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAMtD,MAAM,WAAW,yBAAyB,CAAC,CAAC,GAAG,GAAG,CAChD,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACnE,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CAC5D;AAED,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAkCtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmB/B,CAAC"}

package/dist/es6/segmented-control/lib/SegmentedControlList.js

@@ -2,20 +2,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useListRenderItems } from '@workday/canvas-kit-react/collection';
 import { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
-import { system } from '@workday/canvas-tokens-web';
+import { base, system } from '@workday/canvas-tokens-web';
 import { useSegmentedControlModel } from './hooks/useSegmentedControlModel';
 export const segmentedControlListStencil = createStencil({
     vars: {
         items: '',
     },
-    base: { name: "40q6zj", styles: "box-sizing:border-box;display:inline-grid;background-color:var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));border:0 solid var(--cnvs-sys-color-border-transparent);border-radius:var(--cnvs-sys-shape-lg, 0.75rem);padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));grid-gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" },
+    base: { name: "4d0nnu", styles: "box-sizing:border-box;display:inline-grid;background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));border:0 solid var(--cnvs-sys-color-border-transparent);border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));grid-gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));" },
     modifiers: {
+        size: {
+            large: { name: "3qywaa", styles: "padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));" },
+            medium: { name: "41xl8e", styles: "padding:var(--cnvs-base-size-25, 0.125rem);" },
+            small: { name: "36z2j", styles: "padding:var(--cnvs-base-size-25, 0.125rem);gap:var(--cnvs-base-size-25, 0.125rem);" }
+        },
         orientation: {
-            vertical: { name: "1f86o9", styles: "grid-template-rows:repeat(var(--items-segmented-control-list-55b1aa), 1fr);" },
-            horizontal: { name: "40u8ek", styles: "grid-template-columns:repeat(var(--items-segmented-control-list-55b1aa), 1fr);" }
+            vertical: { name: "3pptd9", styles: "grid-template-rows:repeat(var(--items-segmented-control-list-abbea3), 1fr);" },
+            horizontal: { name: "2ocxki", styles: "grid-template-columns:repeat(var(--items-segmented-control-list-abbea3), 1fr);" }
         }
     }
-}, "segmented-control-list-55b1aa");
+}, "segmented-control-list-abbea3");
 export const SegmentedControlList = createSubcomponent('div')({
     displayName: 'SegmentedControl.List',
     modelHook: useSegmentedControlModel,
@@ -23,5 +28,6 @@ export const SegmentedControlList = createSubcomponent('div')({
     return (_jsx(Element, { role: "group", ...handleCsProp(elemProps, segmentedControlListStencil({
             items: `${model.state.items.length}`,
             orientation: model.state.orientation,
+            size: model.state.size,
         })), children: useListRenderItems(model, children) }));
 });

package/dist/es6/toast/lib/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../toast/lib/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAWtD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC;CAAG;AA6C5F;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;IAId;;;;;;;;;OASG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;;;;IAEH;;OAEG;;CAYL,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../toast/lib/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAWtD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC;CAAG;AAqD5F;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;IAId;;;;;;;;;OASG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;;;;IAEH;;OAEG;;CAYL,CAAC"}

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

@@ -3,7 +3,7 @@ import { createContainer } from '@workday/canvas-kit-react/common';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { Popup } from '@workday/canvas-kit-react/popup';
 import { createStencil, px2rem } from '@workday/canvas-kit-styling';
-import { system } from '@workday/canvas-tokens-web';
+import { base, system } from '@workday/canvas-tokens-web';
 import { ToastBody } from './ToastBody';
 import { ToastCloseIcon } from './ToastCloseIcon';
 import { ToastIcon } from './ToastIcon';
@@ -42,8 +42,8 @@ const getAriaAttributes = (mode, id) => {
     }
 };
 const toastStencil = createStencil({
-    base: { name: "2iwoo", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:22.5rem;padding:0;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));border-radius:var(--cnvs-sys-shape-xl, var(--cnvs-sys-shape-x4, 1rem));" }
-}, "toast-3c71ec");
+    base: { name: "3qkpd3", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:22.5rem;padding-block:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));gap:var(--cnvs-base-size-150, 0.75rem);border-radius:var(--cnvs-sys-shape-xl, var(--cnvs-sys-shape-x4, 1rem));border:0.0625rem solid var(--cnvs-sys-color-border-default);background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));box-shadow:var(--cnvs-sys-depth-3);@media (forced-colors: active){outline:0.0625rem solid CanvasText;}" }
+}, "toast-4e8aec");
 /**
  * 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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastBody.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastBody.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAItD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC;CAAG;AAE1E,eAAO,MAAM,gBAAgB,iJAS3B,CAAC;AAEH,eAAO,MAAM,SAAS,oFASpB,CAAC"}
+{"version":3,"file":"ToastBody.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastBody.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAGtD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC;CAAG;AAE1E,eAAO,MAAM,gBAAgB,iJAQ3B,CAAC;AAEH,eAAO,MAAM,SAAS,oFASpB,CAAC"}

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

@@ -2,10 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createComponent } from '@workday/canvas-kit-react/common';
 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: "ocyto", styles: "box-sizing:border-box;align-items:flex-start;flex-direction:column;justify-content:center;padding-block:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));flex-grow:1;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));" }
-}, "toast-body-ac2901");
+    base: { name: "3nmn23", styles: "box-sizing:border-box;align-items:flex-start;flex-direction:column;justify-content:center;flex-grow:1;gap:0;" }
+}, "toast-body-36e90e");
 export const ToastBody = createComponent('div')({
     displayName: 'Toast.Body',
     Component: ({ children, ...elemProps }, ref, Element) => {

package/dist/es6/toast/lib/ToastCloseIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastCloseIcon.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastCloseIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAGtD,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC;CAAG;AAE3F,eAAO,MAAM,qBAAqB,iJAIhC,CAAC;AAEH,eAAO,MAAM,cAAc,4FAYzB,CAAC"}
+{"version":3,"file":"ToastCloseIcon.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastCloseIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAGtD,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC;CAAG;AAE3F,eAAO,MAAM,qBAAqB,iJAMhC,CAAC;AAEH,eAAO,MAAM,cAAc,4FAYzB,CAAC"}

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

@@ -2,13 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { Popup } from '@workday/canvas-kit-react/popup';
-import { createStencil } from '@workday/canvas-kit-styling';
+import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 export const toastCloseIconStencil = createStencil({
-    base: { name: "22ooiv", styles: "box-sizing:border-box;position:relative;" }
-}, "toast-close-icon-f7cf19");
+    base: { name: "292ls0", styles: "box-sizing:border-box;position:absolute;inset-block-start:0.125rem;inset-inline-end:0.125rem;" }
+}, "toast-close-icon-2d1000");
 export const ToastCloseIcon = createComponent('button')({
     displayName: 'Toast.CloseIcon',
     Component: (elemProps, ref, Element) => {
-        return (_jsx(Popup.CloseIcon, { as: Element, ref: ref, size: "small", ...mergeStyles(elemProps, toastCloseIconStencil()) }));
+        return (_jsx(Popup.CloseIcon, { as: Element, ref: ref, size: "extraSmall", ...mergeStyles(elemProps, toastCloseIconStencil()) }));
     },
 });

package/dist/es6/toast/lib/ToastIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastIcon.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAI3E,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;CAAG;AAE9E,eAAO,MAAM,gBAAgB,iJAK3B,CAAC;AAEH,eAAO,MAAM,SAAS,oFAKpB,CAAC"}
+{"version":3,"file":"ToastIcon.d.ts","sourceRoot":"","sources":["../../../../toast/lib/ToastIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAI3E,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;CAAG;AAE9E,eAAO,MAAM,gBAAgB,iJAI3B,CAAC;AAEH,eAAO,MAAM,SAAS,oFAYpB,CAAC"}

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

@@ -2,13 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
-import { base, system } from '@workday/canvas-tokens-web';
+import { component } from '@workday/canvas-tokens-web';
 export const toastIconStencil = createStencil({
-    base: { name: "1cz629", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-base-size-150, 0.75rem);" }
-}, "toast-icon-4762f0");
+    base: { name: "19wdy9", styles: "box-sizing:border-box;align-self:start;" }
+}, "toast-icon-7830d1");
 export const ToastIcon = createComponent('div')({
     displayName: 'Toast.Icon',
     Component: (elemProps, ref, Element) => {
-        return _jsx(SystemIcon, { ref: ref, as: Element, ...handleCsProp(elemProps, toastIconStencil()) });
+        return (_jsx(SystemIcon, { ref: ref, as: Element, size: component.legacy.systemIcon.size.md, ...handleCsProp(elemProps, toastIconStencil()) }));
     },
 });

package/dist/es6/tooltip/lib/TooltipContainer.d.ts

@@ -20,10 +20,7 @@ export interface TooltipContainerProps extends React.HTMLAttributes<HTMLDivEleme
 export declare const tooltipContainerStencil: import("@workday/canvas-kit-styling").Stencil<{
     elementHasFocus: {
         true: {
-            padding: string;
-            '&:before': {
-                margin: "var(--cnvs-base-size-75, 0.375rem)";
-            };
+            margin: string;
         };
     };
 }, {}, {

package/dist/es6/tooltip/lib/TooltipContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,eAAe,EAGhB,MAAM,kCAAkC,CAAC;AAK1C,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAuBD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;gBAuElC,CAAC;AAEH,eAAO,MAAM,gBAAgB,2FA4B3B,CAAC"}
+{"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,eAAe,EAGhB,MAAM,kCAAkC,CAAC;AAK1C,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAuBD,eAAO,MAAM,uBAAuB;;;;;;;;;gBAkElC,CAAC;AAEH,eAAO,MAAM,gBAAgB,2FA4B3B,CAAC"}

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

@@ -17,10 +17,10 @@ export const tooltipContainerStencil = createStencil({
         tooltipTransformOriginHorizontal: '',
         tooltipTransformOriginVertical: '',
     },
-    base: { name: "1b889m", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));display:inline-flex;position:relative;padding:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));color:var(--cnvs-sys-color-fg-inverse);animation-name:animation-3s4los;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-0d74d6) var(--tooltipTransformOriginHorizontal-tooltip-container-0d74d6);a{color:var(--cnvs-sys-color-fg-inverse);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));outline:0.0625rem solid transparent;outline-offset:-0.0625rem;z-index:-1;margin:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));background-color:var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)));position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:var(--cnvs-sys-depth-2);}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}" },
+    base: { name: "259blp", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);display:inline-flex;position:relative;padding:0.375rem var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));color:var(--cnvs-sys-color-fg-default);animation-name:animation-3s4los;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-0d74d6) var(--tooltipTransformOriginHorizontal-tooltip-container-0d74d6);margin:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));a{color:var(--cnvs-sys-color-fg-default);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));border:0.0625rem solid var(--cnvs-sys-color-border-default);z-index:-1;margin:0;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:var(--cnvs-sys-depth-2);}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}@media (forced-colors: active){outline:0.0625rem solid CanvasText;}" },
     modifiers: {
         elementHasFocus: {
-            true: { name: "2hslnx", styles: "padding:calc(var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) - calc(var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem)) / 2));&:before{margin:var(--cnvs-base-size-75, 0.375rem);}" }
+            true: { name: "ak2vn", styles: "margin:0.375rem;" }
         }
     }
 }, "tooltip-container-0d74d6");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "16.0.0-alpha.0462-next.0",
+  "version": "16.0.0-alpha.0464-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",
@@ -53,8 +53,8 @@
     "@tanstack/react-virtual": "^3.13.9",
     "@workday/canvas-colors-web": "^2.0.0",
     "@workday/canvas-expressive-icons-web": "1.0.2",
-    "@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0462-next.0",
-    "@workday/canvas-kit-styling": "^16.0.0-alpha.0462-next.0",
+    "@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0464-next.0",
+    "@workday/canvas-kit-styling": "^16.0.0-alpha.0464-next.0",
     "@workday/canvas-system-icons-web": "4.0.4",
     "@workday/canvas-tokens-web": "4.4.0-beta.6",
     "@workday/design-assets-types": "^0.3.0",
@@ -69,5 +69,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "d80e8648cba4c3445351b3277c46f5c418f0de93"
+  "gitHead": "e91ae68242623c9e4d24b9fbdc3ce7ea8368c425"
 }

package/segmented-control/lib/SegmentedControlItem.tsx

@@ -5,9 +5,9 @@ import {createSubcomponent} from '@workday/canvas-kit-react/common';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {Text} from '@workday/canvas-kit-react/text';
 import {Tooltip, TooltipProps} from '@workday/canvas-kit-react/tooltip';
-import {colorSpace, createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 import {CanvasSystemIcon} from '@workday/canvas-system-icons-web';
-import {system} from '@workday/canvas-tokens-web';
+import {base, system} from '@workday/canvas-tokens-web';
 
 import {useSegmentedControlItem} from './hooks/useSegmentedControlItem';
 import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
@@ -53,37 +53,24 @@ export interface ItemProps extends ButtonContainerProps {
 export const segmentedControlItemStencil = createStencil({
   extends: buttonStencil,
   base: {
-    fontFamily: system.fontFamily.default,
-    fontSize: system.legacy.fontSize.subtext.lg,
-    lineHeight: system.legacy.lineHeight.subtext.lg,
-    letterSpacing: system.legacy.letterSpacing.subtext.lg,
-    fontWeight: system.fontWeight.bold,
+    ...system.legacy.type.subtext.lg,
+    fontWeight: system.fontWeight.medium,
     textAlign: 'start',
     paddingInline: 0,
     gap: system.legacy.gap.xs,
 
-    [buttonStencil.vars.borderRadius]: system.legacy.shape.md,
+    [buttonStencil.vars.borderRadius]: system.legacy.shape.full,
     [buttonStencil.vars.label]: system.color.fg.muted.default,
     [systemIconStencil.vars.color]: system.color.fg.muted.default,
 
     '&:hover, &.hover': {
-      [buttonStencil.vars.background]: colorSpace.darken({
-        color: system.legacy.color.surface.alt.strong,
-        fallback: system.color.bg.alt.strong,
-        mixinColor: system.legacy.color.surface.overlay.mixin,
-        mixinValue: system.legacy.opacity.surface.hover,
-      }),
+      [buttonStencil.vars.background]: system.color.surface.overlay.hover.default,
       [buttonStencil.vars.label]: system.color.fg.strong,
       [systemIconStencil.vars.color]: system.color.fg.strong,
     },
 
     '&:active, &.active': {
-      [buttonStencil.vars.background]: colorSpace.darken({
-        color: system.legacy.color.surface.alt.strong,
-        fallback: system.color.bg.alt.strong,
-        mixinColor: system.legacy.color.surface.overlay.mixin,
-        mixinValue: system.legacy.opacity.surface.pressed,
-      }),
+      [buttonStencil.vars.background]: system.color.surface.overlay.pressed.default,
       [buttonStencil.vars.label]: system.color.fg.strong,
       [systemIconStencil.vars.color]: system.color.fg.strong,
     },
@@ -102,15 +89,19 @@ export const segmentedControlItemStencil = createStencil({
 
     "&[aria-pressed='true']": {
       [buttonStencil.vars.background]: system.legacy.color.surface.default,
-      [buttonStencil.vars.border]: system.color.border.input.default,
       [systemIconStencil.vars.color]: system.color.fg.strong,
       [buttonStencil.vars.label]: system.color.fg.strong,
+      boxShadow: system.depth[2],
 
       '&:hover, &.hover': {
         [systemIconStencil.vars.color]: system.color.fg.strong,
         [buttonStencil.vars.label]: system.color.fg.strong,
       },
 
+      '&:focus-visible, &.focus': {
+        boxShadow: `0 0 0 ${px2rem(2)} ${system.legacy.color.border.inverse.default},0 0 0 ${px2rem(4)} ${system.color.brand.border.primary}`,
+      },
+
       '&:disabled, &.disabled': {
         [buttonStencil.vars.opacity]: system.opacity.disabled,
       },
@@ -124,19 +115,21 @@ export const segmentedControlItemStencil = createStencil({
   modifiers: {
     size: {
       large: {
-        height: system.legacy.size.md,
-        gap: system.legacy.gap.sm,
+        height: system.legacy.size.sm,
+        fontSize: system.legacy.fontSize.subtext.lg,
       },
       medium: {
-        height: system.legacy.size.sm,
+        height: base.legacy.size350,
+        fontWeight: system.sana.fontWeight.semibold,
       },
       small: {
         fontFamily: system.fontFamily.default,
         fontSize: system.legacy.fontSize.subtext.md,
         lineHeight: system.legacy.lineHeight.subtext.md,
         letterSpacing: system.legacy.letterSpacing.subtext.md,
-        fontWeight: system.fontWeight.bold,
+        fontWeight: system.fontWeight.medium,
         height: system.legacy.size.xs,
+        gap: base.legacy.size25,
       },
     },
     variant: {
@@ -149,13 +142,13 @@ export const segmentedControlItemStencil = createStencil({
     {
       modifiers: {size: 'large', variant: 'iconOnly'},
       styles: {
-        minWidth: system.legacy.size.md,
+        minWidth: system.legacy.size.sm,
       },
     },
     {
       modifiers: {size: 'large', variant: 'iconWithText'},
       styles: {
-        paddingInline: `${system.legacy.padding.lg} ${system.legacy.padding.xl}`,
+        paddingInline: `${system.legacy.padding.sm} ${system.legacy.padding.md}`,
       },
     },
     {
@@ -167,13 +160,13 @@ export const segmentedControlItemStencil = createStencil({
     {
       modifiers: {size: 'medium', variant: 'iconOnly'},
       styles: {
-        minWidth: system.legacy.size.sm,
+        minWidth: base.legacy.size350,
       },
     },
     {
       modifiers: {size: 'medium', variant: 'iconWithText'},
       styles: {
-        paddingInline: `${system.legacy.padding.md} ${system.legacy.padding.lg}`,
+        paddingInline: `${system.legacy.padding.xs} ${system.legacy.padding.sm}`,
       },
     },
     {
@@ -191,7 +184,7 @@ export const segmentedControlItemStencil = createStencil({
     {
       modifiers: {size: 'small', variant: 'iconWithText'},
       styles: {
-        paddingInline: `${system.legacy.padding.xs} ${system.legacy.padding.sm}`,
+        paddingInline: `${base.legacy.size75} ${system.legacy.padding.xs}`,
       },
     },
     {

package/segmented-control/lib/SegmentedControlList.tsx

@@ -4,7 +4,7 @@ import {useListRenderItems} from '@workday/canvas-kit-react/collection';
 import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {Grid} from '@workday/canvas-kit-react/layout';
 import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
+import {base, system} from '@workday/canvas-tokens-web';
 
 import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
 
@@ -20,13 +20,25 @@ export const segmentedControlListStencil = createStencil({
   },
   base: {
     display: 'inline-grid',
-    backgroundColor: system.legacy.color.surface.alt.strong,
+    backgroundColor: system.legacy.color.surface.alt.default,
     border: `0 solid ${system.color.border.transparent}`,
-    borderRadius: system.legacy.shape.lg,
+    borderRadius: system.legacy.shape.full,
     padding: system.legacy.padding.xxs,
-    gridGap: system.legacy.gap.sm,
+    gridGap: system.legacy.gap.xs,
   },
   modifiers: {
+    size: {
+      large: {
+        padding: system.legacy.padding.xxs,
+      },
+      medium: {
+        padding: base.legacy.size25,
+      },
+      small: {
+        padding: base.legacy.size25,
+        gap: base.legacy.size25,
+      },
+    },
     orientation: {
       vertical: ({items}) => ({
         gridTemplateRows: `repeat(${items}, 1fr)`,
@@ -50,6 +62,7 @@ export const SegmentedControlList = createSubcomponent('div')({
         segmentedControlListStencil({
           items: `${model.state.items.length}`,
           orientation: model.state.orientation,
+          size: model.state.size,
         })
       )}
     >

package/toast/lib/Toast.tsx

@@ -4,7 +4,7 @@ import {ExtractProps, createContainer} from '@workday/canvas-kit-react/common';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {Popup} from '@workday/canvas-kit-react/popup';
 import {createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
+import {base, system} from '@workday/canvas-tokens-web';
 
 import {ToastBody} from './ToastBody';
 import {ToastCloseIcon} from './ToastCloseIcon';
@@ -52,9 +52,17 @@ const toastStencil = createStencil({
     display: 'flex',
     flexDirection: 'row',
     width: px2rem(360),
-    padding: 0,
-    gap: system.legacy.gap.xs,
+    paddingBlock: system.legacy.padding.sm,
+    paddingInline: `${system.legacy.padding.md} ${system.legacy.padding.xl}`,
+    gap: base.legacy.size150,
     borderRadius: system.legacy.shape.xl,
+    border: `${px2rem(1)} solid ${system.color.border.default}`,
+    backgroundColor: system.legacy.color.surface.default,
+    boxShadow: system.depth[3],
+
+    '@media (forced-colors: active)': {
+      outline: `${px2rem(1)} solid CanvasText`,
+    },
   },
 });
 

package/toast/lib/ToastBody.tsx

@@ -2,7 +2,6 @@ import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
 import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {Popup} from '@workday/canvas-kit-react/popup';
 import {createStencil} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
 
 export interface ToastBodyProps extends ExtractProps<typeof Popup.Body> {}
 
@@ -11,9 +10,8 @@ export const toastBodyStencil = createStencil({
     alignItems: 'flex-start',
     flexDirection: 'column',
     justifyContent: 'center',
-    paddingBlock: system.legacy.padding.md,
     flexGrow: 1,
-    gap: system.legacy.gap.xs,
+    gap: 0,
   },
 });
 

package/toast/lib/ToastCloseIcon.tsx

@@ -1,13 +1,15 @@
 import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {Popup} from '@workday/canvas-kit-react/popup';
-import {createStencil} from '@workday/canvas-kit-styling';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
 
 export interface ToastCloseIconProps extends ExtractProps<typeof Popup.CloseIcon, never> {}
 
 export const toastCloseIconStencil = createStencil({
   base: {
-    position: 'relative',
+    position: 'absolute',
+    insetBlockStart: px2rem(2),
+    insetInlineEnd: px2rem(2),
   },
 });
 
@@ -18,7 +20,7 @@ export const ToastCloseIcon = createComponent('button')({
       <Popup.CloseIcon
         as={Element}
         ref={ref}
-        size="small"
+        size="extraSmall"
         {...mergeStyles(elemProps, toastCloseIconStencil())}
       />
     );