@workday/canvas-kit-react 14.0.0-alpha.1237-next.0 → 14.0.0-alpha.1239-next.0

package/dist/es6/loading-dots/lib/LoadingDots.js

@@ -5,7 +5,7 @@ import { handleCsProp, keyframes, createStencil, calc, px2rem, cssVar, } from '@
 /**
  * Keyframe for the dots loading animation.
  */
-const keyframesLoading = keyframes({ name: "17azdh", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
+const keyframesLoading = keyframes({ name: "fc6cw", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}0%, 79%, 100%{opacity:0.6;}27%{opacity:1;}53%{opacity:0.8;}" });
 export const loadingDotsStencil = createStencil({
     vars: {
         animationDurationMs: '40ms',
@@ -14,13 +14,13 @@ export const loadingDotsStencil = createStencil({
     parts: {
         loadingAnimationDot: 'loading-animation-dot',
     },
-    base: { name: "3kbrl0", styles: "--animationDurationMs-loading-dots-c7a3f7:40ms;--loadingDotColor-loading-dots-c7a3f7:var(--cnvs-sys-color-bg-muted-strong);box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x2);[data-part=\"loading-animation-dot\"]{background-color:var(--loadingDotColor-loading-dots-c7a3f7);width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);font-size:var(--cnvs-sys-space-zero);border-radius:var(--cnvs-sys-shape-round);outline:0.125rem solid transparent;transform:scale(0);display:inline-block;animation-name:animation-17azdh;animation-duration:calc(var(--animationDurationMs-loading-dots-c7a3f7) * 35);animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-fill-mode:both;&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(var(--animationDurationMs-loading-dots-c7a3f7) * 4);}&:nth-child(3){animation-delay:calc(var(--animationDurationMs-loading-dots-c7a3f7) * 8);}}" },
+    base: { name: "45fneq", styles: "--animationDurationMs-loading-dots-89a0c0:40ms;--loadingDotColor-loading-dots-89a0c0:var(--cnvs-sys-color-bg-muted-strong);box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x2);[data-part=\"loading-animation-dot\"]{background-color:var(--loadingDotColor-loading-dots-89a0c0);width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);font-size:var(--cnvs-sys-space-zero);border-radius:var(--cnvs-sys-shape-round);outline:0.125rem solid transparent;transform:scale(0);display:inline-block;animation-name:animation-fc6cw;animation-duration:calc(var(--animationDurationMs-loading-dots-89a0c0) * 35);animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-fill-mode:both;&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(var(--animationDurationMs-loading-dots-89a0c0) * 4);}&:nth-child(3){animation-delay:calc(var(--animationDurationMs-loading-dots-89a0c0) * 8);}}" },
     modifiers: {
         variant: {
-            inverse: { name: "40brbb", styles: "[data-part=\"loading-animation-dot\"]{background-color:var(--cnvs-sys-color-bg-muted-softer, var(--loadingDotColor-loading-dots-c7a3f7));}" }
+            inverse: { name: "4ia8r", styles: "[data-part=\"loading-animation-dot\"]{background-color:var(--cnvs-sys-color-bg-default, var(--loadingDotColor-loading-dots-89a0c0));}" }
         }
     }
-}, "loading-dots-c7a3f7");
+}, "loading-dots-89a0c0");
 /**
  * A simple component that displays three horizontal dots, to be used when some data is loading.
  */

package/dist/es6/pagination/lib/Pagination/PageButton.js

@@ -7,10 +7,10 @@ import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { PaginationContext } from './usePaginationModel';
 export const paginationPageButtonStencil = createStencil({
     extends: buttonStencil,
-    base: { name: "5ahyy", styles: "box-sizing:border-box;min-width:var(--cnvs-sys-space-x8);padding:var(--cnvs-sys-space-zero);font-weight:var(--cnvs-sys-font-weight-normal);--label-button-65cb05:var(--cnvs-sys-color-fg-default);&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);}&:active, &.active, &:focus-visible, &.focus{--label-button-65cb05:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-fg-disabled);}" },
+    base: { name: "1lksxu", styles: "box-sizing:border-box;min-width:var(--cnvs-sys-space-x8);padding:var(--cnvs-sys-space-zero);font-weight:var(--cnvs-sys-font-weight-normal);--label-button-65cb05:var(--cnvs-sys-color-fg-default);&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);}&:active, &.active, &:focus-visible, &.focus{--label-button-65cb05:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-fg-disabled);}" },
     modifiers: {
         toggled: {
-            true: { name: "2sqcgq", styles: "font-weight:var(--cnvs-sys-font-weight-bold);--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover, &:active, &.active, &:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-fg-disabled);}" }
+            true: { name: "11kh3n", styles: "font-weight:var(--cnvs-sys-font-weight-bold);--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover, &:active, &.active, &:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-fg-disabled);}" }
         }
     }
 }, "pagination-page-button-88d20c");

package/dist/es6/select/lib/SelectInput.d.ts

@@ -25,7 +25,7 @@ export declare const selectInputStencil: import("@workday/canvas-kit-styling").S
                 backgroundColor: "--cnvs-brand-error-lightest";
             };
         };
-        alert: ({ visualInputPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+        caution: ({ visualInputPart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
             readonly caret: "select-caret-icon";
             readonly caretContainer: "select-caret-container";
             readonly startIconContainer: "select-start-icon-container";

package/dist/es6/select/lib/SelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAgB,OAAO,EAAC,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAK3E,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAGlF,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC,EAAE,OAAO;IACtF;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA8D7B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BtB,CAAC"}
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAgB,OAAO,EAAC,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAK3E,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAGlF,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC,EAAE,OAAO;IACtF;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAoE7B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BtB,CAAC"}

package/dist/es6/select/lib/SelectInput.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { caretDownSmallIcon } from '@workday/canvas-system-icons-web';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { InputGroup, TextInput } from '@workday/canvas-kit-react/text-input';
-import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
 import { useSelectInput } from './hooks/useSelectInput';
 import { useSelectModel } from './hooks/useSelectModel';
 import { createSubcomponent } from '@workday/canvas-kit-react/common';
@@ -17,14 +17,14 @@ export const selectInputStencil = createStencil({
         hiddenInput: 'select-hidden-input',
         visualInput: 'select-visual-input',
     },
-    base: { name: "6r5et", styles: "box-sizing:border-box;[data-part=\"select-hidden-input\"]{position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;min-width:100%;width:100%;}[data-part=\"select-start-icon\"], [data-part=\"select-end-icon\"], [data-part=\"select-caret-container\"], [data-part=\"select-start-icon-container\"]{position:absolute;pointer-events:none;}[data-part=\"select-visual-input\"]{caret-color:transparent;background-color:var(--cnvs-sys-color-bg-default);color:var(--cnvs-sys-color-text-default);cursor:default;&::placeholder{color:var(--cnvs-sys-color-text-default);}&::selection{background-color:transparent;}}" },
+    base: { name: "23gcfb", styles: "box-sizing:border-box;[data-part=\"select-hidden-input\"]{position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;min-width:100%;width:100%;}[data-part=\"select-start-icon\"], [data-part=\"select-end-icon\"], [data-part=\"select-caret-container\"], [data-part=\"select-start-icon-container\"]{position:absolute;pointer-events:none;}[data-part=\"select-visual-input\"]{caret-color:transparent;background-color:var(--cnvs-sys-color-bg-default);color:var(--cnvs-sys-color-text-default);cursor:default;&::placeholder{color:var(--cnvs-sys-color-text-default);}&::selection{background-color:transparent;}}&:has(:disabled, .disabled){[data-part=\"select-caret-icon\"]{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}}" },
     modifiers: {
         error: {
-            error: { name: "3chqdl", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-brand-error-lightest);}" },
-            alert: { name: "1bcehf", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-brand-alert-lightest);}" }
+            error: { name: "321opo", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-brand-error-lightest);}" },
+            caution: { name: "1wknpi", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-brand-alert-lightest);}" }
         }
     }
-}, "select-input-b33740");
+}, "select-input-9444aa");
 export const SelectInput = createSubcomponent(TextInput)({
     modelHook: useSelectModel,
     elemPropsHook: useSelectInput,

package/dist/es6/switch/lib/Switch.js

@@ -17,7 +17,7 @@ const switchInputStencil = createStencil({
     modifiers: {
         error: {
             error: { name: "166muk", styles: "& ~ div:first-of-type{box-shadow:\n              0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n              0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-common-error-inner),\n              0 0 0 0.3125rem transparent;}" },
-            alert: { name: "rktku", styles: "& ~ div:first-of-type{box-shadow:\n          0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n          0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-common-alert-inner),\n          0 0 0 0.3125rem var(--cnvs-brand-common-alert-outer);}" }
+            caution: { name: "20t65f", styles: "& ~ div:first-of-type{box-shadow:\n          0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n          0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-common-alert-inner),\n          0 0 0 0.3125rem var(--cnvs-brand-common-alert-outer);}" }
         }
     }
 }, "switch-input-7f69d7");
@@ -28,8 +28,8 @@ const SwitchInput = createComponent('input')({
     },
 });
 const switchBackgroundStencil = createStencil({
-    base: { name: "3q226t", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-top:var(--cnvs-sys-space-x1);width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-round);padding:var(--cnvs-sys-space-zero) 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-bg-muted-soft);" }
-}, "switch-background-507b18");
+    base: { name: "3egbg5", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-top:var(--cnvs-sys-space-x1);width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-round);padding:var(--cnvs-sys-space-zero) 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-bg-muted-soft);" }
+}, "switch-background-96fe08");
 const SwitchBackground = createComponent('div')({
     displayName: 'SwitchBackground',
     Component: ({ children, ...elemProps }, ref, Element) => {
@@ -37,13 +37,13 @@ const SwitchBackground = createComponent('div')({
     },
 });
 const switchCircleStencil = createStencil({
-    base: { name: "1q1chx", styles: "box-sizing:border-box;width:var(--cnvs-sys-space-x3);height:var(--cnvs-sys-space-x3);border-radius:var(--cnvs-sys-shape-round);box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-brand-primary-accent);transform:translateX(var(--cnvs-sys-space-zero));" },
+    base: { name: "49jzlb", styles: "box-sizing:border-box;width:var(--cnvs-sys-space-x3);height:var(--cnvs-sys-space-x3);border-radius:var(--cnvs-sys-shape-round);box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-brand-primary-accent);transform:translateX(var(--cnvs-sys-space-zero));" },
     modifiers: {
         checked: {
-            true: { name: "29npze", styles: "transform:translateX(var(--cnvs-sys-space-x4));:dir(rtl){transform:translateX(calc(var(--cnvs-sys-space-x4) * -1));}" }
+            true: { name: "28li63", styles: "transform:translateX(var(--cnvs-sys-space-x4));:dir(rtl){transform:translateX(calc(var(--cnvs-sys-space-x4) * -1));}" }
         }
     }
-}, "switch-circle-d4f7c1");
+}, "switch-circle-cac9b6");
 const SwitchCircle = createComponent('div')({
     displayName: 'SwitchCircle',
     Component: ({ checked, ...elemProps }, ref, Element) => {

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

@@ -9,7 +9,7 @@ import { useTabsModel } from './useTabsModel';
 import { buttonStencil } from '@workday/canvas-kit-react/button';
 import { system, brand } from '@workday/canvas-tokens-web';
 const tabItemStencil = createStencil({
-    base: { name: "2whux4", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);border:none;background-color:transparent;flex:0 0 auto;min-width:var(--cnvs-sys-space-zero);align-items:center;padding:var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x4);height:3.25rem;cursor:pointer;color:var(--cnvs-sys-color-fg-muted-default);position:relative;border-radius:var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x1) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-soft);&:has(span){display:flex;gap:var(--cnvs-sys-space-x2);}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-bg-alt-default);color:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);}&: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, rgba(255,255,255,1));--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:disabled, &.disabled, &[aria-disabled]{color:var(--cnvs-sys-color-text-disabled);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-bg-transparent-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}}&[aria-selected=true]{color:var(--cnvs-brand-primary-base);cursor:default;--color-system-icon-3a4847:var(--cnvs-brand-primary-base);&:after{position:absolute;border-bottom:var(--cnvs-sys-space-x1) solid transparent;border-radius:var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-zero) var(--cnvs-sys-shape-zero);background-color:var(--cnvs-brand-primary-base);bottom:var(--cnvs-sys-space-zero);content:'';left:var(--cnvs-sys-space-zero);margin-block-start:calc(calc(var(--cnvs-sys-space-x2) / var(--cnvs-sys-space-x1)) * -1);width:100%;}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-bg-transparent-default);color:var(--cnvs-brand-primary-base);}}" }
+    base: { name: "2n2p4s", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);border:none;background-color:transparent;flex:0 0 auto;min-width:var(--cnvs-sys-space-zero);align-items:center;padding:var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x4);height:3.25rem;cursor:pointer;color:var(--cnvs-sys-color-fg-muted-default);position:relative;border-radius:var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x1) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-3a4847:currentColor;&:has(span){display:flex;gap:var(--cnvs-sys-space-x2);}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-bg-alt-default);color:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);}&: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, rgba(255,255,255,1));--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:disabled, &.disabled, &[aria-disabled]{color:var(--cnvs-sys-color-text-disabled);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-bg-transparent-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}}&[aria-selected=true]{color:var(--cnvs-brand-primary-base);cursor:default;--color-system-icon-3a4847:var(--cnvs-brand-primary-base);&:after{position:absolute;border-bottom:var(--cnvs-sys-space-x1) solid transparent;border-radius:var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-zero) var(--cnvs-sys-shape-zero);background-color:var(--cnvs-brand-primary-base);bottom:var(--cnvs-sys-space-zero);content:'';left:var(--cnvs-sys-space-zero);margin-block-start:calc(calc(var(--cnvs-sys-space-x2) / var(--cnvs-sys-space-x1)) * -1);width:100%;}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-bg-transparent-default);color:var(--cnvs-brand-primary-base);}}" }
 }, "tab-item-116136");
 export const StyledTabItem = createComponent('button')({
     displayName: 'StyledTabItem',

package/dist/es6/text-area/lib/TextArea.d.ts

@@ -55,7 +55,7 @@ export declare const textAreaStencil: import("@workday/canvas-kit-styling").Sten
                 outlineOffset: string;
             };
         };
-        alert: {
+        caution: {
             borderColor: "--cnvs-brand-common-alert-outer";
             boxShadow: `inset 0 0 0 ${string} --cnvs-brand-common-alert-inner`;
             backgroundColor: "--cnvs-brand-alert-lightest";

package/dist/es6/text-input/lib/TextInput.d.ts

@@ -33,7 +33,7 @@ export declare const textInputStencil: import("@workday/canvas-kit-styling").Ste
                 outlineOffset: string;
             };
         };
-        alert: {
+        caution: {
             borderColor: "--cnvs-brand-common-alert-outer";
             boxShadow: `inset 0 0 0 ${string} --cnvs-brand-common-alert-inner`;
             backgroundColor: "--cnvs-brand-alert-lightest";

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

@@ -15,7 +15,7 @@ export const textInputStencil = createStencil({
         },
         error: {
             error: { name: "15ahlp", styles: "border-color:var(--cnvs-brand-common-error-inner);border-width:0.125rem;background-color:var(--cnvs-brand-error-lightest);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-common-error-inner);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);outline-offset:0.125rem;}" },
-            alert: { name: "1q9wmz", styles: "border-color:var(--cnvs-brand-common-alert-outer);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner);background-color:var(--cnvs-brand-alert-lightest);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-common-alert-outer);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner),\n        0 0 0 2px var(--cnvs-sys-color-border-inverse),\n        0 0 0 4px var(--cnvs-brand-common-focus-outline);}outline-offset:0.125rem;" }
+            caution: { name: "2er8do", styles: "border-color:var(--cnvs-brand-common-alert-outer);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner);background-color:var(--cnvs-brand-alert-lightest);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-common-alert-outer);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner),\n        0 0 0 2px var(--cnvs-sys-color-border-inverse),\n        0 0 0 4px var(--cnvs-brand-common-focus-outline);}outline-offset:0.125rem;" }
         }
     },
     defaultModifiers: {

package/expandable/lib/ExpandableAvatar.tsx

@@ -1,6 +1,5 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {Avatar, AvatarProps, avatarStencil} from '@workday/canvas-kit-preview-react/avatar';
-import {system} from '@workday/canvas-tokens-web';
 import {createStencil} from '@workday/canvas-kit-styling';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
@@ -9,7 +8,6 @@ export interface ExpandableAvatarProps extends AvatarProps {}
 export const expandableAvatarStencil = createStencil({
   extends: avatarStencil,
   base: {
-    marginInlineEnd: system.space.x2,
     flexShrink: 0,
   },
 });

package/expandable/lib/ExpandableTarget.tsx

@@ -30,8 +30,9 @@ export const expandableTargetStencil = createStencil({
     borderRadius: system.shape.x1,
     borderWidth: 0,
     display: 'flex',
-    alignItems: 'flex-start',
+    alignItems: 'center',
     flexDirection: 'row',
+    gap: system.space.x2,
     justifyContent: 'start',
     padding: system.space.x2,
     cursor: 'pointer',

package/form-field/lib/FormFieldGroupList.tsx

@@ -26,7 +26,7 @@ const formFieldGroupListStencil = createStencil({
         backgroundColor: brand.error.lightest,
         boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.common.errorInner}`,
       },
-      alert: {
+      caution: {
         backgroundColor: brand.alert.lightest,
         boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.common.alertOuter}, inset 0 0 0 ${px2rem(3)} ${
           brand.common.alertInner

package/form-field/lib/FormFieldHint.tsx

@@ -16,7 +16,7 @@ export const formFieldHintStencil = createStencil({
       error: {
         color: brand.error.base,
       },
-      alert: {
+      caution: {
         color: system.color.text.caution.default,
       },
     },

package/form-field/lib/formFieldStencil.ts

@@ -40,7 +40,7 @@ export const formFieldStencil = createStencil({
     },
     error: {
       error: {},
-      alert: {},
+      caution: {},
     },
   },
   defaultModifiers: {

package/form-field/lib/hooks/useFormFieldModel.tsx

@@ -5,9 +5,9 @@ export const useFormFieldModel = createModelHook({
     /**
      * Optional flag to denote if this field has an error or warning to display.
      * If value is `error`: `aria-invalid` is added to the `FormField.Input` and the red error ring is added.
-     * If value is `alert`: A visual orange warning ring is added to the `FormField.Input`.
+     * If value is `cautiion`: A visual orange warning ring is added to the `FormField.Input`.
      */
-    error: undefined as undefined | 'error' | 'alert',
+    error: undefined as undefined | 'error' | 'caution',
     /**
      * Optional `id` provided to `FormField`'s subcomponents as HTML attributes:
      * - `FormField.Input` will set `aria-describedby` to `hint-${id}`

package/loading-dots/lib/LoadingDots.tsx

@@ -20,6 +20,15 @@ const keyframesLoading = keyframes({
   '40%': {
     transform: 'scale(1)',
   },
+  '0%, 79%, 100%': {
+    opacity: 0.6,
+  },
+  '27%': {
+    opacity: 1,
+  },
+  '53%': {
+    opacity: 0.8,
+  },
 });
 
 export interface LoadingDotsProps extends CSProps {
@@ -76,7 +85,7 @@ export const loadingDotsStencil = createStencil({
     variant: {
       inverse: ({loadingDotColor, loadingAnimationDotPart}) => ({
         [loadingAnimationDotPart]: {
-          backgroundColor: cssVar(system.color.bg.muted.softer, loadingDotColor),
+          backgroundColor: cssVar(system.color.bg.default, loadingDotColor),
         },
       }),
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "14.0.0-alpha.1237-next.0",
+  "version": "14.0.0-alpha.1239-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -52,8 +52,8 @@
     "@popperjs/core": "^2.5.4",
     "@tanstack/react-virtual": "^3.13.9",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^14.0.0-alpha.1237-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1237-next.0",
+    "@workday/canvas-kit-popup-stack": "^14.0.0-alpha.1239-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1239-next.0",
     "@workday/canvas-system-icons-web": "^3.0.35",
     "@workday/canvas-tokens-web": "3.0.0-alpha.12",
     "@workday/design-assets-types": "^0.2.10",
@@ -68,5 +68,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "8a03bc6fdf11ecb2672ad937247aaf18b7cee0ec"
+  "gitHead": "fdb8b845a09a86de1fb0a383fb3c5def6016e064"
 }

package/pagination/lib/Pagination/PageButton.tsx

@@ -15,7 +15,7 @@ export const paginationPageButtonStencil = createStencil({
     [buttonStencil.vars.label]: system.color.fg.default,
 
     '&:hover, &.hover': {
-      [buttonStencil.vars.background]: system.color.bg.alt.default,
+      [buttonStencil.vars.background]: system.color.bg.alt.soft,
       [buttonStencil.vars.label]: system.color.fg.strong,
     },
 

package/select/lib/SelectInput.tsx

@@ -2,7 +2,7 @@ import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
 import {createStencil, CSProps} from '@workday/canvas-kit-styling';
 import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 
 import {useSelectInput} from './hooks/useSelectInput';
 import {useSelectModel} from './hooks/useSelectModel';
@@ -35,6 +35,7 @@ export const selectInputStencil = createStencil({
     visualInputPart,
     caretContainerPart,
     startIconContainerPart,
+    caretPart,
   }) => ({
     [hiddenInputPart]: {
       position: 'absolute',
@@ -65,6 +66,11 @@ export const selectInputStencil = createStencil({
         backgroundColor: 'transparent',
       },
     },
+    '&:has(:disabled, .disabled)': {
+      [caretPart]: {
+        [systemIconStencil.vars.color]: system.color.fg.disabled,
+      },
+    },
   }),
   modifiers: {
     error: {
@@ -73,7 +79,7 @@ export const selectInputStencil = createStencil({
           backgroundColor: brand.error.lightest,
         },
       }),
-      alert: ({visualInputPart}) => ({
+      caution: ({visualInputPart}) => ({
         [visualInputPart]: {
           backgroundColor: brand.alert.lightest,
         },

package/switch/lib/Switch.tsx

@@ -97,7 +97,7 @@ const switchInputStencil = createStencil({
               0 0 0 ${px2rem(5)} transparent`,
         },
       },
-      alert: {
+      caution: {
         '& ~ div:first-of-type': {
           boxShadow: `
           0 0 0 ${px2rem(2)} ${system.color.border.inverse},

package/tabs/lib/TabsItem.tsx

@@ -101,7 +101,7 @@ const tabItemStencil = createStencil({
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
     overflow: 'hidden',
-    [systemIconStencil.vars.color]: system.color.fg.muted.soft,
+    [systemIconStencil.vars.color]: 'currentColor',
 
     '&:has(span)': {
       display: 'flex',

package/text-input/lib/TextInput.tsx

@@ -82,7 +82,7 @@ export const textInputStencil = createStencil({
           outlineOffset: px2rem(2),
         },
       },
-      alert: {
+      caution: {
         borderColor: brand.common.alertOuter,
         boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.common.alertInner}`,
         backgroundColor: brand.alert.lightest,