@workday/canvas-kit-react 15.1.7 → 15.1.9

package/dist/es6/table/lib/parts/BaseTableHead.js

@@ -4,7 +4,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { calc, createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const baseTableHeadStencil = createStencil({
-    base: { name: "166b90", styles: "box-sizing:border-box;background-color:var(--cnvs-sys-color-surface-raised, var(--cnvs-sys-color-bg-alt-softer, oklch(0.4688 0.0781 250.43 / 0.03)));min-height:calc(var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem)) - var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem)));th {&:first-of-type{border-inline-start:none;}&:last-of-type{border-inline-end:none;}}" }
+    base: { name: "nvboz", styles: "box-sizing:border-box;background-color:var(--cnvs-sys-color-surface-raised, var(--cnvs-sys-color-bg-alt-softer, oklch(0.4688 0.0781 250.43 / 0.03)));min-height:calc(var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem)) - var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem)));th {&:first-of-type{border-inline-start:none;}&:last-of-type{border-inline-end:none;}}" }
 }, "base-table-head-04aad6");
 export const BaseTableHead = createComponent('thead')({
     displayName: 'Table.Head',

package/dist/es6/table/lib/parts/BaseTableHeader.js

@@ -4,7 +4,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { base, system } from '@workday/canvas-tokens-web';
 export const baseTableHeaderStencil = createStencil({
-    base: { name: "1mbxeu", styles: "box-sizing:border-box;background-color:var(--cnvs-sys-color-bg-default);border-block-end:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));justify-content:start;min-height:calc(var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem)) - var(--cnvs-base-size-100, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));word-break:break-word;font-weight:var(--cnvs-sys-font-weight-medium);" }
+    base: { name: "4depsn", styles: "box-sizing:border-box;background-color:var(--cnvs-sys-color-bg-default);border-block-end:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));justify-content:start;min-height:calc(var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem)) - var(--cnvs-base-size-100, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));word-break:break-word;font-weight:var(--cnvs-sys-font-weight-medium);" }
 }, "base-table-header-325ccb");
 export const BaseTableHeader = createComponent('th')({
     displayName: 'Table.Header',

package/dist/es6/table/lib/parts/css-grid-table/TableRow.js

@@ -6,7 +6,7 @@ import { createStencil, createVars } from '@workday/canvas-kit-styling';
 const tableRowChildrenVars = createVars({ id: "c108a9", args: ["cellNumber"] });
 // Styles for rows including dynamic sizing for amount of cells within a row
 const tableRowStencil = createStencil({
-    base: { name: "4x0am", styles: "box-sizing:border-box;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--cellNumber-c108a9), minmax(10rem, 1fr));" }
+    base: { name: "3mr821", styles: "box-sizing:border-box;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--cellNumber-c108a9), minmax(10rem, 1fr));" }
 }, "table-row-5e99e6");
 export const TableRow = createComponent('tr')({
     displayName: 'Table.Row',

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

@@ -370,7 +370,7 @@ export declare const useTabsItem: import("@workday/canvas-kit-react/common").Beh
     readonly 'aria-selected': boolean;
     readonly 'aria-controls': string;
 }, import("@workday/canvas-kit-react/common").MergeProps<{
-    readonly onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    readonly onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => null | undefined;
 }, import("@workday/canvas-kit-react/common").MergeProps<{
     readonly ref: (instance: HTMLElement | null) => void;
     readonly 'aria-hidden': true | undefined;

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

@@ -9,7 +9,7 @@ import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { base, component, system } from '@workday/canvas-tokens-web';
 import { useTabsModel } from './useTabsModel';
 const tabItemStencil = createStencil({
-    base: { name: "ftg4r", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));font-weight:var(--cnvs-sys-font-weight-medium);border:none;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));flex:0 0 auto;min-width:0;align-items:center;padding:0 var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));height:var(--cnvs-sys-size-lg, 3rem);cursor:pointer;color:var(--cnvs-sys-color-fg-muted-default);position:relative;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0));transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-c9acc3:currentColor;--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));&:has(span){display:flex;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));color:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-strong);}&:focus-visible, &.focus{outline:0.125rem solid transparent;box-shadow:inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)), inset 0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0));--boxShadowInner-button-c26182:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-c26182:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));color:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled, &[aria-disabled]{opacity:var(--cnvs-sys-opacity-disabled);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);}}&[aria-selected=true]{color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));cursor:default;--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));&:after{position:absolute;border-block-end:var(--cnvs-base-size-50, 0.25rem) solid transparent;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0));background-color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));bottom:0;content:'';left:0;margin-block-start:calc(calc(var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) / var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem))) * -1);width:100%;}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}}" }
+    base: { name: "gal1e", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));font-weight:var(--cnvs-sys-font-weight-medium);border:none;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));flex:0 0 auto;min-width:0;align-items:center;padding:0 var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));height:var(--cnvs-sys-size-lg, 3rem);cursor:pointer;color:var(--cnvs-sys-color-fg-muted-default);position:relative;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0));transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-c9acc3:currentColor;--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));&:has(span){display:flex;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));color:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-strong);}&:focus-visible, &.focus{outline:0.125rem solid transparent;box-shadow:inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)), inset 0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0));--boxShadowInner-button-c26182:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-c26182:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));color:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled, &[aria-disabled]{opacity:var(--cnvs-sys-opacity-disabled);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-muted-default);}}&[aria-selected=true]{color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));cursor:default;--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));&:after{position:absolute;border-block-end:var(--cnvs-base-size-50, 0.25rem) solid transparent;border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0)) var(--cnvs-sys-shape-none, var(--cnvs-sys-shape-zero, 0));background-color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));bottom:0;content:'';left:0;margin-block-start:calc(calc(var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) / var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem))) * -1);width:100%;}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));color:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}}" }
 }, "tab-item-5f814c");
 export const StyledTabItem = createComponent('button')({
     displayName: 'StyledTabItem',

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

@@ -66,20 +66,20 @@ export const useTabsList = composeHooks(useTabOverflowScroll, createElemPropsHoo
     };
 }), useOverflowListMeasure, useListResetCursorOnBlur);
 export const tabsListStencil = createStencil({
-    base: { name: "2n1iet", styles: "box-sizing:border-box;display:flex;position:relative;border-block-end:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));padding-inline:var(--cnvs-base-size-500, 2.5rem);@media screen and (max-width: 768px){padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));}" },
+    base: { name: "22wlx0", styles: "box-sizing:border-box;display:flex;position:relative;border-block-end:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));padding-inline:var(--cnvs-base-size-500, 2.5rem);@media screen and (max-width: 768px){padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));}" },
     modifiers: {
         modality: {
-            touch: { name: "5a0jn", styles: "overflow-x:auto;padding-inline:0;&[data-scroll-position=\"start\"]{mask-image:linear-gradient(to right, white 80%, transparent);}&[data-scroll-position=\"middle\"]{mask-image:linear-gradient(to left, white 80%, transparent), linear-gradient(to right, white 80%, transparent);mask-composite:intersect;}&[data-scroll-position=\"end\"]{mask-image:linear-gradient(to left, white 80%, transparent);}" },
-            mouse: { name: "bltfs", styles: "" },
-            pen: { name: "2u8ile", styles: "" }
+            touch: { name: "ko1kh", styles: "overflow-x:auto;padding-inline:0;&[data-scroll-position=\"start\"]{mask-image:linear-gradient(to right, white 80%, transparent);}&[data-scroll-position=\"middle\"]{mask-image:linear-gradient(to left, white 80%, transparent), linear-gradient(to right, white 80%, transparent);mask-composite:intersect;}&[data-scroll-position=\"end\"]{mask-image:linear-gradient(to left, white 80%, transparent);}" },
+            mouse: { name: "2dlyun", styles: "" },
+            pen: { name: "1df3kc", styles: "" }
         },
         isDragging: {
-            true: { name: "2xq4wo", styles: "" },
-            false: { name: "41x4dd", styles: "" }
+            true: { name: "gros0", styles: "" },
+            false: { name: "2lid7u", styles: "" }
         },
         direction: {
-            left: { name: "13qfw5", styles: "" },
-            right: { name: "2c0dtz", styles: "" }
+            left: { name: "gjj2l", styles: "" },
+            right: { name: "33j8g8", styles: "" }
         }
     }
 }, "tabs-list-917c0e");

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

@@ -9,7 +9,7 @@ import { chevronDownSmallIcon } from '@workday/canvas-system-icons-web';
 import { StyledTabItem } from './TabsItem';
 import { useTabsModel } from './useTabsModel';
 const tabsOverflowButtonStencil = createStencil({
-    base: { name: "1qczzq", styles: "box-sizing:border-box;&:has([data-part=\"tabs-overflow-button-icon\"]){display:flex;gap:0;}" }
+    base: { name: "16tfo2", styles: "box-sizing:border-box;&:has([data-part=\"tabs-overflow-button-icon\"]){display:flex;gap:0;}" }
 }, "tabs-overflow-button-c1675c");
 export const useTabsOverflowButton = composeHooks(createElemPropsHook(useTabsModel)(() => {
     return {

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: "3nguo7", 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: "308qrd", 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: "3tkfhl", 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: "2yvyjy", 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: "11x2bp", styles: "cursor:default;color:var(--cnvs-sys-color-fg-disabled);" }
+            true: { name: "1vixar", styles: "cursor:default;color:var(--cnvs-sys-color-fg-disabled);" }
         },
         variant: {
-            inverse: { name: "ws86y", styles: "color:var(--cnvs-sys-color-fg-inverse);" },
-            error: { name: "10f12b", 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: "2idcy8", styles: "color:var(--cnvs-sys-color-fg-muted-default);" }
+            inverse: { name: "105qzw", styles: "color:var(--cnvs-sys-color-fg-inverse);" },
+            error: { name: "g12um", 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: "49ni59", styles: "color:var(--cnvs-sys-color-fg-muted-default);" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', disabled: true },
-            styles: { name: "3jjj0o", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-sys-color-fg-inverse);" }
+            styles: { name: "1j41sn", 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: "93heb", styles: "box-sizing:border-box;" },
+    base: { name: "172bzj", styles: "box-sizing:border-box;" },
     modifiers: {
         typeLevel: {
             // Title level styles
-            'title.large': { name: "1ot0eo", 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: "1tynbb", 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: "2ld3ap", 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: "41u32h", 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: "1c5yuo", 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: "ulk43", 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: "7eie7", 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: "21q89y", 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: "51t7c", 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: "1kg0c7", 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: "288mp4", 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: "2591ul", 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: "2d4uh", 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: "3ys599", 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: "1yjdh4", 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: "1gsnr4", 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: "3ja2n4", 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: "3gfr9n", 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: "3om3y7", 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: "1vrvtp", 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: "3hgzbx", 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: "42tswu", 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: "3fr1ux", 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: "341ldj", 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: "tr8ar", 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: "2iqxx0", styles: "color:var(--cnvs-sys-color-fg-muted-default);" },
-            inverse: { name: "13mh65", styles: "color:var(--cnvs-sys-color-fg-inverse);" }
+            error: { name: "3n2qz7", 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: "36yw5m", styles: "color:var(--cnvs-sys-color-fg-muted-default);" },
+            inverse: { name: "4cy2z9", 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: "36b7tj", styles: "box-sizing:border-box;" }
+    base: { name: "2mkzhq", 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: "2qw4ch", styles: "box-sizing:border-box;" }
+    base: { name: "zxy4i", 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: "47a1pr", styles: "box-sizing:border-box;" }
+    base: { name: "ph8bk", 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: "3fenk0", styles: "box-sizing:border-box;" }
+    base: { name: "31llv3", 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: "2a8h1b", 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: "2rgurm", 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: "3o19f9", styles: "resize:both;" },
-            horizontal: { name: "33301a", styles: "resize:horizontal;" },
-            vertical: { name: "1qt9me", styles: "resize:vertical;" },
-            none: { name: "6xe9g", styles: "resize:none;" }
+            both: { name: "1n2rf5", styles: "resize:both;" },
+            horizontal: { name: "fj3xz", styles: "resize:horizontal;" },
+            vertical: { name: "43f1va", styles: "resize:vertical;" },
+            none: { name: "1zhtdo", styles: "resize:none;" }
         }
     },
     defaultModifiers: {

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

@@ -35,10 +35,10 @@ export const inputGroupInnerStencil = createStencil({
          */
         pointerEvents: '',
     },
-    base: { name: "132f1f", styles: "--insetInlineStart-input-group-inner-9e2c81:initial;--insetInlineEnd-input-group-inner-9e2c81:initial;--width-input-group-inner-9e2c81:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));--height-input-group-inner-9e2c81: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-9e2c81);height:var(--height-input-group-inner-9e2c81);inset-inline-start:var(--insetInlineStart-input-group-inner-9e2c81);inset-inline-end:var(--insetInlineEnd-input-group-inner-9e2c81);" },
+    base: { name: "20yyxt", styles: "--insetInlineStart-input-group-inner-9e2c81:initial;--insetInlineEnd-input-group-inner-9e2c81:initial;--width-input-group-inner-9e2c81:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));--height-input-group-inner-9e2c81: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-9e2c81);height:var(--height-input-group-inner-9e2c81);inset-inline-start:var(--insetInlineStart-input-group-inner-9e2c81);inset-inline-end:var(--insetInlineEnd-input-group-inner-9e2c81);" },
     modifiers: {
         pointerEvents: {
-            _: { name: "1q2bbd", styles: "pointer-events:var(--pointerEvents-input-group-inner-9e2c81);" }
+            _: { name: "41b9rm", styles: "pointer-events:var(--pointerEvents-input-group-inner-9e2c81);" }
         }
     }
 }, "input-group-inner-9e2c81");
@@ -76,13 +76,13 @@ export const inputGroupInputStencil = createStencil({
         paddingInlineStart: '',
         paddingInlineEnd: '',
     },
-    base: { name: "t6p18", styles: "box-sizing:border-box;display:flex;width:100%;" },
+    base: { name: "19xhqc", styles: "box-sizing:border-box;display:flex;width:100%;" },
     modifiers: {
         paddingInlineStart: {
-            _: { name: "itt33", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-7be7a4);" }
+            _: { name: "x402i", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-7be7a4);" }
         },
         paddingInlineEnd: {
-            _: { name: "zoszv", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-7be7a4);" }
+            _: { name: "2axpqt", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-7be7a4);" }
         }
     }
 }, "input-group-input-7be7a4");
@@ -140,7 +140,7 @@ const wrapInCalc = (values) => {
     return `calc(${values.map(toPx).join(' + ')})`;
 };
 export const inputGroupStencil = createStencil({
-    base: { name: "5b5hx", 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: "2sp1hd", 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-2e0e78");
 /**
  * An `InputGroup` is a container around a {@link TextInput} with optional inner start and end

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

@@ -7,15 +7,15 @@ export const textInputStencil = createStencil({
     vars: {
         width: '',
     },
-    base: { name: "2zouot", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));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)));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));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-6e98c5);min-width:var(--width-text-input-6e98c5, 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: "otjyf", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));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)));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));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-6e98c5);min-width:var(--width-text-input-6e98c5, 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: "2p0nbs", styles: "width:100%;resize:vertical;" },
-            false: { name: "8gdbr", styles: "width:initial;" }
+            true: { name: "4cirsm", styles: "width:100%;resize:vertical;" },
+            false: { name: "23edjy", styles: "width:initial;" }
         },
         error: {
-            error: { name: "3e320j", 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));background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));&: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;}" },
-            caution: { name: "2rt6r8", 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)));background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.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;" }
+            error: { name: "45bi4q", 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));background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));&: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;}" },
+            caution: { name: "2nnf2j", 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)));background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.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;" }
         }
     },
     defaultModifiers: {

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

@@ -42,7 +42,7 @@ const getAriaAttributes = (mode, id) => {
     }
 };
 const toastStencil = createStencil({
-    base: { name: "33d4zq", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:22.5rem;padding:0;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));border-radius:var(--cnvs-sys-shape-xl, var(--cnvs-sys-shape-x4, 1rem));" }
+    base: { name: "uik0c", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:22.5rem;padding:0;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));border-radius:var(--cnvs-sys-shape-xl, var(--cnvs-sys-shape-x4, 1rem));" }
 }, "toast-3c71ec");
 /**
  * Toast is a compound component that has different modes based on its contents. The modes add the proper aria attributes for accessibility

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

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

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

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

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

@@ -4,7 +4,7 @@ import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { base, system } from '@workday/canvas-tokens-web';
 export const toastIconStencil = createStencil({
-    base: { name: "44o2p4", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-base-size-150, 0.75rem);" }
+    base: { name: "17m800", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-base-size-150, 0.75rem);" }
 }, "toast-icon-4762f0");
 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: "2ffyck", styles: "box-sizing:border-box;word-break:break-word;margin-block:0;" }
+    base: { name: "1krcke", 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,16 +11,16 @@ const tooltipTranslateVars = createVars({ id: "5cc1ce", args: ["positionX", "pos
 /**
  * Keyframe for the Tooltip animation.
  */
-const tooltipAnimation = keyframes({ name: "3mxjcw", styles: "0%{opacity:0;transform:translate(var(--positionX-5cc1ce), var(--positionY-5cc1ce));}100%{opacity:1;transform:translate(0);}" });
+const tooltipAnimation = keyframes({ name: "2d6xt0", styles: "0%{opacity:0;transform:translate(var(--positionX-5cc1ce), var(--positionY-5cc1ce));}100%{opacity:1;transform:translate(0);}" });
 export const tooltipContainerStencil = createStencil({
     vars: {
         tooltipTransformOriginHorizontal: '',
         tooltipTransformOriginVertical: '',
     },
-    base: { name: "1ofwly", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));display:inline-flex;position:relative;padding:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));color:var(--cnvs-sys-color-fg-inverse);animation-name:animation-3mxjcw;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-0d74d6) var(--tooltipTransformOriginHorizontal-tooltip-container-0d74d6);a{color:var(--cnvs-sys-color-fg-inverse);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));outline:0.0625rem solid transparent;outline-offset:-0.0625rem;z-index:-1;margin:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));background-color:var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)));position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:var(--cnvs-sys-depth-2);}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}" },
+    base: { name: "8uyjn", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));display:inline-flex;position:relative;padding:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));color:var(--cnvs-sys-color-fg-inverse);animation-name:animation-2d6xt0;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-0d74d6) var(--tooltipTransformOriginHorizontal-tooltip-container-0d74d6);a{color:var(--cnvs-sys-color-fg-inverse);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));outline:0.0625rem solid transparent;outline-offset:-0.0625rem;z-index:-1;margin:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));background-color:var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)));position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:var(--cnvs-sys-depth-2);}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}" },
     modifiers: {
         elementHasFocus: {
-            true: { name: "cuar5", styles: "padding:calc(var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) - calc(var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem)) / 2));&:before{margin:var(--cnvs-base-size-75, 0.375rem);}" }
+            true: { name: "yzhib", styles: "padding:calc(var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) - calc(var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem)) / 2));&:before{margin:var(--cnvs-base-size-75, 0.375rem);}" }
         }
     }
 }, "tooltip-container-0d74d6");

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

@@ -1 +1 @@
-export const version = '15.1.7';
+export const version = '15.1.9';

package/menu/lib/MenuCard.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import {Card} from '@workday/canvas-kit-react/card';
+import {listBoxContainerStencil} from '@workday/canvas-kit-react/collection';
 import {
   ExtractProps,
   createElemPropsHook,
@@ -8,7 +9,7 @@ import {
 } from '@workday/canvas-kit-react/common';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {getTransformFromPlacement} from '@workday/canvas-kit-react/popup';
-import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {calc, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 import {useMenuModel} from './useMenuModel';
@@ -42,12 +43,22 @@ export const menuCardStencil = createStencil({
     maxWidth: calc.subtract('100vw', system.legacy.size.sm),
     boxShadow: system.depth[3],
     minWidth,
-    maxHeight,
+    maxHeight: cssVar(maxHeight, '60vh'),
     transformOrigin: `${transformOriginVertical} ${transformOriginHorizontal}`,
     // Allow overriding of animation in special cases
     '.wd-no-animation &': {
       animation: 'none',
     },
+    [`&:where(:has(${listBoxContainerStencil.parts.listBoxContainer.selector}))`]: {
+      overflow: 'hidden',
+    },
+    [`& :where(${listBoxContainerStencil.parts.listBoxContainer.selector})`]: {
+      borderRadius: system.legacy.shape.xxl,
+      // Card is a flex column container. Without this, a flex child won't shrink below its
+      // content size, so `maxHeight` on the Card would be ignored and content would overflow
+      // instead of scrolling inside the list-box-container.
+      minHeight: 0,
+    },
   }),
 });
 

package/menu/lib/MenuItem.tsx

@@ -2,11 +2,13 @@ import * as React from 'react';
 
 import {
   isCursor,
+  isElementDisabled,
   useListItemRegister,
   useListItemRovingFocus,
   useListItemSelect,
 } from '@workday/canvas-kit-react/collection';
 import {
+  changeFocus,
   composeHooks,
   createComponent,
   createElemPropsHook,
@@ -179,7 +181,12 @@ export const useMenuItemArrowReturn = createElemPropsHook(useMenuModel)(model =>
     onKeyDown(event: React.KeyboardEvent) {
       const styles = getComputedStyle(event.currentTarget);
       if (event.key === 'ArrowLeft' && styles.direction === 'ltr' && model.UNSTABLE_parentModel) {
+        event.preventDefault();
+        const target = model.state.targetRef.current as HTMLElement | null;
         model.events.hide(event);
+        requestAnimationFrame(() => {
+          changeFocus(target);
+        });
       }
     },
   };
@@ -192,6 +199,27 @@ export const useMenuItemFocus = createElemPropsHook(useMenuModel)((
 ) => {
   const {localRef, elementRef} = useLocalRef(ref as React.Ref<HTMLElement>);
   const id = elemProps['data-id'];
+
+  // A menu keeps its cursor between openings, so reopening would restore focus to a disabled item.
+  // Items remount whenever the menu opens, which distinguishes reopening from navigating onto a
+  // disabled item while the menu is already open. Clearing the cursor lets the roving focus
+  // fallback in `useListItemRovingFocus` move focus to the first item. The check waits for the
+  // first render where `id` is known, since items without an explicit `data-id` register it later.
+  const hasCheckedDisabledCursor = React.useRef(false);
+  React.useLayoutEffect(() => {
+    if (hasCheckedDisabledCursor.current || !id) {
+      return;
+    }
+    hasCheckedDisabledCursor.current = true;
+
+    const isItemDisabled = isElementDisabled(localRef.current);
+
+    if (model.state.mode === 'single' && isCursor(model.state, id) && isItemDisabled) {
+      model.events.goToFirst();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+
   // focus on the item with the cursor
   React.useLayoutEffect(() => {
     if (model.state.mode === 'single') {
@@ -227,11 +255,12 @@ export const useMenuItem = composeHooks(
       onClick:
         model.state.mode === 'single'
           ? (event: React.SyntheticEvent) => {
-              // only hide if the item isn't disabled
-              if (event.currentTarget.getAttribute('aria-disabled') !== 'true') {
-                model.events.hide(event);
-                hideParent(model);
+              if (isElementDisabled(event.currentTarget as Element)) {
+                return null;
               }
+              model.events.hide(event);
+              hideParent(model);
+              return undefined;
             }
           : undefined,
     };

package/menu/lib/MenuList.tsx

@@ -54,12 +54,13 @@ export const MenuList = createSubcomponent('div')({
   displayName: 'Menu.List',
   modelHook: useMenuModel,
   elemPropsHook: useMenuList,
-})<MenuListProps>(({children, ...elemProps}, Element, model) => {
+})<MenuListProps>(({children, maxHeight, ...elemProps}, Element, model) => {
   return (
     <ListBox
       as={Element}
       model={model}
       marginY={system.legacy.gap.none}
+      maxHeight={maxHeight ?? '100%'}
       {...handleCsProp(elemProps, menuListStencil({orientation: model.state.orientation}))}
     >
       {children}