@cdx-ui/components 0.0.1-beta.91 → 0.0.1-beta.93

package/lib/module/components/Textarea/index.js

@@ -0,0 +1,132 @@
+"use strict";
+
+import { forwardRef, useEffect, useState } from 'react';
+import { Platform } from 'react-native';
+import { InputField as InputFieldPrimitive, InputRoot as InputRootPrimitive, dataAttributes } from '@cdx-ui/primitives';
+import { cn, composeEventHandlers } from '@cdx-ui/utils';
+import { textareaFieldPlaceholderVariants, textareaFieldVariants, textareaRootVariants } from './styles';
+
+// Initial/minimum visible rows. Web textareas render compactly, so a smaller default
+// reads better there; native has no intrinsic multiline height, so it needs more.
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_MIN_ROWS = Platform.select({
+  web: 2,
+  default: 8
+});
+
+// Explicit per-size line height (px) set on the field so `rows * lineHeight` maps to an
+// exact pixel height on native. Values track the field font sizes in `styles.ts`.
+const LINE_HEIGHT_BY_SIZE = {
+  default: 20,
+  small: 16
+};
+
+// Module-scoped latch so the dev conflict warning fires at most once per session.
+let hasWarnedResizeAutoGrowConflict = false;
+export const Textarea = /*#__PURE__*/forwardRef(({
+  variant = 'outline',
+  size = 'default',
+  isDisabled,
+  isInvalid,
+  isReadOnly,
+  isRequired,
+  isFocused,
+  isHovered,
+  isFullWidth,
+  className,
+  placeholderTextColorClassName,
+  style,
+  numberOfLines,
+  autoGrow = false,
+  maxRows,
+  resize = 'none',
+  onContentSizeChange,
+  ...rest
+}, ref) => {
+  const minRows = numberOfLines ?? DEFAULT_MIN_ROWS;
+  const lineHeight = LINE_HEIGHT_BY_SIZE[size ?? 'default'];
+  const minHeight = minRows * lineHeight;
+  const maxHeight = maxRows != null ? maxRows * lineHeight : undefined;
+  const isWeb = Platform.OS === 'web';
+  // Web user-resize wins over auto-grow; the two are mutually exclusive.
+  const userResizable = isWeb && resize === 'vertical';
+  const effectiveAutoGrow = autoGrow && !userResizable;
+  useEffect(() => {
+    if (__DEV__ && autoGrow && resize === 'vertical' && !hasWarnedResizeAutoGrowConflict) {
+      hasWarnedResizeAutoGrowConflict = true;
+      console.warn('[Textarea] `autoGrow` and `resize="vertical"` are mutually exclusive. ' + '`resize` takes precedence and `autoGrow` is ignored.');
+    }
+  }, [autoGrow, resize]);
+
+  // Native auto-grow: track the measured content height so we can enable internal
+  // scrolling once it passes the `maxRows` cap. Growth itself is handled natively
+  // (see `nativeScrollEnabled`), not by pinning a height here.
+  const [measuredHeight, setMeasuredHeight] = useState(undefined);
+  const handleContentSizeChange = event => {
+    if (!isWeb && effectiveAutoGrow) {
+      setMeasuredHeight(event.nativeEvent.contentSize.height);
+    }
+  };
+
+  // On native, a multiline TextInput only grows to fit its content when scrolling is
+  // disabled — an explicit height or an enabled scroll view pins it. So for auto-grow we
+  // keep `scrollEnabled` off (letting the view size itself between min/max) and only turn
+  // scrolling back on once the content exceeds the `maxRows` cap. Undefined elsewhere
+  // (web + fixed height) leaves React Native's default (`true`) so overflow scrolls.
+  const nativeScrollEnabled = !isWeb && effectiveAutoGrow ? maxHeight != null && measuredHeight != null && measuredHeight > maxHeight : undefined;
+
+  // Auto-grow (web + native) and fixed sizing all bound the field with min/max height and
+  // never pin an explicit `height`: web grows via `field-sizing: content`, native grows via
+  // the disabled scroll view above, and the fixed case simply floors at `minHeight`.
+  const heightStyle = !isWeb && !effectiveAutoGrow ? {
+    minHeight
+  } : {
+    minHeight,
+    maxHeight
+  };
+
+  // `textAlignVertical` is set in style (not just the prop) so it overrides the Android
+  // primitive's `center` default — style wins over the deprecated prop.
+  const fieldStyle = {
+    lineHeight,
+    textAlignVertical: 'top',
+    ...heightStyle
+  };
+
+  // `className` applies to the root (the visible bordered box), matching the flat
+  // CurrencyInput pattern. Field-level utilities below are internal sizing concerns.
+  const fieldClassName = cn(textareaFieldVariants({
+    size
+  }), effectiveAutoGrow && 'web:[field-sizing:content]', userResizable ? 'web:[resize:vertical]' : 'web:[resize:none]');
+  return /*#__PURE__*/_jsx(InputRootPrimitive, {
+    isDisabled: isDisabled,
+    isInvalid: isInvalid,
+    isReadOnly: isReadOnly,
+    isRequired: isRequired,
+    isFocused: isFocused,
+    isHovered: isHovered,
+    isFullWidth: isFullWidth,
+    className: cn(textareaRootVariants({
+      variant,
+      size
+    }), className),
+    style: style,
+    ...dataAttributes({
+      slot: 'textarea'
+    }),
+    children: /*#__PURE__*/_jsx(InputFieldPrimitive, {
+      ref: ref,
+      placeholderTextColorClassName: cn(textareaFieldPlaceholderVariants(), placeholderTextColorClassName),
+      ...rest,
+      multiline: true,
+      numberOfLines: isWeb ? minRows : undefined,
+      textAlignVertical: "top",
+      scrollEnabled: nativeScrollEnabled,
+      className: fieldClassName,
+      style: fieldStyle,
+      onContentSizeChange: composeEventHandlers(onContentSizeChange, handleContentSizeChange)
+    })
+  });
+});
+Textarea.displayName = 'Textarea';
+//# sourceMappingURL=index.js.map

package/lib/module/components/Textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useEffect","useState","Platform","InputField","InputFieldPrimitive","InputRoot","InputRootPrimitive","dataAttributes","cn","composeEventHandlers","textareaFieldPlaceholderVariants","textareaFieldVariants","textareaRootVariants","jsx","_jsx","DEFAULT_MIN_ROWS","select","web","default","LINE_HEIGHT_BY_SIZE","small","hasWarnedResizeAutoGrowConflict","Textarea","variant","size","isDisabled","isInvalid","isReadOnly","isRequired","isFocused","isHovered","isFullWidth","className","placeholderTextColorClassName","style","numberOfLines","autoGrow","maxRows","resize","onContentSizeChange","rest","ref","minRows","lineHeight","minHeight","maxHeight","undefined","isWeb","OS","userResizable","effectiveAutoGrow","__DEV__","console","warn","measuredHeight","setMeasuredHeight","handleContentSizeChange","event","nativeEvent","contentSize","height","nativeScrollEnabled","heightStyle","fieldStyle","textAlignVertical","fieldClassName","slot","children","multiline","scrollEnabled","displayName"],"sourceRoot":"../../../../src","sources":["components/Textarea/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Textarea/styles.js

@@ -0,0 +1,45 @@
+"use strict";
+
+import { cva } from 'class-variance-authority';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
+export const textareaRootVariants = cva([
+// Multiline shell: stretch the field to full width and let the shell grow with it
+// (no fixed height, no overflow-hidden so a web resize handle is never clipped).
+'w-full flex-row items-stretch', 'bg-surface-primary', 'border-solid border-stroke-primary', 'web:border-default native:border-[length:var(--border-width-default)]', 'rounded-[var(--border-radius-default)]', TRANSITION_COLORS, 'data-[disabled=true]:bg-surface-secondary', 'data-[disabled=true]:opacity-[var(--opacity-disabled)]', DISABLED_CURSOR, 'data-[readonly=true]:cursor-default', 'data-[readonly=true]:bg-surface-secondary', 'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
+// Web: inset ring avoids a border-width change so the shell never shifts on focus.
+// Recolor the border to match the ring so the two read as a single focus outline
+// instead of a gray border + colored ring.
+'web:data-[focus=true]:ring-inset', 'web:data-[focus=true]:ring-[length:var(--border-width-focused)]', 'web:data-[focus=true]:data-[invalid=false]:ring-stroke-action', 'web:data-[focus=true]:data-[invalid=false]:border-stroke-action', 'web:data-[focus=true]:data-[invalid=true]:ring-stroke-danger', 'web:data-[focus=true]:data-[invalid=true]:border-stroke-danger',
+// Native: thicker border on focus; size variants subtract a hairline of padding
+// so layout doesn't shift by 1px.
+'native:data-[focus=true]:border-[length:var(--border-width-focused)]', 'native:data-[field-state=focused]:border-stroke-action', 'native:data-[field-state=focused-invalid]:border-stroke-danger', 'data-[invalid=true]:border-stroke-danger'], {
+  variants: {
+    variant: {
+      outline: []
+    },
+    size: {
+      default: ['px-4 py-3 gap-4', 'native:data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]', 'native:data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]'],
+      small: ['px-3 py-2 gap-1.5', 'native:data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]', 'native:data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]']
+    }
+  },
+  defaultVariants: {
+    variant: 'outline',
+    size: 'default'
+  }
+});
+export const textareaFieldVariants = cva([
+// `min-w-0` lets the field shrink below its intrinsic content width so the shell
+// never overflows (mirrors the Input field rationale).
+'flex-1 min-w-0 bg-transparent p-0', 'text-content-primary', 'placeholder:text-content-tertiary', 'web:outline-none', 'tracking-normal'], {
+  variants: {
+    size: {
+      default: 'text-[0.875rem]',
+      small: 'text-[0.75rem]'
+    }
+  },
+  defaultVariants: {
+    size: 'default'
+  }
+});
+export const textareaFieldPlaceholderVariants = cva(['accent-content-tertiary']);
+//# sourceMappingURL=styles.js.map

package/lib/module/components/Textarea/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cva","DISABLED_CURSOR","TRANSITION_COLORS","textareaRootVariants","variants","variant","outline","size","default","small","defaultVariants","textareaFieldVariants","textareaFieldPlaceholderVariants"],"sourceRoot":"../../../../src","sources":["components/Textarea/styles.ts"],"mappings":";;AAAA,SAASA,GAAG,QAA2B,0BAA0B;AACjE,SAASC,eAAe,EAAEC,iBAAiB,QAAQ,yBAAyB;AAE5E,OAAO,MAAMC,oBAAoB,GAAGH,GAAG,CACrC;AACE;AACA;AACA,+BAA+B,EAC/B,oBAAoB,EACpB,oCAAoC,EACpC,uEAAuE,EACvE,wCAAwC,EACxCE,iBAAiB,EACjB,2CAA2C,EAC3C,wDAAwD,EACxDD,eAAe,EACf,qCAAqC,EACrC,2CAA2C,EAC3C,mFAAmF;AACnF;AACA;AACA;AACA,kCAAkC,EAClC,iEAAiE,EACjE,+DAA+D,EAC/D,iEAAiE,EACjE,8DAA8D,EAC9D,gEAAgE;AAChE;AACA;AACA,sEAAsE,EACtE,wDAAwD,EACxD,gEAAgE,EAChE,0CAA0C,CAC3C,EACD;EACEG,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,OAAO,EAAE;IACX,CAAC;IACDC,IAAI,EAAE;MACJC,OAAO,EAAE,CACP,iBAAiB,EACjB,wEAAwE,EACxE,wEAAwE,CACzE;MACDC,KAAK,EAAE,CACL,mBAAmB,EACnB,wEAAwE,EACxE,wEAAwE;IAE5E;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,OAAO,EAAE,SAAS;IAClBE,IAAI,EAAE;EACR;AACF,CACF,CAAC;AAED,OAAO,MAAMI,qBAAqB,GAAGX,GAAG,CACtC;AACE;AACA;AACA,mCAAmC,EACnC,sBAAsB,EACtB,mCAAmC,EACnC,kBAAkB,EAClB,iBAAiB,CAClB,EACD;EACEI,QAAQ,EAAE;IACRG,IAAI,EAAE;MACJC,OAAO,EAAE,iBAAiB;MAC1BC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,IAAI,EAAE;EACR;AACF,CACF,CAAC;AAED,OAAO,MAAMK,gCAAgC,GAAGZ,GAAG,CAAC,CAAC,yBAAyB,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/index.js

@@ -27,6 +27,7 @@ export * from './ScopedTheme';
 export * from './Select';
 export * from './VirtualizedList';
 export * from './Switch';
+export * from './Textarea';
 export * from './Tile';
 export * from './Toast';
 export { HStack, VStack } from './Stack';

package/lib/module/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["HStack","VStack"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,OAAO;AACrB,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,iBAAiB;AAC/B,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,SAAS;AACvB,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,qBAAqB;AACnC,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,mBAAmB;AACjC,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,SAASA,MAAM,EAAEC,MAAM,QAAQ,SAAS;AACxC,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,QAAQ;AACtB,cAAc,cAAc;AAC5B,cAAc,qBAAqB","ignoreList":[]}
+{"version":3,"names":["HStack","VStack"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,OAAO;AACrB,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,iBAAiB;AAC/B,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,SAAS;AACvB,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,eAAe;AAC7B,cAAc,YAAY;AAC1B,cAAc,qBAAqB;AACnC,cAAc,SAAS;AACvB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,mBAAmB;AACjC,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,SAASA,MAAM,EAAEC,MAAM,QAAQ,SAAS;AACxC,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,QAAQ;AACtB,cAAc,cAAc;AAC5B,cAAc,qBAAqB","ignoreList":[]}

package/lib/module/figma/Field.Textarea.figma.js

@@ -0,0 +1,51 @@
+"use strict";
+
+// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=7078-1839
+// source=packages/components/src/components/Field/index.tsx
+// component=Field
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const showLabel = instance.getBoolean('Show Label?');
+const showHelperText = instance.getBoolean('Show Helper Text?');
+const showErrorText = instance.getBoolean('Show Error Text?');
+
+// Enum-as-boolean: isInvalid / isDisabled are VARIANT properties in Figma (string values "true"/"false").
+// Map "false" to undefined so renderProp omits them from the snippet.
+const isInvalid = instance.getEnum('isInvalid', {
+  true: true,
+  false: undefined
+});
+const isDisabled = instance.getEnum('isDisabled', {
+  true: true,
+  false: undefined
+});
+const isInvalidProp = figma.helpers.react.renderProp('isInvalid', isInvalid);
+const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
+const labelText = instance.findText('{Label}', {
+  traverseInstances: true
+}).textContent;
+const helperText = instance.findText('{HelperText}', {
+  traverseInstances: true
+}).textContent;
+const errorText = instance.findText('{ErrorText}', {
+  traverseInstances: true
+}).textContent;
+const textarea = instance.findInstance('Textarea');
+let textareaSnippet;
+if (textarea?.type === 'INSTANCE') {
+  textareaSnippet = textarea.executeTemplate().example;
+}
+export default {
+  id: 'field-textarea',
+  // Only import Field here; the nested Textarea template provides its own "import { Textarea } …" line.
+  // Code Connect merges the two separate import statements from the same package automatically.
+  imports: ["import { Field } from '@cdx-ui/components'"],
+  example: figma.code`
+<Field${isInvalidProp}${isDisabledProp}>
+  ${showLabel ? figma.code`<Field.Label>${labelText}</Field.Label>` : null}
+  ${textareaSnippet}
+  ${!isInvalid && showHelperText ? figma.code`<Field.Helper>${helperText}</Field.Helper>` : null}
+  ${isInvalid && showErrorText ? figma.code`<Field.Error>${errorText}</Field.Error>` : null}
+</Field>`
+};
+//# sourceMappingURL=Field.Textarea.figma.js.map

package/lib/module/figma/Field.Textarea.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","instance","selectedInstance","showLabel","getBoolean","showHelperText","showErrorText","isInvalid","getEnum","true","false","undefined","isDisabled","isInvalidProp","helpers","react","renderProp","isDisabledProp","labelText","findText","traverseInstances","textContent","helperText","errorText","textarea","findInstance","textareaSnippet","type","executeTemplate","example","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Field.Textarea.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,SAAS,GAAGF,QAAQ,CAACG,UAAU,CAAC,aAAa,CAAC;AACpD,MAAMC,cAAc,GAAGJ,QAAQ,CAACG,UAAU,CAAC,mBAAmB,CAAC;AAC/D,MAAME,aAAa,GAAGL,QAAQ,CAACG,UAAU,CAAC,kBAAkB,CAAC;;AAE7D;AACA;AACA,MAAMG,SAAS,GAAGN,QAAQ,CAACO,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,UAAU,GAAGX,QAAQ,CAACO,OAAO,CAAC,YAAY,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAME,aAAa,GAAGb,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAET,SAAS,CAAC;AAC5E,MAAMU,cAAc,GAAGjB,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEJ,UAAU,CAAC;AAE/E,MAAMM,SAAS,GACbjB,QAAQ,CAACkB,QAAQ,CAAC,SAAS,EAAE;EAC3BC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AACb,MAAMC,UAAU,GACdrB,QAAQ,CAACkB,QAAQ,CAAC,cAAc,EAAE;EAChCC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AACb,MAAME,SAAS,GACbtB,QAAQ,CAACkB,QAAQ,CAAC,aAAa,EAAE;EAC/BC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AAEb,MAAMG,QAAQ,GAAGvB,QAAQ,CAACwB,YAAY,CAAC,UAAU,CAAC;AAClD,IAAIC,eAA4D;AAChE,IAAIF,QAAQ,EAAEG,IAAI,KAAK,UAAU,EAAE;EACjCD,eAAe,GAAGF,QAAQ,CAACI,eAAe,CAAC,CAAC,CAACC,OAAO;AACtD;AAEA,eAAe;EACbC,EAAE,EAAE,gBAAgB;EACpB;EACA;EACAC,OAAO,EAAE,CAAC,4CAA4C,CAAC;EACvDF,OAAO,EAAE7B,KAAK,CAACgC,IAAI;AACrB,QAAQnB,aAAa,GAAGI,cAAc;AACtC,IAAId,SAAS,GAAGH,KAAK,CAACgC,IAAI,gBAAgBd,SAAS,gBAAgB,GAAG,IAAI;AAC1E,IAAIQ,eAAe;AACnB,IAAI,CAACnB,SAAS,IAAIF,cAAc,GAAGL,KAAK,CAACgC,IAAI,iBAAiBV,UAAU,iBAAiB,GAAG,IAAI;AAChG,IAAIf,SAAS,IAAID,aAAa,GAAGN,KAAK,CAACgC,IAAI,gBAAgBT,SAAS,gBAAgB,GAAG,IAAI;AAC3F;AACA,CAAC","ignoreList":[]}

package/lib/module/figma/Textarea.figma.js

@@ -0,0 +1,41 @@
+"use strict";
+
+// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=7078-1235
+// source=packages/components/src/components/Textarea/index.tsx
+// component=Textarea
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const variant = instance.getEnum('variant', {
+  outlined: 'outline'
+});
+const isInvalid = instance.getEnum('isInvalid', {
+  true: true,
+  false: undefined
+});
+const isDisabled = instance.getEnum('isDisabled', {
+  true: true,
+  false: undefined
+});
+const isInvalidProp = figma.helpers.react.renderProp('isInvalid', isInvalid);
+const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
+const showValue = instance.getEnum('Show Value?', {
+  true: true,
+  false: false
+});
+const showPlaceholder = instance.getEnum('Show Placeholder?', {
+  true: true,
+  false: false
+});
+const valueText = instance.findText('{value}', {
+  traverseInstances: true
+}).textContent;
+const placeholder = instance.getString('placeholder');
+const defaultValueProp = figma.helpers.react.renderProp('defaultValue', showValue ? valueText : undefined);
+const placeholderProp = figma.helpers.react.renderProp('placeholder', showPlaceholder ? placeholder : undefined);
+export default {
+  id: 'textarea',
+  imports: ["import { Textarea } from '@cdx-ui/components'"],
+  example: figma.code`
+<Textarea variant="${variant}" ${isInvalidProp}${isDisabledProp}${defaultValueProp}${placeholderProp} />`
+};
+//# sourceMappingURL=Textarea.figma.js.map

package/lib/module/figma/Textarea.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","instance","selectedInstance","variant","getEnum","outlined","isInvalid","true","false","undefined","isDisabled","isInvalidProp","helpers","react","renderProp","isDisabledProp","showValue","showPlaceholder","valueText","findText","traverseInstances","textContent","placeholder","getString","defaultValueProp","placeholderProp","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Textarea.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,OAAO,GAAGF,QAAQ,CAACG,OAAO,CAAC,SAAS,EAAE;EAC1CC,QAAQ,EAAE;AACZ,CAAC,CAAC;AAEF,MAAMC,SAAS,GAAGL,QAAQ,CAACG,OAAO,CAAC,WAAW,EAAE;EAC9CG,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,UAAU,GAAGT,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDG,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAME,aAAa,GAAGX,KAAK,CAACY,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAER,SAAS,CAAC;AAC5E,MAAMS,cAAc,GAAGf,KAAK,CAACY,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEJ,UAAU,CAAC;AAE/E,MAAMM,SAAS,GAAGf,QAAQ,CAACG,OAAO,CAAC,aAAa,EAAE;EAChDG,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMS,eAAe,GAAGhB,QAAQ,CAACG,OAAO,CAAC,mBAAmB,EAAE;EAC5DG,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,MAAMU,SAAS,GACbjB,QAAQ,CAACkB,QAAQ,CAAC,SAAS,EAAE;EAC3BC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AACb,MAAMC,WAAW,GAAGrB,QAAQ,CAACsB,SAAS,CAAC,aAAa,CAAC;AAErD,MAAMC,gBAAgB,GAAGxB,KAAK,CAACY,OAAO,CAACC,KAAK,CAACC,UAAU,CACrD,cAAc,EACdE,SAAS,GAAGE,SAAS,GAAGT,SAC1B,CAAC;AACD,MAAMgB,eAAe,GAAGzB,KAAK,CAACY,OAAO,CAACC,KAAK,CAACC,UAAU,CACpD,aAAa,EACbG,eAAe,GAAGK,WAAW,GAAGb,SAClC,CAAC;AAED,eAAe;EACbiB,EAAE,EAAE,UAAU;EACdC,OAAO,EAAE,CAAC,+CAA+C,CAAC;EAC1DC,OAAO,EAAE5B,KAAK,CAAC6B,IAAI;AACrB,qBAAqB1B,OAAO,KAAKQ,aAAa,GAAGI,cAAc,GAAGS,gBAAgB,GAAGC,eAAe;AACpG,CAAC","ignoreList":[]}

package/lib/typescript/components/Input/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,iBAAiB;;;8EAkD7B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;8EAyB9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,oFAA4D,CAAC;AAE3F,eAAO,MAAM,iBAAiB;;8EAU5B,CAAC;AAEH,eAAO,MAAM,6BAA6B,oFAAmC,CAAC;AAE9E,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,iBAAiB;;;8EAqD7B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;8EAyB9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,oFAA4D,CAAC;AAE3F,eAAO,MAAM,iBAAiB;;8EAU5B,CAAC;AAEH,eAAO,MAAM,6BAA6B,oFAAmC,CAAC;AAE9E,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

package/lib/typescript/components/Select/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,eAAO,MAAM,qBAAqB;;;8EA2DjC,CAAC;AAIF,eAAO,MAAM,mBAAmB;;8EAkB/B,CAAC;AAIF,eAAO,MAAM,kBAAkB;;8EAiB9B,CAAC;AAIF,eAAO,MAAM,qBAAqB,oFAWhC,CAAC;AAIH,eAAO,MAAM,kBAAkB;;8EAsB9B,CAAC;AAIF,eAAO,MAAM,uBAAuB;;8EAanC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,eAAO,MAAM,qBAAqB;;;8EA+DjC,CAAC;AAIF,eAAO,MAAM,mBAAmB;;8EAkB/B,CAAC;AAIF,eAAO,MAAM,kBAAkB;;8EAiB9B,CAAC;AAIF,eAAO,MAAM,qBAAqB,oFAWhC,CAAC;AAIH,eAAO,MAAM,kBAAkB;;8EAsB9B,CAAC;AAIF,eAAO,MAAM,uBAAuB;;8EAanC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/lib/typescript/components/Textarea/index.d.ts

@@ -0,0 +1,27 @@
+import { type TextInput, type TextInputProps, type ViewProps } from 'react-native';
+import { type IInputFieldProps } from '@cdx-ui/primitives';
+import { type TextareaVariantProps } from './styles';
+export type TextareaResize = 'none' | 'vertical';
+export interface TextareaProps extends Omit<TextInputProps, 'multiline' | 'children' | 'style'>, IInputFieldProps, TextareaVariantProps {
+    className?: string;
+    placeholderTextColorClassName?: string;
+    /** Initial / minimum visible rows. Defaults to 2 on web and 8 on native. */
+    numberOfLines?: number;
+    /**
+     * Grow the field height to fit its content. Defaults to `false`.
+     * Web uses `field-sizing: content`; native grows intrinsically (`scrollEnabled`
+     * off), using `onContentSizeChange` only to enable scrolling past `maxRows`.
+     */
+    autoGrow?: boolean;
+    /** Caps `autoGrow` at this many rows, after which the field scrolls. */
+    maxRows?: number;
+    /**
+     * Web-only user resize affordance. Defaults to `'none'`. `'vertical'` exposes the
+     * browser resize handle and takes precedence over `autoGrow` (they are mutually
+     * exclusive). No-op on native.
+     */
+    resize?: TextareaResize;
+    style?: ViewProps['style'];
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<TextInput>>;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/Textarea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,cAAc,EAEnB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,KAAK,oBAAoB,EAI1B,MAAM,UAAU,CAAC;AAelB,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,CAAC;AAEjD,MAAM,WAAW,aACf,SACE,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC,EACxD,gBAAgB,EAChB,oBAAoB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,QAAQ,qGAkHpB,CAAC"}

package/lib/typescript/components/Textarea/styles.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const textareaRootVariants: (props?: ({
+    variant?: "outline" | null | undefined;
+    size?: "small" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const textareaFieldVariants: (props?: ({
+    size?: "small" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const textareaFieldPlaceholderVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type TextareaVariantProps = VariantProps<typeof textareaRootVariants>;
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/Textarea/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,oBAAoB;;;8EAuDhC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;8EAqBjC,CAAC;AAEF,eAAO,MAAM,gCAAgC,oFAAmC,CAAC;AAEjF,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

package/lib/typescript/components/index.d.ts

@@ -25,6 +25,7 @@ export * from './ScopedTheme';
 export * from './Select';
 export * from './VirtualizedList';
 export * from './Switch';
+export * from './Textarea';
 export * from './Tile';
 export * from './Toast';
 export { HStack, VStack } from './Stack';

package/lib/typescript/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}

package/lib/typescript/figma/Field.Textarea.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Field.Textarea.figma.d.ts.map

package/lib/typescript/figma/Field.Textarea.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.Textarea.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Field.Textarea.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AA4C1B,wBAYE"}

package/lib/typescript/figma/Textarea.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Textarea.figma.d.ts.map

package/lib/typescript/figma/Textarea.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Textarea.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AA6C1B,wBAKE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-beta.91",
+  "version": "0.0.1-beta.93",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -67,9 +67,9 @@
     "@gorhom/bottom-sheet": "^5.2.6",
     "class-variance-authority": "^0.7.1",
     "uniwind": "1.10.0",
-    "@cdx-ui/primitives": "0.0.1-beta.91",
-    "@cdx-ui/utils": "0.0.1-beta.91",
-    "@cdx-ui/icons": "0.0.1-beta.91"
+    "@cdx-ui/primitives": "0.0.1-beta.93",
+    "@cdx-ui/utils": "0.0.1-beta.93",
+    "@cdx-ui/icons": "0.0.1-beta.93"
   },
   "devDependencies": {
     "@react-navigation/bottom-tabs": "*",

package/src/components/CLAUDE.md

@@ -68,6 +68,7 @@ Variant functions take only static design inputs (`variant`/`color`/`size`/`full
 - CSS-layer state changes are free of React work: when the primitive flips `data-hover=true`, the CSS engine (web) and Uniwind's native style layer reconcile styles without re-rendering React, re-running CVA, or invoking `cn()`/`tailwind-merge`.
 - Variant-input state changes cascade React work: CVA re-runs, `cn()` re-merges, and className-prop reconciliation cascades through the tree.
 - Sub-slots can react to root state via parent selectors (`data-[hover=true]:`) without each slot subscribing to context (per Standard 1).
+- **Native compound conditions** — on native, prefer single-condition `data-[field-state=...]` selectors backed by a primitive-derived compound-state attribute over compound `data-[]:data-[]` chains (Uniwind matches only the last condition). Web may keep compound chains. See `Input/styles.ts` and `Select/styles.ts`; full practice in `docs/internal/practices/data-attributes.md` § "Compound state on native".
 
 ### Standard 6 — Position hints (`data-icon="inline-start|inline-end"`)
 
@@ -181,7 +182,7 @@ export type ComponentVariantProps = VariantProps<typeof componentRootVariants>;
 ### Key rules
 
 - **Semantic token classes only** — use `bg-surface-action-strong`, `text-content-primary`, `border-stroke-primary`, etc. Never hardcode hex colors, `bg-white`, `text-black`, or raw Tailwind color scales for themed values.
-- **`data-[state]` selectors** — use `data-[disabled=true]:`, `data-[hover=true]:`, `data-[active=true]:`, `data-[focus-visible=true]:` for interaction states. Primitives emit these data attributes (Standard 1). **Interaction state is never a CVA variant input** (Standard 5).
+- **`data-[state]` selectors** — use `data-[disabled=true]:`, `data-[hover=true]:`, `data-[active=true]:`, `data-[focus-visible=true]:` for interaction states. Primitives emit these data attributes (Standard 1). **Interaction state is never a CVA variant input** (Standard 5). On native, prefer single-condition `data-[field-state=...]` selectors backed by a primitive-derived compound-state attribute over compound `data-[]:data-[]` chains (which only match the last condition); web may keep compound chains. See `Input/styles.ts` / `Select/styles.ts`.
 - **`data-[icon=inline-start|inline-end]` selectors** for icon/spinner position spacing (Standard 6) — pair with logical-property utilities (`me-*`/`ms-*`) so RTL flips automatically.
 - **`Platform.select()`** for platform-specific classes — web gets `data-[hover=true]` styles (hover exists on web); native responds only to `data-[active=true]` (press). Always set `default` (native) and `web` keys.
 - **Shared style primitives** — import `DISABLED_CURSOR`, `TRANSITION_COLORS`, etc. from `../../styles/primitives` for cross-component consistency.

package/src/components/Input/styles.ts

@@ -16,16 +16,19 @@ export const inputRootVariants = cva(
     'data-[readonly=true]:bg-surface-secondary',
     'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
     // Web: inset ring avoids a border-width change so the shell never shifts on focus and
-    // no per-size padding compensation is required.
+    // no per-size padding compensation is required. Recolor the border to match the ring so
+    // the two read as a single focus outline instead of a gray border + colored ring.
     'web:data-[focus=true]:ring-inset',
     'web:data-[focus=true]:ring-[length:var(--border-width-focused)]',
     'web:data-[focus=true]:data-[invalid=false]:ring-stroke-action',
+    'web:data-[focus=true]:data-[invalid=false]:border-stroke-action',
     'web:data-[focus=true]:data-[invalid=true]:ring-stroke-danger',
+    'web:data-[focus=true]:data-[invalid=true]:border-stroke-danger',
     // Native: thicker border on focus; size variants below subtract a hairline of padding
     // so layout doesn't shift by 1px.
     'native:data-[focus=true]:border-[length:var(--border-width-focused)]',
-    'native:data-[focus=true]:data-[invalid=false]:border-stroke-action',
-    'native:data-[focus=true]:data-[invalid=true]:border-stroke-danger',
+    'native:data-[field-state=focused]:border-stroke-action',
+    'native:data-[field-state=focused-invalid]:border-stroke-danger',
     'data-[invalid=true]:border-stroke-danger',
   ],
   {

package/src/components/Select/styles.ts

@@ -18,21 +18,25 @@ export const selectTriggerVariants = cva(
     'data-[readonly=true]:bg-surface-secondary',
     'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
     // Web: inset ring avoids a border-width change so no padding compensation is needed.
+    // Recolor the border to match the ring so the two read as a single focus outline
+    // instead of a gray border + colored ring.
     'web:data-[focus=true]:ring-inset',
     'web:data-[focus=true]:ring-[length:var(--border-width-focused)]',
     'web:data-[focus=true]:data-[invalid=false]:ring-stroke-action',
+    'web:data-[focus=true]:data-[invalid=false]:border-stroke-action',
     'web:data-[focus=true]:data-[invalid=true]:ring-stroke-danger',
+    'web:data-[focus=true]:data-[invalid=true]:border-stroke-danger',
     'web:data-[state=open]:ring-inset',
     'web:data-[state=open]:ring-[length:var(--border-width-focused)]',
     'web:data-[state=open]:data-[invalid=false]:ring-stroke-action',
+    'web:data-[state=open]:data-[invalid=false]:border-stroke-action',
     'web:data-[state=open]:data-[invalid=true]:ring-stroke-danger',
+    'web:data-[state=open]:data-[invalid=true]:border-stroke-danger',
     // Native: thicker border; size variants below compensate the layout shift.
     'native:data-[focus=true]:border-[length:var(--border-width-focused)]',
-    'native:data-[focus=true]:data-[invalid=false]:border-stroke-action',
-    'native:data-[focus=true]:data-[invalid=true]:border-stroke-danger',
+    'native:data-[field-state=focused]:border-stroke-action',
+    'native:data-[field-state=focused-invalid]:border-stroke-danger',
     'native:data-[state=open]:border-[length:var(--border-width-focused)]',
-    'native:data-[state=open]:data-[invalid=false]:border-stroke-action',
-    'native:data-[state=open]:data-[invalid=true]:border-stroke-danger',
     'data-[invalid=true]:border-stroke-danger',
   ],
   {