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

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

@@ -3,11 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTabsModel = void 0;
+exports.useTabsModel = exports.TABS_OVERFLOW_BUTTON_ID = void 0;
 const react_1 = __importDefault(require("react"));
 const collection_1 = require("@workday/canvas-kit-react/collection");
 const common_1 = require("@workday/canvas-kit-react/common");
 const menu_1 = require("@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.
+ */
+exports.TABS_OVERFLOW_BUTTON_ID = '__tabs-overflow__';
 /**
  * The TabsModel extends the [Collection
  * System](/get-started/for-developers/guides/collection-api/). Tabs have tab items and
@@ -50,11 +55,73 @@ exports.useTabsModel = (0, common_1.createModelHook)({
     requiredConfig: collection_1.useOverflowListModel.requiredConfig,
     contextOverride: collection_1.useOverflowListModel.Context,
 })(config => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const initialSelectedRef = react_1.default.useRef(config.initialTab);
-    const getId = config.getId || collection_1.defaultGetId;
+    const userGetId = config.getId || collection_1.defaultGetId;
     const modality = (0, common_1.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_1.default.useRef({
+        id: exports.TABS_OVERFLOW_BUTTON_ID,
+        text: 'More',
+    });
+    const getId = (item) => {
+        if (item === overflowItemRef.current) {
+            return exports.TABS_OVERFLOW_BUTTON_ID;
+        }
+        const id = userGetId(item);
+        if (id === exports.TABS_OVERFLOW_BUTTON_ID) {
+            throw new Error(`Tabs item id "${exports.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_1.default.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_1.default.useRef(0);
+    const [, setNonInteractiveTick] = react_1.default.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_1.default.useMemo(() => {
+        const baseIds = config.nonInteractiveIds || [];
+        if (overflowButtonNonInteractive) {
+            return [...baseIds, exports.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_1.default.useRef(null);
+    const pendingFocusRafOuterRef = react_1.default.useRef(0);
+    const pendingFocusRafInnerRef = react_1.default.useRef(0);
+    react_1.default.useLayoutEffect(() => {
+        return () => {
+            cancelAnimationFrame(pendingFocusRafOuterRef.current);
+            cancelAnimationFrame(pendingFocusRafInnerRef.current);
+        };
+    }, []);
     const model = (0, collection_1.useOverflowListModel)(collection_1.useOverflowListModel.mergeConfig(config, {
+        items: itemsWithOverflowButton,
+        getId,
+        nonInteractiveIds: nonInteractiveIdsForModel,
         shouldCalculateOverflow: modality !== 'touch',
         orientation: config.orientation || 'horizontal',
         onRegisterItem(data) {
@@ -65,11 +132,64 @@ exports.useTabsModel = (0, common_1.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_1.default.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_1.default.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 === exports.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 !== exports.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 = (0, collection_1.useListModel)();
     const state = {
         ...model.state,
@@ -106,12 +226,31 @@ exports.useTabsModel = (0, common_1.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="${(0, common_1.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/commonjs/testing/lib/ComponentStatesTable.js

@@ -4,7 +4,7 @@ exports.ComponentStatesTable = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-const tableStyles = (0, canvas_kit_styling_1.createStyles)({ name: "2aaq6v", 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 = (0, canvas_kit_styling_1.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;}" });
 const ComponentStatesTable = ({ rowProps, columnProps, children, }) => {
     return ((0, jsx_runtime_1.jsxs)("table", { className: tableStyles, children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "Variants" }), columnProps.map(col => ((0, jsx_runtime_1.jsx)("th", { children: col.label }, `component-table-heading-${col.label.toLowerCase().replace(' ', ',')}`)))] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: rowProps.map(row => {
                     return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: row.label }), columnProps.map(col => {

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

@@ -9,21 +9,21 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const Text_1 = require("./Text");
 const labelTextStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Text_1.textStencil,
-    base: { name: "27zvqt", 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: "3eq2ej", 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: "2jazpf", styles: "color:var(--cnvs-sys-color-fg-inverse);" },
-            error: { name: "v8pad", 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: "3zbif4", 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: "110976", 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/commonjs/text/lib/Text.js

@@ -7,30 +7,30 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 exports.textStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "4c4tm8", styles: "box-sizing:border-box;" },
+    base: { name: "wkp67", styles: "box-sizing:border-box;" },
     modifiers: {
         typeLevel: {
             // Title level styles
-            'title.large': { name: "i625g", 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: "33yw05", 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: "3hq6zk", 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: "379rlv", 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: "1tr4zr", 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: "23jah8", 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: "1zq8by", 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: "34ejqd", 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: "2w5xfs", 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: "2fqhmi", 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: "34a0ia", 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: "397vde", 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: "mi1kt", 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: "ubktc", styles: "color:var(--cnvs-sys-color-fg-muted-default);" },
-            inverse: { name: "3e1n8j", 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/commonjs/text/lib/TypeLevelComponents.js

@@ -8,7 +8,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const Text_1 = require("./Text");
 const subtextStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Text_1.textStencil,
-    base: { name: "2gygqk", 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.
@@ -43,7 +43,7 @@ exports.Subtext = (0, common_1.createComponent)('p')({
 });
 const bodyTextStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Text_1.textStencil,
-    base: { name: "3khlpw", 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.
@@ -78,7 +78,7 @@ exports.BodyText = (0, common_1.createComponent)('p')({
 });
 exports.headingStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Text_1.textStencil,
-    base: { name: "49vs16", 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.
@@ -113,7 +113,7 @@ exports.Heading = (0, common_1.createComponent)('h2')({
 });
 const titleStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: Text_1.textStencil,
-    base: { name: "1trfq2", 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/commonjs/text-area/lib/TextArea.js

@@ -14,13 +14,13 @@ exports.TextAreaResizeDirection = {
 };
 exports.textAreaStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: text_input_1.textInputStencil,
-    base: { name: "3g6yxb", 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: "fxkcx", styles: "resize:both;" },
-            horizontal: { name: "bo9h8", styles: "resize:horizontal;" },
-            vertical: { name: "4313vn", styles: "resize:vertical;" },
-            none: { name: "2h28ok", 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/commonjs/text-input/lib/InputGroup.js

@@ -42,10 +42,10 @@ exports.inputGroupInnerStencil = (0, canvas_kit_styling_1.createStencil)({
          */
         pointerEvents: '',
     },
-    base: { name: "qv7w4", 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: "3saqxf", styles: "pointer-events:var(--pointerEvents-input-group-inner-fddb83);" }
+            _: { name: "2ssub9", styles: "pointer-events:var(--pointerEvents-input-group-inner-fddb83);" }
         }
     }
 }, "input-group-inner-fddb83");
@@ -83,13 +83,13 @@ exports.inputGroupInputStencil = (0, canvas_kit_styling_1.createStencil)({
         paddingInlineStart: '',
         paddingInlineEnd: '',
     },
-    base: { name: "4a41ls", styles: "box-sizing:border-box;display:flex;width:100%;" },
+    base: { name: "2kaos0", styles: "box-sizing:border-box;display:flex;width:100%;" },
     modifiers: {
         paddingInlineStart: {
-            _: { name: "34ohfz", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-b51031);" }
+            _: { name: "4frizg", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-b51031);" }
         },
         paddingInlineEnd: {
-            _: { name: "2j14zq", 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");
@@ -123,7 +123,7 @@ exports.useClearButton = (0, common_1.createElemPropsHook)(exports.useInputGroup
     };
 });
 const clearButtonStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "2njje6", 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.
@@ -150,7 +150,7 @@ const wrapInCalc = (values) => {
     return `calc(${values.map(toPx).join(' + ')})`;
 };
 exports.inputGroupStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "9uasl", 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/commonjs/text-input/lib/TextInput.js

@@ -11,15 +11,15 @@ exports.textInputStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
         width: '',
     },
-    base: { name: "1lxgsu", 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: "48ys4u", styles: "width:100%;resize:vertical;" },
-            false: { name: "34nok1", styles: "width:initial;" }
+            true: { name: "3qcong", styles: "width:100%;resize:vertical;" },
+            false: { name: "2dlkcg", styles: "width:initial;" }
         },
         error: {
-            error: { name: "bhniw", 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: "3kzivr", 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/commonjs/toast/lib/Toast.js

@@ -45,7 +45,7 @@ const getAriaAttributes = (mode, id) => {
     }
 };
 const toastStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "2x6voy", 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/commonjs/toast/lib/ToastBody.js

@@ -6,7 +6,7 @@ const common_1 = require("@workday/canvas-kit-react/common");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 exports.toastBodyStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "e20qv", 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");
 exports.ToastBody = (0, common_1.createComponent)('div')({
     displayName: 'Toast.Body',

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

@@ -8,7 +8,7 @@ const popup_1 = require("@workday/canvas-kit-react/popup");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 exports.toastCloseIconStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "lvp4t", 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");
 exports.ToastCloseIcon = (0, common_1.createComponent)('button')({
     displayName: 'Toast.CloseIcon',

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

@@ -7,7 +7,7 @@ const icon_1 = require("@workday/canvas-kit-react/icon");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 exports.toastIconStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "pg57h", styles: "box-sizing:border-box;align-self:start;" }
+    base: { name: "49vc3d", styles: "box-sizing:border-box;align-self:start;" }
 }, "toast-icon-7830d1");
 exports.ToastIcon = (0, common_1.createComponent)('div')({
     displayName: 'Toast.Icon',

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

@@ -8,7 +8,7 @@ const text_1 = require("@workday/canvas-kit-react/text");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const useToastModel_1 = require("./hooks/useToastModel");
 exports.toastMessageStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "37f6hm", 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");
 exports.ToastMessage = (0, common_1.createSubcomponent)('p')({
     modelHook: useToastModel_1.useToastModel,

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

@@ -14,20 +14,20 @@ const tooltipTranslateVars = (0, canvas_kit_styling_1.createVars)({ id: "3e3693"
 /**
  * Keyframe for the Tooltip animation.
  */
-const tooltipAnimation = (0, canvas_kit_styling_1.keyframes)({ name: "1e0lm1", styles: "0%{opacity:0;transform:translate(var(--positionX-3e3693), var(--positionY-3e3693));}100%{opacity:1;transform:translate(0);}" });
+const tooltipAnimation = (0, canvas_kit_styling_1.keyframes)({ name: "1orqfz", styles: "0%{opacity:0;transform:translate(var(--positionX-3e3693), var(--positionY-3e3693));}100%{opacity:1;transform:translate(0);}" });
 exports.tooltipContainerStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
         tooltipTransformOriginHorizontal: '',
         tooltipTransformOriginVertical: '',
         background: '',
     },
-    base: { name: "3cmbqj", 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-1e0lm1;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: "1dwx9h", styles: "margin:0.375rem;" }
+            true: { name: "2b6bjs", styles: "margin:0.375rem;" }
         },
         variant: {
-            alt: { name: "3ik8zg", 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/commonjs/version/lib/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = void 0;
-exports.version = '16.1.6';
+exports.version = '16.1.8';

package/dist/es6/action-bar/lib/ActionBarList.js

@@ -6,7 +6,7 @@ import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 import { useActionBarModel } from './useActionBarModel';
 export const actionBarListStencil = createStencil({
-    base: { name: "4dwvmp", styles: "box-sizing:border-box;display:flex;box-shadow:var(--cnvs-sys-depth-2);gap:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));background:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-block-start:solid 0.0625rem  var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));position:fixed;inset-block-end:0;inset-inline:0;@media (max-width: 767.5px){> *{flex:1;}}" }
+    base: { name: "3prpqr", styles: "box-sizing:border-box;display:flex;box-shadow:var(--cnvs-sys-depth-2);gap:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));background:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-block-start:solid 0.0625rem  var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));position:fixed;inset-block-end:0;inset-inline:0;@media (max-width: 767.5px){> *{flex:1;}}" }
 }, "action-bar-list-887890");
 export const useActionBarList = useOverflowListMeasure;
 export const ActionBarList = createSubcomponent('div')({

package/dist/es6/action-bar/lib/ActionBarOverflowButton.js

@@ -8,7 +8,7 @@ import { createStencil } from '@workday/canvas-kit-styling';
 import { relatedActionsIcon } from '@workday/canvas-system-icons-web';
 import { useActionBarModel } from './useActionBarModel';
 export const actionBarOverflowButtonStencil = createStencil({
-    base: { name: "dvyde", styles: "box-sizing:border-box;flex:0;" }
+    base: { name: "2ox3kb", styles: "box-sizing:border-box;flex:0;" }
 }, "action-bar-overflow-button-0a24d9");
 export const useActionBarOverflowButton = composeHooks(createElemPropsHook(useActionBarModel)(() => ({
     'aria-haspopup': true,

package/dist/es6/avatar/lib/Avatar.js

@@ -10,23 +10,23 @@ export const avatarStencil = createStencil({
         avatarImage: 'avatar-image',
         avatarName: 'avatar-name',
     },
-    base: { name: "1tt0cm", styles: "box-sizing:border-box;" },
+    base: { name: "2gengw", styles: "box-sizing:border-box;" },
     modifiers: {
         imageLoaded: {
-            false: { name: "41zq7w", styles: "[data-part=\"avatar-image\"]{display:none;}" },
-            true: { name: "1kv528", styles: "background-color:var(--cnvs-sys-color-bg-default);" }
+            false: { name: "1vob2k", styles: "[data-part=\"avatar-image\"]{display:none;}" },
+            true: { name: "11o8rp", styles: "background-color:var(--cnvs-sys-color-bg-default);" }
         },
         objectFit: {
-            contain: { name: "1herir", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
-            cover: { name: "21d126", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
-            fill: { name: "fgiti", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
-            none: { name: "4876wf", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
-            ['scale-down']: { name: "34wa65", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
-            initial: { name: "ycjiw", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
-            inherit: { name: "44paku", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
-            unset: { name: "1ct35l", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" },
-            ['-moz-initial']: { name: "266iph", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
-            ['revert']: { name: "v8k55", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" }
+            contain: { name: "3lps4", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
+            cover: { name: "2vuz2w", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
+            fill: { name: "1y8gyn", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
+            none: { name: "d7wri", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
+            ['scale-down']: { name: "26uzwl", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
+            initial: { name: "2075rf", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
+            inherit: { name: "2zm148", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
+            unset: { name: "sager", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" },
+            ['-moz-initial']: { name: "18ul56", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
+            ['revert']: { name: "3grgsy", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" }
         }
     }
 }, "avatar-620ed0");

package/dist/es6/avatar/lib/AvatarImage.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 export const avatarImageStencil = createStencil({
-    base: { name: "245rhj", styles: "box-sizing:border-box;height:100%;width:100%;object-fit:cover;" }
+    base: { name: "31rfju", styles: "box-sizing:border-box;height:100%;width:100%;object-fit:cover;" }
 }, "avatar-image-e0bffc");
 export const AvatarImage = createComponent('img')({
     displayName: 'AvatarImage',