@workday/canvas-kit-react 16.0.0-alpha.0396-next.0 → 16.0.0-alpha.0431-next.0

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

@@ -46,7 +46,6 @@ export declare const textAreaStencil: import("@workday/canvas-kit-styling").Sten
         error: {
             borderColor: "var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1))";
             boxShadow: string;
-            backgroundColor: "var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04))";
             '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))': {
                 borderColor: "var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1))";
             };
@@ -54,11 +53,13 @@ export declare const textAreaStencil: import("@workday/canvas-kit-styling").Sten
                 boxShadow: string;
                 outlineOffset: string;
             };
+            '@media (forced-colors: active)': {
+                outline: string;
+            };
         };
         caution: {
             borderColor: "var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)))";
             boxShadow: string;
-            backgroundColor: "var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1))";
             '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))': {
                 borderColor: "var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)))";
             };
@@ -66,11 +67,19 @@ export declare const textAreaStencil: import("@workday/canvas-kit-styling").Sten
                 boxShadow: string;
             };
             outlineOffset: string;
+            '@media (forced-colors: active)': {
+                outline: string;
+                outlineOffset: number;
+            };
         };
     };
 }, {}, {
     width: string;
-}, never, never>, never>;
+}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    shape: string;
+}, never>, {}, {
+    shape: string;
+}, never, never>, never>, never>;
 export declare const TextArea: import("@workday/canvas-kit-react/common").ElementComponent<"textarea", TextAreaProps> & {
     ErrorType: typeof ErrorType;
     ResizeDirection: {

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,cAAc,EAAkB,MAAM,kCAAkC,CAAC;AAK5F,MAAM,MAAM,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAEpC,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,OAAO,uBAAuB,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,uBAAuB;;;;;CAK1B,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA6B1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;CAWnB,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,cAAc,EAAkB,MAAM,kCAAkC,CAAC;AAK5F,MAAM,MAAM,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAEpC,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,OAAO,uBAAuB,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,uBAAuB;;;;;CAK1B,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA6B1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;CAWnB,CAAC"}

package/dist/es6/text-area/lib/TextArea.js

@@ -11,13 +11,13 @@ export const TextAreaResizeDirection = {
 };
 export const textAreaStencil = createStencil({
     extends: textInputStencil,
-    base: { name: "8i30v", styles: "box-sizing:border-box;min-height:var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem));min-width:17.5rem;&::webkit-resizer{display:none;}" },
+    base: { name: "3h8nnt", styles: "box-sizing:border-box;min-height:var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem));min-width:17.5rem;&::webkit-resizer{display:none;}" },
     modifiers: {
         resize: {
-            both: { name: "s72f0", styles: "resize:both;" },
-            horizontal: { name: "1y9ba4", styles: "resize:horizontal;" },
-            vertical: { name: "2959yu", styles: "resize:vertical;" },
-            none: { name: "hlxb0", styles: "resize:none;" }
+            both: { name: "xcfr4", styles: "resize:both;" },
+            horizontal: { name: "3w2p22", styles: "resize:horizontal;" },
+            vertical: { name: "1nhoq0", styles: "resize:vertical;" },
+            none: { name: "2tv1yo", styles: "resize:none;" }
         }
     },
     defaultModifiers: {

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

@@ -35,10 +35,10 @@ export const inputGroupInnerStencil = createStencil({
          */
         pointerEvents: '',
     },
-    base: { name: "1u4xgk", styles: "--insetInlineStart-input-group-inner-9e2c81:initial;--insetInlineEnd-input-group-inner-9e2c81:initial;--width-input-group-inner-9e2c81:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));--height-input-group-inner-9e2c81:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));box-sizing:border-box;display:flex;position:absolute;align-items:center;justify-content:center;width:var(--width-input-group-inner-9e2c81);height:var(--height-input-group-inner-9e2c81);inset-inline-start:var(--insetInlineStart-input-group-inner-9e2c81);inset-inline-end:var(--insetInlineEnd-input-group-inner-9e2c81);" },
+    base: { name: "3ckj5e", styles: "--insetInlineStart-input-group-inner-9e2c81:initial;--insetInlineEnd-input-group-inner-9e2c81:initial;--width-input-group-inner-9e2c81:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));--height-input-group-inner-9e2c81:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));box-sizing:border-box;display:flex;position:absolute;align-items:center;justify-content:center;width:var(--width-input-group-inner-9e2c81);height:var(--height-input-group-inner-9e2c81);inset-inline-start:var(--insetInlineStart-input-group-inner-9e2c81);inset-inline-end:var(--insetInlineEnd-input-group-inner-9e2c81);" },
     modifiers: {
         pointerEvents: {
-            _: { name: "urxbo", styles: "pointer-events:var(--pointerEvents-input-group-inner-9e2c81);" }
+            _: { name: "2gtizx", styles: "pointer-events:var(--pointerEvents-input-group-inner-9e2c81);" }
         }
     }
 }, "input-group-inner-9e2c81");
@@ -76,13 +76,13 @@ export const inputGroupInputStencil = createStencil({
         paddingInlineStart: '',
         paddingInlineEnd: '',
     },
-    base: { name: "bz8n8", styles: "box-sizing:border-box;display:flex;width:100%;" },
+    base: { name: "2wdlbt", styles: "box-sizing:border-box;display:flex;width:100%;" },
     modifiers: {
         paddingInlineStart: {
-            _: { name: "16gblz", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-7be7a4);" }
+            _: { name: "3pki8g", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-7be7a4);" }
         },
         paddingInlineEnd: {
-            _: { name: "2uk54d", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-7be7a4);" }
+            _: { name: "1pw8xe", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-7be7a4);" }
         }
     }
 }, "input-group-input-7be7a4");
@@ -140,7 +140,7 @@ const wrapInCalc = (values) => {
     return `calc(${values.map(toPx).join(' + ')})`;
 };
 export const inputGroupStencil = createStencil({
-    base: { name: "3uxddx", styles: "box-sizing:border-box;display:flex;position:relative;align-items:center;& :has([data-part=\"input-group-clear-button\"]){transition:opacity 300ms ease;}&:where(:has(input:placeholder-shown)) :has([data-part=\"input-group-clear-button\"]){opacity:0;pointer-events:none;}" }
+    base: { name: "2e7c9a", styles: "box-sizing:border-box;display:flex;position:relative;align-items:center;& :has([data-part=\"input-group-clear-button\"]){transition:opacity 300ms ease;}&:where(:has(input:placeholder-shown)) :has([data-part=\"input-group-clear-button\"]){opacity:0;pointer-events:none;}" }
 }, "input-group-2e0e78");
 /**
  * An `InputGroup` is a container around a {@link TextInput} with optional inner start and end

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

@@ -24,7 +24,6 @@ export declare const textInputStencil: import("@workday/canvas-kit-styling").Ste
         error: {
             borderColor: "var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1))";
             boxShadow: string;
-            backgroundColor: "var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04))";
             '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))': {
                 borderColor: "var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1))";
             };
@@ -32,11 +31,13 @@ export declare const textInputStencil: import("@workday/canvas-kit-styling").Ste
                 boxShadow: string;
                 outlineOffset: string;
             };
+            '@media (forced-colors: active)': {
+                outline: string;
+            };
         };
         caution: {
             borderColor: "var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)))";
             boxShadow: string;
-            backgroundColor: "var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1))";
             '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))': {
                 borderColor: "var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)))";
             };
@@ -44,11 +45,19 @@ export declare const textInputStencil: import("@workday/canvas-kit-styling").Ste
                 boxShadow: string;
             };
             outlineOffset: string;
+            '@media (forced-colors: active)': {
+                outline: string;
+                outlineOffset: number;
+            };
         };
     };
 }, {}, {
     width: string;
-}, never, never>;
+}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    shape: string;
+}, never>, {}, {
+    shape: string;
+}, never, never>, never>;
 export declare const TextInput: import("@workday/canvas-kit-react/common").ElementComponent<"input", TextInputProps> & {
     ErrorType: typeof ErrorType;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,cAAc,EAAkB,MAAM,kCAAkC,CAAC;AAE5F,OAAO,EAAC,OAAO,EAAgC,MAAM,6BAA6B,CAAC;AAGnF,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,OAAO;IAC7D;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA4F3B,CAAC;AAEH,eAAO,MAAM,SAAS;;CAiBpB,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,cAAc,EAGf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,OAAO,EAAgC,MAAM,6BAA6B,CAAC;AAGnF,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,OAAO;IAC7D;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA2G3B,CAAC;AAEH,eAAO,MAAM,SAAS;;CAqBpB,CAAC"}

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

@@ -1,31 +1,36 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ErrorType, createComponent } from '@workday/canvas-kit-react/common';
+import { ErrorType, cornerShapeStencil, createComponent, } from '@workday/canvas-kit-react/common';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const textInputStencil = createStencil({
+    extends: cornerShapeStencil,
     vars: {
         width: '',
     },
-    base: { name: "43hj4i", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));display:block;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));transition:0.2s box-shadow, 0.2s border-color;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));margin:0;width:var(--width-text-input-6e98c5);min-width:var(--width-text-input-6e98c5, 17.5rem);color:var(--cnvs-sys-color-fg-default);text-overflow:ellipsis;::-ms-clear{display:none;}&::placeholder{color:var(--cnvs-sys-color-fg-muted-default);}&:is(:hover, .hover):where(:not([disabled], .disabled)){border-color:var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));}&:is(:focus-visible, .focus):where(:not([disabled])){border-color:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));outline:0.125rem solid transparent;}&:is(:disabled, .disabled){opacity:var(--cnvs-sys-opacity-disabled);&::placeholder{opacity:var(--cnvs-sys-opacity-disabled);}}" },
+    base: { name: "4chn9", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));display:block;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));transition:0.2s box-shadow, 0.2s border-color;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));margin:0;width:var(--width-text-input-7c8776);min-width:var(--width-text-input-7c8776, 17.5rem);color:var(--cnvs-sys-color-fg-default);text-overflow:ellipsis;::-ms-clear{display:none;}&::placeholder{color:var(--cnvs-sys-color-fg-muted-default);}&:is(:hover, .hover):where(:not([disabled], .disabled)){border-color:var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));}&:is(:focus-visible, .focus):where(:not([disabled])){border-color:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));outline:0.125rem solid transparent;}&:is(:disabled, .disabled){opacity:var(--cnvs-sys-opacity-disabled);&::placeholder{opacity:var(--cnvs-sys-opacity-disabled);}}" },
     modifiers: {
         grow: {
-            true: { name: "3k1d9b", styles: "width:100%;resize:vertical;" },
-            false: { name: "4dtkn1", styles: "width:initial;" }
+            true: { name: "1tus1j", styles: "width:100%;resize:vertical;" },
+            false: { name: "zg016", styles: "width:initial;" }
         },
         error: {
-            error: { name: "4fsuzf", styles: "border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1)),\n        0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n        0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));outline-offset:0.125rem;}" },
-            caution: { name: "31rzcd", styles: "border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n        0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n        0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}outline-offset:0.125rem;" }
+            error: { name: "2q2icq", styles: "border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1)),\n        0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n        0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));outline-offset:0.125rem;}@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;}" },
+            caution: { name: "18xikr", styles: "border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n        0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n        0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}outline-offset:0.125rem;@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;outline-offset:0;}" }
         }
     },
     defaultModifiers: {
         grow: 'false',
     }
-}, "text-input-6e98c5");
+}, "text-input-7c8776");
 export const TextInput = createComponent('input')({
     displayName: 'TextInput',
     Component: ({ grow, error, width, ...elemProps }, ref, Element) => {
-        return (_jsx(Element, { type: "text", ref: ref, ...mergeStyles(elemProps, textInputStencil({ width: typeof width === 'number' ? px2rem(width) : width, grow, error })) }));
+        return (_jsx(Element, { type: "text", ref: ref, ...mergeStyles(elemProps, textInputStencil({
+                width: typeof width === 'number' ? px2rem(width) : width,
+                grow: grow === true ? 'true' : grow === false ? 'false' : undefined,
+                error,
+            })) }));
     },
     subComponents: {
         ErrorType,

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

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

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

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

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

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

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

@@ -4,7 +4,7 @@ import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { base, system } from '@workday/canvas-tokens-web';
 export const toastIconStencil = createStencil({
-    base: { name: "jyx3b", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-base-size-150, 0.75rem);" }
+    base: { name: "2rhf8r", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-base-size-150, 0.75rem);" }
 }, "toast-icon-4762f0");
 export const ToastIcon = createComponent('div')({
     displayName: 'Toast.Icon',

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

@@ -5,7 +5,7 @@ import { Subtext } from '@workday/canvas-kit-react/text';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { useToastModel } from './hooks/useToastModel';
 export const toastMessageStencil = createStencil({
-    base: { name: "2gfmih", styles: "box-sizing:border-box;word-break:break-word;margin-block:0;" }
+    base: { name: "9s2v3", styles: "box-sizing:border-box;word-break:break-word;margin-block:0;" }
 }, "toast-message-ff5220");
 export const ToastMessage = createSubcomponent('p')({
     modelHook: useToastModel,

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

@@ -11,16 +11,16 @@ const tooltipTranslateVars = createVars({ id: "5cc1ce", args: ["positionX", "pos
 /**
  * Keyframe for the Tooltip animation.
  */
-const tooltipAnimation = keyframes({ name: "4bzd0b", styles: "0%{opacity:0;transform:translate(var(--positionX-5cc1ce), var(--positionY-5cc1ce));}100%{opacity:1;transform:translate(0);}" });
+const tooltipAnimation = keyframes({ name: "o3vof", styles: "0%{opacity:0;transform:translate(var(--positionX-5cc1ce), var(--positionY-5cc1ce));}100%{opacity:1;transform:translate(0);}" });
 export const tooltipContainerStencil = createStencil({
     vars: {
         tooltipTransformOriginHorizontal: '',
         tooltipTransformOriginVertical: '',
     },
-    base: { name: "1gw3ox", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));display:inline-flex;position:relative;padding:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));color:var(--cnvs-sys-color-fg-inverse);animation-name:animation-4bzd0b;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-0d74d6) var(--tooltipTransformOriginHorizontal-tooltip-container-0d74d6);a{color:var(--cnvs-sys-color-fg-inverse);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));outline:0.0625rem solid transparent;outline-offset:-0.0625rem;z-index:-1;margin:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));background-color:var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)));position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:var(--cnvs-sys-depth-2);}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}" },
+    base: { name: "2zlr0o", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));display:inline-flex;position:relative;padding:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));color:var(--cnvs-sys-color-fg-inverse);animation-name:animation-o3vof;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-0d74d6) var(--tooltipTransformOriginHorizontal-tooltip-container-0d74d6);a{color:var(--cnvs-sys-color-fg-inverse);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));outline:0.0625rem solid transparent;outline-offset:-0.0625rem;z-index:-1;margin:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));background-color:var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)));position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:var(--cnvs-sys-depth-2);}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}" },
     modifiers: {
         elementHasFocus: {
-            true: { name: "1dwgx9", styles: "padding:calc(var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) - calc(var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem)) / 2));&:before{margin:var(--cnvs-base-size-75, 0.375rem);}" }
+            true: { name: "36r53o", styles: "padding:calc(var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) - calc(var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem)) / 2));&:before{margin:var(--cnvs-base-size-75, 0.375rem);}" }
         }
     }
 }, "tooltip-container-0d74d6");

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

@@ -1 +1 @@
-export const version = '15.0.12';
+export const version = '15.0.17';

package/fonts/index.ts

@@ -0,0 +1 @@
+export * from './lib/fonts';

package/fonts/lib/fonts.ts

@@ -0,0 +1,22 @@
+import {CSSObject} from '@emotion/styled';
+
+const fontsPath = 'https://design.workdaycdn.com/assets/fonts/Sana-Sans';
+
+export const fonts: CSSObject[] = [
+  {
+    '@font-face': {
+      fontFamily: 'Sana Sans LCG 05 VF',
+      fontStyle: 'normal',
+      fontWeight: [100, 700],
+      src: `local('Sana Sans LCG 05 VF'), local('SanaSansLCG05VF-Regular'), url(${fontsPath}/SanaSansLCG05-Variable.ttf) format('truetype')`,
+    },
+  },
+  {
+    '@font-face': {
+      fontFamily: 'Sana Sans LCG 05 VF',
+      fontStyle: 'italic',
+      fontWeight: [100, 700],
+      src: `local('Sana Sans LCG 05 VF'), local('SanaSansLCG05VF-Regular'), url(${fontsPath}/SanaSansLCG05-Variable.ttf) format('truetype')`,
+    },
+  },
+];

package/fonts/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/commonjs/fonts",
+  "module": "../dist/es6/fonts",
+  "sideEffects": false,
+  "types": "../dist/es6/fonts"
+}

package/form-field/lib/FormFieldGroupList.tsx

@@ -1,4 +1,4 @@
-import {createSubcomponent} from '@workday/canvas-kit-react/common';
+import {cornerShapeStencil, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {FlexProps} from '@workday/canvas-kit-react/layout';
 import {CSProps, calc, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
@@ -8,10 +8,11 @@ import {useFormFieldModel} from './hooks';
 export interface FormFieldGroupListProps extends CSProps, FlexProps {}
 
 const formFieldGroupListStencil = createStencil({
+  extends: cornerShapeStencil,
   base: {
+    [cornerShapeStencil.vars.shape]: system.legacy.shape.lg,
     display: 'flex',
     flexDirection: 'column',
-    borderRadius: system.legacy.shape.md,
     gap: system.legacy.gap.sm,
     padding: `${px2rem(10)} ${base.legacy.size150} ${system.legacy.padding.xs}`,
     margin: `0 ${calc.negate(base.legacy.size150)}`,
@@ -21,12 +22,16 @@ const formFieldGroupListStencil = createStencil({
   modifiers: {
     error: {
       error: {
-        backgroundColor: system.legacy.color.brand.surface.critical.default,
         boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.border.critical}`,
+        '@media (forced-colors: active)': {
+          outline: `solid ${px2rem(2)} ButtonBorder`,
+        },
       },
       caution: {
-        backgroundColor: system.legacy.color.brand.surface.caution.default,
         boxShadow: `inset 0 0 0 ${px2rem(1)} ${system.legacy.color.brand.border.caution}, inset 0 0 0 ${px2rem(3)} ${system.legacy.color.brand.focus.caution.inner}`,
+        '@media (forced-colors: active)': {
+          outline: `solid ${px2rem(2)} ButtonBorder`,
+        },
       },
     },
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "16.0.0-alpha.0396-next.0",
+  "version": "16.0.0-alpha.0431-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",
@@ -53,11 +53,10 @@
     "@tanstack/react-virtual": "^3.13.9",
     "@workday/canvas-colors-web": "^2.0.0",
     "@workday/canvas-expressive-icons-web": "1.0.2",
-    "@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0396-next.0",
-    "@workday/canvas-kit-preview-react": "^16.0.0-alpha.0396-next.0",
-    "@workday/canvas-kit-styling": "^16.0.0-alpha.0396-next.0",
+    "@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0431-next.0",
+    "@workday/canvas-kit-styling": "^16.0.0-alpha.0431-next.0",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "4.4.0-beta.0",
+    "@workday/canvas-tokens-web": "4.4.0-beta.3",
     "@workday/design-assets-types": "^0.3.0",
     "chroma-js": "^2.2.0",
     "csstype": "^3.0.2",
@@ -70,5 +69,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "70f2ee99c66df706e5101477f62799d1967358ad"
+  "gitHead": "4c60e57196dd7159579dde8977cc784182cc6171"
 }

package/popup/lib/Popup.tsx

@@ -92,10 +92,11 @@ export const Popup = createContainer()({
      */
     CloseIcon: PopupCloseIcon,
     /**
-     * A `Popup.Heading` is a wrapper around {@link CardHeading Card.Heading} that connect the
-     * heading to a {@link PopupModel}. It will add an `id` to the element that match the
-     * `aria-labelledby` that is applied to the `Popup.Card` element for accessibility. The behavior
-     * hook used is called {@link usePopupHeading}.
+     * A `Popup.Heading` renders a heading element styled with {@link cardHeadingStencil}
+     * (with popup-specific padding and type level values). It connects the heading to a
+     * {@link PopupModel}. It adds an `id` that matches the `aria-labelledby` applied to the
+     * `Popup.Card` element for accessibility. The behavior hook used is called
+     * {@link usePopupHeading}.
      */
     Heading: PopupHeading,
     /**

package/popup/lib/PopupHeading.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import {Card} from '@workday/canvas-kit-react/card';
+import {Card, cardHeadingStencil} from '@workday/canvas-kit-react/card';
 import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createStencil} from '@workday/canvas-kit-styling';
@@ -13,9 +13,11 @@ export interface PopupHeadingProps extends ExtractProps<typeof Card.Heading, nev
 }
 
 export const popupHeadingStencil = createStencil({
+  extends: cardHeadingStencil,
   base: {
     paddingInline: system.legacy.padding.xs,
   },
+  defaultModifiers: {typeLevel: 'body.large'},
 });
 
 export const PopupHeading = createSubcomponent('h2')({
@@ -23,9 +25,5 @@ export const PopupHeading = createSubcomponent('h2')({
   modelHook: usePopupModel,
   elemPropsHook: usePopupHeading,
 })<PopupHeadingProps>(({children, ...elemProps}, Element) => {
-  return (
-    <Card.Heading as={Element} {...mergeStyles(elemProps, popupHeadingStencil())}>
-      {children}
-    </Card.Heading>
-  );
+  return <Element {...mergeStyles(elemProps, popupHeadingStencil())}>{children}</Element>;
 });

package/testing/lib/StaticStates.tsx

@@ -43,7 +43,12 @@ export const StaticStates: React.FC<
   localTheme._styleRewriteFn = convertToStaticStates;
 
   return (
-    <CanvasProvider theme={localTheme} className={className} {...elemProps}>
+    <CanvasProvider
+      theme={localTheme}
+      className={className}
+      {...elemProps}
+      data-theme="sana-canvas"
+    >
       {children}
     </CanvasProvider>
   );

package/text-input/lib/TextInput.tsx

@@ -1,4 +1,9 @@
-import {ErrorType, GrowthBehavior, createComponent} from '@workday/canvas-kit-react/common';
+import {
+  ErrorType,
+  GrowthBehavior,
+  cornerShapeStencil,
+  createComponent,
+} from '@workday/canvas-kit-react/common';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {CSProps, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
@@ -15,10 +20,12 @@ export interface TextInputProps extends GrowthBehavior, CSProps {
 }
 
 export const textInputStencil = createStencil({
+  extends: cornerShapeStencil,
   vars: {
     width: '',
   },
   base: ({width}) => ({
+    [cornerShapeStencil.vars.shape]: system.legacy.shape.lg,
     fontFamily: system.fontFamily.default,
     fontSize: system.legacy.fontSize.subtext.lg,
     fontWeight: system.fontWeight.normal,
@@ -27,7 +34,6 @@ export const textInputStencil = createStencil({
     display: 'block',
     border: `${px2rem(1)} solid ${system.color.border.input.default}`,
     backgroundColor: system.legacy.color.surface.default,
-    borderRadius: system.legacy.shape.md,
     height: system.legacy.size.md,
     transition: '0.2s box-shadow, 0.2s border-color',
     padding: system.legacy.padding.xs, // Compensate for border
@@ -74,7 +80,6 @@ export const textInputStencil = createStencil({
         borderColor: system.legacy.color.brand.border.critical,
         // borderWidth: px2rem(2),
         boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.border.critical}`,
-        backgroundColor: system.legacy.color.brand.surface.critical.default,
         '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))':
           {
             borderColor: system.legacy.color.brand.border.critical,
@@ -85,11 +90,17 @@ export const textInputStencil = createStencil({
         0 0 0 4px ${system.legacy.color.brand.border.primary}`,
           outlineOffset: px2rem(2),
         },
+        // For Windows High Contrast mode: display error outline at double the
+        // width of the focus ring outline (to differentiate the error outline
+        // from the focus ring outline since both outlines will be the same
+        // color in WHC mode).
+        '@media (forced-colors: active)': {
+          outline: `solid ${px2rem(4)} ButtonBorder`,
+        },
       },
       caution: {
         borderColor: system.legacy.color.brand.border.caution,
         boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.focus.caution.inner}`,
-        backgroundColor: system.legacy.color.brand.surface.caution.default,
         '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))':
           {
             borderColor: system.legacy.color.brand.border.caution,
@@ -100,6 +111,15 @@ export const textInputStencil = createStencil({
         0 0 0 4px ${system.legacy.color.brand.border.primary}`,
         },
         outlineOffset: px2rem(2),
+        // For Windows High Contrast mode: see comment above regarding the
+        // error outline. Unlike the error state, outlineOffset for the
+        // caution state is defined outside of the `(:focus-visible, .focus)`
+        // selector so we must override it here to prevent the caution outline
+        // from being separated too far from the input.
+        '@media (forced-colors: active)': {
+          outline: `solid ${px2rem(4)} ButtonBorder`,
+          outlineOffset: 0,
+        },
       },
     },
   },
@@ -117,7 +137,11 @@ export const TextInput = createComponent('input')({
         ref={ref}
         {...mergeStyles(
           elemProps,
-          textInputStencil({width: typeof width === 'number' ? px2rem(width) : width, grow, error})
+          textInputStencil({
+            width: typeof width === 'number' ? px2rem(width) : width,
+            grow: grow === true ? 'true' : grow === false ? 'false' : undefined,
+            error,
+          })
         )}
       />
     );