@workday/canvas-kit-react 12.0.0-alpha.899-next.0 → 12.0.0-alpha.903-next.0

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

@@ -7,15 +7,15 @@ export const textInputStencil = createStencil({
     vars: {
         width: '',
     },
-    base: { name: "keoe3u", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);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-d81f49);min-width:var(--width-text-input-d81f49, calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10)));color:var(--cnvs-sys-color-text-default);::-ms-clear{display:none;}&::placeholder{color:var(--cnvs-sys-color-text-hint);}&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-visible:not([disabled]), &.focus:not([disabled]){border-color:var(--cnvs-brand-common-focus-outline);box-shadow:inset 0 0 0 1px var(--cnvs-brand-common-focus-outline);outline:none;}&: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: "p7t93u", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);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-d81f49);min-width:var(--width-text-input-d81f49, 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:none;}&: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: "keoe3v", styles: "width:100%;resize:vertical;" },
-            false: { name: "keoe3w", styles: "width:initial;" }
+            true: { name: "p7t93v", styles: "width:100%;resize:vertical;" },
+            false: { name: "p7t93w", styles: "width:initial;" }
         },
         error: {
-            error: { name: "keoe3x", styles: "border-color:var(--cnvs-brand-error-base);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base);&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled]){border-color:var(--cnvs-brand-error-base);}&:focus-visible:not([disabled]), &.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);}" },
-            alert: { name: "keoe3y", styles: "border-color:var(--cnvs-brand-alert-darkest);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base);&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled]){border-color:var(--cnvs-brand-alert-darkest);}&:focus-visible:not([disabled]), &.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);}" }
+            error: { name: "p7t93x", 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);}" },
+            alert: { name: "p7t93y", 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);}" }
         }
     },
     defaultModifiers: {
@@ -24,7 +24,9 @@ export const textInputStencil = createStencil({
 }, "text-input-d81f49");
 export const TextInput = createComponent('input')({
     displayName: 'TextInput',
-    Component: ({ grow, error, width, ...elemProps }, ref, Element) => (React.createElement(Element, { type: "text", ref: ref, ...mergeStyles(elemProps, textInputStencil({ width: typeof width === 'number' ? px2rem(width) : width, grow, error })) })),
+    Component: ({ grow, error, width, ...elemProps }, ref, Element) => {
+        return (React.createElement(Element, { type: "text", ref: ref, ...mergeStyles(elemProps, textInputStencil({ width: typeof width === 'number' ? px2rem(width) : width, grow, error })) }));
+    },
     subComponents: {
         ErrorType,
     },

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

@@ -42,7 +42,7 @@ const getAriaAttributes = (mode, id) => {
     }
 };
 const toastStencil = createStencil({
-    base: { name: "keoe5t", 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: "p7t95z", 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: "keoe5s", 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: "p7t95y", 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-7d81ac");
 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: "keoe5p", styles: "box-sizing:border-box;position:relative;" }
+    base: { name: "p7t95v", styles: "box-sizing:border-box;position:relative;" }
 }, "toast-close-icon-be7e9f");
 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: "keoe5q", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x3);" }
+    base: { name: "p7t95w", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x3);" }
 }, "toast-icon-4b0701");
 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: "keoe5r", 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: "p7t95x", 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-759382");
 export const ToastMessage = createSubcomponent('p')({
     modelHook: useToastModel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "12.0.0-alpha.899-next.0",
+  "version": "12.0.0-alpha.903-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",
@@ -49,8 +49,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^12.0.0-alpha.899-next.0",
-    "@workday/canvas-kit-styling": "^12.0.0-alpha.899-next.0",
+    "@workday/canvas-kit-popup-stack": "^12.0.0-alpha.903-next.0",
+    "@workday/canvas-kit-styling": "^12.0.0-alpha.903-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "@workday/design-assets-types": "^0.2.8",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "56e4e94bdc7da128285ebfc3092bf95140792f9c"
+  "gitHead": "06b35f786069a81a2aba5fbd42b46ec88857e5a8"
 }

package/text-input/lib/InputGroup.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {maybeWrapCSSVariables} from '@workday/canvas-kit-styling';
+import {createStencil, handleCsProp, maybeWrapCSSVariables} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 import {
   createContainer,
@@ -10,9 +10,9 @@ import {
   dispatchInputEvent,
   ExtractProps,
   useForkRef,
-  useIsRTL,
 } from '@workday/canvas-kit-react/common';
-import {Flex} from '@workday/canvas-kit-react/layout';
+
+import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {xSmallIcon} from '@workday/canvas-system-icons-web';
 
@@ -29,39 +29,85 @@ export const useInputGroupModel = createModelHook({})(() => {
   };
 });
 
-export const InputGroupInnerStart = createSubcomponent('div')({
-  modelHook: useInputGroupModel,
-})<ExtractProps<typeof Flex, never>>((elemProps, Element) => {
-  return (
-    <Flex
-      as={Element}
-      position="absolute"
-      alignItems="center"
-      justifyContent="center"
-      height="xl"
-      width="xl"
-      {...elemProps}
-    />
-  );
+export const inputGroupInnerStencil = createStencil({
+  vars: {
+    /**
+     * Offset of the inner item. Set by the `InputGroup` and depends on siblings. Do not change this
+     * on your own.
+     */
+    insetInlineStart: 'initial',
+    /**
+     * Offset of the inner item. Set by the `InputGroup` and depends on siblings. Do not change this
+     * on your own.
+     */
+    insetInlineEnd: 'initial',
+    width: system.space.x10,
+    height: system.space.x10,
+    /**
+     * Some inner input group elements are decoration only and should not have pointer events
+     */
+    pointerEvents: '',
+  },
+  base: ({width, height, insetInlineStart, insetInlineEnd}) => ({
+    display: 'flex',
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width,
+    height,
+    insetInlineStart,
+    insetInlineEnd,
+  }),
+  modifiers: {
+    pointerEvents: {
+      _: ({pointerEvents}) => ({pointerEvents}),
+    },
+  },
 });
 
-export const InputGroupInnerEnd = createSubcomponent('div')({
+const InputGroupInnerStart = createSubcomponent('div')({
   modelHook: useInputGroupModel,
-})<ExtractProps<typeof Flex, never>>((elemProps, Element) => {
-  return (
-    <Flex
-      as={Element}
-      position="absolute"
-      alignItems="center"
-      justifyContent="center"
-      height="xl"
-      width="xl"
-      {...elemProps}
-    />
-  );
-});
+})<ExtractProps<typeof Flex, never>>(
+  ({pointerEvents, insetInlineStart, insetInlineEnd, width, height, ...elemProps}, Element) => {
+    return (
+      <Element
+        {...mergeStyles(
+          elemProps,
+          inputGroupInnerStencil({
+            pointerEvents,
+            insetInlineStart: toPx(insetInlineStart),
+            insetInlineEnd: toPx(insetInlineEnd),
+            width: toPx(width),
+            height: toPx(height),
+          })
+        )}
+      />
+    );
+  }
+);
 
-const useInputGroupInput = createElemPropsHook(useInputGroupModel)((model, ref) => {
+const InputGroupInnerEnd = createSubcomponent('div')({
+  modelHook: useInputGroupModel,
+})<ExtractProps<typeof Flex, never>>(
+  ({pointerEvents, insetInlineStart, insetInlineEnd, width, height, ...elemProps}, Element) => {
+    return (
+      <Element
+        {...mergeStyles(
+          elemProps,
+          inputGroupInnerStencil({
+            pointerEvents,
+            insetInlineStart: insetInlineStart as string,
+            insetInlineEnd: insetInlineEnd as string,
+            width: toPx(width),
+            height: toPx(height),
+          })
+        )}
+      />
+    );
+  }
+);
+
+export const useInputGroupInput = createElemPropsHook(useInputGroupModel)((model, ref) => {
   const elementRef = useForkRef(ref, model.state.inputRef);
 
   return {
@@ -69,26 +115,46 @@ const useInputGroupInput = createElemPropsHook(useInputGroupModel)((model, ref)
   };
 });
 
-export const InputGroupInput = createSubcomponent(TextInput)({
+export const inputGroupInputStencil = createStencil({
+  vars: {
+    paddingInlineStart: '',
+    paddingInlineEnd: '',
+  },
+  base: {
+    display: 'flex',
+    width: '100%',
+  },
+  modifiers: {
+    paddingInlineStart: {
+      _: ({paddingInlineStart}) => ({paddingInlineStart}),
+    },
+    paddingInlineEnd: {
+      _: ({paddingInlineEnd}) => ({paddingInlineEnd}),
+    },
+  },
+});
+
+const InputGroupInput = createSubcomponent(TextInput)({
   modelHook: useInputGroupModel,
   elemPropsHook: useInputGroupInput,
-})<ExtractProps<typeof Flex, never>>((elemProps, Element) => {
-  return <Flex as={Element} width="100%" {...elemProps} />;
-});
+})<ExtractProps<typeof Flex, never>>(
+  ({paddingInlineStart, paddingInlineEnd, ...elemProps}, Element) => {
+    return (
+      <Element
+        as={Element}
+        {...mergeStyles(
+          elemProps,
+          inputGroupInputStencil({
+            paddingInlineStart: toPx(paddingInlineStart),
+            paddingInlineEnd: toPx(paddingInlineEnd),
+          })
+        )}
+      />
+    );
+  }
+);
 
 export const useClearButton = createElemPropsHook(useInputGroupModel)(model => {
-  const [inputHasValue, setInputHasValue] = React.useState(false);
-
-  React.useLayoutEffect(() => {
-    const input = model.state.inputRef.current;
-
-    if (input) {
-      input.addEventListener('input', () => {
-        setInputHasValue(!!input.value);
-      });
-    }
-  }, [model.state.inputRef]);
-
   return {
     // This element does not need to be accessible via screen reader. The user can already clear
     // an input
@@ -98,7 +164,6 @@ export const useClearButton = createElemPropsHook(useInputGroupModel)(model => {
     icon: xSmallIcon,
     // "small" is needed to render correctly within a `TextInput`
     size: 'small',
-    transition: 'opacity 300ms ease',
     // prevent a focus change to the button. Focus should stay in the input.
     onMouseDown(event: React.MouseEvent) {
       event.preventDefault();
@@ -107,25 +172,22 @@ export const useClearButton = createElemPropsHook(useInputGroupModel)(model => {
       // This will clear the input's value
       dispatchInputEvent(model.state.inputRef.current, '');
     },
-    style: {
-      opacity: inputHasValue ? 1 : 0,
-      pointerEvents: inputHasValue ? 'auto' : 'none',
-    },
+    placeholder: '', // Make sure a placeholder attribute always exists for `:placeholder-shown`
   } as const;
 });
 
 /**
  * A clear input button. This can be a component later.
  */
-export const ClearButton = createSubcomponent(TertiaryButton)({
+const ClearButton = createSubcomponent(TertiaryButton)({
   modelHook: useInputGroupModel,
   elemPropsHook: useClearButton,
 })<ExtractProps<typeof TertiaryButton, never>>((elemProps, Element) => {
-  return <Element {...elemProps} />;
+  return <Element data-part="input-group-clear-button" {...handleCsProp(elemProps)} />;
 });
 
 // make sure we always use pixels if the input is a number - this is required for `calc`
-const toPx = (input: string | number): string => {
+const toPx = (input: string | number | undefined): string | undefined => {
   return typeof input === 'number' ? `${input}px` : input;
 };
 
@@ -141,6 +203,26 @@ const wrapInCalc = (values: (string | number)[]): string | number | undefined =>
   return `calc(${values.map(toPx).join(' + ')})`;
 };
 
+export const inputGroupStencil = createStencil({
+  base: {
+    display: 'flex',
+    position: 'relative',
+
+    // Clear Button
+    '& :has([data-part="input-group-clear-button"])': {
+      transition: 'opacity 300ms ease',
+      opacity: 1,
+      pointerEvents: 'auto',
+    },
+
+    // Clear Button when a placeholder is being shown (no value)
+    '&:where(:has(input:placeholder-shown)) :has([data-part="input-group-clear-button"])': {
+      opacity: 0,
+      pointerEvents: 'none',
+    },
+  },
+});
+
 /**
  * An `InputGroup` is a container around a {@link TextInput} with optional inner start and end
  * elements. The inner start and end elements are usually icons or icon buttons visually represented
@@ -167,7 +249,7 @@ export const InputGroup = createContainer('div')({
   subComponents: {
     /**
      * A component to show inside and at the start of the input. The input's padding will be
-     * adjusted to not overlap with this element. Use `width` (number of pixels only) to adjust the
+     * adjusted by the `InputGroup` to not overlap with this element. Use `width` to adjust the
      * width offset. The width defaults to 40px which is the correct width for icons or icon
      * buttons.
      */
@@ -179,9 +261,9 @@ export const InputGroup = createContainer('div')({
     Input: InputGroupInput,
     /**
      * A component to show inside and at the end of the input. The input's padding will be adjusted
-     * to not overlap with this element. Use `width` (number of pixels only) to adjust the width
-     * offset. The width defaults to 40px which is the correct width for icons or icon buttons
-     * within the input.
+     * by the `InputGroup` to not overlap with this element. Use `width` to adjust the width offset.
+     * The width defaults to 40px which is the correct width for icons or icon buttons within the
+     * input.
      */
     InnerEnd: InputGroupInnerEnd,
     /**
@@ -191,7 +273,6 @@ export const InputGroup = createContainer('div')({
     ClearButton: ClearButton,
   },
 })<ExtractProps<typeof Flex, never>>(({children, ...elemProps}, Element) => {
-  const isRTL = useIsRTL();
   const offsetsStart: (string | number)[] = [];
   const offsetsEnd: (string | number)[] = [];
 
@@ -222,30 +303,24 @@ export const InputGroup = createContainer('div')({
         });
       }
       if (child.type === InputGroupInnerStart) {
-        const offset = wrapInCalc(offsetsStart.slice(0, indexStart)) || 0;
+        const offset = wrapInCalc(offsetsStart.slice(0, indexStart)) || '0px';
         indexStart++;
 
         return React.cloneElement(child, {
-          left: isRTL ? undefined : offset,
-          right: isRTL ? offset : undefined,
+          insetInlineStart: offset,
         });
       }
       if (child.type === InputGroupInnerEnd) {
-        const offset = wrapInCalc(offsetsEnd.slice(indexEnd, -1)) || 0;
+        const offset = wrapInCalc(offsetsEnd.slice(indexEnd, -1)) || '0px';
         indexEnd++;
 
         return React.cloneElement(child, {
-          left: isRTL ? offset : undefined,
-          right: isRTL ? undefined : offset,
+          insetInlineEnd: offset,
         });
       }
     }
     return child;
   });
 
-  return (
-    <Flex as={Element} position="relative" {...elemProps}>
-      {mappedChildren}
-    </Flex>
-  );
+  return <Element {...mergeStyles(elemProps, inputGroupStencil())}>{mappedChildren}</Element>;
 });

package/text-input/lib/TextInput.tsx

@@ -33,21 +33,22 @@ export const textInputStencil = createStencil({
     width: cssVar(width),
     minWidth: cssVar(width, calc.add(calc.multiply(system.space.x20, 3), system.space.x10)),
     color: system.color.text.default,
+    textOverflow: 'ellipsis',
     '::-ms-clear': {
       display: 'none',
     },
     '&::placeholder': {
       color: system.color.text.hint,
     },
-    '&:hover, &.hover': {
+    '&:is(:hover, .hover)': {
       borderColor: system.color.border.input.strong,
     },
-    '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
+    '&:is(:focus-visible, .focus):where(:not([disabled]))': {
       borderColor: brand.common.focusOutline,
       boxShadow: `inset 0 0 0 1px ${cssVar(brand.common.focusOutline)}`,
       outline: 'none',
     },
-    '&:disabled, .disabled': {
+    '&:is(:disabled, .disabled)': {
       backgroundColor: system.color.bg.alt.softer,
       borderColor: system.color.border.input.disabled,
       color: system.color.text.disabled,
@@ -71,11 +72,11 @@ export const textInputStencil = createStencil({
       error: {
         borderColor: brand.error.base,
         boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.error.base}`,
-        '&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled])':
+        '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))':
           {
             borderColor: brand.error.base,
           },
-        '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
+        '&:is(:focus-visible, .focus):not([disabled])': {
           boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.error.base}, 0 0 0 2px ${
             system.color.border.inverse
           }, 0 0 0 4px ${brand.common.focusOutline}`,
@@ -84,12 +85,12 @@ export const textInputStencil = createStencil({
       alert: {
         borderColor: brand.alert.darkest,
         boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.alert.base}`,
-        '&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled])':
+        '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))':
           {
             borderColor: brand.alert.darkest,
           },
 
-        '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
+        '&:is(:focus-visible, .focus):not([disabled])': {
           boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.alert.base},
         0 0 0 2px ${system.color.border.inverse},
         0 0 0 4px ${brand.common.focusOutline}`,
@@ -104,16 +105,18 @@ export const textInputStencil = createStencil({
 
 export const TextInput = createComponent('input')({
   displayName: 'TextInput',
-  Component: ({grow, error, width, ...elemProps}: TextInputProps, ref, Element) => (
-    <Element
-      type="text"
-      ref={ref}
-      {...mergeStyles(
-        elemProps,
-        textInputStencil({width: typeof width === 'number' ? px2rem(width) : width, grow, error})
-      )}
-    />
-  ),
+  Component: ({grow, error, width, ...elemProps}: TextInputProps, ref, Element) => {
+    return (
+      <Element
+        type="text"
+        ref={ref}
+        {...mergeStyles(
+          elemProps,
+          textInputStencil({width: typeof width === 'number' ? px2rem(width) : width, grow, error})
+        )}
+      />
+    );
+  },
   subComponents: {
     ErrorType,
   },