@charcoal-ui/react 6.0.0-rc.5 → 6.0.0-rc.7

package/src/components/Carousel/__snapshots__/index.css.snap

@@ -1,4 +1,5 @@
 .charcoal-carousel {
+  --charcoal-carousel-gap: 0px;
   position: relative;
   display: block;
 }
@@ -19,12 +20,13 @@
   box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
 }
 
-/* スライド間隔は所有しない（sandbox 同様、利用者が children 側で注入する）。
-   このコンポーネントの責務はスクロールと indicator / arrow によるページ送りのみ。 */
+/* スライド間隔は gap prop（--charcoal-carousel-gap）で注入する。
+   スライド寸法は sandbox 同様、利用者が children 側で持つ。 */
 
 .charcoal-carousel__scroller {
   position: relative;
   display: flex;
+  gap: var(--charcoal-carousel-gap);
   overflow-x: auto;
   overflow-y: hidden;
   overscroll-behavior-x: contain;
@@ -130,9 +132,11 @@
   display: none;
 }
 
-/* hover で表示。キーボード操作でも到達できるよう focus-within でも表示する。 */
+/* hover で表示。キーボード操作でも到達できるよう、キーボード由来のフォーカスが
+   カルーセル内にある間も表示する（:focus-within だとクリックで残ったフォーカスでも
+   表示され続けるため、react-aria が付与する data 属性で判定する）。 */
 
-.charcoal-carousel:hover .charcoal-carousel__navigation, .charcoal-carousel:focus-within .charcoal-carousel__navigation {
+.charcoal-carousel:hover .charcoal-carousel__navigation, .charcoal-carousel[data-focus-visible-within] .charcoal-carousel__navigation {
   opacity: 1;
 }
 
@@ -140,16 +144,36 @@
   pointer-events: auto;
 }
 
+/* ヒットエリアをグリッド端列（= mask のフェード帯と同じ 72px）全体へ広げる。
+     擬似要素上のクリックは元の button に届くため、帯のどこを押してもページ送りになる。
+     position: absolute の基準は positioned な .charcoal-carousel__navigation（inset: 0）。 */
+
+.charcoal-carousel__navigation__item::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 72px;
+}
+
 .charcoal-carousel__navigation__item[data-direction='prev'] {
   grid-column: 1;
   justify-self: center;
 }
 
+.charcoal-carousel__navigation__item[data-direction='prev']::after {
+  left: 0;
+}
+
 .charcoal-carousel__navigation__item[data-direction='next'] {
   grid-column: 3;
   justify-self: center;
 }
 
+.charcoal-carousel__navigation__item[data-direction='next']::after {
+  right: 0;
+}
+
 /* スクロール端では非表示。IconButton の disabled スタイル(opacity:0.32)より
    高い詳細度で打ち消すため、ルートを前置する。 */
 

package/src/components/Carousel/index.browser.test.tsx

@@ -0,0 +1,102 @@
+/**
+ * ナビゲーションボタンのヒットエリア検証（実ブラウザ）
+ *
+ * hasGradient の 72px フェード帯はページ送り操作の領域に見えるが、
+ * クリック可能域が中央の 32px 円形ボタンだけだと、帯の残り部分の
+ * クリックが背後のスライド（リンク等）に素通りしてしまう。
+ * 帯全体がナビゲーションボタンのヒットエリアであることを
+ * document.elementFromPoint のヒットテストで検証する。
+ * （pointer-events / 擬似要素のヒットテストは jsdom では再現できない）
+ */
+import { userEvent } from '@vitest/browser/context'
+import { render } from '@testing-library/react'
+import Carousel from '.'
+
+const EDGE_ZONE_WIDTH = 72
+
+const slides = Array.from({ length: 10 }, (_, i) => (
+  <div key={`slide-${i}`} style={{ width: 200, height: 160 }}>
+    Slide {i}
+  </div>
+))
+
+function renderCarousel() {
+  const { container } = render(
+    <div style={{ width: 400 }}>
+      <Carousel size="M" hasGradient>
+        {slides}
+      </Carousel>
+    </div>,
+  )
+  const viewport = container.querySelector(
+    '.charcoal-carousel__viewport',
+  ) as HTMLElement
+  return { container, viewport, rect: viewport.getBoundingClientRect() }
+}
+
+function hitNavigationItem(x: number, y: number) {
+  return document
+    .elementFromPoint(x, y)
+    ?.closest('.charcoal-carousel__navigation__item')
+}
+
+describe('navigation button hit area', () => {
+  it('右端 72px 帯のクリックはスライドではなく next ボタンに届く', () => {
+    const { rect } = renderCarousel()
+    const centerY = rect.top + rect.height / 2
+
+    // ボタン円（32px、帯の中央）の外側かつ帯の内側の点
+    const nearEdge = hitNavigationItem(rect.right - 8, centerY)
+    expect(nearEdge?.getAttribute('data-direction')).toBe('next')
+
+    // ボタンの上下方向の外側（帯の上端付近）
+    const aboveButton = hitNavigationItem(
+      rect.right - EDGE_ZONE_WIDTH / 2,
+      rect.top + 8,
+    )
+    expect(aboveButton?.getAttribute('data-direction')).toBe('next')
+  })
+
+  it('スクロール不能な側（初期位置の prev）の帯はスライドへ素通りする', () => {
+    const { rect } = renderCarousel()
+    const centerY = rect.top + rect.height / 2
+
+    const hit = document.elementFromPoint(rect.left + 8, centerY)
+    expect(hit?.closest('.charcoal-carousel__navigation__item')).toBeNull()
+    expect(hit?.closest('.charcoal-carousel__scroller')).not.toBeNull()
+  })
+
+  it('帯のボタン外の点をクリックすると next へページ送りされる', async () => {
+    const { container, viewport, rect } = renderCarousel()
+    const scroller = container.querySelector(
+      '.charcoal-carousel__scroller',
+    ) as HTMLElement
+    expect(scroller.scrollLeft).toBe(0)
+
+    // trusted click とその後の scroll イベントは React の act() 管理外で
+    // 発火するため、この区間だけ act 警告を無効化する。
+    const g = globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+    g.IS_REACT_ACT_ENVIRONMENT = false
+    try {
+      // viewport 左上基準・帯の内側かつボタン円の外側の座標を実クリックする
+      await userEvent.click(viewport, {
+        position: { x: rect.width - 8, y: 8 },
+      })
+
+      await vi.waitFor(() => {
+        expect(scroller.scrollLeft).toBeGreaterThan(0)
+      })
+    } finally {
+      g.IS_REACT_ACT_ENVIRONMENT = true
+    }
+  })
+
+  it('帯の外側（中央領域）のクリックはスライドに届く', () => {
+    const { rect } = renderCarousel()
+    const centerY = rect.top + rect.height / 2
+
+    const hit = document.elementFromPoint(rect.left + rect.width / 2, centerY)
+    expect(hit?.closest('.charcoal-carousel__navigation__item')).toBeNull()
+    expect(hit?.closest('.charcoal-carousel__scroller')).not.toBeNull()
+  })
+})

package/src/components/Carousel/index.css

@@ -1,4 +1,6 @@
 .charcoal-carousel {
+  --charcoal-carousel-gap: 0px;
+
   position: relative;
   display: block;
 
@@ -18,11 +20,12 @@
   }
 }
 
-/* スライド間隔は所有しない（sandbox 同様、利用者が children 側で注入する）。
-   このコンポーネントの責務はスクロールと indicator / arrow によるページ送りのみ。 */
+/* スライド間隔は gap prop（--charcoal-carousel-gap）で注入する。
+   スライド寸法は sandbox 同様、利用者が children 側で持つ。 */
 .charcoal-carousel__scroller {
   position: relative;
   display: flex;
+  gap: var(--charcoal-carousel-gap);
   overflow-x: auto;
   overflow-y: hidden;
   overscroll-behavior-x: contain;
@@ -134,23 +137,44 @@
   }
 }
 
-/* hover で表示。キーボード操作でも到達できるよう focus-within でも表示する。 */
+/* hover で表示。キーボード操作でも到達できるよう、キーボード由来のフォーカスが
+   カルーセル内にある間も表示する（:focus-within だとクリックで残ったフォーカスでも
+   表示され続けるため、react-aria が付与する data 属性で判定する）。 */
 .charcoal-carousel:hover .charcoal-carousel__navigation,
-.charcoal-carousel:focus-within .charcoal-carousel__navigation {
+.charcoal-carousel[data-focus-visible-within] .charcoal-carousel__navigation {
   opacity: 1;
 }
 
 .charcoal-carousel__navigation__item {
   pointer-events: auto;
 
+  /* ヒットエリアをグリッド端列（= mask のフェード帯と同じ 72px）全体へ広げる。
+     擬似要素上のクリックは元の button に届くため、帯のどこを押してもページ送りになる。
+     position: absolute の基準は positioned な .charcoal-carousel__navigation（inset: 0）。 */
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 72px;
+  }
+
   &[data-direction='prev'] {
     grid-column: 1;
     justify-self: center;
+
+    &::after {
+      left: 0;
+    }
   }
 
   &[data-direction='next'] {
     grid-column: 3;
     justify-self: center;
+
+    &::after {
+      right: 0;
+    }
   }
 }
 

package/src/components/Carousel/index.story.tsx

@@ -16,25 +16,18 @@ const makeSampleImages = (style: CSSProperties) =>
     />
   ))
 
-// M 用: スライド間隔はコンポーネントが所有しないので、利用者側の margin で注入する。
-// width: 100% と margin の併用はラッパーとの循環サイズ解決で間隔が潰れるため、明示サイズにする。
-const spacedImages = makeSampleImages({
-  width: 280,
-  height: 210,
-  marginInlineEnd: 24,
-})
+// M 用: スライド間隔は gap prop で注入する（既定 args の gap: 24）。
+const spacedImages = makeSampleImages({ width: 280, height: 210 })
 // S 用: 1 枚全幅ページングのため間隔なし
 const fullWidthImages = makeSampleImages({ width: '100%', height: '100%' })
 
 // 横幅が確定したスロット（defaultScroll の初期位置計算と 0.75 ページ送りを確認するため）。
-// スライド間隔はコンポーネントが所有しないので、利用者側の margin で注入する。
 const numberedSlides = Array.from({ length: 20 }, (_, i) => (
   <div
     key={`num-${i + 1}`}
     style={{
       width: 200,
       height: 120,
-      marginInlineEnd: 24,
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
@@ -60,6 +53,7 @@ export default {
     hasGradient: false,
     fullWidth: false,
     scrollStep: 0.75,
+    gap: 24,
   },
   argTypes: {
     children: { control: false },
@@ -80,6 +74,10 @@ export default {
       // Controls では数値（比率）のみ操作可能。関数形式は ScrollStepFunction story を参照。
       control: { type: 'range', min: 0.1, max: 1.5, step: 0.05 },
     },
+    gap: {
+      // number は px。'1rem' などの CSS 値文字列も渡せる。
+      control: { type: 'number' },
+    },
   },
 } satisfies Meta<typeof Carousel>
 
@@ -88,7 +86,7 @@ export const SizeM: StoryObj<typeof Carousel> = {
 }
 
 export const SizeS: StoryObj<typeof Carousel> = {
-  args: { size: 'S', children: fullWidthImages },
+  args: { size: 'S', children: fullWidthImages, gap: 0 },
 }
 
 export const WithGradient: StoryObj<typeof Carousel> = {
@@ -100,7 +98,12 @@ export const FullWidth: StoryObj<typeof Carousel> = {
 }
 
 export const NavigationButtonsOnSizeS: StoryObj<typeof Carousel> = {
-  args: { size: 'S', navigationButtons: true, children: fullWidthImages },
+  args: {
+    size: 'S',
+    navigationButtons: true,
+    children: fullWidthImages,
+    gap: 0,
+  },
 }
 
 export const IndicatorOnSizeM: StoryObj<typeof Carousel> = {
@@ -140,7 +143,6 @@ const darkTiles = Array.from({ length: 10 }, (_, i) => (
     style={{
       width: 220,
       height: 140,
-      marginInlineEnd: 24,
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',

package/src/components/Carousel/index.test.tsx

@@ -92,6 +92,30 @@ describe('Carousel', () => {
     })
   })
 
+  describe('gap', () => {
+    it('sets --charcoal-carousel-gap in px when gap is a number', () => {
+      const { container } = render(<Carousel gap={24}>{slides}</Carousel>)
+      const root = container.querySelector('.charcoal-carousel') as HTMLElement
+      expect(root.style.getPropertyValue('--charcoal-carousel-gap')).toBe(
+        '24px',
+      )
+    })
+
+    it('passes string gap values through as-is', () => {
+      const { container } = render(<Carousel gap="1rem">{slides}</Carousel>)
+      const root = container.querySelector('.charcoal-carousel') as HTMLElement
+      expect(root.style.getPropertyValue('--charcoal-carousel-gap')).toBe(
+        '1rem',
+      )
+    })
+
+    it('does not set the custom property when gap is not specified', () => {
+      const { container } = render(<Carousel>{slides}</Carousel>)
+      const root = container.querySelector('.charcoal-carousel') as HTMLElement
+      expect(root.style.getPropertyValue('--charcoal-carousel-gap')).toBe('')
+    })
+  })
+
   describe('Size M (default)', () => {
     it('shows navigation buttons', () => {
       render(<Carousel size="M">{slides}</Carousel>)
@@ -634,6 +658,58 @@ describe('Carousel', () => {
     })
   })
 
+  describe('navigation button visibility (focus modality)', () => {
+    // jsdom はジオメトリが全て 0 で Next ボタンが disabled（=フォーカス不可）の
+    // ままになるため、スクロール余地をモックして有効化してからフォーカスする。
+    function renderWithFocusableNext() {
+      render(<Carousel size="M">{slides}</Carousel>)
+      const scroller = getScroller()
+      mockScrollerGeometry(scroller, { scrollLeft: 0 })
+      scroller.scrollBy = vi.fn()
+      act(() => {
+        fireEvent.scroll(scroller)
+      })
+      const next = screen.getByRole('button', { name: 'Next' })
+      expect(next).not.toBeDisabled()
+      return next
+    }
+
+    // react-aria は document 上の keydown / pointerdown でフォーカスの由来
+    // （keyboard / pointer）を判定するため、focus() の前にイベントを発火して
+    // モダリティを切り替える。
+    it('does not mark focus-visible when a button is focused by pointer', () => {
+      const next = renderWithFocusableNext()
+      fireEvent.pointerDown(next)
+      fireEvent.mouseDown(next)
+      act(() => next.focus())
+      fireEvent.click(next)
+      expect(document.activeElement).toBe(next)
+      expect(screen.getByRole('region')).not.toHaveAttribute(
+        'data-focus-visible-within',
+      )
+    })
+
+    it('marks focus-visible when a button is focused by keyboard', () => {
+      const next = renderWithFocusableNext()
+      fireEvent.keyDown(document.body, { key: 'Tab' })
+      act(() => next.focus())
+      expect(screen.getByRole('region')).toHaveAttribute(
+        'data-focus-visible-within',
+        'true',
+      )
+    })
+
+    it('clears focus-visible when focus leaves the carousel', () => {
+      const next = renderWithFocusableNext()
+      fireEvent.keyDown(document.body, { key: 'Tab' })
+      act(() => next.focus())
+      act(() => next.blur())
+      expect(screen.getByRole('region')).not.toHaveAttribute(
+        'data-focus-visible-within',
+      )
+    })
+  })
+
   describe('SSR (server rendering)', () => {
     // jsdom では window が定義されているため renderToString 時に
     // 「useLayoutEffect does nothing on the server」警告が出る（実 SSR=window 無しでは

package/src/components/Carousel/index.tsx

@@ -7,9 +7,11 @@ import {
   memo,
   useCallback,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
   useSyncExternalStore,
+  type CSSProperties,
   type ReactNode,
 } from 'react'
 import { mergeProps, useFocusRing, useKeyboard } from 'react-aria'
@@ -67,6 +69,8 @@ export type CarouselProps = Readonly<{
   onResize?: (width: number) => void
   onScrollStateChange?: (canScroll: boolean) => void
   defaultScroll?: { align?: ScrollAlign; offset?: number }
+  // スライド間隔。number は px、string は CSS 値をそのまま使う。未指定は間隔なし。
+  gap?: number | string
   // 1 直接子要素 = 1 スライド（react-sandbox 互換）。
   children: ReactNode
 }>
@@ -147,6 +151,7 @@ const Carousel = forwardRef<CarouselHandlerRef, CarouselProps>(function Render(
     onResize,
     onScrollStateChange,
     defaultScroll: { align = 'left', offset = 0 } = {},
+    gap,
     children,
     ...props
   }: CarouselProps,
@@ -208,9 +213,27 @@ const Carousel = forwardRef<CarouselHandlerRef, CarouselProps>(function Render(
     isFocusVisible: scrollerFocusVisible,
   } = useFocusRing()
 
+  // ナビゲーションボタン表示用。クリックで残留したフォーカス（pointer 由来）では
+  // 表示し続けないよう、キーボード由来のフォーカスのみを検知する。
+  const { focusProps: rootFocusProps, isFocusVisible: rootFocusVisible } =
+    useFocusRing({ within: true })
+
+  // gap 宣言自体は index.css 側に置き、ここでは CSS 変数の値だけを注入する。
+  const gapStyle = useMemo(
+    () =>
+      ({
+        ...(gap != null && {
+          '--charcoal-carousel-gap': typeof gap === 'number' ? `${gap}px` : gap,
+        }),
+      }) satisfies CSSProperties,
+    [gap],
+  )
+
   return (
     <div
+      {...rootFocusProps}
       className={className}
+      style={gapStyle}
       data-size={size}
       data-has-gradient={hasGradient}
       data-full-width={fullWidth}
@@ -219,6 +242,7 @@ const Carousel = forwardRef<CarouselHandlerRef, CarouselProps>(function Render(
       data-scroll-snap-align={snapAlign}
       data-can-prev={canPrev}
       data-can-next={canNext}
+      data-focus-visible-within={rootFocusVisible || undefined}
       role="region"
       aria-roledescription="carousel"
       aria-label="Carousel"

package/src/components/TagItem/index.test.tsx

@@ -0,0 +1,38 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { forwardRef } from 'react'
+import TagItem from '.'
+
+describe('TagItem', () => {
+  it('preserves link props on a custom link component', () => {
+    const NextLink = forwardRef<
+      HTMLAnchorElement,
+      React.ComponentPropsWithoutRef<'a'>
+    >(function NextLink({ children, ...props }, ref) {
+      return (
+        <a ref={ref} {...props}>
+          {children}
+        </a>
+      )
+    })
+
+    const onClick = vi.fn()
+
+    render(
+      <TagItem
+        component={NextLink}
+        href="/tags/girl"
+        label="#girl"
+        target="_blank"
+        onClick={onClick}
+      />,
+    )
+
+    const link = screen.getByRole('link')
+
+    expect(link).toHaveAttribute('href', '/tags/girl')
+    expect(link).toHaveAttribute('target', '_blank')
+
+    fireEvent.click(link)
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})

package/src/components/TagItem/index.tsx

@@ -61,6 +61,7 @@ const TagItem = forwardRef<HTMLAnchorElement, TagItemProps>(
 
     const { linkProps } = useLink(
       {
+        ...props,
         isDisabled: disabled,
         elementType: typeof Component === 'string' ? Component : 'a',
       },

package/src/components/TextArea/__snapshots__/index.css.snap

@@ -30,6 +30,10 @@
   box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
 }
 
+.charcoal-text-area-container:has([data-no-bottom-padding='true']) {
+  height: calc(22px * (var(--charcoal-text-area-rows) + 1) + 18px);
+}
+
 .charcoal-text-area-container:not([aria-disabled='true']):hover {
   background-color: var(--charcoal-color-container-secondary-hover-a);
 }
@@ -47,13 +51,26 @@
   box-sizing: border-box;
 
   /* Prevent zooming for iOS Safari */
+  --charcoal-textarea-safari-prevent-zoom-scale: 0.875;
+  --charcoal-textarea-line-height: calc(
+    22px / var(--charcoal-textarea-safari-prevent-zoom-scale)
+  );
+  --charcoal-textarea-padding-y: calc(
+    8px / var(--charcoal-textarea-safari-prevent-zoom-scale)
+  );
+  --charcoal-textarea-padding-x: calc(
+    9px / var(--charcoal-textarea-safari-prevent-zoom-scale)
+  );
   transform-origin: top left;
-  transform: scale(0.875);
-  width: calc(100% / 0.875);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
-  height: calc(22px / 0.875 * var(--charcoal-text-area-rows) + 20px);
+  transform: scale(var(--charcoal-textarea-safari-prevent-zoom-scale));
+  width: calc(100% / var(--charcoal-textarea-safari-prevent-zoom-scale));
+  font-size: calc(14px / var(--charcoal-textarea-safari-prevent-zoom-scale));
+  line-height: var(--charcoal-textarea-line-height);
+  padding: var(--charcoal-textarea-padding-y) var(--charcoal-textarea-padding-x);
+  height: calc(
+    var(--charcoal-textarea-line-height) * var(--charcoal-text-area-rows) +
+      var(--charcoal-textarea-padding-y) * 2
+  );
 
   /* Display box-shadow for iOS Safari */
   appearance: none;
@@ -61,8 +78,12 @@
 }
 
 .charcoal-text-area-textarea[data-no-bottom-padding='true'] {
-  padding: calc(9px / 0.875) calc(8px / 0.875) 0;
-  height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);
+  padding: var(--charcoal-textarea-padding-y)
+      var(--charcoal-textarea-padding-x) 0;
+  height: calc(
+      var(--charcoal-textarea-line-height) * var(--charcoal-text-area-rows) +
+        var(--charcoal-textarea-padding-y)
+    );
 }
 
 .charcoal-text-area-textarea::placeholder {

package/src/components/TextArea/index.css

@@ -32,6 +32,10 @@
     box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
   }
 
+  &:has([data-no-bottom-padding='true']) {
+    height: calc(22px * (var(--charcoal-text-area-rows) + 1) + 18px);
+  }
+
   &:not([aria-disabled='true']):hover {
     background-color: var(--charcoal-color-container-secondary-hover-a);
   }
@@ -50,13 +54,27 @@
   box-sizing: border-box;
 
   /* Prevent zooming for iOS Safari */
+  --charcoal-textarea-safari-prevent-zoom-scale: 0.875;
+  --charcoal-textarea-line-height: calc(
+    22px / var(--charcoal-textarea-safari-prevent-zoom-scale)
+  );
+  --charcoal-textarea-padding-y: calc(
+    8px / var(--charcoal-textarea-safari-prevent-zoom-scale)
+  );
+  --charcoal-textarea-padding-x: calc(
+    9px / var(--charcoal-textarea-safari-prevent-zoom-scale)
+  );
+
   transform-origin: top left;
-  transform: scale(0.875);
-  width: calc(100% / 0.875);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
-  height: calc(22px / 0.875 * var(--charcoal-text-area-rows) + 20px);
+  transform: scale(var(--charcoal-textarea-safari-prevent-zoom-scale));
+  width: calc(100% / var(--charcoal-textarea-safari-prevent-zoom-scale));
+  font-size: calc(14px / var(--charcoal-textarea-safari-prevent-zoom-scale));
+  line-height: var(--charcoal-textarea-line-height);
+  padding: var(--charcoal-textarea-padding-y) var(--charcoal-textarea-padding-x);
+  height: calc(
+    var(--charcoal-textarea-line-height) * var(--charcoal-text-area-rows) +
+      var(--charcoal-textarea-padding-y) * 2
+  );
 
   /* Display box-shadow for iOS Safari */
   appearance: none;
@@ -64,8 +82,12 @@
   background: none;
 
   &[data-no-bottom-padding='true'] {
-    padding: calc(9px / 0.875) calc(8px / 0.875) 0;
-    height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);
+    padding: var(--charcoal-textarea-padding-y)
+      var(--charcoal-textarea-padding-x) 0;
+    height: calc(
+      var(--charcoal-textarea-line-height) * var(--charcoal-text-area-rows) +
+        var(--charcoal-textarea-padding-y)
+    );
   }
 
   &::placeholder {

package/src/components/TextArea/index.tsx

@@ -206,7 +206,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           aria-invalid={invalid === true}
           ref={containerRef}
           style={{
-            '--charcoal-text-area-rows': `${showCount ? rows + 1 : rows}`,
+            '--charcoal-text-area-rows': rows,
           }}
         >
           <textarea