From 6e7ec53daa33f8217208d49d56445eada6b6f481 Mon Sep 17 00:00:00 2001
From: SHIMADA Takayuki <takayshim@digital.go.jp>
Date: Fri, 22 Aug 2025 10:06:36 +0900
Subject: [PATCH 1/5] =?UTF-8?q?fix(form-control-label):=20SupportText?=
 =?UTF-8?q?=E3=81=AE=E6=96=87=E5=AD=97=E8=89=B2=E3=81=AFGray=20600?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SupportText/SupportText.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SupportText/SupportText.tsx b/src/components/SupportText/SupportText.tsx
index 1242c35..65f5c23 100644
--- a/src/components/SupportText/SupportText.tsx
+++ b/src/components/SupportText/SupportText.tsx
@@ -6,7 +6,7 @@ export const SupportText = (props: SupportTextProps) => {
   const { children, className, ...rest } = props;
 
   return (
-    <p className={`text-std-16N-170 text-solid-gray-700 ${className ?? ''}`} {...rest}>
+    <p className={`text-std-16N-170 text-solid-gray-600 ${className ?? ''}`} {...rest}>
       {children}
     </p>
   );

From 2833e81bcc336a7864eb0d00dc6c1c254b5fbc6b Mon Sep 17 00:00:00 2001
From: SHIMADA Takayuki <takayshim@digital.go.jp>
Date: Fri, 22 Aug 2025 10:07:12 +0900
Subject: [PATCH 2/5] =?UTF-8?q?feat(textarea):=20Textarea=E3=82=92Readonly?=
 =?UTF-8?q?=E3=82=B9=E3=83=86=E3=83=BC=E3=83=88=E3=81=AB=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Textarea/Textarea.stories.tsx | 229 ++++++++++---------
 src/components/Textarea/Textarea.tsx         |   9 +-
 2 files changed, 128 insertions(+), 110 deletions(-)

diff --git a/src/components/Textarea/Textarea.stories.tsx b/src/components/Textarea/Textarea.stories.tsx
index 80e85bb..3d100c3 100644
--- a/src/components/Textarea/Textarea.stories.tsx
+++ b/src/components/Textarea/Textarea.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
-import { ErrorText, Label, RequirementBadge, SupportText } from '../';
+import { ErrorText, Label, RequirementBadge, StatusBadge, SupportText } from '../';
 import { Textarea } from './Textarea';
 
 const meta = {
@@ -17,159 +17,176 @@ const meta = {
         type: { summary: 'boolean' },
       },
     },
-    'aria-disabled': {
-      description:
-        '無効化する必要がある場合は `disabled` 属性ではなく `aria-disabled` 属性を使用します。',
-      control: { type: 'boolean' },
-      table: {
-        defaultValue: { summary: 'false' },
-        type: { summary: 'boolean' },
-      },
-    },
   },
 } satisfies Meta<typeof Textarea>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export type TextareaCounterProps = {
-  count: number;
-  maxCount: number;
-  className?: string;
-  id?: string;
-};
-
 export const Playground: Story = {
-  decorators: [
-    (Story, context) => (
+  render: (args) => {
+    const { isError } = args;
+
+    const formId = React.useId();
+    const supportTextId = React.useId();
+    const errorTextId = React.useId();
+
+    const describedBy = isError ? `${errorTextId} ${supportTextId}` : supportTextId;
+
+    return (
       <div className='flex flex-col items-start gap-2'>
-        <Label htmlFor={context.args.id}>
+        <Label htmlFor={formId}>
           ラベル<RequirementBadge>※必須</RequirementBadge>
         </Label>
-        <SupportText id={context.args['aria-describedby']}>サポートテキスト</SupportText>
-        <Story />
+        <SupportText id={supportTextId}>サポートテキスト</SupportText>
+        <Textarea
+          aria-describedby={describedBy}
+          defaultValue='入力テキスト'
+          id={formId}
+          name='playground'
+          {...args}
+        />
+        {isError && <ErrorText id={errorTextId}>＊エラーテキスト</ErrorText>}
       </div>
-    ),
-  ],
+    );
+  },
   args: {
     isError: false,
-    id: 'test-playground',
-    'aria-describedby': 'test-playground-support-text',
-    'aria-disabled': false,
   },
 };
 
 export const Errored: Story = {
-  render: () => {
+  render: (args) => {
     const formId = React.useId();
+    const supportTextId = React.useId();
+    const errorTextId = React.useId();
+
+    const describedBy = `${errorTextId} ${supportTextId}`;
 
     return (
-      <div className='flex flex-col gap-8'>
-        <div className='flex flex-col gap-2'>
-          <Label htmlFor={`${formId}-error`}>
-            ラベル<RequirementBadge>※必須</RequirementBadge>
-          </Label>
-          <SupportText id='error-support-text'>サポートテキスト</SupportText>
-          <Textarea
-            aria-describedby='error-support-text error-text'
-            aria-invalid={true}
-            defaultValue=''
-            id={`${formId}-error`}
-            isError={true}
-            name='error'
-            required
-          />
-          <ErrorText id='error-text'>＊エラーテキスト</ErrorText>
-        </div>
-
-        <div className='flex flex-col gap-2'>
-          <Label htmlFor={`${formId}-filled-error`}>
-            ラベル<RequirementBadge>※必須</RequirementBadge>
-          </Label>
-          <SupportText id='filled-error-support-text'>サポートテキスト</SupportText>
-          <Textarea
-            aria-describedby='filled-error-support-text filled-error-text'
-            aria-invalid={true}
-            defaultValue='入力済の内容が入ります。入力済の内容が入ります。入力済の内容が入ります。'
-            id={`${formId}-filled-error`}
-            isError={true}
-            name='filled-error'
-          />
-          <ErrorText id='filled-error-text'>＊エラーテキスト</ErrorText>
-        </div>
+      <div className='flex flex-col items-start gap-2'>
+        <Label htmlFor={formId}>
+          ラベル<RequirementBadge>※必須</RequirementBadge>
+        </Label>
+        <SupportText id={supportTextId}>サポートテキスト</SupportText>
+        <Textarea aria-describedby={describedBy} id={formId} name='error' {...args} />
+        <ErrorText id={errorTextId}>＊エラーテキスト</ErrorText>
       </div>
     );
   },
+  argTypes: {
+    isError: { table: { disable: true } },
+  },
+  args: {
+    isError: true,
+  },
 };
 
 export const Disabled: Story = {
-  render: () => {
+  render: (args) => {
     const formId = React.useId();
+    const supportTextId = React.useId();
+
+    return (
+      <div className='flex flex-col items-start gap-2'>
+        <Label htmlFor={formId}>
+          ラベル
+          <StatusBadge>無効</StatusBadge>
+        </Label>
+        <SupportText id={supportTextId}>〜の理由により、この項目は無効化されています。</SupportText>
+        <Textarea
+          aria-describedby={supportTextId}
+          aria-disabled={true}
+          defaultValue='入力テキスト'
+          id={formId}
+          name='disabled'
+          {...args}
+        />
+      </div>
+    );
+  },
+  argTypes: {
+    isError: { table: { disable: true } },
+  },
+};
+
+export const Readonly: Story = {
+  render: (args) => {
+    const controlId = React.useId();
+    const supportTextId = React.useId();
 
     return (
-      <div className='flex flex-col gap-8'>
-        <div className='flex flex-col gap-2'>
-          <Label htmlFor={`${formId}-disabled`}>ラベル</Label>
-          <SupportText id='disabled-support-text'>
-            〜の理由により、この項目は無効化されています。
-          </SupportText>
-          <Textarea
-            aria-describedby='disabled-support-text'
-            aria-disabled={true}
-            defaultValue='入力テキスト'
-            id={`${formId}-disabled`}
-            name='disabled'
-          />
-        </div>
+      <div className='flex flex-col items-start gap-2'>
+        <Label htmlFor={controlId}>
+          ラベル
+          <StatusBadge>編集不可</StatusBadge>
+        </Label>
+        <SupportText id={supportTextId}>〜の理由により、この項目は編集できません。</SupportText>
+        <Textarea
+          aria-describedby={supportTextId}
+          defaultValue='入力テキスト'
+          id={controlId}
+          name='readonly'
+          readOnly
+          {...args}
+        />
       </div>
     );
   },
+  argTypes: {
+    isError: { table: { disable: true } },
+  },
 };
 
 export const WithFieldSizing: Story = {
-  render: () => {
+  render: (args) => {
     const formId = React.useId();
+    const supportTextId = React.useId();
 
     return (
-      <div className='flex flex-col gap-8'>
-        <div className='flex flex-col items-start gap-2'>
-          <Label htmlFor={`${formId}-field-sizing`}>field-sizing を使用したテキストエリア</Label>
-          <SupportText id='field-sizing-support-text'>
-            field-sizing: content
-            を使用し、内容に応じて高さが3行〜10行まで可変するテキストエリアの例
-          </SupportText>
-          <Textarea
-            aria-describedby='field-sizing-support-text'
-            className='[field-sizing:content] w-96 min-h-[calc(3lh+2rem+2px)] max-h-[calc(10lh+2rem+2px)]'
-            id={`${formId}-field-sizing`}
-            name='field-sizing'
-          />
-        </div>
+      <div className='flex flex-col items-start gap-2'>
+        <Label htmlFor={formId}>field-sizing を使用したテキストエリア</Label>
+        <SupportText id={supportTextId}>
+          field-sizing: content を使用し、内容に応じて高さが3行〜10行まで可変するテキストエリアの例
+        </SupportText>
+        <Textarea
+          aria-describedby={supportTextId}
+          className='[field-sizing:content] w-96 min-h-[calc(3lh+2rem+2px)] max-h-[calc(10lh+2rem+2px)]'
+          id={formId}
+          name='field-sizing'
+          {...args}
+        />
       </div>
     );
   },
+  argTypes: {
+    isError: { table: { disable: true } },
+  },
 };
 
 export const WithColsAndRowsAttribute: Story = {
-  render: () => {
+  render: (args) => {
     const formId = React.useId();
+    const supportTextId = React.useId();
 
     return (
-      <div className='flex flex-col gap-8'>
-        <div className='flex flex-col items-start gap-2'>
-          <Label htmlFor={`${formId}-rows`}>cols, rows 属性を使用したテキストエリア</Label>
-          <SupportText id='rows-support-text'>
-            cols 属性の値に30、rows 属性の値に4を指定したテキストエリアの例
-          </SupportText>
-          <Textarea
-            aria-describedby='rows-support-text'
-            id={`${formId}-rows`}
-            name='rows'
-            rows={4}
-            cols={30}
-          />
-        </div>
+      <div className='flex flex-col items-start gap-2'>
+        <Label htmlFor={formId}>cols, rows 属性を使用したテキストエリア</Label>
+        <SupportText id={supportTextId}>
+          cols 属性の値に30、rows 属性の値に4を指定したテキストエリアの例
+        </SupportText>
+        <Textarea
+          aria-describedby={supportTextId}
+          id={formId}
+          name='rows'
+          rows={4}
+          cols={30}
+          {...args}
+        />
       </div>
     );
   },
+  argTypes: {
+    isError: { table: { disable: true } },
+  },
 };
diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
index 4acc026..f4d1c66 100644
--- a/src/components/Textarea/Textarea.tsx
+++ b/src/components/Textarea/Textarea.tsx
@@ -10,11 +10,12 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((props, r
   return (
     <textarea
       className={`
-        rounded-8 max-w-full border border-solid-gray-600 bg-white p-4 text-std-16N-170 text-solid-gray-800
-        hover:border-black
-        aria-[invalid=true]:border-error-1 aria-[invalid=true]:hover:border-red-1000
+        max-w-full rounded-8 border bg-white p-4 border-solid-gray-600 text-std-16N-170 text-solid-gray-800
+        hover:[&:read-write]:border-black
+        aria-[invalid=true]:border-error-1 aria-[invalid=true]:[&:read-write]:hover:border-red-1000
         focus:outline focus:outline-4 focus:outline-black focus:outline-offset-[calc(2/16*1rem)] focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300
-        aria-disabled:border-solid-gray-300 aria-disabled:bg-solid-gray-50 aria-disabled:text-solid-gray-420 aria-disabled:pointer-events-none aria-disabled:forced-colors:text-[GrayText] aria-disabled:forced-colors:border-[GrayText]
+        read-only:border-dashed
+        aria-disabled:border-solid-gray-300 read-only:aria-disabled:border-solid aria-disabled:bg-solid-gray-50 aria-disabled:text-solid-gray-420 aria-disabled:pointer-events-none aria-disabled:forced-colors:text-[GrayText] aria-disabled:forced-colors:border-[GrayText]
         ${className ?? ''}
       `}
       aria-invalid={isError || undefined}

From f7d024c616485089900e776f61ed0696659944fa Mon Sep 17 00:00:00 2001
From: SHIMADA Takayuki <takayshim@digital.go.jp>
Date: Fri, 22 Aug 2025 10:50:40 +0900
Subject: [PATCH 3/5] =?UTF-8?q?feat(date-picker):=20DatePicker=E3=82=92Rea?=
 =?UTF-8?q?donly=E3=82=B9=E3=83=86=E3=83=BC=E3=83=88=E3=81=AB=E5=AF=BE?=
 =?UTF-8?q?=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DatePicker/DatePicker.stories.tsx         | 95 +++++++++++++++----
 src/components/DatePicker/DatePicker.tsx      | 18 +++-
 .../DatePicker/parts/DatePickerDate.tsx       |  6 +-
 .../DatePicker/parts/DatePickerMonth.tsx      |  6 +-
 .../DatePicker/parts/DatePickerYear.tsx       |  6 +-
 5 files changed, 101 insertions(+), 30 deletions(-)

diff --git a/src/components/DatePicker/DatePicker.stories.tsx b/src/components/DatePicker/DatePicker.stories.tsx
index ea13a1d..f2b44e1 100644
--- a/src/components/DatePicker/DatePicker.stories.tsx
+++ b/src/components/DatePicker/DatePicker.stories.tsx
@@ -65,16 +65,25 @@ const meta = {
         type: { summary: 'boolean' },
       },
     },
+    isReadonly: {
+      description: '編集不可（読み取り専用）状態であるかどうかを指定します。',
+      control: { type: 'boolean' },
+      table: {
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' },
+      },
+    },
   },
   args: {
     size: 'lg',
     isError: false,
     isDisabled: false,
-    children: ({ yearRef, monthRef, dateRef }) => (
+    isReadonly: false,
+    children: ({ yearRef, monthRef, dateRef, ...rest }) => (
       <>
-        <DatePickerYear ref={yearRef} />
-        <DatePickerMonth ref={monthRef} />
-        <DatePickerDate ref={dateRef} />
+        <DatePickerYear ref={yearRef} {...rest} />
+        <DatePickerMonth ref={monthRef} {...rest} />
+        <DatePickerDate ref={dateRef} {...rest} />
       </>
     ),
   },
@@ -95,11 +104,11 @@ export const WithFieldset: Story = {
         </Legend>
         <SupportText id='date-picker-1-support-text'>例：2025年01月20日</SupportText>
         <DatePicker {...args}>
-          {({ yearRef, monthRef, dateRef }) => (
+          {({ yearRef, monthRef, dateRef, ...rest }) => (
             <>
-              <DatePickerYear ref={yearRef} />
-              <DatePickerMonth ref={monthRef} />
-              <DatePickerDate ref={dateRef} />
+              <DatePickerYear ref={yearRef} {...rest} />
+              <DatePickerMonth ref={monthRef} {...rest} />
+              <DatePickerDate ref={dateRef} {...rest} />
             </>
           )}
         </DatePicker>
@@ -125,24 +134,24 @@ export const Errored: Story = {
         </Legend>
         <SupportText id='date-picker-3-support-text'>例：2025年01月20日</SupportText>
         <DatePicker {...args}>
-          {({ yearRef, monthRef, dateRef }) => (
+          {({ yearRef, monthRef, dateRef, ...rest }) => (
             <>
               <DatePickerYear
                 ref={yearRef}
                 aria-describedby='date-picker-3-support-text date-picker-3-error-text'
-                aria-invalid={true}
+                {...rest}
               />
               <DatePickerMonth
                 ref={monthRef}
                 defaultValue={10}
                 aria-describedby='date-picker-3-support-text date-picker-3-error-text'
-                aria-invalid={true}
+                {...rest}
               />
               <DatePickerDate
                 ref={dateRef}
                 defaultValue={28}
                 aria-describedby='date-picker-3-support-text date-picker-3-error-text'
-                aria-invalid={true}
+                {...rest}
               />
             </>
           )}
@@ -166,24 +175,71 @@ export const Disabled: Story = {
         <Legend>
           日付<RequirementBadge isOptional>※任意</RequirementBadge>
         </Legend>
-        <SupportText id='date-picker-5-support-text'>例：2025年01月20日</SupportText>
+        <SupportText id='date-picker-5-support-text'>
+          〜の理由により、この項目は編集できません。
+        </SupportText>
         <DatePicker {...args}>
-          {({ yearRef, monthRef, dateRef }) => (
+          {({ yearRef, monthRef, dateRef, ...rest }) => (
             <>
               <DatePickerYear
                 ref={yearRef}
-                aria-disabled={true}
                 aria-describedby='date-picker-5-support-text'
+                {...rest}
               />
               <DatePickerMonth
                 ref={monthRef}
-                aria-disabled={true}
                 aria-describedby='date-picker-5-support-text'
+                {...rest}
               />
               <DatePickerDate
                 ref={dateRef}
-                aria-disabled={true}
                 aria-describedby='date-picker-5-support-text'
+                {...rest}
+              />
+            </>
+          )}
+        </DatePicker>
+      </fieldset>
+    );
+  },
+};
+
+/**
+ * Readonly状態を表示した例
+ */
+export const Readonly: Story = {
+  args: {
+    isReadonly: true,
+  },
+  render({ ...args }) {
+    return (
+      <fieldset className='flex flex-col gap-2 items-start'>
+        <Legend>
+          日付<RequirementBadge isOptional>※任意</RequirementBadge>
+        </Legend>
+        <SupportText id='date-picker-6-support-text'>
+          〜の理由により、この項目は編集できません。
+        </SupportText>
+        <DatePicker {...args}>
+          {({ yearRef, monthRef, dateRef, ...rest }) => (
+            <>
+              <DatePickerYear
+                ref={yearRef}
+                value={2025}
+                aria-describedby='date-picker-6-support-text'
+                {...rest}
+              />
+              <DatePickerMonth
+                ref={monthRef}
+                value={10}
+                aria-describedby='date-picker-6-support-text'
+                {...rest}
+              />
+              <DatePickerDate
+                ref={dateRef}
+                value={28}
+                aria-describedby='date-picker-6-support-text'
+                {...rest}
               />
             </>
           )}
@@ -230,25 +286,28 @@ export const WithCalendar: Story = {
           return (
             <>
               <DatePicker size={size} {...args}>
-                {({ yearRef, monthRef, dateRef }) => (
+                {({ yearRef, monthRef, dateRef, ...rest }) => (
                   <>
                     <DatePickerYear
                       ref={yearRef}
                       value={yearInput}
                       onChange={(e) => setYearInput(e.target.value)}
                       onBlur={updateCalendarDate}
+                      {...rest}
                     />
                     <DatePickerMonth
                       ref={monthRef}
                       value={monthInput}
                       onChange={(e) => setMonthInput(e.target.value)}
                       onBlur={updateCalendarDate}
+                      {...rest}
                     />
                     <DatePickerDate
                       ref={dateRef}
                       value={dayInput}
                       onChange={(e) => setDayInput(e.target.value)}
                       onBlur={updateCalendarDate}
+                      {...rest}
                     />
                   </>
                 )}
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
index 0005c39..3c1e7b5 100644
--- a/src/components/DatePicker/DatePicker.tsx
+++ b/src/components/DatePicker/DatePicker.tsx
@@ -7,16 +7,20 @@ export type DatePickerSize = 'lg' | 'md' | 'sm';
 export type DatePickerProps = Omit<ComponentProps<'div'>, 'children'> & {
   size?: DatePickerSize;
   isError?: boolean;
+  isReadonly?: boolean;
   isDisabled?: boolean;
   children: (props: {
     yearRef: Ref<HTMLInputElement>;
     monthRef: Ref<HTMLInputElement>;
     dateRef: Ref<HTMLInputElement>;
+    readOnly?: boolean;
+    'aria-disabled'?: boolean;
+    'aria-invalid'?: boolean;
   }) => JSX.Element;
 };
 
 export const DatePicker = (props: DatePickerProps) => {
-  const { className, size = 'lg', isError, isDisabled, children, ...rest } = props;
+  const { className, size = 'lg', isError, isReadonly, isDisabled, children, ...rest } = props;
 
   const yearRef = useRef<HTMLInputElement>(null);
   const monthRef = useRef<HTMLInputElement>(null);
@@ -67,14 +71,22 @@ export const DatePicker = (props: DatePickerProps) => {
   return (
     // biome-ignore lint/a11y/noStaticElementInteractions: For date input navigation
     <div
-      className={`inline-flex h-14 -space-x-1 rounded-8 border border-solid-gray-600 bg-[--bg] p-0.5 pe-0 text-solid-gray-900 [--bg:theme(colors.white)] focus-within:border-black hover:border-solid-gray-900 data-[size=md]:h-12 data-[size=sm]:h-10 data-[disabled]:border-solid-gray-300 data-[error]:border-error-1 data-[disabled]:text-solid-gray-420 data-[disabled]:[--bg:theme(colors.solid-gray.50)] data-[error]:focus-within:border-red-1000 data-[error]:hover:border-red-1000 forced-colors:data-[disabled]:border-[GrayText] forced-colors:data-[disabled]:text-[GrayText] ${className ?? ''}`}
+      className={`inline-flex h-14 -space-x-1 rounded-8 border border-solid-gray-600 bg-[--bg] p-0.5 pe-0 text-solid-gray-900 [--bg:theme(colors.white)] focus-within:border-black hover:border-solid-gray-900 data-[size=md]:h-12 data-[size=sm]:h-10 data-[readonly]:border-dashed data-[disabled]:border-solid-gray-300 data-[error]:border-error-1 data-[disabled]:text-solid-gray-420 data-[disabled]:[--bg:theme(colors.solid-gray.50)] data-[error]:focus-within:border-red-1000 data-[error]:hover:border-red-1000 data-[error]:hover:data-[readonly]:border-error-1 hover:data-[readonly]:border-solid-gray-600 forced-colors:data-[disabled]:border-[GrayText] forced-colors:data-[disabled]:text-[GrayText] ${className ?? ''}`}
       data-size={size}
       data-error={isError || null}
+      data-readonly={isReadonly || null}
       data-disabled={isDisabled || null}
       onKeyDown={handleKeyDown}
       {...rest}
     >
-      {children({ yearRef, monthRef, dateRef })}
+      {children({
+        yearRef,
+        monthRef,
+        dateRef,
+        readOnly: isReadonly,
+        'aria-disabled': isDisabled,
+        'aria-invalid': isError,
+      })}
     </div>
   );
 };
diff --git a/src/components/DatePicker/parts/DatePickerDate.tsx b/src/components/DatePicker/parts/DatePickerDate.tsx
index a27bb9a..8183a55 100644
--- a/src/components/DatePicker/parts/DatePickerDate.tsx
+++ b/src/components/DatePicker/parts/DatePickerDate.tsx
@@ -3,7 +3,7 @@ import { type ComponentProps, forwardRef } from 'react';
 export type DatePickerDateProps = ComponentProps<'input'> & {};
 
 export const DatePickerDate = forwardRef<HTMLInputElement, DatePickerDateProps>((props, ref) => {
-  const { className, 'aria-disabled': disabled, readOnly, ...rest } = props;
+  const { className, 'aria-disabled': ariaDisabled, readOnly, ...rest } = props;
 
   return (
     <label className='relative z-0 inline-flex flex-row-reverse last:pe-4 [&:has([aria-disabled="true"])]:pointer-events-none'>
@@ -13,8 +13,8 @@ export const DatePickerDate = forwardRef<HTMLInputElement, DatePickerDateProps>(
         type='text'
         inputMode='numeric'
         pattern='\d+'
-        readOnly={disabled ? true : readOnly}
-        aria-disabled={disabled}
+        readOnly={ariaDisabled === 'true' || ariaDisabled === true || readOnly}
+        aria-disabled={ariaDisabled}
         ref={ref}
         {...rest}
       />
diff --git a/src/components/DatePicker/parts/DatePickerMonth.tsx b/src/components/DatePicker/parts/DatePickerMonth.tsx
index b4b8c77..d00c594 100644
--- a/src/components/DatePicker/parts/DatePickerMonth.tsx
+++ b/src/components/DatePicker/parts/DatePickerMonth.tsx
@@ -3,7 +3,7 @@ import { type ComponentProps, forwardRef } from 'react';
 export type DatePickerMonthProps = ComponentProps<'input'> & {};
 
 export const DatePickerMonth = forwardRef<HTMLInputElement, DatePickerMonthProps>((props, ref) => {
-  const { className, 'aria-disabled': disabled, readOnly, ...rest } = props;
+  const { className, 'aria-disabled': ariaDisabled, readOnly, ...rest } = props;
 
   return (
     <label className='relative z-0 inline-flex flex-row-reverse last:pe-4 [&:has([aria-disabled="true"])]:pointer-events-none'>
@@ -13,8 +13,8 @@ export const DatePickerMonth = forwardRef<HTMLInputElement, DatePickerMonthProps
         type='text'
         inputMode='numeric'
         pattern='\d+'
-        readOnly={disabled ? true : readOnly}
-        aria-disabled={disabled}
+        readOnly={ariaDisabled === 'true' || ariaDisabled === true || readOnly}
+        aria-disabled={ariaDisabled}
         ref={ref}
         {...rest}
       />
diff --git a/src/components/DatePicker/parts/DatePickerYear.tsx b/src/components/DatePicker/parts/DatePickerYear.tsx
index b651774..f9f5d08 100644
--- a/src/components/DatePicker/parts/DatePickerYear.tsx
+++ b/src/components/DatePicker/parts/DatePickerYear.tsx
@@ -3,7 +3,7 @@ import { type ComponentProps, forwardRef } from 'react';
 export type DatePickerYearProps = ComponentProps<'input'> & {};
 
 export const DatePickerYear = forwardRef<HTMLInputElement, DatePickerYearProps>((props, ref) => {
-  const { className, 'aria-disabled': disabled, readOnly, ...rest } = props;
+  const { className, 'aria-disabled': ariaDisabled, readOnly, ...rest } = props;
 
   return (
     <label className='relative z-0 inline-flex flex-row-reverse last:pe-4 [&:has([aria-disabled="true"])]:pointer-events-none'>
@@ -13,8 +13,8 @@ export const DatePickerYear = forwardRef<HTMLInputElement, DatePickerYearProps>(
         type='text'
         inputMode='numeric'
         pattern='\d+'
-        readOnly={disabled ? true : readOnly}
-        aria-disabled={disabled}
+        readOnly={ariaDisabled === 'true' || ariaDisabled === true || readOnly}
+        aria-disabled={ariaDisabled}
         ref={ref}
         {...rest}
       />

From 4b3de3861ae07a4d4d5bb68ff1adc1d099858b81 Mon Sep 17 00:00:00 2001
From: SHIMADA Takayuki <takayshim@digital.go.jp>
Date: Fri, 22 Aug 2025 13:07:32 +0900
Subject: [PATCH 4/5] =?UTF-8?q?feat(date-picker):=20SeparatedDatePicker?=
 =?UTF-8?q?=E3=82=92Readonly=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SeparatedDatePicker.stories.tsx           | 468 +++++++++++-------
 .../SeparatedDatePicker.tsx                   |  14 +-
 .../parts/SeparatedDatePickerDate.tsx         |   2 +-
 .../parts/SeparatedDatePickerMonth.tsx        |   2 +-
 .../parts/SeparatedDatePickerYear.tsx         |   2 +-
 5 files changed, 294 insertions(+), 194 deletions(-)

diff --git a/src/components/SeparatedDatePicker/SeparatedDatePicker.stories.tsx b/src/components/SeparatedDatePicker/SeparatedDatePicker.stories.tsx
index 23f1de9..76402b8 100644
--- a/src/components/SeparatedDatePicker/SeparatedDatePicker.stories.tsx
+++ b/src/components/SeparatedDatePicker/SeparatedDatePicker.stories.tsx
@@ -49,26 +49,50 @@ const meta = {
         type: { summary: "'lg' | 'md' | 'sm'" },
       },
     },
+    isError: {
+      description: 'エラー状態であるかどうかを指定します。',
+      control: { type: 'boolean' },
+      table: {
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' },
+      },
+    },
+    isDisabled: {
+      description: '無効状態であるかどうかを指定します。',
+      control: { type: 'boolean' },
+      table: {
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' },
+      },
+    },
+    isReadonly: {
+      description: '編集不可（読み取り専用）状態であるかどうかを指定します。',
+      control: { type: 'boolean' },
+      table: {
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' },
+      },
+    },
   },
   args: {
     size: 'lg',
+    isError: false,
+    isDisabled: false,
+    isReadonly: false,
+    children: ({ ...rest }) => (
+      <>
+        <SeparatedDatePickerYear {...rest} />
+        <SeparatedDatePickerMonth {...rest} />
+        <SeparatedDatePickerDate {...rest} />
+      </>
+    ),
   },
 } satisfies Meta;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Playground: Story = {
-  render({ ...args }) {
-    return (
-      <SeparatedDatePicker {...args}>
-        <SeparatedDatePickerYear />
-        <SeparatedDatePickerMonth />
-        <SeparatedDatePickerDate />
-      </SeparatedDatePicker>
-    );
-  },
-};
+export const Playground: Story = {};
 
 /** 項目ラベルやサポートテキスト等と一緒に表示した例 */
 export const WithFieldset: Story = {
@@ -80,9 +104,13 @@ export const WithFieldset: Story = {
         </Legend>
         <SupportText id='date-picker-2-support-text'>西暦、半角</SupportText>
         <SeparatedDatePicker {...args}>
-          <SeparatedDatePickerYear aria-describedby='date-picker-2-support-text' />
-          <SeparatedDatePickerMonth aria-describedby='date-picker-2-support-text' />
-          <SeparatedDatePickerDate aria-describedby='date-picker-2-support-text' />
+          {({ ...rest }) => (
+            <>
+              <SeparatedDatePickerYear aria-describedby='date-picker-2-support-text' {...rest} />
+              <SeparatedDatePickerMonth aria-describedby='date-picker-2-support-text' {...rest} />
+              <SeparatedDatePickerDate aria-describedby='date-picker-2-support-text' {...rest} />
+            </>
+          )}
         </SeparatedDatePicker>
       </fieldset>
     );
@@ -95,6 +123,9 @@ export const WithFieldset: Story = {
  * Separatedタイプは個別の入力フィールドがエラー状態になります。
  */
 export const Errored: Story = {
+  args: {
+    isError: true,
+  },
   render({ ...args }) {
     return (
       <fieldset className='flex flex-col gap-2 items-start'>
@@ -103,20 +134,24 @@ export const Errored: Story = {
         </Legend>
         <SupportText id='date-picker-4-support-text'>西暦、半角</SupportText>
         <SeparatedDatePicker {...args}>
-          <SeparatedDatePickerYear
-            aria-describedby='date-picker-4-support-text date-picker-2-error-text'
-            aria-invalid={true}
-          />
-          <SeparatedDatePickerMonth
-            defaultValue={10}
-            aria-describedby='date-picker-4-support-text'
-            aria-invalid={true}
-          />
-          <SeparatedDatePickerDate
-            defaultValue={28}
-            aria-describedby='date-picker-4-support-text'
-            aria-invalid={true}
-          />
+          {({ ...rest }) => (
+            <>
+              <SeparatedDatePickerYear
+                aria-describedby='date-picker-4-error-text date-picker-4-support-text'
+                {...rest}
+              />
+              <SeparatedDatePickerMonth
+                defaultValue={10}
+                aria-describedby='date-picker-4-support-text'
+                {...rest}
+              />
+              <SeparatedDatePickerDate
+                defaultValue={28}
+                aria-describedby='date-picker-4-support-text'
+                {...rest}
+              />
+            </>
+          )}
         </SeparatedDatePicker>
         <ErrorText id='date-picker-4-error-text'>＊正しい日付を入力してください。</ErrorText>
       </fieldset>
@@ -130,26 +165,68 @@ export const Errored: Story = {
  * 無効化するために`disabled`属性ではなく`aria-disabled`属性を使用します。
  */
 export const Disabled: Story = {
+  args: {
+    isDisabled: true,
+  },
   render({ ...args }) {
     return (
       <fieldset className='flex flex-col gap-2 items-start'>
         <Legend>
           日付<RequirementBadge isOptional>※任意</RequirementBadge>
         </Legend>
-        <SupportText id='date-picker-5-support-text'>西暦、半角</SupportText>
+        <SupportText id='date-picker-5-support-text'>
+          〜の理由により、この項目は編集できません。
+        </SupportText>
         <SeparatedDatePicker {...args}>
-          <SeparatedDatePickerYear
-            aria-disabled={true}
-            aria-describedby='date-picker-5-support-text'
-          />
-          <SeparatedDatePickerMonth
-            aria-disabled={true}
-            aria-describedby='date-picker-5-support-text'
-          />
-          <SeparatedDatePickerDate
-            aria-disabled={true}
-            aria-describedby='date-picker-5-support-text'
-          />
+          {({ ...rest }) => (
+            <>
+              <SeparatedDatePickerYear aria-describedby='date-picker-5-support-text' {...rest} />
+              <SeparatedDatePickerMonth aria-describedby='date-picker-5-support-text' {...rest} />
+              <SeparatedDatePickerDate aria-describedby='date-picker-5-support-text' {...rest} />
+            </>
+          )}
+        </SeparatedDatePicker>
+      </fieldset>
+    );
+  },
+};
+
+/**
+ * Readonly状態を表示した例
+ */
+export const Readonly: Story = {
+  args: {
+    isReadonly: true,
+  },
+  render({ ...args }) {
+    return (
+      <fieldset className='flex flex-col gap-2 items-start'>
+        <Legend>
+          日付<RequirementBadge isOptional>※任意</RequirementBadge>
+        </Legend>
+        <SupportText id='date-picker-6-support-text'>
+          〜の理由により、この項目は編集できません。
+        </SupportText>
+        <SeparatedDatePicker {...args}>
+          {({ ...rest }) => (
+            <>
+              <SeparatedDatePickerYear
+                value={2025}
+                aria-describedby='date-picker-6-support-text'
+                {...rest}
+              />
+              <SeparatedDatePickerMonth
+                value={10}
+                aria-describedby='date-picker-6-support-text'
+                {...rest}
+              />
+              <SeparatedDatePickerDate
+                value={28}
+                aria-describedby='date-picker-6-support-text'
+                {...rest}
+              />
+            </>
+          )}
         </SeparatedDatePicker>
       </fieldset>
     );
@@ -191,151 +268,158 @@ export const WithCalendar: Story = {
           };
 
           return (
-            <>
-              <SeparatedDatePicker size={size} {...args}>
-                <SeparatedDatePickerYear
-                  value={yearInput}
-                  onChange={(e) => setYearInput(e.target.value)}
-                  onBlur={updateCalendarDate}
-                />
-                <SeparatedDatePickerMonth
-                  value={monthInput}
-                  onChange={(e) => setMonthInput(e.target.value)}
-                  onBlur={updateCalendarDate}
-                />
-                <SeparatedDatePickerDate
-                  value={dayInput}
-                  onChange={(e) => setDayInput(e.target.value)}
-                  onBlur={updateCalendarDate}
-                />
-              </SeparatedDatePicker>
-              <SeparatedDatePickerCalendarButton
-                size={size}
-                aria-haspopup='dialog'
-                aria-expanded={state.isOpen}
-                onClick={() => state.setOpen(true)}
-              />
-              <Popover>
-                <Dialog
-                  className='border border-solid-gray-420 bg-white shadow-1 rounded-8 focus:outline-0'
-                  aria-label='カレンダー'
-                >
-                  <Calendar
-                    className='flex flex-col items-center w-max'
-                    onChange={handleCalendarChange}
-                  >
-                    {({ state: calendarState }) => (
-                      <>
-                        <div className='flex items-center gap-2 p-4'>
-                          <Select
-                            className='!h-11'
-                            blockSize='md'
-                            value={calendarState.focusedDate.year}
-                            onChange={(event) =>
-                              calendarState.setFocusedDate(
-                                calendarState.focusedDate.set({
-                                  year: Number(event.target.value),
-                                }),
-                              )
-                            }
-                            aria-label='年'
-                          >
-                            <option value={2018}>2018年(平成30年)</option>
-                            <option value={2019}>2019年(令和元年)</option>
-                            <option value={2020}>2020年(令和2年)</option>
-                            <option value={2021}>2021年(令和3年)</option>
-                            <option value={2022}>2022年(令和4年)</option>
-                            <option value={2023}>2023年(令和5年)</option>
-                            <option value={2024}>2024年(令和6年)</option>
-                            <option value={2025}>2025年(令和7年)</option>
-                            <option value={2026}>2026年(令和8年)</option>
-                            <option value={2027}>2027年(令和9年)</option>
-                            <option value={2028}>2028年(令和10年)</option>
-                            <option value={2029}>2029年(令和11年)</option>
-                            <option value={2030}>2030年(令和12年)</option>
-                          </Select>
-                          <div className='flex items-center'>
-                            <Button
-                              className='!min-w-0 !size-11'
-                              size='sm'
-                              variant='outline'
-                              onClick={() => calendarState.focusPreviousPage()}
-                            >
-                              <svg
-                                className='mx-auto'
-                                width='16'
-                                height='16'
-                                role='img'
-                                aria-label='前の月'
+            <SeparatedDatePicker size={size} {...args}>
+              {({ ...rest }) => (
+                <>
+                  <SeparatedDatePickerYear
+                    value={yearInput}
+                    onChange={(e) => setYearInput(e.target.value)}
+                    onBlur={updateCalendarDate}
+                    {...rest}
+                  />
+                  <SeparatedDatePickerMonth
+                    value={monthInput}
+                    onChange={(e) => setMonthInput(e.target.value)}
+                    onBlur={updateCalendarDate}
+                    {...rest}
+                  />
+                  <SeparatedDatePickerDate
+                    value={dayInput}
+                    onChange={(e) => setDayInput(e.target.value)}
+                    onBlur={updateCalendarDate}
+                    {...rest}
+                  />
+                  <SeparatedDatePickerCalendarButton
+                    size={size}
+                    aria-haspopup='dialog'
+                    aria-expanded={state.isOpen}
+                    onClick={() => state.setOpen(true)}
+                  />
+                  <Popover>
+                    <Dialog
+                      className='border border-solid-gray-420 bg-white shadow-1 rounded-8 focus:outline-0'
+                      aria-label='カレンダー'
+                    >
+                      <Calendar
+                        className='flex flex-col items-center w-max'
+                        onChange={handleCalendarChange}
+                      >
+                        {({ state: calendarState }) => (
+                          <>
+                            <div className='flex items-center gap-2 p-4'>
+                              <Select
+                                className='!h-11'
+                                blockSize='md'
+                                value={calendarState.focusedDate.year}
+                                onChange={(event) =>
+                                  calendarState.setFocusedDate(
+                                    calendarState.focusedDate.set({
+                                      year: Number(event.target.value),
+                                    }),
+                                  )
+                                }
+                                aria-label='年'
                               >
-                                <path
-                                  d='m5.27 8 5.33-5.33-.93-.94L3.4 8l6.27 6.27.93-.94L5.27 8Z'
-                                  fill='currentcolor'
-                                />
-                              </svg>
-                            </Button>
-                            <p className='w-14 text-center'>{calendarState.focusedDate.month}月</p>
-                            <Button
-                              className='!min-w-0 !size-11'
-                              slot='next'
-                              size='sm'
-                              variant='outline'
-                              onClick={() => calendarState.focusNextPage()}
-                            >
-                              <svg
-                                className='mx-auto'
-                                width='16'
-                                height='16'
-                                role='img'
-                                aria-label='次の月'
+                                <option value={2018}>2018年(平成30年)</option>
+                                <option value={2019}>2019年(令和元年)</option>
+                                <option value={2020}>2020年(令和2年)</option>
+                                <option value={2021}>2021年(令和3年)</option>
+                                <option value={2022}>2022年(令和4年)</option>
+                                <option value={2023}>2023年(令和5年)</option>
+                                <option value={2024}>2024年(令和6年)</option>
+                                <option value={2025}>2025年(令和7年)</option>
+                                <option value={2026}>2026年(令和8年)</option>
+                                <option value={2027}>2027年(令和9年)</option>
+                                <option value={2028}>2028年(令和10年)</option>
+                                <option value={2029}>2029年(令和11年)</option>
+                                <option value={2030}>2030年(令和12年)</option>
+                              </Select>
+                              <div className='flex items-center'>
+                                <Button
+                                  className='!min-w-0 !size-11'
+                                  size='sm'
+                                  variant='outline'
+                                  onClick={() => calendarState.focusPreviousPage()}
+                                >
+                                  <svg
+                                    className='mx-auto'
+                                    width='16'
+                                    height='16'
+                                    role='img'
+                                    aria-label='前の月'
+                                  >
+                                    <path
+                                      d='m5.27 8 5.33-5.33-.93-.94L3.4 8l6.27 6.27.93-.94L5.27 8Z'
+                                      fill='currentcolor'
+                                    />
+                                  </svg>
+                                </Button>
+                                <p className='w-14 text-center'>
+                                  {calendarState.focusedDate.month}月
+                                </p>
+                                <Button
+                                  className='!min-w-0 !size-11'
+                                  slot='next'
+                                  size='sm'
+                                  variant='outline'
+                                  onClick={() => calendarState.focusNextPage()}
+                                >
+                                  <svg
+                                    className='mx-auto'
+                                    width='16'
+                                    height='16'
+                                    role='img'
+                                    aria-label='次の月'
+                                  >
+                                    <path
+                                      d='m6 1.73-.93.94L10.4 8l-5.33 5.33.93.94L12.27 8 6 1.73Z'
+                                      fill='currentcolor'
+                                    />
+                                  </svg>
+                                </Button>
+                              </div>
+                            </div>
+                            <CalendarGrid className='mx-3 mb-2'>
+                              <CalendarGridHeader className='[&_th]:p-0'>
+                                {(day) => (
+                                  <CalendarHeaderCell className='size-12 text-center font-bold'>
+                                    {day}
+                                  </CalendarHeaderCell>
+                                )}
+                              </CalendarGridHeader>
+                              <CalendarGridBody className='[&_td]:p-0'>
+                                {(date) => (
+                                  <CalendarCell
+                                    className='m-1 flex items-center justify-center size-10 rounded-full underline-offset-[calc(3/16*1rem)] aria-disabled:hidden hover:bg-solid-gray-50 hover:underline focus:outline focus:outline-0 data-[focus-visible]:bg-yellow-300 data-[focus-visible]:outline data-[focus-visible]:outline-4 data-[focus-visible]:outline-black data-[focus-visible]:outline-offset-[calc(2/16*1rem)] data-[focus-visible]:ring-[calc(2/16*1rem)] data-[focus-visible]:ring-yellow-300 data-[selected]:!bg-blue-900 data-[selected]:border data-[selected]:border-transparent data-[selected]:text-white'
+                                    date={date}
+                                  />
+                                )}
+                              </CalendarGridBody>
+                            </CalendarGrid>
+                            <div className='flex self-stretch justify-between gap-4 p-4'>
+                              <Button
+                                variant='text'
+                                size='sm'
+                                onClick={() => calendarState.setValue(null)}
                               >
-                                <path
-                                  d='m6 1.73-.93.94L10.4 8l-5.33 5.33.93.94L12.27 8 6 1.73Z'
-                                  fill='currentcolor'
-                                />
-                              </svg>
-                            </Button>
-                          </div>
-                        </div>
-                        <CalendarGrid className='mx-3 mb-2'>
-                          <CalendarGridHeader className='[&_th]:p-0'>
-                            {(day) => (
-                              <CalendarHeaderCell className='size-12 text-center font-bold'>
-                                {day}
-                              </CalendarHeaderCell>
-                            )}
-                          </CalendarGridHeader>
-                          <CalendarGridBody className='[&_td]:p-0'>
-                            {(date) => (
-                              <CalendarCell
-                                className='m-1 flex items-center justify-center size-10 rounded-full underline-offset-[calc(3/16*1rem)] aria-disabled:hidden hover:bg-solid-gray-50 hover:underline focus:outline focus:outline-0 data-[focus-visible]:bg-yellow-300 data-[focus-visible]:outline data-[focus-visible]:outline-4 data-[focus-visible]:outline-black data-[focus-visible]:outline-offset-[calc(2/16*1rem)] data-[focus-visible]:ring-[calc(2/16*1rem)] data-[focus-visible]:ring-yellow-300 data-[selected]:!bg-blue-900 data-[selected]:border data-[selected]:border-transparent data-[selected]:text-white'
-                                date={date}
-                              />
-                            )}
-                          </CalendarGridBody>
-                        </CalendarGrid>
-                        <div className='flex self-stretch justify-between gap-4 p-4'>
-                          <Button
-                            variant='text'
-                            size='sm'
-                            onClick={() => calendarState.setValue(null)}
-                          >
-                            削除
-                          </Button>
-                          <Button
-                            variant='outline'
-                            size='sm'
-                            onClick={() => calendarState.selectDate(today(getLocalTimeZone()))}
-                          >
-                            今日
-                          </Button>
-                        </div>
-                      </>
-                    )}
-                  </Calendar>
-                </Dialog>
-              </Popover>
-            </>
+                                削除
+                              </Button>
+                              <Button
+                                variant='outline'
+                                size='sm'
+                                onClick={() => calendarState.selectDate(today(getLocalTimeZone()))}
+                              >
+                                今日
+                              </Button>
+                            </div>
+                          </>
+                        )}
+                      </Calendar>
+                    </Dialog>
+                  </Popover>
+                </>
+              )}
+            </SeparatedDatePicker>
           );
         }}
       </ReactAriaDatePicker>
@@ -349,13 +433,21 @@ export const Partial: Story = {
     return (
       <div className='flex flex-col gap-8'>
         <SeparatedDatePicker {...args}>
-          <SeparatedDatePickerYear />
-          <SeparatedDatePickerMonth />
+          {({ ...rest }) => (
+            <>
+              <SeparatedDatePickerYear {...rest} />
+              <SeparatedDatePickerMonth {...rest} />
+            </>
+          )}
         </SeparatedDatePicker>
 
         <SeparatedDatePicker {...args}>
-          <SeparatedDatePickerMonth />
-          <SeparatedDatePickerDate />
+          {({ ...rest }) => (
+            <>
+              <SeparatedDatePickerMonth {...rest} />
+              <SeparatedDatePickerDate {...rest} />
+            </>
+          )}
         </SeparatedDatePicker>
       </div>
     );
diff --git a/src/components/SeparatedDatePicker/SeparatedDatePicker.tsx b/src/components/SeparatedDatePicker/SeparatedDatePicker.tsx
index be08a1c..43507f0 100644
--- a/src/components/SeparatedDatePicker/SeparatedDatePicker.tsx
+++ b/src/components/SeparatedDatePicker/SeparatedDatePicker.tsx
@@ -2,12 +2,20 @@ import type { ComponentProps } from 'react';
 
 export type SeparatedDatePickerSize = 'lg' | 'md' | 'sm';
 
-export type SeparatedDatePickerProps = ComponentProps<'div'> & {
+export type SeparatedDatePickerProps = Omit<ComponentProps<'div'>, 'children'> & {
   size?: SeparatedDatePickerSize;
+  isError?: boolean;
+  isReadonly?: boolean;
+  isDisabled?: boolean;
+  children: (props: {
+    readOnly?: boolean;
+    'aria-disabled'?: boolean;
+    'aria-invalid'?: boolean;
+  }) => JSX.Element;
 };
 
 export const SeparatedDatePicker = (props: SeparatedDatePickerProps) => {
-  const { className, size = 'lg', children, ...rest } = props;
+  const { className, size = 'lg', isError, isReadonly, isDisabled, children, ...rest } = props;
 
   return (
     <div className='pt-3 inline-block'>
@@ -16,7 +24,7 @@ export const SeparatedDatePicker = (props: SeparatedDatePickerProps) => {
         data-size={size}
         {...rest}
       >
-        {children}
+        {children({ readOnly: isReadonly, 'aria-disabled': isDisabled, 'aria-invalid': isError })}
       </div>
     </div>
   );
diff --git a/src/components/SeparatedDatePicker/parts/SeparatedDatePickerDate.tsx b/src/components/SeparatedDatePicker/parts/SeparatedDatePickerDate.tsx
index d85ed5d..785f888 100644
--- a/src/components/SeparatedDatePicker/parts/SeparatedDatePickerDate.tsx
+++ b/src/components/SeparatedDatePicker/parts/SeparatedDatePickerDate.tsx
@@ -12,7 +12,7 @@ export const SeparatedDatePickerDate = forwardRef<HTMLInputElement, SeparatedDat
           日
         </span>
         <input
-          className={`h-full w-14 rounded-8 border border-solid-gray-600 bg-white text-center hover:border-solid-gray-900 focus:border-solid-gray-900 focus:outline focus:outline-4 focus:outline-offset-[calc(2/16*1rem)] focus:outline-black focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300 aria-disabled:bg-solid-gray-50 aria-disabled:text-solid-gray-420 aria-disabled:hover:border-solid-gray-600 aria-[invalid]:border-error-1 aria-[invalid=true]:hover:border-red-1000 forced-colors:aria-disabled:border-[GrayText] ${className ?? ''}`}
+          className={`h-full w-14 rounded-8 border border-solid-gray-600 bg-white text-center read-only:[&:not([aria-disabled="true"])]:border-dashed hover:border-solid-gray-900 hover:read-only:border-solid-gray-600 focus:border-solid-gray-900 focus:outline focus:outline-4 focus:outline-offset-[calc(2/16*1rem)] focus:outline-black focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300 aria-disabled:bg-solid-gray-50 aria-disabled:text-solid-gray-420 aria-disabled:hover:border-solid-gray-600 aria-[invalid=true]:border-error-1 aria-[invalid=true]:hover:border-red-1000 forced-colors:[&:read-write]:aria-disabled:border-[GrayText] ${className ?? ''}`}
           type='text'
           inputMode='numeric'
           pattern='\d+'
diff --git a/src/components/SeparatedDatePicker/parts/SeparatedDatePickerMonth.tsx b/src/components/SeparatedDatePicker/parts/SeparatedDatePickerMonth.tsx
index 1ab6560..143dbae 100644
--- a/src/components/SeparatedDatePicker/parts/SeparatedDatePickerMonth.tsx
+++ b/src/components/SeparatedDatePicker/parts/SeparatedDatePickerMonth.tsx
@@ -12,7 +12,7 @@ export const SeparatedDatePickerMonth = forwardRef<HTMLInputElement, SeparatedDa
           月
         </span>
         <input
-          className={`h-full w-14 rounded-8 border border-solid-gray-600 bg-white text-center hover:border-solid-gray-900 focus:border-solid-gray-900 focus:outline focus:outline-4 focus:outline-offset-[calc(2/16*1rem)] focus:outline-black focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300 aria-disabled:bg-solid-gray-50 aria-disabled:text-solid-gray-420 aria-disabled:hover:border-solid-gray-600 aria-[invalid]:border-error-1 aria-[invalid=true]:hover:border-red-1000 forced-colors:aria-disabled:border-[GrayText] ${className ?? ''}`}
+          className={`h-full w-14 rounded-8 border border-solid-gray-600 bg-white text-center read-only:[&:not([aria-disabled="true"])]:border-dashed hover:border-solid-gray-900 hover:read-only:border-solid-gray-600 focus:border-solid-gray-900 focus:outline focus:outline-4 focus:outline-offset-[calc(2/16*1rem)] focus:outline-black focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300 aria-disabled:bg-solid-gray-50 aria-disabled:text-solid-gray-420 aria-disabled:hover:border-solid-gray-600 aria-[invalid=true]:border-error-1 aria-[invalid=true]:hover:border-red-1000 forced-colors:[&:read-write]:aria-disabled:border-[GrayText] ${className ?? ''}`}
           type='text'
           inputMode='numeric'
           pattern='\d+'
diff --git a/src/components/SeparatedDatePicker/parts/SeparatedDatePickerYear.tsx b/src/components/SeparatedDatePicker/parts/SeparatedDatePickerYear.tsx
index 7bbea21..e125419 100644
--- a/src/components/SeparatedDatePicker/parts/SeparatedDatePickerYear.tsx
+++ b/src/components/SeparatedDatePicker/parts/SeparatedDatePickerYear.tsx
@@ -12,7 +12,7 @@ export const SeparatedDatePickerYear = forwardRef<HTMLInputElement, SeparatedDat
           年
         </span>
         <input
-          className={`h-full w-[calc(72/16*1rem)] rounded-8 border border-solid-gray-600 bg-white text-center hover:border-solid-gray-900 focus:border-solid-gray-900 focus:outline focus:outline-4 focus:outline-offset-[calc(2/16*1rem)] focus:outline-black focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300 aria-disabled:bg-solid-gray-50 aria-disabled:text-solid-gray-420 aria-disabled:hover:border-solid-gray-600 aria-[invalid]:border-error-1 aria-[invalid=true]:hover:border-red-1000 forced-colors:aria-disabled:border-[GrayText] ${className ?? ''}`}
+          className={`h-full w-[calc(72/16*1rem)] rounded-8 border border-solid-gray-600 bg-white text-center read-only:[&:not([aria-disabled="true"])]:border-dashed hover:border-solid-gray-900 hover:read-only:border-solid-gray-600 focus:border-solid-gray-900 focus:outline focus:outline-4 focus:outline-offset-[calc(2/16*1rem)] focus:outline-black focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300 aria-disabled:bg-solid-gray-50 aria-disabled:text-solid-gray-420 aria-disabled:hover:border-solid-gray-600 aria-[invalid=true]:border-error-1 aria-[invalid=true]:hover:border-red-1000 forced-colors:[&:read-write]:aria-disabled:border-[GrayText] ${className ?? ''}`}
           type='text'
           inputMode='numeric'
           pattern='\d+'

From c68afb7bf69007c271b0b131319a9fdc0ad495b9 Mon Sep 17 00:00:00 2001
From: SHIMADA Takayuki <takayshim@digital.go.jp>
Date: Tue, 26 Aug 2025 13:28:31 +0900
Subject: [PATCH 5/5] chore: npm audit fix

---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 13c0faf..5b55d81 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4737,9 +4737,9 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"