@workday/canvas-kit-preview-react 14.0.0-alpha.1127-next.0 → 14.0.0-alpha.1133-next.0

package/dist/es6/segmented-control/lib/hooks/useSegmentedControlModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSegmentedControlModel.d.ts","sourceRoot":"","sources":["../../../../../segmented-control/lib/hooks/useSegmentedControlModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,wBAAwB;IAGjC;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAxBH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CL,CAAC"}
+{"version":3,"file":"useSegmentedControlModel.d.ts","sourceRoot":"","sources":["../../../../../segmented-control/lib/hooks/useSegmentedControlModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,wBAAwB;IAGjC;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAxBH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CL,CAAC"}

package/dist/es6/side-panel/lib/SidePanel.js

@@ -10,19 +10,19 @@ export const panelStencil = createStencil({
         expandedWidth: '',
         collapsedWidth: '',
     },
-    base: { name: "ppux4g", styles: "box-sizing:border-box;overflow:hidden;position:relative;height:100%;outline:0.0625rem solid transparent;transition:width ease-out 200ms, max-width ease-out 200ms;" },
+    base: { name: "h6y24g", styles: "box-sizing:border-box;overflow:hidden;position:relative;height:100%;outline:0.0625rem solid transparent;transition:width ease-out 200ms, max-width ease-out 200ms;" },
     modifiers: {
         variant: {
-            alternate: { name: "ppux4h", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
-            standard: { name: "ppux4i", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
+            alternate: { name: "h6y24h", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
+            standard: { name: "h6y24i", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
         },
         expanded: {
-            true: { name: "ppux4j", styles: "width:var(--expandedWidth-panel-bd9477);max-width:var(--expandedWidth-panel-bd9477);" },
-            false: { name: "ppux4k", styles: "width:var(--collapsedWidth-panel-bd9477);max-width:var(--collapsedWidth-panel-bd9477);" }
+            true: { name: "h6y24j", styles: "width:var(--expandedWidth-panel-bd9477);max-width:var(--expandedWidth-panel-bd9477);" },
+            false: { name: "h6y24k", styles: "width:var(--collapsedWidth-panel-bd9477);max-width:var(--collapsedWidth-panel-bd9477);" }
         },
         touched: {
-            true: { name: "ppux4l", styles: "" },
-            false: { name: "ppux4m", styles: "animation:none;" }
+            true: { name: "h6y24l", styles: "" },
+            false: { name: "h6y24m", styles: "animation:none;" }
         }
     }
 }, "panel-bd9477");

package/dist/es6/side-panel/lib/SidePanelToggleButton.js

@@ -8,35 +8,35 @@ import { SidePanelContext } from './hooks';
 import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const sidePanelToggleButtonStencil = createStencil({
-    base: { name: "ppux45", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);inset-inline-end:var(--cnvs-sys-space-x4);" },
+    base: { name: "h6y245", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);inset-inline-end:var(--cnvs-sys-space-x4);" },
     modifiers: {
         state: {
-            collapsing: { name: "ppux46", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            collapsed: { name: "ppux47", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            expanded: { name: "ppux48", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
-            expanding: { name: "ppux49", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
+            collapsing: { name: "h6y246", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            collapsed: { name: "h6y247", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            expanded: { name: "h6y248", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
+            expanding: { name: "h6y249", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
         },
         origin: {
-            left: { name: "ppux4a", styles: "" },
-            right: { name: "ppux4b", styles: "" }
+            left: { name: "h6y24a", styles: "" },
+            right: { name: "h6y24b", styles: "" }
         }
     },
     compound: [
         {
             modifiers: { state: 'collapsed', origin: 'right' },
-            styles: { name: "ppux4c", styles: "transform:scaleX(-1);" }
+            styles: { name: "h6y24c", styles: "transform:scaleX(-1);" }
         },
         {
             modifiers: { state: 'collapsing', origin: 'right' },
-            styles: { name: "ppux4d", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+            styles: { name: "h6y24d", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
         },
         {
             modifiers: { state: 'expanded', origin: 'right' },
-            styles: { name: "ppux4e", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+            styles: { name: "h6y24e", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
         },
         {
             modifiers: { state: 'expanding', origin: 'right' },
-            styles: { name: "ppux4f", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+            styles: { name: "h6y24f", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
         }
     ]
 }, "side-panel-toggle-button-da8098");

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

@@ -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: "ppux54", 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: "h6y254", 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: "ppux55", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-gray-default);" },
-            low: { name: "ppux56", styles: "color:var(--cnvs-sys-color-static-gray-strong);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-gray-strong);background:var(--cnvs-sys-color-static-gray-soft);" }
+            high: { name: "h6y255", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-gray-default);" },
+            low: { name: "h6y256", styles: "color:var(--cnvs-sys-color-static-gray-strong);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-gray-strong);background:var(--cnvs-sys-color-static-gray-soft);" }
         },
         orange: {
-            high: { name: "ppux57", styles: "color:var(--cnvs-sys-color-static-gray-stronger);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-gray-stronger);background:var(--cnvs-sys-color-static-orange-default);" },
-            low: { name: "ppux58", styles: "color:var(--cnvs-sys-color-static-gold-stronger);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-gold-stronger);background:var(--cnvs-sys-color-static-orange-soft);" }
+            high: { name: "h6y257", styles: "color:var(--cnvs-sys-color-static-gray-stronger);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-gray-stronger);background:var(--cnvs-sys-color-static-orange-default);" },
+            low: { name: "h6y258", styles: "color:var(--cnvs-sys-color-static-gold-stronger);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-gold-stronger);background:var(--cnvs-sys-color-static-orange-soft);" }
         },
         blue: {
-            high: { name: "ppux59", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-blue-default);" },
-            low: { name: "ppux5a", styles: "color:var(--cnvs-sys-color-static-blue-strong);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-blue-strong);background:var(--cnvs-sys-color-static-blue-soft);" }
+            high: { name: "h6y259", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-blue-default);" },
+            low: { name: "h6y25a", styles: "color:var(--cnvs-sys-color-static-blue-strong);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-blue-strong);background:var(--cnvs-sys-color-static-blue-soft);" }
         },
         green: {
-            high: { name: "ppux5b", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-green-strong);" },
-            low: { name: "ppux5c", styles: "color:var(--cnvs-sys-color-static-green-strong);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-green-strong);background:var(--cnvs-sys-color-static-green-soft);" }
+            high: { name: "h6y25b", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-green-strong);" },
+            low: { name: "h6y25c", styles: "color:var(--cnvs-sys-color-static-green-strong);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-green-strong);background:var(--cnvs-sys-color-static-green-soft);" }
         },
         red: {
-            high: { name: "ppux5d", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-red-default);" },
-            low: { name: "ppux5e", styles: "color:var(--cnvs-sys-color-static-red-strong);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-red-strong);background:var(--cnvs-sys-color-static-red-soft);" }
+            high: { name: "h6y25d", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-red-default);" },
+            low: { name: "h6y25e", styles: "color:var(--cnvs-sys-color-static-red-strong);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-red-strong);background:var(--cnvs-sys-color-static-red-soft);" }
         },
         transparent: {
-            high: { name: "ppux5f", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" },
-            low: { name: "ppux5g", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" }
+            high: { name: "h6y25f", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" },
+            low: { name: "h6y25g", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" }
         }
     }
 }, "status-indicator-1a565e");

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

@@ -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: "ppux53", 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: "h6y253", 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-63258e");
 export const StatusIndicatorLabel = createComponent('span')({

package/multi-select/lib/MultiSelectInput.tsx

@@ -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 {getCursor} from '@workday/canvas-kit-react/collection';
 import {useComboboxInput, useComboboxInputConstrained} from '@workday/canvas-kit-react/combobox';
@@ -18,7 +19,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',
@@ -29,12 +31,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}`,
     },
@@ -45,6 +48,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',
@@ -88,8 +97,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 {
@@ -128,7 +172,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,
@@ -139,17 +185,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
@@ -158,6 +204,7 @@ export const MultiSelectInput = createSubcomponent(TextInput)({
             aria-labelledby={ariaLabelledBy}
             readOnly
             disabled={disabled}
+            error={error}
             {...elemProps}
           />
           <InputGroup.InnerEnd pointerEvents="none">
@@ -184,13 +231,13 @@ export const MultiSelectSearchInput = createSubcomponent(TextInput)({
       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} />
@@ -205,6 +252,7 @@ export const MultiSelectSearchInput = createSubcomponent(TextInput)({
             as={Element}
             aria-labelledby={ariaLabelledBy}
             disabled={disabled}
+            error={error}
             {...elemProps}
           />
           <InputGroup.InnerEnd width={system.space.x4}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "14.0.0-alpha.1127-next.0",
+  "version": "14.0.0-alpha.1133-next.0",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,8 +46,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1127-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1127-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1133-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1133-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.1.1",
     "@workday/design-assets-types": "^0.2.8"
@@ -58,5 +58,5 @@
     "react-hook-form": "7.36.1",
     "yup": "^0.32.11"
   },
-  "gitHead": "3067be6c028bb5eee066f8dc3ef82a5788b3fa98"
+  "gitHead": "eb3759bc235f1a76edeae94e6e09d4395bcb90a4"
 }