@workday/canvas-kit-react 17.0.0-alpha.0631-next.0 → 17.0.0-alpha.0635-next.0

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

@@ -1,7 +1,12 @@
 import React from 'react';
 import { defaultGetId, useListModel, useOverflowListModel, } from '@workday/canvas-kit-react/collection';
-import { createModelHook, useModalityType } from '@workday/canvas-kit-react/common';
+import { createModelHook, slugify, useModalityType } from '@workday/canvas-kit-react/common';
 import { useMenuModel } from '@workday/canvas-kit-react/menu';
+/**
+ * This constant is used as the stable identifier for the overflow button in the tabs collection.
+ * It uses a `__` prefix to avoid conflicts with user-provided item IDs.
+ */
+export const TABS_OVERFLOW_BUTTON_ID = '__tabs-overflow__';
 /**
  * The TabsModel extends the [Collection
  * System](/get-started/for-developers/guides/collection-api/). Tabs have tab items and
@@ -44,11 +49,73 @@ export const useTabsModel = createModelHook({
     requiredConfig: useOverflowListModel.requiredConfig,
     contextOverride: useOverflowListModel.Context,
 })(config => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const initialSelectedRef = React.useRef(config.initialTab);
-    const getId = config.getId || defaultGetId;
+    const userGetId = config.getId || defaultGetId;
     const modality = useModalityType();
+    // Stable object so getId can recognize the synthetic overflow item. Callers
+    // often pass a getId that only understands their own item shape (for example
+    // `item => item.contextId`). Without this, the overflow item gets an empty id
+    // and Tabs.List renders it as a normal tab.
+    const overflowItemRef = React.useRef({
+        id: TABS_OVERFLOW_BUTTON_ID,
+        text: 'More',
+    });
+    const getId = (item) => {
+        if (item === overflowItemRef.current) {
+            return TABS_OVERFLOW_BUTTON_ID;
+        }
+        const id = userGetId(item);
+        if (id === TABS_OVERFLOW_BUTTON_ID) {
+            throw new Error(`Tabs item id "${TABS_OVERFLOW_BUTTON_ID}" is reserved for the overflow tab. Choose a different id.`);
+        }
+        return id;
+    };
+    // When using dynamic items, append a synthetic overflow button item to the
+    // items array. This ensures the overflow button is included in the navigation
+    // sequence for roving tabindex. The overflow button component will handle
+    // conditional rendering (not showing when there are no hidden items).
+    // The overflow button is NOT included in itemSizeCache (measured separately
+    // via setOverflowTargetSize), so it won't be incorrectly hidden.
+    const itemsWithOverflowButton = React.useMemo(() => {
+        var _a;
+        if ((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) {
+            return [...config.items, overflowItemRef.current];
+        }
+        return config.items;
+    }, [config.items]);
+    // Track whether the overflow button should be non-interactive based on previous
+    // render's hiddenIds. We use a ref because hiddenIds isn't available until after
+    // the model is created, but we need to pass nonInteractiveIds to the model config.
+    // On first render, assume non-interactive (no overflow calculated yet).
+    // On subsequent renders, use the previous hiddenIds.length to determine.
+    const prevHiddenIdsLengthRef = React.useRef(0);
+    const [, setNonInteractiveTick] = React.useState(0);
+    const overflowButtonNonInteractive = !!((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) && prevHiddenIdsLengthRef.current === 0;
+    // Compute nonInteractiveIds to pass to the model, including overflow button when appropriate
+    const nonInteractiveIdsForModel = React.useMemo(() => {
+        const baseIds = config.nonInteractiveIds || [];
+        if (overflowButtonNonInteractive) {
+            return [...baseIds, TABS_OVERFLOW_BUTTON_ID];
+        }
+        return baseIds;
+    }, [config.nonInteractiveIds, overflowButtonNonInteractive]);
+    // Stores the ID of a tab that should receive focus after the menu closes.
+    // This is used when selecting a tab from the overflow menu - we want focus
+    // to go to the newly selected tab, not back to the overflow button.
+    const pendingFocusTabIdRef = React.useRef(null);
+    const pendingFocusRafOuterRef = React.useRef(0);
+    const pendingFocusRafInnerRef = React.useRef(0);
+    React.useLayoutEffect(() => {
+        return () => {
+            cancelAnimationFrame(pendingFocusRafOuterRef.current);
+            cancelAnimationFrame(pendingFocusRafInnerRef.current);
+        };
+    }, []);
     const model = useOverflowListModel(useOverflowListModel.mergeConfig(config, {
+        items: itemsWithOverflowButton,
+        getId,
+        nonInteractiveIds: nonInteractiveIdsForModel,
         shouldCalculateOverflow: modality !== 'touch',
         orientation: config.orientation || 'horizontal',
         onRegisterItem(data) {
@@ -59,11 +126,64 @@ export const useTabsModel = createModelHook({
         },
         initialSelectedIds: config.initialTab
             ? [config.initialTab]
-            : ((_a = config.items) === null || _a === void 0 ? void 0 : _a.length)
+            : ((_b = config.items) === null || _b === void 0 ? void 0 : _b.length)
                 ? [getId(config.items[0])]
                 : [],
         shouldVirtualize: false,
     }));
+    // Update the ref after each render so the next render knows the current hiddenIds.length.
+    // If hiddenIds.length changed (e.g. overflow just calculated), force a re-render so
+    // we pass the correct nonInteractiveIds and the overflow button is not stuck disabled.
+    React.useLayoutEffect(() => {
+        const nextLen = model.state.hiddenIds.length;
+        if (prevHiddenIdsLengthRef.current !== nextLen) {
+            prevHiddenIdsLengthRef.current = nextLen;
+            setNonInteractiveTick(t => t + 1);
+        }
+        else {
+            prevHiddenIdsLengthRef.current = nextLen;
+        }
+    }, [model.state.hiddenIds.length]);
+    // When the cursor is on an item that isn't in the DOM, move it to a visible one so the
+    // roving tabindex lands on a focusable element. This covers: (1) cursor on a hidden tab when
+    // only "More" is visible, and (2) cursor on the overflow button when we widen and it unmounts.
+    React.useLayoutEffect(() => {
+        var _a;
+        const { cursorId, hiddenIds, items } = model.state;
+        if (!cursorId) {
+            return;
+        }
+        const currentCursorId = typeof cursorId === 'string' ? cursorId : ((_a = cursorId.slice(-1)[0]) !== null && _a !== void 0 ? _a : '');
+        const cursorOnHidden = currentCursorId ? hiddenIds.includes(currentCursorId) : false;
+        const cursorOnOverflowWhenNoOverflow = currentCursorId === TABS_OVERFLOW_BUTTON_ID && hiddenIds.length === 0;
+        if (cursorOnHidden) {
+            // Move to first visible item (including overflow button when it's the only one visible)
+            const firstVisible = items.find(item => !hiddenIds.includes(item.id));
+            if (firstVisible) {
+                model.events.goTo({ id: firstVisible.id });
+            }
+        }
+        else if (cursorOnOverflowWhenNoOverflow) {
+            // Overflow button unmounted; move to selected tab or first tab (not the overflow button)
+            const selectedIds = model.state.selectedIds;
+            const selectedId = selectedIds !== 'all' && Array.isArray(selectedIds) && selectedIds.length
+                ? selectedIds[0]
+                : undefined;
+            const firstVisibleTab = items.find(item => item.id !== TABS_OVERFLOW_BUTTON_ID && !hiddenIds.includes(item.id));
+            const targetId = selectedId && !hiddenIds.includes(selectedId) ? selectedId : firstVisibleTab === null || firstVisibleTab === void 0 ? void 0 : firstVisibleTab.id;
+            if (targetId) {
+                model.events.goTo({ id: targetId });
+            }
+        }
+        // Use field-level deps instead of `model.state` so this does not re-run on every model update.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        model.state.cursorId,
+        model.state.hiddenIds,
+        model.state.items,
+        model.state.selectedIds,
+        model.events,
+    ]);
     const panels = useListModel();
     const state = {
         ...model.state,
@@ -100,12 +220,31 @@ export const useTabsModel = createModelHook({
         // `getId`/`getTextValue` aren't callbacks or guards, so `mergeConfig` would let these
         // unconditionally clobber a `menuConfig.getId`/`getTextValue` override. Fall back to the
         // top-level Tabs config only when the caller hasn't set one on `menuConfig` directly.
-        getId: ((_b = config.menuConfig) === null || _b === void 0 ? void 0 : _b.getId) || getId,
-        getTextValue: ((_c = config.menuConfig) === null || _c === void 0 ? void 0 : _c.getTextValue) || config.getTextValue,
+        getId: ((_c = config.menuConfig) === null || _c === void 0 ? void 0 : _c.getId) || getId,
+        getTextValue: ((_d = config.menuConfig) === null || _d === void 0 ? void 0 : _d.getTextValue) || config.getTextValue,
         nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),
         onSelect(data) {
-            menu.events.hide();
+            // Store the tab ID to focus after the menu closes and React re-renders
+            pendingFocusTabIdRef.current = data.id;
+            // Update state: select the tab, move cursor, then close menu
             events.select(data);
+            model.events.goTo({ id: data.id });
+            menu.events.hide();
+            // Focus the selected tab AFTER React has re-rendered.
+            // Double rAF is required because useReturnFocus restores focus to the overflow
+            // button on a single rAF after hide; the second frame runs after that restore.
+            pendingFocusRafOuterRef.current = requestAnimationFrame(() => {
+                pendingFocusRafInnerRef.current = requestAnimationFrame(() => {
+                    const tabId = pendingFocusTabIdRef.current;
+                    if (tabId) {
+                        const tabElement = document.querySelector(`[data-focus-id="${slugify(`${model.state.id}-${tabId}`)}"]`);
+                        if (tabElement) {
+                            tabElement.focus();
+                        }
+                        pendingFocusTabIdRef.current = null;
+                    }
+                });
+            });
         },
         onShow() {
             // Always select the first item when the menu is opened

package/dist/es6/testing/lib/ComponentStatesTable.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createStyles, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
-const tableStyles = createStyles({ name: "371blp", styles: "width:100%;thead{text-align:start;padding-block-end:var(--cnvs-sys-padding-md);}td, th{min-width:6.25rem;padding-block-end:var(--cnvs-sys-padding-md);padding-inline-end:var(--cnvs-sys-padding-md);text-align:start;}" });
+const tableStyles = createStyles({ name: "ce9zw", styles: "width:100%;thead{text-align:start;padding-block-end:var(--cnvs-sys-padding-md);}td, th{min-width:6.25rem;padding-block-end:var(--cnvs-sys-padding-md);padding-inline-end:var(--cnvs-sys-padding-md);text-align:start;}" });
 export const ComponentStatesTable = ({ rowProps, columnProps, children, }) => {
     return (_jsxs("table", { className: tableStyles, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Variants" }), columnProps.map(col => (_jsx("th", { children: col.label }, `component-table-heading-${col.label.toLowerCase().replace(' ', ',')}`)))] }) }), _jsx("tbody", { children: rowProps.map(row => {
                     return (_jsxs("tr", { children: [_jsx("td", { children: row.label }), columnProps.map(col => {

package/dist/es6/text/lib/LabelText.js

@@ -6,21 +6,21 @@ import { system } from '@workday/canvas-tokens-web';
 import { textStencil } from './Text';
 const labelTextStencil = createStencil({
     extends: textStencil,
-    base: { name: "2mxa0h", 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-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));color:var(--cnvs-sys-color-fg-default);" },
+    base: { name: "2da8et", 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-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));color:var(--cnvs-sys-color-fg-default);" },
     modifiers: {
         disabled: {
-            true: { name: "kaw14", styles: "cursor:default;color:var(--cnvs-sys-color-fg-disabled);" }
+            true: { name: "a2h31", styles: "cursor:default;color:var(--cnvs-sys-color-fg-disabled);" }
         },
         variant: {
-            inverse: { name: "3j4eo2", styles: "color:var(--cnvs-sys-color-fg-inverse);" },
-            error: { name: "1qvq7i", styles: "color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));" },
-            hint: { name: "3sd2m8", styles: "color:var(--cnvs-sys-color-fg-muted-default);" }
+            inverse: { name: "4dq8pa", styles: "color:var(--cnvs-sys-color-fg-inverse);" },
+            error: { name: "tzb1c", styles: "color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));" },
+            hint: { name: "23zo9l", styles: "color:var(--cnvs-sys-color-fg-muted-default);" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', disabled: true },
-            styles: { name: "f0y36", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-sys-color-fg-inverse);" }
+            styles: { name: "3hf6id", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-sys-color-fg-inverse);" }
         }
     ]
 }, "label-text-3d99f1");

package/dist/es6/text/lib/Text.js

@@ -4,30 +4,30 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const textStencil = createStencil({
-    base: { name: "1lp6a1", styles: "box-sizing:border-box;" },
+    base: { name: "wkp67", styles: "box-sizing:border-box;" },
     modifiers: {
         typeLevel: {
             // Title level styles
-            'title.large': { name: "1k1qm9", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem));line-height:var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem));color:var(--cnvs-sys-color-fg-strong);" },
-            'title.medium': { name: "2u4hcn", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem));line-height:var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem));color:var(--cnvs-sys-color-fg-strong);" },
-            'title.small': { name: "295hcs", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem));font-size:var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem));color:var(--cnvs-sys-color-fg-strong);" },
+            'title.large': { name: "10m2ez", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem));line-height:var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem));color:var(--cnvs-sys-color-fg-strong);" },
+            'title.medium': { name: "3ebfst", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem));line-height:var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem));color:var(--cnvs-sys-color-fg-strong);" },
+            'title.small': { name: "2f01ti", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem));font-size:var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem));color:var(--cnvs-sys-color-fg-strong);" },
             // Heading level styles
-            'heading.large': { name: "1k0ok3", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem));line-height:var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem));color:var(--cnvs-sys-color-fg-strong);" },
-            'heading.medium': { name: "2x5ce1", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem));line-height:var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem));color:var(--cnvs-sys-color-fg-strong);" },
-            'heading.small': { name: "3qbkjs", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem));line-height:var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem));color:var(--cnvs-sys-color-fg-strong);" },
+            'heading.large': { name: "2dtog2", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem));line-height:var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem));color:var(--cnvs-sys-color-fg-strong);" },
+            'heading.medium': { name: "1xy50g", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem));line-height:var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem));color:var(--cnvs-sys-color-fg-strong);" },
+            'heading.small': { name: "1xye3f", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);font-size:var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem));line-height:var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem));color:var(--cnvs-sys-color-fg-strong);" },
             // Body level styles
-            'body.large': { name: "9gliw", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));line-height:var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem));color:var(--cnvs-sys-color-fg-default);" },
-            'body.medium': { name: "1g3frj", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));color:var(--cnvs-sys-color-fg-default);" },
-            'body.small': { name: "49kk55", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem));line-height:var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem));letter-spacing:var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small));color:var(--cnvs-sys-color-fg-default);" },
+            'body.large': { name: "cl2q6", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));line-height:var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem));color:var(--cnvs-sys-color-fg-default);" },
+            'body.medium': { name: "10dm96", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));color:var(--cnvs-sys-color-fg-default);" },
+            'body.small': { name: "249ct4", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem));line-height:var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem));letter-spacing:var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small));color:var(--cnvs-sys-color-fg-default);" },
             // Subtext level styles
-            'subtext.large': { name: "431u7j", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);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));color:var(--cnvs-sys-color-fg-default);" },
-            'subtext.medium': { name: "20h3l", styles: "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));color:var(--cnvs-sys-color-fg-default);" },
-            'subtext.small': { name: "uro6c", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem));line-height:var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small));color:var(--cnvs-sys-color-fg-default);" }
+            'subtext.large': { name: "1z0wn9", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);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));color:var(--cnvs-sys-color-fg-default);" },
+            'subtext.medium': { name: "1d94r0", styles: "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));color:var(--cnvs-sys-color-fg-default);" },
+            'subtext.small': { name: "2pu9wu", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem));line-height:var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small));color:var(--cnvs-sys-color-fg-default);" }
         },
         variant: {
-            error: { name: "2d48ed", styles: "color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));" },
-            hint: { name: "4bjmdv", styles: "color:var(--cnvs-sys-color-fg-muted-default);" },
-            inverse: { name: "anrd6", styles: "color:var(--cnvs-sys-color-fg-inverse);" }
+            error: { name: "3jii9c", styles: "color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));" },
+            hint: { name: "1okwjq", styles: "color:var(--cnvs-sys-color-fg-muted-default);" },
+            inverse: { name: "kqso8", styles: "color:var(--cnvs-sys-color-fg-inverse);" }
         }
     }
 }, "text-479eff");

package/dist/es6/text/lib/TypeLevelComponents.js

@@ -5,7 +5,7 @@ import { createStencil } from '@workday/canvas-kit-styling';
 import { textStencil } from './Text';
 const subtextStencil = createStencil({
     extends: textStencil,
-    base: { name: "4fhc5a", styles: "box-sizing:border-box;" }
+    base: { name: "3fma8e", styles: "box-sizing:border-box;" }
 }, "subtext-5f1e4c");
 /**
  * This component is intended to be used for small subtext content or in tight spaces.
@@ -40,7 +40,7 @@ export const Subtext = createComponent('p')({
 });
 const bodyTextStencil = createStencil({
     extends: textStencil,
-    base: { name: "2rysot", styles: "box-sizing:border-box;" }
+    base: { name: "2i3zui", styles: "box-sizing:border-box;" }
 }, "body-text-3fa494");
 /**
  * This component is intended to be used for standard body text.
@@ -75,7 +75,7 @@ export const BodyText = createComponent('p')({
 });
 export const headingStencil = createStencil({
     extends: textStencil,
-    base: { name: "2g6ku", styles: "box-sizing:border-box;" }
+    base: { name: "3rykql", styles: "box-sizing:border-box;" }
 }, "heading-5f541c");
 /**
  * This component is intended to be used for headings and large text.
@@ -110,7 +110,7 @@ export const Heading = createComponent('h2')({
 });
 const titleStencil = createStencil({
     extends: textStencil,
-    base: { name: "2kveku", styles: "box-sizing:border-box;" }
+    base: { name: "11nv2g", styles: "box-sizing:border-box;" }
 }, "title-ee184f");
 /**
  * This component is intended to be used large page titles.

package/dist/es6/text-area/lib/TextArea.js

@@ -11,13 +11,13 @@ export const TextAreaResizeDirection = {
 };
 export const textAreaStencil = createStencil({
     extends: textInputStencil,
-    base: { name: "pb9wa", styles: "box-sizing:border-box;min-height:var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem));min-width:17.5rem;&::webkit-resizer{display:none;}" },
+    base: { name: "2epen3", styles: "box-sizing:border-box;min-height:var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem));min-width:17.5rem;&::webkit-resizer{display:none;}" },
     modifiers: {
         resize: {
-            both: { name: "3xy97v", styles: "resize:both;" },
-            horizontal: { name: "yjiw8", styles: "resize:horizontal;" },
-            vertical: { name: "144r9h", styles: "resize:vertical;" },
-            none: { name: "26adf9", styles: "resize:none;" }
+            both: { name: "iaat6", styles: "resize:both;" },
+            horizontal: { name: "1v50o", styles: "resize:horizontal;" },
+            vertical: { name: "2x1hmp", styles: "resize:vertical;" },
+            none: { name: "2ljlam", styles: "resize:none;" }
         }
     },
     defaultModifiers: {

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

@@ -36,10 +36,10 @@ export const inputGroupInnerStencil = createStencil({
          */
         pointerEvents: '',
     },
-    base: { name: "1lu0jj", styles: "--insetInlineStart-input-group-inner-fddb83:initial;--insetInlineEnd-input-group-inner-fddb83:initial;--width-input-group-inner-fddb83:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));--height-input-group-inner-fddb83:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));box-sizing:border-box;display:flex;position:absolute;align-items:center;justify-content:center;width:var(--width-input-group-inner-fddb83);height:var(--height-input-group-inner-fddb83);inset-inline-start:var(--insetInlineStart-input-group-inner-fddb83);inset-inline-end:var(--insetInlineEnd-input-group-inner-fddb83);--size-svg-bca693:var(--cnvs-component-system-icon-size-xs);" },
+    base: { name: "46rkar", styles: "--insetInlineStart-input-group-inner-fddb83:initial;--insetInlineEnd-input-group-inner-fddb83:initial;--width-input-group-inner-fddb83:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));--height-input-group-inner-fddb83:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));box-sizing:border-box;display:flex;position:absolute;align-items:center;justify-content:center;width:var(--width-input-group-inner-fddb83);height:var(--height-input-group-inner-fddb83);inset-inline-start:var(--insetInlineStart-input-group-inner-fddb83);inset-inline-end:var(--insetInlineEnd-input-group-inner-fddb83);--size-svg-bca693:var(--cnvs-component-system-icon-size-xs);" },
     modifiers: {
         pointerEvents: {
-            _: { name: "3gfxy6", styles: "pointer-events:var(--pointerEvents-input-group-inner-fddb83);" }
+            _: { name: "2ssub9", styles: "pointer-events:var(--pointerEvents-input-group-inner-fddb83);" }
         }
     }
 }, "input-group-inner-fddb83");
@@ -77,13 +77,13 @@ export const inputGroupInputStencil = createStencil({
         paddingInlineStart: '',
         paddingInlineEnd: '',
     },
-    base: { name: "5j23c", styles: "box-sizing:border-box;display:flex;width:100%;" },
+    base: { name: "2kaos0", styles: "box-sizing:border-box;display:flex;width:100%;" },
     modifiers: {
         paddingInlineStart: {
-            _: { name: "388w5n", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-b51031);" }
+            _: { name: "4frizg", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-b51031);" }
         },
         paddingInlineEnd: {
-            _: { name: "1bmu2s", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-b51031);" }
+            _: { name: "1rh75t", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-b51031);" }
         }
     }
 }, "input-group-input-b51031");
@@ -117,7 +117,7 @@ export const useClearButton = createElemPropsHook(useInputGroupModel)(model => {
     };
 });
 const clearButtonStencil = createStencil({
-    base: { name: "3cbvlp", styles: "box-sizing:border-box;svg{--size-svg-bca693:var(--cnvs-component-system-icon-size-xs);}" }
+    base: { name: "24e7hi", styles: "box-sizing:border-box;svg{--size-svg-bca693:var(--cnvs-component-system-icon-size-xs);}" }
 }, "clear-button-49e5c1");
 /**
  * A clear input button. This can be a component later.
@@ -144,7 +144,7 @@ const wrapInCalc = (values) => {
     return `calc(${values.map(toPx).join(' + ')})`;
 };
 export const inputGroupStencil = createStencil({
-    base: { name: "hmn4y", styles: "box-sizing:border-box;display:flex;position:relative;align-items:center;& :has([data-part=\"input-group-clear-button\"]){transition:opacity 300ms ease;}&:where(:has(input:placeholder-shown)) :has([data-part=\"input-group-clear-button\"]){opacity:0;pointer-events:none;}" }
+    base: { name: "2r376u", styles: "box-sizing:border-box;display:flex;position:relative;align-items:center;& :has([data-part=\"input-group-clear-button\"]){transition:opacity 300ms ease;}&:where(:has(input:placeholder-shown)) :has([data-part=\"input-group-clear-button\"]){opacity:0;pointer-events:none;}" }
 }, "input-group-1aae89");
 /**
  * An `InputGroup` is a container around a {@link TextInput} with optional inner start and end

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

@@ -8,15 +8,15 @@ export const textInputStencil = createStencil({
     vars: {
         width: '',
     },
-    base: { name: "e8ehn", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);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));font-weight:var(--cnvs-sys-font-weight-normal);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));display:block;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));transition:0.2s box-shadow, 0.2s border-color;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));margin:0;width:var(--width-text-input-7c8776);min-width:var(--width-text-input-7c8776, 17.5rem);color:var(--cnvs-sys-color-fg-default);text-overflow:ellipsis;::-ms-clear{display:none;}&::placeholder{color:var(--cnvs-sys-color-fg-muted-default);}&:is(:hover, .hover):where(:not([disabled], .disabled)){border-color:var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));}&:is(:focus-visible, .focus):where(:not([disabled])){border-color:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));outline:0.125rem solid transparent;}&:is(:disabled, .disabled){opacity:var(--cnvs-sys-opacity-disabled);&::placeholder{opacity:var(--cnvs-sys-opacity-disabled);}}" },
+    base: { name: "1jrfhl", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);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));font-weight:var(--cnvs-sys-font-weight-normal);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));display:block;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));transition:0.2s box-shadow, 0.2s border-color;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));margin:0;width:var(--width-text-input-7c8776);min-width:var(--width-text-input-7c8776, 17.5rem);color:var(--cnvs-sys-color-fg-default);text-overflow:ellipsis;::-ms-clear{display:none;}&::placeholder{color:var(--cnvs-sys-color-fg-muted-default);}&:is(:hover, .hover):where(:not([disabled], .disabled)){border-color:var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));}&:is(:focus-visible, .focus):where(:not([disabled])){border-color:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));outline:0.125rem solid transparent;}&:is(:disabled, .disabled){opacity:var(--cnvs-sys-opacity-disabled);&::placeholder{opacity:var(--cnvs-sys-opacity-disabled);}}" },
     modifiers: {
         grow: {
-            true: { name: "3ltvvl", styles: "width:100%;resize:vertical;" },
-            false: { name: "y4t3f", styles: "width:initial;" }
+            true: { name: "3qcong", styles: "width:100%;resize:vertical;" },
+            false: { name: "2dlkcg", styles: "width:initial;" }
         },
         error: {
-            error: { name: "2bzot9", styles: "border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1)),\n        0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n        0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));outline-offset:0.125rem;}@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;}" },
-            caution: { name: "1p53do", styles: "border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n        0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n        0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}outline-offset:0.125rem;@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;outline-offset:0;}" }
+            error: { name: "wuaww", styles: "border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1)),\n        0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n        0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));outline-offset:0.125rem;}@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;}" },
+            caution: { name: "2vcxoa", styles: "border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n        0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n        0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}outline-offset:0.125rem;@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;outline-offset:0;}" }
         }
     },
     defaultModifiers: {

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

@@ -42,7 +42,7 @@ const getAriaAttributes = (mode, id) => {
     }
 };
 const toastStencil = createStencil({
-    base: { name: "hyc15", 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);box-shadow:var(--cnvs-sys-depth-5);@media (forced-colors: active){outline:0.0625rem solid CanvasText;}variant{alt{border:0.0625rem solid var(--cnvs-sys-color-border-elevated, oklch(1 0 0 / 1));}tonal{}}" }
+    base: { name: "267674", 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);box-shadow:var(--cnvs-sys-depth-5);@media (forced-colors: active){outline:0.0625rem solid CanvasText;}variant{alt{border:0.0625rem solid var(--cnvs-sys-color-border-elevated, oklch(1 0 0 / 1));}tonal{}}" }
 }, "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.js

@@ -3,7 +3,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
 import { Flex, mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createStencil } from '@workday/canvas-kit-styling';
 export const toastBodyStencil = createStencil({
-    base: { name: "q8gz0", styles: "box-sizing:border-box;align-items:flex-start;flex-direction:column;justify-content:center;flex-grow:1;gap:0;" }
+    base: { name: "gk71h", 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',

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

@@ -5,7 +5,7 @@ import { Popup } from '@workday/canvas-kit-react/popup';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { base } from '@workday/canvas-tokens-web';
 export const toastCloseIconStencil = createStencil({
-    base: { name: "2wc5hg", styles: "box-sizing:border-box;position:absolute;inset-block-start:var(--cnvs-base-size-50, 0.25rem);inset-inline-end:var(--cnvs-base-size-50, 0.25rem);" }
+    base: { name: "upm4p", styles: "box-sizing:border-box;position:absolute;inset-block-start:var(--cnvs-base-size-50, 0.25rem);inset-inline-end:var(--cnvs-base-size-50, 0.25rem);" }
 }, "toast-close-icon-05fbc5");
 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 { component } from '@workday/canvas-tokens-web';
 export const toastIconStencil = createStencil({
-    base: { name: "174zjx", styles: "box-sizing:border-box;align-self:start;" }
+    base: { name: "49vc3d", styles: "box-sizing:border-box;align-self:start;" }
 }, "toast-icon-7830d1");
 export const ToastIcon = createComponent('div')({
     displayName: 'Toast.Icon',

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

@@ -5,7 +5,7 @@ import { Subtext } from '@workday/canvas-kit-react/text';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { useToastModel } from './hooks/useToastModel';
 export const toastMessageStencil = createStencil({
-    base: { name: "1zfidy", styles: "box-sizing:border-box;word-break:break-word;margin-block:0;" }
+    base: { name: "1zc234", styles: "box-sizing:border-box;word-break:break-word;margin-block:0;" }
 }, "toast-message-ff5220");
 export const ToastMessage = createSubcomponent('p')({
     modelHook: useToastModel,

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

@@ -11,20 +11,20 @@ const tooltipTranslateVars = createVars({ id: "3e3693", args: ["positionX", "pos
 /**
  * Keyframe for the Tooltip animation.
  */
-const tooltipAnimation = keyframes({ name: "358ifw", styles: "0%{opacity:0;transform:translate(var(--positionX-3e3693), var(--positionY-3e3693));}100%{opacity:1;transform:translate(0);}" });
+const tooltipAnimation = keyframes({ name: "1orqfz", styles: "0%{opacity:0;transform:translate(var(--positionX-3e3693), var(--positionY-3e3693));}100%{opacity:1;transform:translate(0);}" });
 export const tooltipContainerStencil = createStencil({
     vars: {
         tooltipTransformOriginHorizontal: '',
         tooltipTransformOriginVertical: '',
         background: '',
     },
-    base: { name: "25knie", 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-358ifw;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-3eb75c) var(--tooltipTransformOriginHorizontal-tooltip-container-3eb75c);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:var(--background-tooltip-container-3eb75c, 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-3);}[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;}" },
+    base: { name: "17o1wc", 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-1orqfz;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-3eb75c) var(--tooltipTransformOriginHorizontal-tooltip-container-3eb75c);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:var(--background-tooltip-container-3eb75c, 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-3);}[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: "vxts4", styles: "margin:0.375rem;" }
+            true: { name: "2b6bjs", styles: "margin:0.375rem;" }
         },
         variant: {
-            alt: { name: "hjtl", styles: "&:before{background:var(--background-tooltip-container-3eb75c, var(--cnvs-sys-color-surface-elevated, linear-gradient(0deg, oklch(1 0 89.88 / 0.374) 0%, oklch(1 0 89.88 / 0.374) 100%), linear-gradient(0deg, oklch(0 0 0 / 0.0196) 0%, oklch(0 0 0 / 0.0196) 100%), oklch(1 0 0 / 1)));border:0.0625rem solid var(--cnvs-sys-color-border-elevated, oklch(1 0 0 / 1));}" }
+            alt: { name: "rrmp6", styles: "&:before{background:var(--background-tooltip-container-3eb75c, var(--cnvs-sys-color-surface-elevated, linear-gradient(0deg, oklch(1 0 89.88 / 0.374) 0%, oklch(1 0 89.88 / 0.374) 100%), linear-gradient(0deg, oklch(0 0 0 / 0.0196) 0%, oklch(0 0 0 / 0.0196) 100%), oklch(1 0 0 / 1)));border:0.0625rem solid var(--cnvs-sys-color-border-elevated, oklch(1 0 0 / 1));}" }
         }
     }
 }, "tooltip-container-3eb75c");

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

@@ -1 +1 @@
-export const version = '16.1.7';
+export const version = '16.1.8';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "17.0.0-alpha.0631-next.0",
+  "version": "17.0.0-alpha.0635-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": "^17.0.0-alpha.0631-next.0",
-    "@workday/canvas-kit-styling": "^17.0.0-alpha.0631-next.0",
+    "@workday/canvas-kit-popup-stack": "^17.0.0-alpha.0635-next.0",
+    "@workday/canvas-kit-styling": "^17.0.0-alpha.0635-next.0",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-tokens-web": "^4.4.0",
     "@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": "cca2de38ec1c9736ce2d71f962e522a4861b82c2"
+  "gitHead": "52625db5c787e0187d80ef31e519daeaf8328501"
 }

package/tabs/lib/TabsItem.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import {buttonStencil} from '@workday/canvas-kit-react/button';
 import {
+  ListRenderItemContext,
   isSelected,
   useListItemRegister,
   useListItemRovingFocus,
@@ -173,6 +174,43 @@ export const StyledTabItem = createComponent('button')<TabsItemProps>({
   },
 });
 
+/**
+ * When the selected tab receives ArrowDown, move focus to its tab panel.
+ * Returning `null` is the mergeCallback sentinel that stops later-merged
+ * `onKeyDown` handlers (including roving focus) from also handling this key.
+ * This hook must be composed before `useListItemRovingFocus` so it runs after
+ * that hook and its return value can skip the roving handler.
+ * Tabs.OverflowButton does not use this hook.
+ *
+ * ArrowDown is only intercepted in horizontal orientation. In a vertical tablist,
+ * ArrowDown is the roving-navigation key and must reach `useListItemRovingFocus`.
+ */
+const useTabsItemFocusPanelOnArrowDown = createElemPropsHook(useTabsModel)((
+  {state},
+  _,
+  elemProps: {'data-id'?: string} = {}
+) => {
+  const {item} = React.useContext(ListRenderItemContext);
+  const name = elemProps['data-id'] || item?.id || '';
+  const selected = !!name && isSelected(name, state);
+
+  return {
+    onKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+      if (!selected || state.orientation !== 'horizontal' || event.key !== 'ArrowDown') {
+        return;
+      }
+      event.preventDefault();
+      const panelId = slugify(`tabpanel-${state.id}-${name}`);
+      const panel = document.getElementById(panelId);
+      if (panel) {
+        (panel as HTMLElement).focus();
+      }
+      // mergeCallback: `null` prevents the roving-focus onKeyDown from running.
+      return null;
+    },
+  };
+});
+
 export const useTabsItem = composeHooks(
   createElemPropsHook(useTabsModel)(({state}, _, elemProps: {'data-id'?: string} = {}) => {
     const name = elemProps['data-id'] || '';
@@ -188,6 +226,7 @@ export const useTabsItem = composeHooks(
   }),
   useListItemSelect,
   useOverflowListItemMeasure,
+  useTabsItemFocusPanelOnArrowDown,
   useListItemRovingFocus,
   useListItemRegister
 );