@workday/canvas-kit-react 13.2.52 → 13.2.54

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

@@ -10,7 +10,7 @@ import { createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 const tabsOverflowButtonStencil = createStencil({
-    base: { name: "e9o6m", styles: "box-sizing:border-box;&:has([data-part=\"tabs-overflow-button-icon\"]){display:flex;gap:var(--cnvs-sys-space-zero);}" }
+    base: { name: "36tt6s", styles: "box-sizing:border-box;&:has([data-part=\"tabs-overflow-button-icon\"]){display:flex;gap:var(--cnvs-sys-space-zero);}" }
 }, "tabs-overflow-button-4425ed");
 export const useTabsOverflowButton = composeHooks(createElemPropsHook(useTabsModel)(() => {
     return {

package/dist/es6/text/lib/LabelText.js

@@ -6,21 +6,21 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { textStencil } from './Text';
 const labelTextStencil = createStencil({
     extends: textStencil,
-    base: { name: "19u5h2", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);" },
+    base: { name: "1635k8", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);" },
     modifiers: {
         disabled: {
-            true: { name: "1ibf2r", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
+            true: { name: "wvscj", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
         },
         variant: {
-            inverse: { name: "17p75r", styles: "color:var(--cnvs-sys-color-text-inverse);" },
-            error: { name: "2sve4n", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
-            hint: { name: "3ktjyp", styles: "color:var(--cnvs-sys-color-text-hint);" }
+            inverse: { name: "2mu2kd", styles: "color:var(--cnvs-sys-color-text-inverse);" },
+            error: { name: "350ad0", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
+            hint: { name: "3t16sc", styles: "color:var(--cnvs-sys-color-text-hint);" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', disabled: true },
-            styles: { name: "i0ze9", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-sys-color-text-inverse);" }
+            styles: { name: "1uma9b", styles: "opacity:var(--cnvs-sys-opacity-disabled);color:var(--cnvs-sys-color-text-inverse);" }
         }
     ]
 }, "label-text-981a80");

package/dist/es6/text/lib/Text.js

@@ -4,30 +4,30 @@ import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 export const textStencil = createStencil({
-    base: { name: "4f70x9", styles: "box-sizing:border-box;" },
+    base: { name: "1t4tqa", styles: "box-sizing:border-box;" },
     modifiers: {
         typeLevel: {
             // Title level styles
-            'title.large': { name: "o0iyl", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-large);font-size:var(--cnvs-sys-font-size-title-large);color:var(--cnvs-sys-color-text-strong);" },
-            'title.medium': { name: "3pvo10", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-medium);font-size:var(--cnvs-sys-font-size-title-medium);color:var(--cnvs-sys-color-text-strong);" },
-            'title.small': { name: "7mwz7", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-small);font-size:var(--cnvs-sys-font-size-title-small);color:var(--cnvs-sys-color-text-strong);" },
+            'title.large': { name: "qso15", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-large);font-size:var(--cnvs-sys-font-size-title-large);color:var(--cnvs-sys-color-text-strong);" },
+            'title.medium': { name: "3vl3ee", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-medium);font-size:var(--cnvs-sys-font-size-title-medium);color:var(--cnvs-sys-color-text-strong);" },
+            'title.small': { name: "53ab9", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-small);font-size:var(--cnvs-sys-font-size-title-small);color:var(--cnvs-sys-color-text-strong);" },
             // Heading level styles
-            'heading.large': { name: "4d4una", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-large);font-size:var(--cnvs-sys-font-size-heading-large);color:var(--cnvs-sys-color-text-strong);" },
-            'heading.medium': { name: "3q2fte", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-medium);font-size:var(--cnvs-sys-font-size-heading-medium);color:var(--cnvs-sys-color-text-strong);" },
-            'heading.small': { name: "3hv3mm", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-small);font-size:var(--cnvs-sys-font-size-heading-small);color:var(--cnvs-sys-color-text-strong);" },
+            'heading.large': { name: "1g9j65", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-large);font-size:var(--cnvs-sys-font-size-heading-large);color:var(--cnvs-sys-color-text-strong);" },
+            'heading.medium': { name: "45c3jh", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-medium);font-size:var(--cnvs-sys-font-size-heading-medium);color:var(--cnvs-sys-color-text-strong);" },
+            'heading.small': { name: "2iwz4y", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-small);font-size:var(--cnvs-sys-font-size-heading-small);color:var(--cnvs-sys-color-text-strong);" },
             // Body level styles
-            'body.large': { name: "41airx", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-large);font-size:var(--cnvs-sys-font-size-body-large);color:var(--cnvs-sys-color-text-default);" },
-            'body.medium': { name: "3i0f40", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-medium);font-size:var(--cnvs-sys-font-size-body-medium);color:var(--cnvs-sys-color-text-default);" },
-            'body.small': { name: "2s4mg7", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-small);font-size:var(--cnvs-sys-font-size-body-small);letter-spacing:var(--cnvs-base-letter-spacing-200);color:var(--cnvs-sys-color-text-default);" },
+            'body.large': { name: "vf18k", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-large);font-size:var(--cnvs-sys-font-size-body-large);color:var(--cnvs-sys-color-text-default);" },
+            'body.medium': { name: "2b5vea", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-medium);font-size:var(--cnvs-sys-font-size-body-medium);color:var(--cnvs-sys-color-text-default);" },
+            'body.small': { name: "2srkq9", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-small);font-size:var(--cnvs-sys-font-size-body-small);letter-spacing:var(--cnvs-base-letter-spacing-200);color:var(--cnvs-sys-color-text-default);" },
             // Subtext level styles
-            'subtext.large': { name: "311kwh", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);" },
-            'subtext.medium': { name: "hn2ju", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);color:var(--cnvs-sys-color-text-default);" },
-            'subtext.small': { name: "1txfw1", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-small);letter-spacing:var(--cnvs-base-letter-spacing-50);color:var(--cnvs-sys-color-text-default);" }
+            'subtext.large': { name: "4e9phd", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);color:var(--cnvs-sys-color-text-default);" },
+            'subtext.medium': { name: "h6xff", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);color:var(--cnvs-sys-color-text-default);" },
+            'subtext.small': { name: "3n8ny4", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-small);letter-spacing:var(--cnvs-base-letter-spacing-50);color:var(--cnvs-sys-color-text-default);" }
         },
         variant: {
-            error: { name: "4f79gd", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
-            hint: { name: "1rgmcn", styles: "color:var(--cnvs-sys-color-text-hint);" },
-            inverse: { name: "3zjdu4", styles: "color:var(--cnvs-sys-color-text-inverse);" }
+            error: { name: "269oam", styles: "color:var(--cnvs-sys-color-text-critical-default);" },
+            hint: { name: "jf3bp", styles: "color:var(--cnvs-sys-color-text-hint);" },
+            inverse: { name: "35tyqc", styles: "color:var(--cnvs-sys-color-text-inverse);" }
         }
     }
 }, "text-8fe759");

package/dist/es6/text/lib/TypeLevelComponents.js

@@ -5,7 +5,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createStencil } from '@workday/canvas-kit-styling';
 const subtextStencil = createStencil({
     extends: textStencil,
-    base: { name: "1dxxke", styles: "box-sizing:border-box;" }
+    base: { name: "1qmeq2", styles: "box-sizing:border-box;" }
 }, "subtext-5df9ce");
 /**
  * This component is intended to be used for small subtext content or in tight spaces.
@@ -40,7 +40,7 @@ export const Subtext = createComponent('p')({
 });
 const bodyTextStencil = createStencil({
     extends: textStencil,
-    base: { name: "3c8fwe", styles: "box-sizing:border-box;" }
+    base: { name: "18tkxr", styles: "box-sizing:border-box;" }
 }, "body-text-35cc56");
 /**
  * This component is intended to be used for standard body text.
@@ -75,7 +75,7 @@ export const BodyText = createComponent('p')({
 });
 const headingStencil = createStencil({
     extends: textStencil,
-    base: { name: "15bana", styles: "box-sizing:border-box;" }
+    base: { name: "23ia5a", styles: "box-sizing:border-box;" }
 }, "heading-8ff6f4");
 /**
  * This component is intended to be used for headings and large text.
@@ -110,7 +110,7 @@ export const Heading = createComponent('h2')({
 });
 const titleStencil = createStencil({
     extends: textStencil,
-    base: { name: "acj92", styles: "box-sizing:border-box;" }
+    base: { name: "3k92gr", styles: "box-sizing:border-box;" }
 }, "title-d6646c");
 /**
  * This component is intended to be used large page titles.

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

@@ -11,13 +11,13 @@ export const TextAreaResizeDirection = {
 };
 export const textAreaStencil = createStencil({
     extends: textInputStencil,
-    base: { name: "2rm2k5", styles: "box-sizing:border-box;min-height:var(--cnvs-sys-space-x16);min-width:calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10));&::webkit-resizer{display:none;}" },
+    base: { name: "3zljpe", styles: "box-sizing:border-box;min-height:var(--cnvs-sys-space-x16);min-width:calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10));&::webkit-resizer{display:none;}" },
     modifiers: {
         resize: {
-            both: { name: "2nkoa8", styles: "resize:both;" },
-            horizontal: { name: "2px743", styles: "resize:horizontal;" },
-            vertical: { name: "23cshj", styles: "resize:vertical;" },
-            none: { name: "3iq594", styles: "resize:none;" }
+            both: { name: "1dw626", styles: "resize:both;" },
+            horizontal: { name: "9pwpg", styles: "resize:horizontal;" },
+            vertical: { name: "9k5b8", styles: "resize:vertical;" },
+            none: { name: "3xf7o3", styles: "resize:none;" }
         }
     },
     defaultModifiers: {

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

@@ -35,10 +35,10 @@ export const inputGroupInnerStencil = createStencil({
          */
         pointerEvents: '',
     },
-    base: { name: "1ofi0n", styles: "--insetInlineStart-input-group-inner-42c96b:initial;--insetInlineEnd-input-group-inner-42c96b:initial;--width-input-group-inner-42c96b:var(--cnvs-sys-space-x10);--height-input-group-inner-42c96b:var(--cnvs-sys-space-x10);box-sizing:border-box;display:flex;position:absolute;align-items:center;justify-content:center;width:var(--width-input-group-inner-42c96b);height:var(--height-input-group-inner-42c96b);inset-inline-start:var(--insetInlineStart-input-group-inner-42c96b);inset-inline-end:var(--insetInlineEnd-input-group-inner-42c96b);" },
+    base: { name: "3wm45h", styles: "--insetInlineStart-input-group-inner-42c96b:initial;--insetInlineEnd-input-group-inner-42c96b:initial;--width-input-group-inner-42c96b:var(--cnvs-sys-space-x10);--height-input-group-inner-42c96b:var(--cnvs-sys-space-x10);box-sizing:border-box;display:flex;position:absolute;align-items:center;justify-content:center;width:var(--width-input-group-inner-42c96b);height:var(--height-input-group-inner-42c96b);inset-inline-start:var(--insetInlineStart-input-group-inner-42c96b);inset-inline-end:var(--insetInlineEnd-input-group-inner-42c96b);" },
     modifiers: {
         pointerEvents: {
-            _: { name: "3npyb8", styles: "pointer-events:var(--pointerEvents-input-group-inner-42c96b);" }
+            _: { name: "uv6s2", styles: "pointer-events:var(--pointerEvents-input-group-inner-42c96b);" }
         }
     }
 }, "input-group-inner-42c96b");
@@ -76,13 +76,13 @@ export const inputGroupInputStencil = createStencil({
         paddingInlineStart: '',
         paddingInlineEnd: '',
     },
-    base: { name: "24uvva", styles: "box-sizing:border-box;display:flex;width:100%;" },
+    base: { name: "1i4mrn", styles: "box-sizing:border-box;display:flex;width:100%;" },
     modifiers: {
         paddingInlineStart: {
-            _: { name: "38ru28", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-9155da);" }
+            _: { name: "1jt1fh", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-9155da);" }
         },
         paddingInlineEnd: {
-            _: { name: "4j6do", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-9155da);" }
+            _: { name: "3hrew", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-9155da);" }
         }
     }
 }, "input-group-input-9155da");
@@ -140,7 +140,7 @@ const wrapInCalc = (values) => {
     return `calc(${values.map(toPx).join(' + ')})`;
 };
 export const inputGroupStencil = createStencil({
-    base: { name: "2n2lpl", 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: "1w4x7u", 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-27e30b");
 /**
  * An `InputGroup` is a container around a {@link TextInput} with optional inner start and end

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

@@ -7,15 +7,15 @@ export const textInputStencil = createStencil({
     vars: {
         width: '',
     },
-    base: { name: "2iztzz", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);display:block;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-x1);height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;padding:var(--cnvs-sys-space-x2);margin:0rem;width:var(--width-text-input-696c53);min-width:var(--width-text-input-696c53, calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10)));color:var(--cnvs-sys-color-text-default);text-overflow:ellipsis;::-ms-clear{display:none;}&::placeholder{color:var(--cnvs-sys-color-text-hint);}&:is(:hover, .hover){border-color:var(--cnvs-sys-color-border-input-strong);}&:is(:focus-visible, .focus):where(:not([disabled])){border-color:var(--cnvs-brand-common-focus-outline);box-shadow:inset 0 0 0 1px var(--cnvs-brand-common-focus-outline);outline:0.125rem solid transparent;}&:is(:disabled, .disabled){background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);color:var(--cnvs-sys-color-text-disabled);&::placeholder{color:var(--cnvs-sys-color-text-disabled);}}" },
+    base: { name: "aujem", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);display:block;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-x1);height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;padding:var(--cnvs-sys-space-x2);margin:0rem;width:var(--width-text-input-696c53);min-width:var(--width-text-input-696c53, calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10)));color:var(--cnvs-sys-color-text-default);text-overflow:ellipsis;::-ms-clear{display:none;}&::placeholder{color:var(--cnvs-sys-color-text-hint);}&:is(:hover, .hover){border-color:var(--cnvs-sys-color-border-input-strong);}&:is(:focus-visible, .focus):where(:not([disabled])){border-color:var(--cnvs-brand-common-focus-outline);box-shadow:inset 0 0 0 1px var(--cnvs-brand-common-focus-outline);outline:0.125rem solid transparent;}&:is(:disabled, .disabled){background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);color:var(--cnvs-sys-color-text-disabled);&::placeholder{color:var(--cnvs-sys-color-text-disabled);}}" },
     modifiers: {
         grow: {
-            true: { name: "3kgm0", styles: "width:100%;resize:vertical;" },
-            false: { name: "2wjh8a", styles: "width:initial;" }
+            true: { name: "39l18i", styles: "width:100%;resize:vertical;" },
+            false: { name: "2pj17f", styles: "width:initial;" }
         },
         error: {
-            error: { name: "2rwmjp", styles: "border-color:var(--cnvs-brand-error-base);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-error-base);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base), 0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);outline-offset:0.125rem;}" },
-            alert: { name: "26fket", styles: "border-color:var(--cnvs-brand-alert-darkest);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-alert-darkest);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base),\n        0 0 0 2px var(--cnvs-sys-color-border-inverse),\n        0 0 0 4px var(--cnvs-brand-common-focus-outline);}outline-offset:0.125rem;" }
+            error: { name: "2l0kf5", styles: "border-color:var(--cnvs-brand-error-base);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-error-base);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base), 0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);outline-offset:0.125rem;}" },
+            alert: { name: "2o75se", styles: "border-color:var(--cnvs-brand-alert-darkest);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base);&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-brand-alert-darkest);}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base),\n        0 0 0 2px var(--cnvs-sys-color-border-inverse),\n        0 0 0 4px var(--cnvs-brand-common-focus-outline);}outline-offset:0.125rem;" }
         }
     },
     defaultModifiers: {

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

@@ -42,7 +42,7 @@ const getAriaAttributes = (mode, id) => {
     }
 };
 const toastStencil = createStencil({
-    base: { name: "1eq8e7", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:calc(calc(var(--cnvs-sys-space-x20) * 4) + var(--cnvs-sys-space-x10));padding:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);" }
+    base: { name: "3j8rml", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:calc(calc(var(--cnvs-sys-space-x20) * 4) + var(--cnvs-sys-space-x10));padding:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);" }
 }, "toast-55513d");
 /**
  * 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: "e6umq", styles: "box-sizing:border-box;align-items:flex-start;flex-direction:column;justify-content:center;padding-top:var(--cnvs-sys-space-x4);padding-bottom:var(--cnvs-sys-space-x4);flex-grow:1;gap:var(--cnvs-sys-space-x1);" }
+    base: { name: "139mms", styles: "box-sizing:border-box;align-items:flex-start;flex-direction:column;justify-content:center;padding-top:var(--cnvs-sys-space-x4);padding-bottom:var(--cnvs-sys-space-x4);flex-grow:1;gap:var(--cnvs-sys-space-x1);" }
 }, "toast-body-ac2901");
 export const ToastBody = createComponent('div')({
     displayName: 'Toast.Body',

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

@@ -4,7 +4,7 @@ import { Popup } from '@workday/canvas-kit-react/popup';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 export const toastCloseIconStencil = createStencil({
-    base: { name: "21gapw", styles: "box-sizing:border-box;position:relative;" }
+    base: { name: "13a7mb", 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 { system } from '@workday/canvas-tokens-web';
 export const toastIconStencil = createStencil({
-    base: { name: "1vcjpn", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x3);" }
+    base: { name: "3sdkhy", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x3);" }
 }, "toast-icon-22b05a");
 export const ToastIcon = createComponent('div')({
     displayName: 'Toast.Icon',

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

@@ -6,7 +6,7 @@ import { createStencil } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { system } from '@workday/canvas-tokens-web';
 export const toastMessageStencil = createStencil({
-    base: { name: "3m9gfl", styles: "box-sizing:border-box;word-break:break-word;margin-block-start:var(--cnvs-sys-space-zero);margin-block-end:var(--cnvs-sys-space-zero);" }
+    base: { name: "36dpwh", styles: "box-sizing:border-box;word-break:break-word;margin-block-start:var(--cnvs-sys-space-zero);margin-block-end:var(--cnvs-sys-space-zero);" }
 }, "toast-message-19d226");
 export const ToastMessage = createSubcomponent('p')({
     modelHook: useToastModel,

package/dist/es6/tooltip/lib/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,SAAS,EAGV,MAAM,iCAAiC,CAAC;AAMzC,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF;;;;;;;;;;;;;;OAcG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,aAAa,CAAC;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,eAAO,MAAM,OAAO,kFA0ClB,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,SAAS,EAGV,MAAM,iCAAiC,CAAC;AAMzC,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF;;;;;;;;;;;;;;OAcG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,aAAa,CAAC;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,eAAO,MAAM,OAAO,kFAuElB,CAAC"}

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import innerText from 'react-innertext';
 import { getTransformFromPlacement, Popper, defaultFallbackPlacements, } from '@workday/canvas-kit-react/popup';
-import { createComponent, mergeCallback } from '@workday/canvas-kit-react/common';
+import { createComponent, mergeCallback, useLocalRef } from '@workday/canvas-kit-react/common';
 import { TooltipContainer } from './TooltipContainer';
 import { useTooltip } from './useTooltip';
 function mergeCallbacks(elemProps, componentProps, keys = Object.keys(componentProps)) {
@@ -26,15 +26,34 @@ export const Tooltip = createComponent('div')({
             showDelay,
             hideDelay,
         });
+        const [elementHasFocus, setElementHasFocus] = React.useState(false);
+        const { localRef: targetRef, elementRef } = useLocalRef();
+        React.useEffect(() => {
+            const target = targetRef.current;
+            if (!target) {
+                return;
+            }
+            const updateFocusState = () => {
+                setElementHasFocus(target.matches(':focus-visible') || target.classList.contains('focus'));
+            };
+            updateFocusState(); // Check initial state
+            target.addEventListener('focus', updateFocusState);
+            target.addEventListener('blur', updateFocusState);
+            return () => {
+                target.removeEventListener('focus', updateFocusState);
+                target.removeEventListener('blur', updateFocusState);
+            };
+        }, [targetRef]);
         return (_jsxs(React.Fragment, { children: [React.cloneElement(children, {
                     ...targetProps,
                     ...mergeCallbacks(children.props, targetProps),
                     ...(/^(muted|describe)$/.test(type) && children.props['aria-label']
                         ? { 'aria-label': children.props['aria-label'] }
                         : {}),
+                    ref: elementRef,
                 }), _jsx(Popper, { placement: placement, fallbackPlacements: fallbackPlacements, ...popperProps, children: ({ placement }) => {
                         const transformOrigin = getTransformFromPlacement(placement);
-                        return (_jsx(TooltipContainer, { transformOrigin: transformOrigin, ...elemProps, ...tooltipProps, children: title }));
+                        return (_jsx(TooltipContainer, { transformOrigin: transformOrigin, ...elemProps, ...tooltipProps, elementHasFocus: elementHasFocus, children: title }));
                     } })] }));
     },
 });

package/dist/es6/tooltip/lib/TooltipContainer.d.ts

@@ -12,17 +12,21 @@ export interface TooltipContainerProps extends React.HTMLAttributes<HTMLDivEleme
      */
     id?: string;
     /**
-     * optional popper properties if `placement` is set
+     * Whether the anchor element has focus-visible. Used to adjust tooltip styling.
+     * @private
      */
-    popperProps?: {
-        open: boolean;
-        anchorElement: HTMLElement | null;
-    };
+    elementHasFocus?: boolean;
 }
-export declare const tooltipContainerStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
-    tooltipTransformOriginHorizontal: string;
-    tooltipTransformOriginVertical: string;
-}, never>, {}, {
+export declare const tooltipContainerStencil: import("@workday/canvas-kit-styling").Stencil<{
+    elementHasFocus: {
+        true: {
+            padding: string;
+            '&:before': {
+                margin: string;
+            };
+        };
+    };
+}, {}, {
     tooltipTransformOriginHorizontal: string;
     tooltipTransformOriginVertical: string;
 }, never, never>;

package/dist/es6/tooltip/lib/TooltipContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,eAAe,EAGhB,MAAM,kCAAkC,CAAC;AAY1C,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,OAAO,CAAC;QACd,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;KACnC,CAAC;CACH;AAuBD,eAAO,MAAM,uBAAuB;;;;;;gBA+DlC,CAAC;AAEH,eAAO,MAAM,gBAAgB,2FAsB3B,CAAC"}
+{"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,eAAe,EAGhB,MAAM,kCAAkC,CAAC;AAY1C,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAuBD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;gBAgElC,CAAC;AAEH,eAAO,MAAM,gBAAgB,2FA4B3B,CAAC"}

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

@@ -7,26 +7,32 @@ const defaultTransformOrigin = {
     vertical: 'bottom',
     horizontal: 'center',
 };
-const tooltipTranslateVars = createVars({ id: "9bc811", args: ["positionX", "positionY"] });
+const tooltipTranslateVars = createVars({ id: "ba8e9f", args: ["positionX", "positionY"] });
 /**
  * Keyframe for the Tooltip animation.
  */
-const tooltipAnimation = keyframes({ name: "11q808", styles: "0%{opacity:0;transform:translate(var(--positionX-9bc811), var(--positionY-9bc811));}100%{opacity:1;transform:translate(0);}" });
+const tooltipAnimation = keyframes({ name: "2454mo", styles: "0%{opacity:0;transform:translate(var(--positionX-ba8e9f), var(--positionY-ba8e9f));}100%{opacity:1;transform:translate(0);}" });
 export const tooltipContainerStencil = createStencil({
     vars: {
         tooltipTransformOriginHorizontal: '',
         tooltipTransformOriginVertical: '',
     },
-    base: { name: "2phscx", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);display:inline-flex;position:relative;padding:var(--cnvs-sys-space-x3);color:var(--cnvs-sys-color-text-inverse);animation-name:animation-11q808;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-6c30a8) var(--tooltipTransformOriginHorizontal-tooltip-container-6c30a8);a{color:var(--cnvs-sys-color-text-inverse);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-x1);outline:0.0625rem solid transparent;outline-offset:-0.0625rem;z-index:-1;margin:var(--cnvs-sys-space-x1);background-color:var(--cnvs-sys-color-bg-translucent);position:absolute;top:0;left:0;right:0;bottom:0;}body:has(:focus-visible, .focus) &{padding:calc(var(--cnvs-sys-space-x4) - calc(var(--cnvs-sys-space-x1) / 2));&:before{margin:calc(var(--cnvs-sys-space-x1) + calc(var(--cnvs-sys-space-x1) / 2));}}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-sys-space-x1) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-sys-space-x1) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-sys-space-x1) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-sys-space-x1) * -1);}" }
-}, "tooltip-container-6c30a8");
+    base: { name: "4fdpmm", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);display:inline-flex;position:relative;padding:var(--cnvs-sys-space-x3);color:var(--cnvs-sys-color-text-inverse);animation-name:animation-2454mo;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-80cfc4) var(--tooltipTransformOriginHorizontal-tooltip-container-80cfc4);a{color:var(--cnvs-sys-color-text-inverse);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-x1);outline:0.0625rem solid transparent;outline-offset:-0.0625rem;z-index:-1;margin:var(--cnvs-sys-space-x1);background-color:var(--cnvs-sys-color-bg-translucent);position:absolute;top:0;left:0;right:0;bottom:0;}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-sys-space-x1) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-sys-space-x1) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-sys-space-x1) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-sys-space-x1) * -1);}" },
+    modifiers: {
+        elementHasFocus: {
+            true: { name: "1a5bgq", styles: "padding:calc(var(--cnvs-sys-space-x4) - calc(var(--cnvs-sys-space-x1) / 2));&:before{margin:calc(var(--cnvs-sys-space-x1) + calc(var(--cnvs-sys-space-x1) / 2));}" }
+        }
+    }
+}, "tooltip-container-80cfc4");
 export const TooltipContainer = createComponent('div')({
     displayName: 'TooltipContainer',
-    Component: ({ children, transformOrigin = defaultTransformOrigin, ...elemProps }, ref, Element) => {
+    Component: ({ children, transformOrigin = defaultTransformOrigin, elementHasFocus = false, ...elemProps }, ref, Element) => {
         const translate = getTransformOrigin(transformOrigin || defaultTransformOrigin, cssVar(system.space.x2));
         return (_jsx(Element, { ref: ref, ...mergeStyles(elemProps, [
                 tooltipContainerStencil({
                     tooltipTransformOriginHorizontal: transformOrigin === null || transformOrigin === void 0 ? void 0 : transformOrigin.horizontal,
                     tooltipTransformOriginVertical: transformOrigin === null || transformOrigin === void 0 ? void 0 : transformOrigin.vertical,
+                    elementHasFocus,
                 }),
                 tooltipTranslateVars({ positionX: translate.x, positionY: translate.y }),
             ]), children: children }));

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

@@ -1 +1 @@
-export const version = '13.2.52';
+export const version = '13.2.54';

package/package.json

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

package/tooltip/lib/Tooltip.tsx

@@ -7,7 +7,7 @@ import {
   Popper,
   defaultFallbackPlacements,
 } from '@workday/canvas-kit-react/popup';
-import {createComponent, mergeCallback} from '@workday/canvas-kit-react/common';
+import {createComponent, mergeCallback, useLocalRef} from '@workday/canvas-kit-react/common';
 
 import {TooltipContainer} from './TooltipContainer';
 import {useTooltip} from './useTooltip';
@@ -112,6 +112,29 @@ export const Tooltip = createComponent('div')({
       hideDelay,
     });
 
+    const [elementHasFocus, setElementHasFocus] = React.useState(false);
+    const {localRef: targetRef, elementRef} = useLocalRef<HTMLElement>();
+
+    React.useEffect(() => {
+      const target = targetRef.current;
+      if (!target) {
+        return;
+      }
+
+      const updateFocusState = () => {
+        setElementHasFocus(target.matches(':focus-visible') || target.classList.contains('focus'));
+      };
+
+      updateFocusState(); // Check initial state
+      target.addEventListener('focus', updateFocusState);
+      target.addEventListener('blur', updateFocusState);
+
+      return () => {
+        target.removeEventListener('focus', updateFocusState);
+        target.removeEventListener('blur', updateFocusState);
+      };
+    }, [targetRef]);
+
     return (
       <React.Fragment>
         {React.cloneElement(children, {
@@ -120,12 +143,18 @@ export const Tooltip = createComponent('div')({
           ...(/^(muted|describe)$/.test(type) && children.props['aria-label']
             ? {'aria-label': children.props['aria-label']}
             : {}),
+          ref: elementRef,
         })}
         <Popper placement={placement} fallbackPlacements={fallbackPlacements} {...popperProps}>
           {({placement}) => {
             const transformOrigin = getTransformFromPlacement(placement);
             return (
-              <TooltipContainer transformOrigin={transformOrigin} {...elemProps} {...tooltipProps}>
+              <TooltipContainer
+                transformOrigin={transformOrigin}
+                {...elemProps}
+                {...tooltipProps}
+                elementHasFocus={elementHasFocus}
+              >
                 {title}
               </TooltipContainer>
             );

package/tooltip/lib/TooltipContainer.tsx

@@ -28,12 +28,10 @@ export interface TooltipContainerProps extends React.HTMLAttributes<HTMLDivEleme
    */
   id?: string;
   /**
-   * optional popper properties if `placement` is set
+   * Whether the anchor element has focus-visible. Used to adjust tooltip styling.
+   * @private
    */
-  popperProps?: {
-    open: boolean;
-    anchorElement: HTMLElement | null;
-  };
+  elementHasFocus?: boolean;
 }
 
 const defaultTransformOrigin = {
@@ -91,15 +89,6 @@ export const tooltipContainerStencil = createStencil({
       right: 0,
       bottom: 0,
     },
-
-    // offset tooltips by 2 pixels when a keyboard focus ring is detected
-    'body:has(:focus-visible, .focus) &': {
-      padding: calc.subtract(system.space.x4, calc.divide(system.space.x1, 2)),
-      '&:before': {
-        margin: calc.add(system.space.x1, calc.divide(system.space.x1, 2)),
-      },
-    },
-
     // Hide tooltip when the reference element is either clipped or fully hidden
     '[data-popper-reference-hidden] &': {
       visibility: 'hidden',
@@ -120,15 +109,30 @@ export const tooltipContainerStencil = createStencil({
       bottom: calc.negate(system.space.x1),
     },
   }),
+  modifiers: {
+    elementHasFocus: {
+      true: {
+        padding: calc.subtract(system.space.x4, calc.divide(system.space.x1, 2)),
+        '&:before': {
+          margin: calc.add(system.space.x1, calc.divide(system.space.x1, 2)),
+        },
+      },
+    },
+  },
 });
 
 export const TooltipContainer = createComponent('div')<TooltipContainerProps>({
   displayName: 'TooltipContainer',
-  Component: ({children, transformOrigin = defaultTransformOrigin, ...elemProps}, ref, Element) => {
+  Component: (
+    {children, transformOrigin = defaultTransformOrigin, elementHasFocus = false, ...elemProps},
+    ref,
+    Element
+  ) => {
     const translate = getTransformOrigin(
       transformOrigin || defaultTransformOrigin,
       cssVar(system.space.x2)
     );
+
     return (
       <Element
         ref={ref}
@@ -136,6 +140,7 @@ export const TooltipContainer = createComponent('div')<TooltipContainerProps>({
           tooltipContainerStencil({
             tooltipTransformOriginHorizontal: transformOrigin?.horizontal,
             tooltipTransformOriginVertical: transformOrigin?.vertical,
+            elementHasFocus,
           }),
           tooltipTranslateVars({positionX: translate.x, positionY: translate.y}),
         ])}