npm - @workday/canvas-kit-preview-react - Versions diffs - 12.6.9 → 12.6.11 - Mend

@workday/canvas-kit-preview-react 12.6.9 → 12.6.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/dist/es6/loading-sparkles/lib/LoadingSparkles.js CHANGED Viewed

@@ -23,15 +23,15 @@ const AI_COLORS = {
 /**
  * The animation for the sparkle.
  */
-const LOADING_ANIMATION = keyframes({ name: "nhdk3", styles: "0%, 79%, 100%{opacity:0.2;transform:scale(0.55);}27%{opacity:1;transform:scale(1);}53%{opacity:0.6;transform:scale(0.7);}" });
-const loadingSparklesIconStyles = createStyles({ name: "nhdk4", styles: "animation-duration:1230ms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-nhdk3;animation-timing-function:ease-in-out;.wd-sparkle-fill{fill:#8C17D2;}&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1230ms * (1/3));}&:nth-child(3){animation-delay:calc(1230ms * (2/3));}@media (prefers-contrast: more){.wd-sparkle-fill{color:currentColor;fill:currentColor;}}" });
+const LOADING_ANIMATION = keyframes({ name: "vfis3", styles: "0%, 79%, 100%{opacity:0.2;transform:scale(0.55);}27%{opacity:1;transform:scale(1);}53%{opacity:0.6;transform:scale(0.7);}" });
+const loadingSparklesIconStyles = createStyles({ name: "vfis4", styles: "animation-duration:1230ms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-vfis3;animation-timing-function:ease-in-out;.wd-sparkle-fill{fill:#8C17D2;}&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1230ms * (1/3));}&:nth-child(3){animation-delay:calc(1230ms * (2/3));}@media (prefers-contrast: more){.wd-sparkle-fill{color:currentColor;fill:currentColor;}}" });
 /**
  * An individual loading sparkle. ✨
  */
 const Sparkle = () => {
     return (React.createElement(SystemIcon, { icon: sparkleIcon, cs: [loadingSparklesIconStyles], size: cssVar(system.space.x3) }));
 };
-const loadingSparklesStyles = createStyles({ name: "nhdk5", styles: "display:inline-flex;gap:0.0625rem;" });
+const loadingSparklesStyles = createStyles({ name: "vfis5", styles: "display:inline-flex;gap:0.0625rem;" });
 /**
  * A simple component that displays three horizontal sparkles, to be used when an AI operation is in progress.
  */

package/dist/es6/multi-select/lib/MultiSelectInput.d.ts CHANGED Viewed

@@ -1,7 +1,60 @@
 import React from 'react';
+import { ErrorType } from '@workday/canvas-kit-react/common';
 import { CSProps } from '@workday/canvas-kit-styling';
 import { MultiSelectedItemProps } from './MultiSelectedItem';
-export declare const multiSelectStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
+export declare const multiSelectInputStencil: import("@workday/canvas-kit-styling").Stencil<{
+    error: {
+        error: {
+            borderColor: "--cnvs-brand-error-base";
+            boxShadow: `inset 0 0 0 ${string} --cnvs-brand-error-base`;
+            '&:has(:hover, :disabled, :focus-visible), &:is(.hover, .disabled, .focus)': {
+                borderColor: "--cnvs-brand-error-base";
+            };
+            '&:has(:focus-visible:not([disabled])), &.focus': {
+                boxShadow: `inset 0 0 0 ${string} --cnvs-brand-error-base, 0 0 0 2px --cnvs-sys-color-border-inverse, 0 0 0 4px --cnvs-brand-common-focus-outline`;
+                outlineOffset: string;
+            };
+        };
+        alert: {
+            borderColor: "--cnvs-brand-alert-darkest";
+            boxShadow: `inset 0 0 0 ${string} --cnvs-brand-alert-base`;
+            '&:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled]))': {
+                borderColor: "--cnvs-brand-alert-darkest";
+            };
+            '&:has(:focus-visible, .focus):not(:has([disabled]))': {
+                boxShadow: `inset 0 0 0 ${string} --cnvs-brand-alert-base,\n        0 0 0 2px --cnvs-sys-color-border-inverse,\n        0 0 0 4px --cnvs-brand-common-focus-outline`;
+            };
+            outlineOffset: string;
+        };
+    };
+}, {}, {}, never, never>;
+/** @deprecated use `multiSelectInputStencil` instead. This will be removed in a future version. */
+export declare const multiSelectStencil: import("@workday/canvas-kit-styling").Stencil<{
+    error: {
+        error: {
+            borderColor: "--cnvs-brand-error-base";
+            boxShadow: `inset 0 0 0 ${string} --cnvs-brand-error-base`;
+            '&:has(:hover, :disabled, :focus-visible), &:is(.hover, .disabled, .focus)': {
+                borderColor: "--cnvs-brand-error-base";
+            };
+            '&:has(:focus-visible:not([disabled])), &.focus': {
+                boxShadow: `inset 0 0 0 ${string} --cnvs-brand-error-base, 0 0 0 2px --cnvs-sys-color-border-inverse, 0 0 0 4px --cnvs-brand-common-focus-outline`;
+                outlineOffset: string;
+            };
+        };
+        alert: {
+            borderColor: "--cnvs-brand-alert-darkest";
+            boxShadow: `inset 0 0 0 ${string} --cnvs-brand-alert-base`;
+            '&:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled]))': {
+                borderColor: "--cnvs-brand-alert-darkest";
+            };
+            '&:has(:focus-visible, .focus):not(:has([disabled]))': {
+                boxShadow: `inset 0 0 0 ${string} --cnvs-brand-alert-base,\n        0 0 0 2px --cnvs-sys-color-border-inverse,\n        0 0 0 4px --cnvs-brand-common-focus-outline`;
+            };
+            outlineOffset: string;
+        };
+    };
+}, {}, {}, never, never>;
 export declare const useMultiSelectInput: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
@@ -192,9 +245,10 @@ export declare const useMultiSelectInput: import("@workday/canvas-kit-react/comm
     readonly onClick: (event: React.MouseEvent<Element, MouseEvent>) => void;
 }, {}>>>>>>>, import("@workday/canvas-kit-react/common").MergeProps<{}, import("@workday/canvas-kit-react/common").MergeProps<{}, import("@workday/canvas-kit-react/common").MergeProps<{}, {}>>>>>>>>;
 export interface MultiSelectInputProps extends CSProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'className' | 'style' | 'aria-labelledby'>, Pick<MultiSelectedItemProps, 'removeLabel'> {
+    error?: ErrorType;
 }
 export declare const MultiSelectInput: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"input", import("@workday/canvas-kit-react/text-input").TextInputProps> & {
-    ErrorType: typeof import("@workday/canvas-kit-react/common").ErrorType;
+    ErrorType: typeof ErrorType;
 }, MultiSelectInputProps, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
@@ -346,7 +400,7 @@ export declare const MultiSelectInput: import("@workday/canvas-kit-react/common"
     };
 }>;
 export declare const MultiSelectSearchInput: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"input", import("@workday/canvas-kit-react/text-input").TextInputProps> & {
-    ErrorType: typeof import("@workday/canvas-kit-react/common").ErrorType;
+    ErrorType: typeof ErrorType;
 }, MultiSelectInputProps, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;

package/dist/es6/multi-select/lib/MultiSelectInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../multi-select/lib/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;~~AAU1B~~,OAAO,EAAgB,OAAO,~~EAAe~~,MAAM,6BAA6B,CAAC;~~AAMjF~~,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAG3D,eAAO,MAAM,~~kBAAkB~~,~~iJAiE7B,~~CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAGT,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sMA2BzC,CAAC;AAEF,MAAM,WAAW,qBACf,SAAQ,OAAO,EACb,IAAI,CACF,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,UAAU,GAAG,WAAW,GAAG,OAAO,GAAG,iBAAiB,CACvD,EACD,IAAI,CAAC,sBAAsB,EAAE,aAAa,CAAC;~~CAAG~~;~~AAElD~~,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~EAoC5B~~,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~EA8ClC~~,CAAC"}
1	+ {"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../multi-select/lib/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EACL,SAAS,EAIV,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAgB,OAAO,EAA6B,MAAM,6BAA6B,CAAC;AAM/F,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAG3D,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;wBA8GlC,CAAC;AAEH,mGAAmG;AACnG,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;wBAA0B,CAAC;AAE1D,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAGT,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sMA2BzC,CAAC;AAEF,MAAM,WAAW,qBACf,SAAQ,OAAO,EACb,IAAI,CACF,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,UAAU,GAAG,WAAW,GAAG,OAAO,GAAG,iBAAiB,CACvD,EACD,IAAI,CAAC,sBAAsB,EAAE,aAAa,CAAC;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuC5B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDlC,CAAC"}

package/dist/es6/multi-select/lib/MultiSelectInput.js CHANGED Viewed

@@ -1,16 +1,25 @@
 import React from 'react';
-import { system } from '@workday/canvas-tokens-web';
+import { brand, system } from '@workday/canvas-tokens-web';
 import { caretDownSmallIcon, searchIcon } from '@workday/canvas-system-icons-web';
 import { composeHooks, createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
-import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
-import { InputGroup, TextInput } from '@workday/canvas-kit-react/text-input';
+import { createStencil, handleCsProp, px2rem, calc } from '@workday/canvas-kit-styling';
+import { InputGroup, TextInput, textInputStencil } from '@workday/canvas-kit-react/text-input';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { useComboboxInput, useComboboxInputConstrained } from '@workday/canvas-kit-react/combobox';
 import { useMultiSelectModel } from './useMultiSelectModel';
 import { MultiSelectedList } from './MultiSelectedList';
-export const multiSelectStencil = createStencil({
-    base: { name: "nhdk26", styles: "box-sizing:border-box;border:1px solid var(--cnvs-sys-color-border-input-default);display:flex;flex-direction:column;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-x1);min-height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;margin:0;&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-within{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default);}& [data-part=\"user-input\"]{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);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);background-color:var(--cnvs-sys-color-bg-transparent);border-radius:var(--cnvs-sys-shape-x1);border:none !important;box-shadow:none !important;outline-width:0px;&:where(:not([aria-autocomplete])){caret-color:transparent;cursor:default;&::selection{background-color:transparent;}}}& :where([data-part=\"form-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;}& :where([data-part=\"separator\"]){background-color:var(--cnvs-sys-color-border-divider);height:1px;margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x2);}& :where([data-part=\"list\"]){display:flex;gap:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x2);flex-wrap:wrap;}" }
-}, "multi-select-5f5351");
+export const multiSelectInputStencil = createStencil({
+    //@ts-ignore Types don't like defining a variable in `base` and using a variable in a nested selector. One or the other is fine, but not both.
+    base: { name: "vfis2b", styles: "box-sizing:border-box;border:1px solid var(--cnvs-sys-color-border-input-default);display:flex;flex-direction:column;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-x1);min-height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;margin:0;--width-text-input-d81f49:100%;&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-strong);}&:has(:focus-visible:not([disabled])), &.focus{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default);}& [data-part=\"user-input\"]{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);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);background-color:var(--cnvs-sys-color-bg-transparent);border-radius:var(--cnvs-sys-shape-x1);&:where([data-part=\"user-input\"], [data-part=\"form-input\"]){height:calc(var(--cnvs-sys-space-x10) - 0.125rem);}border:none !important;box-shadow:none !important;outline-width:0px;&:where(:not([aria-autocomplete])){caret-color:transparent;cursor:default;&::selection{background-color:transparent;}}}&:has(:disabled, .disabled){border-color:var(--cnvs-sys-color-border-input-disabled);color:var(--cnvs-sys-color-text-disabled);}& :where([data-part=\"form-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;}& :where([data-part=\"separator\"]){background-color:var(--cnvs-sys-color-border-divider);height:1px;margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x2);}& :where([data-part=\"list\"]){display:flex;gap:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x2);flex-wrap:wrap;}" },
+    modifiers: {
+        error: {
+            error: { name: "vfis2c", styles: "border-color:var(--cnvs-brand-error-base);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base);&:has(:hover, :disabled, :focus-visible), &:is(.hover, .disabled, .focus){border-color:var(--cnvs-brand-error-base);}&:has(:focus-visible:not([disabled])), &.focus{box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base), 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: "vfis2d", styles: "border-color:var(--cnvs-brand-alert-darkest);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base);&:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled])){border-color:var(--cnvs-brand-alert-darkest);}&:has(:focus-visible, .focus):not(:has([disabled])){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base),\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;" }
+        }
+    }
+}, "multi-select-input-36ec84");
+/** @deprecated use `multiSelectInputStencil` instead. This will be removed in a future version. */
+export const multiSelectStencil = multiSelectInputStencil;
 export const useMultiSelectInput = composeHooks(createElemPropsHook(useMultiSelectModel)((model, ref) => {
     return {
         onKeyDown(event) {
@@ -38,28 +47,28 @@ export const useMultiSelectInput = composeHooks(createElemPropsHook(useMultiSele
 export const MultiSelectInput = createSubcomponent(TextInput)({
     modelHook: useMultiSelectModel,
     elemPropsHook: useMultiSelectInput,
-})(({ className, cs, style, 'aria-labelledby': ariaLabelledBy, removeLabel, formInputProps, ...elemProps }, Element, model) => {
-    return (React.createElement("div", { ...handleCsProp({ className, cs, style }, multiSelectStencil({})) },
+})(({ className, cs, style, error, 'aria-labelledby': ariaLabelledBy, removeLabel, disabled, formInputProps, ...elemProps }, Element) => {
+    return (React.createElement("div", { ...handleCsProp({ className, cs, style }, multiSelectInputStencil({ error })) },
         React.createElement(InputGroup, null,
             React.createElement(InputGroup.Input, { "data-part": "form-input", ...formInputProps }),
-            React.createElement(InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, readOnly: true, ...elemProps }),
+            React.createElement(InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, readOnly: true, disabled: disabled, error: error, ...elemProps }),
             React.createElement(InputGroup.InnerEnd, { pointerEvents: "none" },
                 React.createElement(SystemIcon, { icon: caretDownSmallIcon }))),
-        React.createElement(MultiSelectedList, { removeLabel: removeLabel })));
+        React.createElement(MultiSelectedList, { disabled: disabled, removeLabel: removeLabel })));
 });
 export const MultiSelectSearchInput = createSubcomponent(TextInput)({
     modelHook: useMultiSelectModel,
     elemPropsHook: useMultiSelectInput,
-})(({ className, cs, style, 'aria-labelledby': ariaLabelledBy, removeLabel, formInputProps, ref, ...elemProps }, Element, model) => {
-    return (React.createElement("div", { ...handleCsProp({ className, cs, style }, multiSelectStencil({})) },
+})(({ className, cs, style, 'aria-labelledby': ariaLabelledBy, removeLabel, formInputProps, ref, disabled, error, ...elemProps }, Element) => {
+    return (React.createElement("div", { ...handleCsProp({ className, cs, style }, multiSelectInputStencil({})) },
         React.createElement(InputGroup, null,
             React.createElement(InputGroup.InnerStart, { pointerEvents: "none", width: system.space.x8 },
                 React.createElement(SystemIcon, { icon: searchIcon, size: system.space.x4 })),
             React.createElement(InputGroup.Input, { "data-part": "form-input", placeholder: null, ...formInputProps }),
-            React.createElement(InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, ...elemProps }),
+            React.createElement(InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, disabled: disabled, error: error, ...elemProps }),
             React.createElement(InputGroup.InnerEnd, { width: system.space.x4 },
                 React.createElement(InputGroup.ClearButton, null)),
             React.createElement(InputGroup.InnerEnd, { pointerEvents: "none" },
                 React.createElement(SystemIcon, { icon: caretDownSmallIcon }))),
-        React.createElement(MultiSelectedList, { removeLabel: removeLabel })));
+        React.createElement(MultiSelectedList, { removeLabel: removeLabel, disabled: disabled })));
 });

package/dist/es6/multi-select/lib/MultiSelectedItem.d.ts CHANGED Viewed

@@ -1,5 +1,9 @@
 import React from 'react';
 export interface MultiSelectedItemProps {
+    /**
+     * Disabled on the `Pill` component.
+     */
+    disabled?: boolean;
     /**
      * Remove label on a MultiSelectedItem. In English, the label may be "Remove" and the screen
      * reader will read out "Remove {option}".

package/dist/es6/multi-select/lib/MultiSelectedItem.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelectedItem.d.ts","sourceRoot":"","sources":["../../../../multi-select/lib/MultiSelectedItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,MAAM,WAAW,sBAAsB;IACrC;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iIAShC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAU5B,CAAC"}
1	+ {"version":3,"file":"MultiSelectedItem.d.ts","sourceRoot":"","sources":["../../../../multi-select/lib/MultiSelectedItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iIAShC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAU5B,CAAC"}

package/dist/es6/multi-select/lib/MultiSelectedItem.js CHANGED Viewed

@@ -12,8 +12,8 @@ export const useMultiSelectedItem = composeHooks(createElemPropsHook(useMultiSel
 export const MultiSelectedItem = createSubcomponent('span')({
     modelHook: useMultiSelectModel,
     elemPropsHook: useMultiSelectedItem,
-})(({ children, removeLabel, ref, ...elemProps }, Element) => {
-    return (React.createElement(Pill, { as: Element, variant: "removable" },
+})(({ children, removeLabel, disabled, ref, ...elemProps }, Element) => {
+    return (React.createElement(Pill, { as: Element, disabled: disabled, variant: "removable" },
         children,
         React.createElement(Pill.IconButton, { "aria-label": removeLabel, ref: ref, ...elemProps })));
 });

package/dist/es6/multi-select/lib/MultiSelectedList.d.ts CHANGED Viewed

@@ -1,6 +1,11 @@
 import React from 'react';
 import { MultiSelectedItemProps } from './MultiSelectedItem';
 export interface MultiSelectedListProps extends MultiSelectedItemProps, React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Disabled is forwarded to the MultiSelectedItem component to make sure each item is also
+     * disabled.
+     */
+    disabled?: boolean;
 }
 export declare const MultiSelectedList: import("@workday/canvas-kit-react/common").ElementComponentM<"div", MultiSelectedListProps, {
     state: {

package/dist/es6/multi-select/lib/MultiSelectedList.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelectedList.d.ts","sourceRoot":"","sources":["../../../../multi-select/lib/MultiSelectedList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAoB,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAE9E,MAAM,WAAW,sBACf,SAAQ,sBAAsB,EAC5B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;~~CAAG~~;~~AAE3C~~,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~EAiB5B~~,CAAC"}
1	+ {"version":3,"file":"MultiSelectedList.d.ts","sourceRoot":"","sources":["../../../../multi-select/lib/MultiSelectedList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAoB,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAE9E,MAAM,WAAW,sBACf,SAAQ,sBAAsB,EAC5B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuB7B,CAAC"}

package/dist/es6/multi-select/lib/MultiSelectedList.js CHANGED Viewed

@@ -5,8 +5,8 @@ import { useMultiSelectModel } from './useMultiSelectModel';
 import { MultiSelectedItem } from './MultiSelectedItem';
 export const MultiSelectedList = createSubcomponent('div')({
     modelHook: useMultiSelectModel,
-})(({ 'aria-labelledby': ariaLabelledBy, removeLabel }, Element, model) => {
+})(({ 'aria-labelledby': ariaLabelledBy, disabled, removeLabel }, Element, model) => {
     return model.selected.state.items.length ? (React.createElement(React.Fragment, null,
         React.createElement("div", { "data-part": "separator" }),
-        React.createElement(ListBox, { model: model.selected, as: Element, role: "listbox", "aria-orientation": "horizontal", "aria-labelledby": ariaLabelledBy }, item => React.createElement(MultiSelectedItem, { removeLabel: removeLabel }, item.textValue)))) : null;
+        React.createElement(ListBox, { model: model.selected, as: Element, role: "listbox", "aria-orientation": "horizontal", "aria-labelledby": ariaLabelledBy }, item => (React.createElement(MultiSelectedItem, { disabled: disabled, removeLabel: removeLabel }, item.textValue))))) : null;
 });

package/dist/es6/radio/lib/RadioGroup.js CHANGED Viewed

@@ -10,11 +10,11 @@ import { brand, system } from '@workday/canvas-tokens-web';
  * Styles for RadioGroup
  */
 const radioGroupStencil = createStencil({
-    base: { name: "nhdkw", styles: "box-sizing:border-box;display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-x1);gap:var(--cnvs-sys-space-x2);padding:0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);margin:0 calc(var(--cnvs-sys-space-x3) * -1);transition:100ms box-shadow;width:fit-content;" },
+    base: { name: "vfisw", styles: "box-sizing:border-box;display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-x1);gap:var(--cnvs-sys-space-x2);padding:0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);margin:0 calc(var(--cnvs-sys-space-x3) * -1);transition:100ms box-shadow;width:fit-content;" },
     modifiers: {
         error: {
-            error: { name: "nhdkx", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);" },
-            alert: { name: "nhdky", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-alert-darkest), inset 0 0 0 0.1875rem var(--cnvs-brand-alert-base);" }
+            error: { name: "vfisx", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);" },
+            alert: { name: "vfisy", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-alert-darkest), inset 0 0 0 0.1875rem var(--cnvs-brand-alert-base);" }
         }
     }
 }, "radio-group-ce2b62");

package/dist/es6/radio/lib/RadioLabel.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { RadioText } from './RadioText';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const radioLabelStencil = createStencil({
-    base: { name: "nhdkv", styles: "box-sizing:border-box;align-items:flex-start;min-height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x3);" }
+    base: { name: "vfisv", styles: "box-sizing:border-box;align-items:flex-start;min-height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x3);" }
 }, "radio-label-0cca27");
 export const RadioLabelContext = React.createContext({});
 export const RadioLabel = createSubcomponent('label')({

package/dist/es6/radio/lib/RadioText.js CHANGED Viewed

@@ -8,19 +8,19 @@ import { system } from '@workday/canvas-tokens-web';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 const radioTextStencil = createStencil({
     extends: textStencil,
-    base: { name: "nhdkr", styles: "box-sizing:border-box;cursor:pointer;" },
+    base: { name: "vfisr", styles: "box-sizing:border-box;cursor:pointer;" },
     modifiers: {
         variant: {
-            inverse: { name: "nhdks", styles: "color:var(--cnvs-sys-color-text-inverse);" }
+            inverse: { name: "vfiss", styles: "color:var(--cnvs-sys-color-text-inverse);" }
         },
         disabled: {
-            true: { name: "nhdkt", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
+            true: { name: "vfist", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', disabled: true },
-            styles: { name: "nhdku", styles: "color:var(--cnvs-sys-color-text-inverse);opacity:var(--cnvs-sys-opacity-disabled);" }
+            styles: { name: "vfisu", styles: "color:var(--cnvs-sys-color-text-inverse);opacity:var(--cnvs-sys-opacity-disabled);" }
         }
     ],
     defaultModifiers: {

package/dist/es6/radio/lib/StyledRadioButton.js CHANGED Viewed

@@ -7,10 +7,10 @@ import { RadioLabelContext } from './RadioLabel';
 const radioWidth = 18;
 const radioHeight = 18;
 const radioInputStencil = createStencil({
-    base: { name: "nhdk6", styles: "box-sizing:border-box;cursor:pointer;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round);position:absolute;margin:var(--cnvs-sys-space-zero);&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-round);box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:var(--cnvs-sys-opacity-full);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 1px var(--cnvs-brand-common-focus-outline);}&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{outline:transparent;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
+    base: { name: "vfis6", styles: "box-sizing:border-box;cursor:pointer;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round);position:absolute;margin:var(--cnvs-sys-space-zero);&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-round);box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:var(--cnvs-sys-opacity-full);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 1px var(--cnvs-brand-common-focus-outline);}&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{outline:transparent;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
     modifiers: {
         variant: {
-            inverse: { name: "nhdk7", styles: "+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-inverse);}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);opacity:var(--cnvs-sys-opacity-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 4px var(--cnvs-sys-color-border-inverse);}" }
+            inverse: { name: "vfis7", styles: "+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-inverse);}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);opacity:var(--cnvs-sys-opacity-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 4px var(--cnvs-sys-color-border-inverse);}" }
         }
     }
 }, "radio-input-f05aaa");
@@ -21,13 +21,13 @@ const StyledRadioInput = createComponent('input')({
     },
 });
 const radioInputWrapperStyles = createStencil({
-    base: { name: "nhdk8", styles: "box-sizing:border-box;height:1.125rem;width:1.125rem;flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-round);height:1.125rem;transition:box-shadow 150ms ease-out;width:1.125rem;pointer-events:none;opacity:var(--cnvs-sys-opacity-full);}&:hover:before, &.hover:before{box-shadow:0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-sys-color-bg-alt-soft);}" },
+    base: { name: "vfis8", styles: "box-sizing:border-box;height:1.125rem;width:1.125rem;flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-round);height:1.125rem;transition:box-shadow 150ms ease-out;width:1.125rem;pointer-events:none;opacity:var(--cnvs-sys-opacity-full);}&:hover:before, &.hover:before{box-shadow:0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-sys-color-bg-alt-soft);}" },
     modifiers: {
         variant: {
-            inverse: { name: "nhdk9", styles: "::before{opacity:var(--cnvs-sys-opacity-disabled);}" }
+            inverse: { name: "vfis9", styles: "::before{opacity:var(--cnvs-sys-opacity-disabled);}" }
         },
         disabled: {
-            true: { name: "nhdka", styles: "&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
+            true: { name: "vfisa", styles: "&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
         }
     }
 }, "radio-input-wrapper-styles-fce2c4");

package/dist/es6/status-indicator/lib/StatusIndicator.js CHANGED Viewed

@@ -7,31 +7,31 @@ import { systemIconStencil } from '@workday/canvas-kit-react/icon';
 import { StatusIndicatorIcon } from './StatusIndicatorIcon';
 import { StatusIndicatorLabel } from './StatusIndicatorLabel';
 const statusIndicatorStencil = createStencil({
-    base: { name: "nhdk1g", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x1);max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-half);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);outline:0.0625rem solid transparent;" },
+    base: { name: "vfis1g", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x1);max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-half);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);outline:0.0625rem solid transparent;" },
     modifiers: {
         gray: {
-            high: { name: "nhdk1k", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-gray-default);" },
-            low: { name: "nhdk1l", styles: "color:var(--cnvs-sys-color-static-gray-strong);--color-system-icon-212f69:var(--cnvs-sys-color-static-gray-strong);background:var(--cnvs-sys-color-static-gray-soft);" }
+            high: { name: "vfis1k", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-gray-default);" },
+            low: { name: "vfis1l", styles: "color:var(--cnvs-sys-color-static-gray-strong);--color-system-icon-212f69:var(--cnvs-sys-color-static-gray-strong);background:var(--cnvs-sys-color-static-gray-soft);" }
         },
         orange: {
-            high: { name: "nhdk1m", styles: "color:var(--cnvs-sys-color-static-gray-stronger);--color-system-icon-212f69:var(--cnvs-sys-color-static-gray-stronger);background:var(--cnvs-sys-color-static-orange-default);" },
-            low: { name: "nhdk1n", styles: "color:var(--cnvs-sys-color-static-gold-stronger);--color-system-icon-212f69:var(--cnvs-sys-color-static-gold-stronger);background:var(--cnvs-sys-color-static-orange-soft);" }
+            high: { name: "vfis1m", styles: "color:var(--cnvs-sys-color-static-gray-stronger);--color-system-icon-212f69:var(--cnvs-sys-color-static-gray-stronger);background:var(--cnvs-sys-color-static-orange-default);" },
+            low: { name: "vfis1n", styles: "color:var(--cnvs-sys-color-static-gold-stronger);--color-system-icon-212f69:var(--cnvs-sys-color-static-gold-stronger);background:var(--cnvs-sys-color-static-orange-soft);" }
         },
         blue: {
-            high: { name: "nhdk1o", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-blue-default);" },
-            low: { name: "nhdk1p", styles: "color:var(--cnvs-sys-color-static-blue-strong);--color-system-icon-212f69:var(--cnvs-sys-color-static-blue-strong);background:var(--cnvs-sys-color-static-blue-soft);" }
+            high: { name: "vfis1o", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-blue-default);" },
+            low: { name: "vfis1p", styles: "color:var(--cnvs-sys-color-static-blue-strong);--color-system-icon-212f69:var(--cnvs-sys-color-static-blue-strong);background:var(--cnvs-sys-color-static-blue-soft);" }
         },
         green: {
-            high: { name: "nhdk1q", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-green-strong);" },
-            low: { name: "nhdk1r", styles: "color:var(--cnvs-sys-color-static-green-strong);--color-system-icon-212f69:var(--cnvs-sys-color-static-green-strong);background:var(--cnvs-sys-color-static-green-soft);" }
+            high: { name: "vfis1q", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-green-strong);" },
+            low: { name: "vfis1r", styles: "color:var(--cnvs-sys-color-static-green-strong);--color-system-icon-212f69:var(--cnvs-sys-color-static-green-strong);background:var(--cnvs-sys-color-static-green-soft);" }
         },
         red: {
-            high: { name: "nhdk1s", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-red-default);" },
-            low: { name: "nhdk1t", styles: "color:var(--cnvs-sys-color-static-red-strong);--color-system-icon-212f69:var(--cnvs-sys-color-static-red-strong);background:var(--cnvs-sys-color-static-red-soft);" }
+            high: { name: "vfis1s", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-red-default);" },
+            low: { name: "vfis1t", styles: "color:var(--cnvs-sys-color-static-red-strong);--color-system-icon-212f69:var(--cnvs-sys-color-static-red-strong);background:var(--cnvs-sys-color-static-red-soft);" }
         },
         transparent: {
-            high: { name: "nhdk1u", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" },
-            low: { name: "nhdk1v", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" }
+            high: { name: "vfis1u", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" },
+            low: { name: "vfis1v", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" }
         }
     }
 }, "status-indicator-1a565e");

package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { system } from '@workday/canvas-tokens-web';
 const statusIndicatorLabelStencil = createStencil({
     extends: textStencil,
-    base: { name: "nhdk1f", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;color:inherit;" },
+    base: { name: "vfis1f", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;color:inherit;" },
     defaultModifiers: { typeLevel: 'subtext.large' }
 }, "status-indicator-label-fbd39a");
 export const StatusIndicatorLabel = createComponent('span')({

package/multi-select/lib/MultiSelectInput.tsx CHANGED Viewed

@@ -1,15 +1,16 @@
 import React from 'react';
-import {system} from '@workday/canvas-tokens-web';
+import {brand, system} from '@workday/canvas-tokens-web';
 import {caretDownSmallIcon, searchIcon} from '@workday/canvas-system-icons-web';
 import {
+  ErrorType,
   composeHooks,
   createElemPropsHook,
   createSubcomponent,
 } from '@workday/canvas-kit-react/common';
-import {createStencil, CSProps, handleCsProp} from '@workday/canvas-kit-styling';
-import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStencil, CSProps, handleCsProp, px2rem, calc} from '@workday/canvas-kit-styling';
+import {InputGroup, TextInput, textInputStencil} from '@workday/canvas-kit-react/text-input';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {useComboboxInput, useComboboxInputConstrained} from '@workday/canvas-kit-react/combobox';
@@ -17,7 +18,8 @@ import {useMultiSelectModel} from './useMultiSelectModel';
 import {MultiSelectedItemProps} from './MultiSelectedItem';
 import {MultiSelectedList} from './MultiSelectedList';
-export const multiSelectStencil = createStencil({
+export const multiSelectInputStencil = createStencil({
+  //@ts-ignore Types don't like defining a variable in `base` and using a variable in a nested selector. One or the other is fine, but not both.
   base: {
     border: `1px solid ${system.color.border.input.default}`,
     display: 'flex',
@@ -28,12 +30,13 @@ export const multiSelectStencil = createStencil({
     minHeight: system.space.x10,
     transition: '0.2s box-shadow, 0.2s border-color',
     margin: 0, // Fix Safari
+    [textInputStencil.vars.width]: '100%',
     '&:hover, &.hover': {
       borderColor: system.color.border.input.strong,
     },
-    '&:focus-within': {
+    '&:has(:focus-visible:not([disabled])), &.focus': {
       borderColor: system.color.border.primary.default,
       boxShadow: `inset 0 0 0 1px ${system.color.border.primary.default}`,
     },
@@ -44,6 +47,12 @@ export const multiSelectStencil = createStencil({
       backgroundColor: system.color.bg.transparent,
       borderRadius: system.shape.x1,
+      // collapse the height of the input by the border width so that an empty multi-select
+      // is the same height as a `TextInput`
+      '&:where([data-part="user-input"], [data-part="form-input"])': {
+        height: calc.subtract(system.space.x10, px2rem(2)),
+      },
       // Remove the focus ring - it is handled at the container level
       border: 'none !important',
       boxShadow: 'none !important',
@@ -58,6 +67,11 @@ export const multiSelectStencil = createStencil({
       },
     },
+    '&:has(:disabled, .disabled)': {
+      borderColor: system.color.border.input.disabled,
+      color: system.color.text.disabled,
+    },
     '& :where([data-part="form-input"])': {
       position: 'absolute',
       top: system.space.zero,
@@ -82,8 +96,43 @@ export const multiSelectStencil = createStencil({
       flexWrap: 'wrap',
     },
   },
+  modifiers: {
+    error: {
+      error: {
+        borderColor: brand.error.base,
+        boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.error.base}`,
+        '&:has(:hover, :disabled, :focus-visible), &:is(.hover, .disabled, .focus)': {
+          borderColor: brand.error.base,
+        },
+        '&:has(:focus-visible:not([disabled])), &.focus': {
+          boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.error.base}, 0 0 0 2px ${
+            system.color.border.inverse
+          }, 0 0 0 4px ${brand.common.focusOutline}`,
+          outlineOffset: px2rem(2),
+        },
+      },
+      alert: {
+        borderColor: brand.alert.darkest,
+        boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.alert.base}`,
+        '&:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled]))':
+          {
+            borderColor: brand.alert.darkest,
+          },
+        '&:has(:focus-visible, .focus):not(:has([disabled]))': {
+          boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.alert.base},
+        0 0 0 2px ${system.color.border.inverse},
+        0 0 0 4px ${brand.common.focusOutline}`,
+        },
+        outlineOffset: px2rem(2),
+      },
+    },
+  },
 });
+/** @deprecated use `multiSelectInputStencil` instead. This will be removed in a future version. */
+export const multiSelectStencil = multiSelectInputStencil;
 export const useMultiSelectInput = composeHooks(
   createElemPropsHook(useMultiSelectModel)((model, ref) => {
     return {
@@ -122,7 +171,9 @@ export interface MultiSelectInputProps
       React.InputHTMLAttributes<HTMLInputElement>,
       'disabled' | 'className' | 'style' | 'aria-labelledby'
     >,
-    Pick<MultiSelectedItemProps, 'removeLabel'> {}
+    Pick<MultiSelectedItemProps, 'removeLabel'> {
+  error?: ErrorType;
+}
 export const MultiSelectInput = createSubcomponent(TextInput)({
   modelHook: useMultiSelectModel,
@@ -133,16 +184,17 @@ export const MultiSelectInput = createSubcomponent(TextInput)({
       className,
       cs,
       style,
+      error,
       'aria-labelledby': ariaLabelledBy,
       removeLabel,
+      disabled,
       formInputProps,
       ...elemProps
     },
-    Element,
-    model
+    Element
   ) => {
     return (
-      <div {...handleCsProp({className, cs, style}, multiSelectStencil({}))}>
+      <div {...handleCsProp({className, cs, style}, multiSelectInputStencil({error}))}>
         <InputGroup>
           <InputGroup.Input data-part="form-input" {...formInputProps} />
           <InputGroup.Input
@@ -150,13 +202,15 @@ export const MultiSelectInput = createSubcomponent(TextInput)({
             as={Element}
             aria-labelledby={ariaLabelledBy}
             readOnly
+            disabled={disabled}
+            error={error}
             {...elemProps}
           />
           <InputGroup.InnerEnd pointerEvents="none">
             <SystemIcon icon={caretDownSmallIcon} />
           </InputGroup.InnerEnd>
         </InputGroup>
-        <MultiSelectedList removeLabel={removeLabel} />
+        <MultiSelectedList disabled={disabled} removeLabel={removeLabel} />
       </div>
     );
   }
@@ -175,13 +229,14 @@ export const MultiSelectSearchInput = createSubcomponent(TextInput)({
       removeLabel,
       formInputProps,
       ref,
+      disabled,
+      error,
       ...elemProps
     },
-    Element,
-    model
+    Element
   ) => {
     return (
-      <div {...handleCsProp({className, cs, style}, multiSelectStencil({}))}>
+      <div {...handleCsProp({className, cs, style}, multiSelectInputStencil({}))}>
         <InputGroup>
           <InputGroup.InnerStart pointerEvents="none" width={system.space.x8}>
             <SystemIcon icon={searchIcon} size={system.space.x4} />
@@ -195,6 +250,8 @@ export const MultiSelectSearchInput = createSubcomponent(TextInput)({
             data-part="user-input"
             as={Element}
             aria-labelledby={ariaLabelledBy}
+            disabled={disabled}
+            error={error}
             {...elemProps}
           />
           <InputGroup.InnerEnd width={system.space.x4}>
@@ -204,7 +261,7 @@ export const MultiSelectSearchInput = createSubcomponent(TextInput)({
             <SystemIcon icon={caretDownSmallIcon} />
           </InputGroup.InnerEnd>
         </InputGroup>
-        <MultiSelectedList removeLabel={removeLabel} />
+        <MultiSelectedList removeLabel={removeLabel} disabled={disabled} />
       </div>
     );
   }