@workday/canvas-kit-react 16.0.0-alpha.0485-next.0 → 16.0.0-alpha.0486-next.0

package/dist/es6/pill/lib/PillIconButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { buttonStencil } from '@workday/canvas-kit-react/button';
-import { createSubcomponent, focusRing } from '@workday/canvas-kit-react/common';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
@@ -9,8 +9,8 @@ import { component, system } from '@workday/canvas-tokens-web';
 import { usePillModel } from './usePillModel';
 export const pillIconButtonStencil = createStencil({
     extends: buttonStencil,
-    base: { name: "1zp375", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:calc(0.125rem * -1);border-radius:0.125rem;height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0;overflow:visible;flex:0 0 auto;--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);--size-svg-bca693:var(--cnvs-component-system-icon-size-sm, 1.125rem);::after{content:\"\";height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));position:absolute;left:calc(0.4375rem * -1);bottom:calc(0.4375rem * -1);margin:0;pointer-events:all;}&:focus-visible, &.focus{--border-button-a19f67:var(--cnvs-sys-color-border-transparent);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:hover, &.hover{--border-button-a19f67:var(--cnvs-sys-color-border-transparent);}&:active, &.active{--border-button-a19f67:var(--cnvs-sys-color-border-transparent);}&:disabled, &.disabled{--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}" }
-}, "pill-icon-button-e12468");
+    base: { name: "21irrl", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:0;--borderRadius-button-a19f67:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));padding:0;overflow:visible;flex:0 0 auto;--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);--size-svg-bca693:var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem));::after{content:\"\";box-sizing:border-box;position:absolute;top:calc(0.3125rem * -1);right:calc(0.3125rem * -1);bottom:calc(0.3125rem * -1);left:calc(0.3125rem * -1);margin:0;pointer-events:all;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));border-style:solid;border-width:0.125rem;border-color:transparent;}&:focus-visible, &.focus{--border-button-a19f67:var(--cnvs-sys-color-border-transparent);box-shadow:none;::after{border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}}&:hover, &.hover{--border-button-a19f67:var(--cnvs-sys-color-border-transparent);}&:active, &.active{--border-button-a19f67:var(--cnvs-sys-color-border-transparent);}&:disabled, &.disabled{--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}" }
+}, "pill-icon-button-81e81c");
 export const PillIconButton = createSubcomponent('button')({
     modelHook: usePillModel,
 })(({ size, icon, children, 'aria-label': ariaLabel = '', ...elemProps }, Element, model) => {

package/dist/es6/skeleton/lib/parts/SkeletonHeader.d.ts

@@ -2,7 +2,7 @@ import { CSProps } from '@workday/canvas-kit-styling';
 export interface SkeletonHeaderProps extends CSProps {
     /**
      * The background color of the skeleton
-     * @default `system.color.bg.alt.strong`
+     * @default Surface shimmer gradient (`surface.alt.strong` → `surface.loading`); override with a solid color
      */
     backgroundColor?: string;
     /**
@@ -20,10 +20,18 @@ export declare const skeletonHeaderStencil: import("@workday/canvas-kit-styling"
     width: string;
     height: string;
     backgroundColor: string;
+}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    backgroundColor: string;
 }, never>, {}, {
+    backgroundColor: string;
+}, never, never>>, {}, {
     width: string;
     height: string;
     backgroundColor: string;
-}, never, never>;
+}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    backgroundColor: string;
+}, never>, {}, {
+    backgroundColor: string;
+}, never, never>, never>;
 export declare const SkeletonHeader: import("@workday/canvas-kit-react/common").ElementComponent<"div", SkeletonHeaderProps>;
 //# sourceMappingURL=SkeletonHeader.d.ts.map

package/dist/es6/skeleton/lib/parts/SkeletonHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonHeader.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/SkeletonHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAA8C,MAAM,6BAA6B,CAAC;AAKjG,MAAM,WAAW,mBAAoB,SAAQ,OAAO;IAClD;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,qBAAqB;;;;;;;;gBAahC,CAAC;AAEH,eAAO,MAAM,cAAc,yFAoBzB,CAAC"}
+{"version":3,"file":"SkeletonHeader.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/SkeletonHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAA8C,MAAM,6BAA6B,CAAC;AAKjG,MAAM,WAAW,mBAAoB,SAAQ,OAAO;IAClD;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;wBAahC,CAAC;AAEH,eAAO,MAAM,cAAc,yFAoBzB,CAAC"}

package/dist/es6/skeleton/lib/parts/SkeletonHeader.js

@@ -2,15 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
-import { SkeletonShape } from './SkeletonShape';
+import { SkeletonShape, skeletonSurfaceFillStencil } from './SkeletonShape';
 export const skeletonHeaderStencil = createStencil({
+    extends: skeletonSurfaceFillStencil,
     vars: {
         width: '',
         height: '',
         backgroundColor: '',
     },
-    base: { name: "15s9jw", styles: "box-sizing:border-box;background-color:var(--backgroundColor-skeleton-header-919591, var(--cnvs-sys-color-surface-loading, oklch(0.3057 0.079 256.22 / 0.13)));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));height:var(--height-skeleton-header-919591, var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem)));width:var(--width-skeleton-header-919591);margin-block-end:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));" }
-}, "skeleton-header-919591");
+    base: { name: "3kkoto", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));height:var(--height-skeleton-header-5b02f8, var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem)));width:var(--width-skeleton-header-5b02f8);margin-block-end:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));" }
+}, "skeleton-header-5b02f8");
 export const SkeletonHeader = createComponent('div')({
     displayName: 'Skeleton.Header',
     Component: ({ width = '100%', backgroundColor, height, ...elemProps }, ref, Element) => (_jsx(SkeletonShape, { ref: ref, as: Element, ...handleCsProp(elemProps, skeletonHeaderStencil({

package/dist/es6/skeleton/lib/parts/SkeletonShape.d.ts

@@ -1,4 +1,10 @@
 import { CSProps } from '@workday/canvas-kit-styling';
+/** Default Surface/Shimmer fill for skeleton placeholders (Shape, Header, Text lines). */
+export declare const skeletonSurfaceFillStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    backgroundColor: string;
+}, never>, {}, {
+    backgroundColor: string;
+}, never, never>;
 export interface SkeletonShapeProps extends CSProps {
     /**
      *  The width of the shape in `px` or `%`.
@@ -17,7 +23,7 @@ export interface SkeletonShapeProps extends CSProps {
     borderRadius?: number | string;
     /**
      * The background color of the skeleton
-     * @default `system.color.bg.alt.strong`
+     * @default Surface shimmer gradient (`surface.alt.strong` → `surface.loading`); override with a solid color
      */
     backgroundColor?: string;
 }
@@ -26,11 +32,19 @@ export declare const skeletonShapeStencil: import("@workday/canvas-kit-styling")
     height: string;
     borderRadius: string;
     backgroundColor: string;
+}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    backgroundColor: string;
 }, never>, {}, {
+    backgroundColor: string;
+}, never, never>>, {}, {
     width: string;
     height: string;
     borderRadius: string;
     backgroundColor: string;
-}, never, never>;
+}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    backgroundColor: string;
+}, never>, {}, {
+    backgroundColor: string;
+}, never, never>, never>;
 export declare const SkeletonShape: import("@workday/canvas-kit-react/common").ElementComponent<"div", SkeletonShapeProps>;
 //# sourceMappingURL=SkeletonShape.d.ts.map

package/dist/es6/skeleton/lib/parts/SkeletonShape.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonShape.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/SkeletonShape.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAA8C,MAAM,6BAA6B,CAAC;AAGjG,MAAM,WAAW,kBAAmB,SAAQ,OAAO;IACjD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,oBAAoB;;;;;;;;;;gBAc/B,CAAC;AAEH,eAAO,MAAM,aAAa,wFAsBxB,CAAC"}
+{"version":3,"file":"SkeletonShape.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/SkeletonShape.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAA8C,MAAM,6BAA6B,CAAC;AAGjG,0FAA0F;AAC1F,eAAO,MAAM,0BAA0B;;;;gBAcrC,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,OAAO;IACjD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;wBAc/B,CAAC;AAEH,eAAO,MAAM,aAAa,wFAsBxB,CAAC"}

package/dist/es6/skeleton/lib/parts/SkeletonShape.js

@@ -2,15 +2,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
+/** Default Surface/Shimmer fill for skeleton placeholders (Shape, Header, Text lines). */
+export const skeletonSurfaceFillStencil = createStencil({
+    vars: {
+        backgroundColor: '',
+    },
+    base: { name: "4aw72", styles: "box-sizing:border-box;background:var(--backgroundColor-skeleton-surface-fill-2acf91, linear-gradient(to left, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))), var(--cnvs-sys-color-surface-loading, oklch(0.3057 0.079 256.22 / 0.13))));border:0.0625rem solid transparent;@media (forced-colors: active){border-color:CanvasText;}" }
+}, "skeleton-surface-fill-2acf91");
 export const skeletonShapeStencil = createStencil({
+    extends: skeletonSurfaceFillStencil,
     vars: {
         width: '',
         height: '',
         borderRadius: '',
         backgroundColor: '',
     },
-    base: { name: "37nwjn", styles: "box-sizing:border-box;background-color:var(--backgroundColor-skeleton-shape-5b810e, var(--cnvs-sys-color-surface-loading, oklch(0.3057 0.079 256.22 / 0.13)));border-radius:var(--borderRadius-skeleton-shape-5b810e, 0);height:var(--height-skeleton-shape-5b810e, 100%);width:var(--width-skeleton-shape-5b810e);margin-block-end:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));" }
-}, "skeleton-shape-5b810e");
+    base: { name: "39irtf", styles: "box-sizing:border-box;border-radius:var(--borderRadius-skeleton-shape-068fb0, 0);height:var(--height-skeleton-shape-068fb0, 100%);width:var(--width-skeleton-shape-068fb0);margin-block-end:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));" }
+}, "skeleton-shape-068fb0");
 export const SkeletonShape = createComponent('div')({
     displayName: 'Skeleton.Shape',
     Component: ({ width = '100%', height, backgroundColor, borderRadius, ...elemProps }, ref, Element) => {

package/dist/es6/skeleton/lib/parts/SkeletonText.d.ts

@@ -7,14 +7,23 @@ export interface SkeletonTextProps extends CSProps {
     lineCount?: number;
     /**
      * The background color of the skeleton
-     * @default `system.color.bg.alt.strong`
+     * @default Surface shimmer gradient (`surface.alt.strong` → `surface.loading`); override with a solid color
      */
     backgroundColor?: string;
 }
-export declare const skeletonTextStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+export declare const skeletonTextLineStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    backgroundColor: string;
+}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
+    backgroundColor: string;
+}, never>, {}, {
+    backgroundColor: string;
+}, never, never>>, {}, {
+    backgroundColor: string;
+}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
     backgroundColor: string;
 }, never>, {}, {
     backgroundColor: string;
-}, never, never>;
+}, never, never>, never>;
+export declare const skeletonTextStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
 export declare const SkeletonText: import("@workday/canvas-kit-react/common").ElementComponent<"div", SkeletonTextProps>;
 //# sourceMappingURL=SkeletonText.d.ts.map

package/dist/es6/skeleton/lib/parts/SkeletonText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/SkeletonText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAGzF,MAAM,WAAW,iBAAkB,SAAQ,OAAO;IAChD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,mBAAmB;;;;gBAkB9B,CAAC;AAEH,eAAO,MAAM,YAAY,uFAYvB,CAAC"}
+{"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/SkeletonText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAA8B,MAAM,6BAA6B,CAAC;AAKjF,MAAM,WAAW,iBAAkB,SAAQ,OAAO;IAChD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,uBAAuB;;;;;;;;;;;;wBAalC,CAAC;AAEH,eAAO,MAAM,mBAAmB,iJAO9B,CAAC;AAEH,eAAO,MAAM,YAAY,uFAgBvB,CAAC"}

package/dist/es6/skeleton/lib/parts/SkeletonText.js

@@ -1,17 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createComponent } from '@workday/canvas-kit-react/common';
-import { createStencil, cssVar, handleCsProp } from '@workday/canvas-kit-styling';
+import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
-export const skeletonTextStencil = createStencil({
+import { skeletonSurfaceFillStencil } from './SkeletonShape';
+export const skeletonTextLineStencil = createStencil({
+    extends: skeletonSurfaceFillStencil,
     vars: {
         backgroundColor: '',
     },
-    base: { name: "452cl4", styles: "box-sizing:border-box;margin-block-end:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));& [data-part=\"skeleton-text-lines\"]{background-color:var(--backgroundColor-skeleton-text-4b1ca5, var(--cnvs-sys-color-surface-loading, oklch(0.3057 0.079 256.22 / 0.13)));height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));margin-block-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));width:100%;}& [data-part=\"skeleton-text-lines\"]:last-child{width:60%;}" }
-}, "skeleton-text-4b1ca5");
+    base: { name: "7qscx", styles: "box-sizing:border-box;height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));margin-block-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));border-radius:var(--cnvs-sys-shape-xxxl, 2rem);width:100%;display:block;" }
+}, "skeleton-text-line-318cd1");
+export const skeletonTextStencil = createStencil({
+    base: { name: "1az8g", styles: "box-sizing:border-box;margin-block-end:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));& [data-part=\"skeleton-text-lines\"]:last-child{width:60%;}" }
+}, "skeleton-text-175643");
 export const SkeletonText = createComponent('div')({
     displayName: 'Skeleton.Text',
     Component: ({ backgroundColor, lineCount = 2, ...elemProps }, ref, Element) => {
         const lines = new Array(lineCount).fill(null);
-        return lineCount > 0 ? (_jsx(Element, { ref: ref, ...handleCsProp(elemProps, skeletonTextStencil({ backgroundColor })), children: lines.map((_value, index) => (_jsx("div", { "data-part": 'skeleton-text-lines' }, index))) })) : null;
+        return lineCount > 0 ? (_jsx(Element, { ref: ref, ...handleCsProp(elemProps, skeletonTextStencil()), children: lines.map((_value, index) => (_jsx("div", { "data-part": "skeleton-text-lines", ...handleCsProp({}, skeletonTextLineStencil({ backgroundColor })) }, index))) })) : null;
     },
 });

package/information-highlight/lib/InformationHighlight.tsx

@@ -1,7 +1,7 @@
-import {createContainer} from '@workday/canvas-kit-react/common';
+import {cornerShapeStencil, createContainer} from '@workday/canvas-kit-react/common';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {CSProps, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 
 import {useInformationHighlightModel} from './hooks/useInformationHighlightModel';
 import {Body} from './parts/Body';
@@ -9,22 +9,35 @@ import {InformationHighlightHeading} from './parts/Heading';
 import {Icon} from './parts/Icon';
 import {Link} from './parts/Link';
 
-interface InformationHighlightProps extends CSProps {}
+interface InformationHighlightProps extends CSProps {
+  children?: React.ReactNode;
+}
+
+const defaultVariantStyles = {
+  backgroundColor: system.legacy.color.surface.alt.default,
+  '& [data-part="information-highlight-icon"]': {
+    [systemIconStencil.vars.color]: system.color.fg.default,
+  },
+};
 
 export const informationHighlightStencil = createStencil({
+  extends: cornerShapeStencil,
   base: {
     display: 'grid',
     gridTemplateColumns: 'min-content',
-    gap: `${system.legacy.gap.sm} ${system.legacy.gap.md}`,
+    gap: `0 ${px2rem(12)}`,
     padding: system.legacy.padding.md,
     borderRadius: system.legacy.shape.sm,
     outline: `${px2rem(1)} solid transparent`,
-    borderInlineStart: `${base.legacy.size50} solid transparent`,
+    [cornerShapeStencil.vars.shape]: system.legacy.shape.xxl,
   },
   modifiers: {
+    default: {
+      low: defaultVariantStyles,
+      high: defaultVariantStyles,
+    },
     informational: {
       low: {
-        borderInlineStartColor: system.legacy.color.border.info.default,
         backgroundColor: system.legacy.color.surface.alt.default,
         '& [data-part="information-highlight-icon"]': {
           [systemIconStencil.vars.accentColor]: system.color.fg.inverse,
@@ -33,7 +46,6 @@ export const informationHighlightStencil = createStencil({
         },
       },
       high: {
-        borderInlineStartColor: system.legacy.color.border.info.default,
         backgroundColor: system.legacy.color.surface.info.default,
         '& [data-part="information-highlight-icon"]': {
           [systemIconStencil.vars.accentColor]: system.color.fg.inverse,
@@ -44,7 +56,6 @@ export const informationHighlightStencil = createStencil({
     },
     caution: {
       low: {
-        borderInlineStartColor: system.legacy.color.border.warning,
         backgroundColor: system.legacy.color.surface.alt.default,
         '& [data-part="information-highlight-icon"]': {
           [systemIconStencil.vars.accentColor]: system.color.fg.inverse,
@@ -53,7 +64,6 @@ export const informationHighlightStencil = createStencil({
         },
       },
       high: {
-        borderInlineStartColor: system.legacy.color.border.warning,
         backgroundColor: system.legacy.color.surface.warning.default,
         '& [data-part="information-highlight-icon"]': {
           [systemIconStencil.vars.accentColor]: system.color.fg.inverse,
@@ -64,7 +74,6 @@ export const informationHighlightStencil = createStencil({
     },
     critical: {
       low: {
-        borderInlineStartColor: system.legacy.color.border.danger,
         backgroundColor: system.legacy.color.surface.alt.default,
         '& [data-part="information-highlight-icon"]': {
           [systemIconStencil.vars.accentColor]: system.color.fg.inverse,
@@ -74,7 +83,6 @@ export const informationHighlightStencil = createStencil({
         },
       },
       high: {
-        borderInlineStartColor: system.legacy.color.border.danger,
         backgroundColor: system.legacy.color.surface.danger.default,
         '& [data-part="information-highlight-icon"]': {
           [systemIconStencil.vars.accentColor]: system.color.fg.inverse,
@@ -83,6 +91,46 @@ export const informationHighlightStencil = createStencil({
         },
       },
     },
+    actionPlacement: {
+      bottom: {},
+      end: {
+        width: '100%',
+        minWidth: 0,
+        containerType: 'inline-size',
+        gridTemplateColumns: 'min-content minmax(0, 1fr)',
+        gridTemplateAreas: `
+          "icon heading"
+          "icon body"
+          "icon link"
+        `,
+        '& [data-part="information-highlight-icon"]': {
+          gridArea: 'icon',
+          alignSelf: 'start',
+        },
+        '& [data-part="information-highlight-heading"]': {
+          gridArea: 'heading',
+        },
+        '& [data-part="information-highlight-body"]': {
+          gridArea: 'body',
+        },
+        '& [data-part="information-highlight-link"]': {
+          gridArea: 'link',
+          justifySelf: 'end',
+          marginBlockStart: system.legacy.gap.md,
+        },
+        '@container (min-width: 28rem)': {
+          gridTemplateColumns: 'min-content minmax(0, 1fr) minmax(0, max-content)',
+          gridTemplateAreas: `
+            "icon heading link"
+            "icon body link"
+          `,
+          '& [data-part="information-highlight-link"]': {
+            alignSelf: 'center',
+            marginBlockStart: 0,
+          },
+        },
+      },
+    },
   },
 });
 
@@ -95,13 +143,18 @@ export const InformationHighlight = createContainer('section')({
     Body: Body,
     Link: Link,
   },
-})(({...elemProps}: InformationHighlightProps, Element, model) => {
+})(({children, ...elemProps}: InformationHighlightProps, Element, model) => {
   return (
     <Element
       {...handleCsProp(
         elemProps,
-        informationHighlightStencil({[model.state.variant]: model.state.emphasis})
+        informationHighlightStencil({
+          [model.state.variant]: model.state.emphasis,
+          actionPlacement: model.state.actionPlacement,
+        })
       )}
-    />
+    >
+      {children}
+    </Element>
   );
 });

package/information-highlight/lib/hooks/useInformationHighlightModel.ts

@@ -2,14 +2,24 @@ import {createModelHook} from '@workday/canvas-kit-react/common';
 
 export const useInformationHighlightModel = createModelHook({
   defaultConfig: {
-    variant: 'informational' as 'informational' | 'caution' | 'critical',
+    variant: 'default' as 'default' | 'informational' | 'caution' | 'critical',
     emphasis: 'low' as 'low' | 'high',
+    /**
+     * Controls where `InformationHighlight.Link` is placed relative to heading and body.
+     * - `bottom` (default): link stacks below heading and body.
+     * - `end`: link is visually placed at the inline end beside content when the container is wide
+     *   enough; in narrower containers it stacks below the body. Placement uses CSS Grid
+     *   only—DOM, keyboard tab order, and screen reader order remain heading, body, then link.
+     * @default 'bottom'
+     */
+    actionPlacement: 'bottom' as 'bottom' | 'end',
   },
 })(config => {
   return {
     state: {
       variant: config.variant,
       emphasis: config.emphasis,
+      actionPlacement: config.actionPlacement,
     },
     events: {},
   };

package/information-highlight/lib/parts/Body.tsx

@@ -1,32 +1,45 @@
-import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {Text} from '@workday/canvas-kit-react/text';
 import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
+import {useInformationHighlightModel} from '../hooks/useInformationHighlightModel';
+
 const informationHighlightBodyStencil = createStencil({
+  parts: {
+    body: 'information-highlight-body',
+  },
   base: () => {
     return {
-      fontFamily: system.fontFamily.default,
-      fontWeight: system.fontWeight.normal,
-      lineHeight: system.legacy.lineHeight.subtext.lg,
-      fontSize: system.legacy.fontSize.subtext.lg,
-      letterSpacing: system.legacy.letterSpacing.subtext.lg,
-      color: system.color.fg.default,
-      gridColumn: '2',
-      marginBlockEnd: system.legacy.gap.sm,
+      ...system.legacy.type.subtext.lg,
+      color: system.color.fg.muted.default,
+      marginBlockEnd: system.legacy.gap.md,
     };
   },
+  modifiers: {
+    actionPlacement: {
+      bottom: {
+        gridColumn: '2',
+      },
+      end: {
+        marginBlockEnd: 0,
+      },
+    },
+  },
 });
 
-export const Body = createComponent('div')({
+export const Body = createSubcomponent('div')({
   displayName: 'Body',
-  Component: ({...elemProps}: ExtractProps<typeof Text, never>, ref, Element) => {
-    return (
-      <Text
-        as={Element}
-        ref={ref}
-        {...handleCsProp(elemProps, informationHighlightBodyStencil())}
-      />
-    );
-  },
+  modelHook: useInformationHighlightModel,
+})(({...elemProps}: ExtractProps<typeof Text, never>, Element, model) => {
+  return (
+    <Text
+      as={Element}
+      {...informationHighlightBodyStencil.parts.body}
+      {...handleCsProp(
+        elemProps,
+        informationHighlightBodyStencil({actionPlacement: model.state.actionPlacement})
+      )}
+    />
+  );
 });

package/information-highlight/lib/parts/Heading.tsx

@@ -1,36 +1,49 @@
-import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {Heading} from '@workday/canvas-kit-react/text';
 import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
+import {useInformationHighlightModel} from '../hooks/useInformationHighlightModel';
+
 const informationHighlightHeadingStencil = createStencil({
+  parts: {
+    heading: 'information-highlight-heading',
+  },
   base: () => {
     return {
-      fontFamily: system.fontFamily.default,
-      fontWeight: system.fontWeight.bold,
-      lineHeight: system.legacy.lineHeight.body.sm,
-      fontSize: system.legacy.fontSize.body.sm,
-      letterSpacing: system.legacy.letterSpacing.body.sm,
-      color: system.color.fg.default,
-      gridColumn: '2',
+      ...system.legacy.type.subtext.lg,
+      fontWeight: system.fontWeight.medium,
+      color: system.color.fg.strong,
       margin: 0,
+      marginBlockEnd: system.legacy.gap.xs,
     };
   },
+  modifiers: {
+    actionPlacement: {
+      bottom: {
+        gridColumn: '2',
+      },
+      end: {},
+    },
+  },
 });
 
 export interface InformationHighlightHeadingProps
   extends Partial<ExtractProps<typeof Heading, never>> {}
 
-export const InformationHighlightHeading = createComponent('h3')({
+export const InformationHighlightHeading = createSubcomponent('h3')({
   displayName: 'Heading',
-  Component: ({size = 'small', ...elemProps}: InformationHighlightHeadingProps, ref, Element) => {
-    return (
-      <Heading
-        as={Element}
-        ref={ref}
-        size={size}
-        {...handleCsProp(elemProps, informationHighlightHeadingStencil())}
-      />
-    );
-  },
+  modelHook: useInformationHighlightModel,
+})(({size = 'small', ...elemProps}: InformationHighlightHeadingProps, Element, model) => {
+  return (
+    <Heading
+      as={Element}
+      size={size}
+      {...informationHighlightHeadingStencil.parts.heading}
+      {...handleCsProp(
+        elemProps,
+        informationHighlightHeadingStencil({actionPlacement: model.state.actionPlacement})
+      )}
+    />
+  );
 });

package/information-highlight/lib/parts/Icon.tsx

@@ -4,12 +4,14 @@ import {
   exclamationCircleIcon,
   exclamationTriangleIcon,
   infoIcon,
+  layersIcon,
 } from '@workday/canvas-system-icons-web';
 
 import {useInformationHighlightModel} from '../hooks/useInformationHighlightModel';
 
 export interface IconProps extends Partial<ExtractProps<typeof SystemIcon, never>> {}
 const defaultIcons = {
+  default: layersIcon,
   informational: infoIcon,
   caution: exclamationTriangleIcon,
   critical: exclamationCircleIcon,
@@ -18,11 +20,12 @@ const defaultIcons = {
 export const Icon = createSubcomponent('span')({
   displayName: 'Icon',
   modelHook: useInformationHighlightModel,
-})(({icon, ...props}: IconProps, Element, model) => {
+})(({icon, size = 'md', ...props}: IconProps, Element, model) => {
   return (
     <SystemIcon
       as={Element}
       icon={icon ? icon : defaultIcons[model.state.variant]}
+      size={size}
       data-part="information-highlight-icon"
       {...props}
     />

package/information-highlight/lib/parts/Link.tsx

@@ -1,32 +1,47 @@
 import {Hyperlink} from '@workday/canvas-kit-react/button';
-import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
+import {useInformationHighlightModel} from '../hooks/useInformationHighlightModel';
+
 const informationHighlightLinkStencil = createStencil({
+  parts: {
+    link: 'information-highlight-link',
+  },
   base: () => {
     return {
-      fontFamily: system.fontFamily.default,
-      fontWeight: system.fontWeight.bold,
-      lineHeight: system.legacy.lineHeight.subtext.lg,
-      fontSize: system.legacy.fontSize.subtext.lg,
-      letterSpacing: system.legacy.letterSpacing.subtext.lg,
-      gridColumn: '2',
-      justifySelf: 'start',
+      ...system.legacy.type.subtext.lg,
       color: system.color.fg.default,
     };
   },
+  modifiers: {
+    actionPlacement: {
+      bottom: {
+        gridColumn: '2',
+        justifySelf: 'start',
+      },
+      end: {
+        margin: 0,
+        maxWidth: '100%',
+      },
+    },
+  },
 });
 
-export const Link = createComponent('a')({
+export const Link = createSubcomponent('a')({
   displayName: 'Link',
-  Component: ({...elemProps}: ExtractProps<typeof Hyperlink, never>, ref, Element) => {
-    return (
-      <Hyperlink
-        as={Element}
-        ref={ref}
-        {...handleCsProp(elemProps, informationHighlightLinkStencil())}
-      />
-    );
-  },
+  modelHook: useInformationHighlightModel,
+})(({...elemProps}: ExtractProps<typeof Hyperlink, never>, Element, model) => {
+  return (
+    <Hyperlink
+      as={Element}
+      {...informationHighlightLinkStencil.parts.link}
+      {...handleCsProp(
+        elemProps,
+        informationHighlightLinkStencil({actionPlacement: model.state.actionPlacement})
+      )}
+      variant="secondary"
+    />
+  );
 });