From 435fb63fa3c0977e20643d6f4aa2d9d473eb6a5a Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 23 May 2025 11:45:17 +0900
Subject: [PATCH 001/245] (Badge): update a classname

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

diff --git a/src/scripts/Badge.tsx b/src/scripts/Badge.tsx
index 18cc375ca..d753be912 100644
--- a/src/scripts/Badge.tsx
+++ b/src/scripts/Badge.tsx
@@ -13,7 +13,7 @@ export type BadgeProps = {
  *
  */
 export const Badge: FC<BadgeProps> = ({ type, label, ...props }) => {
-  const typeClassName = type ? `slds-theme_${type}` : null;
+  const typeClassName = type ? `slds-badge_${type}` : null;
   const badgeClassNames = classnames('slds-badge', typeClassName);
   return (
     <span className={badgeClassNames} {...props}>

From f71f5b7255f95b103fff3b6c43597c04c0644de4 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 23 May 2025 11:45:56 +0900
Subject: [PATCH 002/245] (Badge): remove `default` type that isn't used for a
 classname

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

diff --git a/src/scripts/Badge.tsx b/src/scripts/Badge.tsx
index d753be912..d827e397c 100644
--- a/src/scripts/Badge.tsx
+++ b/src/scripts/Badge.tsx
@@ -5,7 +5,7 @@ import classnames from 'classnames';
  *
  */
 export type BadgeProps = {
-  type?: 'default' | 'shade' | 'inverse';
+  type?: 'shade' | 'inverse';
   label?: string;
 } & HTMLAttributes<HTMLSpanElement>;
 

From bb994c2798e9911225fea238b2fcfea5939cd707 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 23 May 2025 11:46:52 +0900
Subject: [PATCH 003/245] (Badge): remove a `shade` type that doesn't exist as
 a color variation

---
 src/scripts/Badge.tsx     |  2 +-
 stories/Badge.stories.tsx | 15 ---------------
 2 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/src/scripts/Badge.tsx b/src/scripts/Badge.tsx
index d827e397c..dfb440274 100644
--- a/src/scripts/Badge.tsx
+++ b/src/scripts/Badge.tsx
@@ -5,7 +5,7 @@ import classnames from 'classnames';
  *
  */
 export type BadgeProps = {
-  type?: 'shade' | 'inverse';
+  type?: 'inverse';
   label?: string;
 } & HTMLAttributes<HTMLSpanElement>;
 
diff --git a/stories/Badge.stories.tsx b/stories/Badge.stories.tsx
index 6a4601c1e..2c33e4ef4 100644
--- a/stories/Badge.stories.tsx
+++ b/stories/Badge.stories.tsx
@@ -27,21 +27,6 @@ export const Default: ComponentStoryObj<typeof Badge> = {
   },
 };
 
-/**
- *
- */
-export const Shade: ComponentStoryObj<typeof Badge> = {
-  args: {
-    type: 'shade',
-    children: 'Badge Label',
-  },
-  parameters: {
-    docs: {
-      storyDescription: 'Badge with type: shade',
-    },
-  },
-};
-
 /**
  *
  */

From b789f2d4651f7c0814ade9eef694700bfec7ae46 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 23 May 2025 11:52:04 +0900
Subject: [PATCH 004/245] (Badge): add new types that haven't been available
 until now

---
 src/scripts/Badge.tsx     | 15 ++++++++--
 stories/Badge.stories.tsx | 60 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+), 3 deletions(-)

diff --git a/src/scripts/Badge.tsx b/src/scripts/Badge.tsx
index dfb440274..38320a692 100644
--- a/src/scripts/Badge.tsx
+++ b/src/scripts/Badge.tsx
@@ -5,7 +5,7 @@ import classnames from 'classnames';
  *
  */
 export type BadgeProps = {
-  type?: 'inverse';
+  type?: 'inverse' | 'lightest' | 'success' | 'warning' | 'error';
   label?: string;
 } & HTMLAttributes<HTMLSpanElement>;
 
@@ -13,8 +13,17 @@ export type BadgeProps = {
  *
  */
 export const Badge: FC<BadgeProps> = ({ type, label, ...props }) => {
-  const typeClassName = type ? `slds-badge_${type}` : null;
-  const badgeClassNames = classnames('slds-badge', typeClassName);
+  const typeClassName = /^(inverse|lightest)$/.test(type ?? '')
+    ? `slds-badge_${type}`
+    : null;
+  const themeClassName = /^(success|warning|error)$/.test(type ?? '')
+    ? `slds-theme_${type}`
+    : null;
+  const badgeClassNames = classnames(
+    'slds-badge',
+    typeClassName,
+    themeClassName
+  );
   return (
     <span className={badgeClassNames} {...props}>
       {label || props.children}
diff --git a/stories/Badge.stories.tsx b/stories/Badge.stories.tsx
index 2c33e4ef4..06a94ca90 100644
--- a/stories/Badge.stories.tsx
+++ b/stories/Badge.stories.tsx
@@ -41,3 +41,63 @@ export const Inverse: ComponentStoryObj<typeof Badge> = {
     },
   },
 };
+
+/**
+ *
+ */
+export const Lightest: ComponentStoryObj<typeof Badge> = {
+  args: {
+    type: 'lightest',
+    children: 'Badge Label',
+  },
+  parameters: {
+    docs: {
+      storyDescription: 'Badge with type: lightest',
+    },
+  },
+};
+
+/**
+ *
+ */
+export const Success: ComponentStoryObj<typeof Badge> = {
+  args: {
+    type: 'success',
+    children: 'Badge Label',
+  },
+  parameters: {
+    docs: {
+      storyDescription: 'Badge with type: success',
+    },
+  },
+};
+
+/**
+ *
+ */
+export const Warning: ComponentStoryObj<typeof Badge> = {
+  args: {
+    type: 'warning',
+    children: 'Badge Label',
+  },
+  parameters: {
+    docs: {
+      storyDescription: 'Badge with type: warning',
+    },
+  },
+};
+
+/**
+ *
+ */
+export const Error: ComponentStoryObj<typeof Badge> = {
+  args: {
+    type: 'error',
+    children: 'Badge Label',
+  },
+  parameters: {
+    docs: {
+      storyDescription: 'Badge with type: error',
+    },
+  },
+};

From a33572ef423d62a940a90705eae69ad078ab17e7 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 23 May 2025 11:26:40 +0900
Subject: [PATCH 005/245] (BreadCrumbs): remove `.slds-assistive-text`

---
 src/scripts/BreadCrumbs.tsx | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/scripts/BreadCrumbs.tsx b/src/scripts/BreadCrumbs.tsx
index 5c34600eb..2f8ed8dfd 100644
--- a/src/scripts/BreadCrumbs.tsx
+++ b/src/scripts/BreadCrumbs.tsx
@@ -33,15 +33,12 @@ export const Crumb: FC<CrumbProps> = ({
 /**
  *
  */
-export type BreadCrumbsProps = {
-  label?: string;
-} & HTMLAttributes<HTMLElement>;
+export type BreadCrumbsProps = HTMLAttributes<HTMLElement>;
 
 /**
  *
  */
 export const BreadCrumbs: FC<BreadCrumbsProps> = ({
-  label,
   className,
   children,
   ...props
@@ -53,14 +50,7 @@ export const BreadCrumbs: FC<BreadCrumbsProps> = ({
 
   return (
     <nav {...props} role='navigation'>
-      {label ? (
-        <p id='bread-crumb-label' className='slds-assistive-text'>
-          {label}
-        </p>
-      ) : null}
-      <ol className={oClassName} aria-labelledby='bread-crumb-label'>
-        {children}
-      </ol>
+      <ol className={oClassName}>{children}</ol>
     </nav>
   );
 };

From d9184634e7eea264767732a70b32aee8f59c2aae Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 23 May 2025 11:30:21 +0900
Subject: [PATCH 006/245] (BreadCrumbs): add an `aria-label` attribute

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

diff --git a/src/scripts/BreadCrumbs.tsx b/src/scripts/BreadCrumbs.tsx
index 2f8ed8dfd..ccaa40742 100644
--- a/src/scripts/BreadCrumbs.tsx
+++ b/src/scripts/BreadCrumbs.tsx
@@ -49,7 +49,7 @@ export const BreadCrumbs: FC<BreadCrumbsProps> = ({
   );
 
   return (
-    <nav {...props} role='navigation'>
+    <nav {...props} role='navigation' aria-label='Breadcrumbs'>
       <ol className={oClassName}>{children}</ol>
     </nav>
   );

From fb099a579ae91d45365c90fd18eafa57b242013e Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 23 May 2025 11:28:10 +0900
Subject: [PATCH 007/245] (BreadCrumbs): update classnames

---
 src/scripts/BreadCrumbs.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/scripts/BreadCrumbs.tsx b/src/scripts/BreadCrumbs.tsx
index ccaa40742..c00eba251 100644
--- a/src/scripts/BreadCrumbs.tsx
+++ b/src/scripts/BreadCrumbs.tsx
@@ -18,10 +18,7 @@ export const Crumb: FC<CrumbProps> = ({
   ...props
 }) => {
   const text = children;
-  const cClassName = classnames(
-    'slds-list__item slds-text-heading_label',
-    className
-  );
+  const cClassName = classnames('slds-breadcrumb__item', className);
 
   return (
     <li {...props} className={cClassName}>
@@ -44,7 +41,9 @@ export const BreadCrumbs: FC<BreadCrumbsProps> = ({
   ...props
 }) => {
   const oClassName = classnames(
-    'slds-breadcrumb slds-list_horizontal',
+    'slds-breadcrumb',
+    'slds-list_horizontal',
+    'slds-wrap',
     className
   );
 

From 1ee512a693f30206e1dc43f813b40aadf571a838 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 27 May 2025 17:46:31 +0900
Subject: [PATCH 008/245] (Spinner): remove unused `aria-hidden` attribute

---
 src/scripts/Spinner.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/scripts/Spinner.tsx b/src/scripts/Spinner.tsx
index 7953ee1ae..696a989da 100644
--- a/src/scripts/Spinner.tsx
+++ b/src/scripts/Spinner.tsx
@@ -30,12 +30,7 @@ export const Spinner: FC<SpinnerProps> = (props) => {
     type ? `slds-spinner_${type}` : null
   );
   const spinner = (
-    <div
-      className={spinnerClassNames}
-      aria-hidden='false'
-      role='alert'
-      {...rprops}
-    >
+    <div className={spinnerClassNames} role='alert' {...rprops}>
       <div className='slds-spinner__dot-a' />
       <div className='slds-spinner__dot-b' />
     </div>

From 9c8295beb67d96132b271a9cb48b85c238fb1d00 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 27 May 2025 17:47:04 +0900
Subject: [PATCH 009/245] (Spinner): change `role` attribute to `status`

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

diff --git a/src/scripts/Spinner.tsx b/src/scripts/Spinner.tsx
index 696a989da..e8eaa3033 100644
--- a/src/scripts/Spinner.tsx
+++ b/src/scripts/Spinner.tsx
@@ -30,7 +30,7 @@ export const Spinner: FC<SpinnerProps> = (props) => {
     type ? `slds-spinner_${type}` : null
   );
   const spinner = (
-    <div className={spinnerClassNames} role='alert' {...rprops}>
+    <div className={spinnerClassNames} role='status' {...rprops}>
       <div className='slds-spinner__dot-a' />
       <div className='slds-spinner__dot-b' />
     </div>

From 31697276ee37b404980635b27dbfe976c050a571 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 27 May 2025 17:47:48 +0900
Subject: [PATCH 010/245] (Spinner): add `slds-assistive-text`

---
 src/scripts/Spinner.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/scripts/Spinner.tsx b/src/scripts/Spinner.tsx
index e8eaa3033..b357e4d39 100644
--- a/src/scripts/Spinner.tsx
+++ b/src/scripts/Spinner.tsx
@@ -31,6 +31,7 @@ export const Spinner: FC<SpinnerProps> = (props) => {
   );
   const spinner = (
     <div className={spinnerClassNames} role='status' {...rprops}>
+      <span className='slds-assistive-text'>Loading</span>
       <div className='slds-spinner__dot-a' />
       <div className='slds-spinner__dot-b' />
     </div>

From d7449e2f3dfca6bdb9842eaad5b38a1eb528ad20 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 29 May 2025 07:50:20 +0900
Subject: [PATCH 011/245] (Text): restrict category only classname to `title`

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

diff --git a/src/scripts/Text.tsx b/src/scripts/Text.tsx
index 01231c6ee..d1a78c42d 100644
--- a/src/scripts/Text.tsx
+++ b/src/scripts/Text.tsx
@@ -29,7 +29,7 @@ export const Text: FC<TextProps> = ({
 }) => {
   const textClassNames = classnames(
     type && category ? `slds-text-${category}_${type}` : undefined,
-    category && !type ? `slds-text-${category}` : undefined,
+    category === 'title' && !type ? `slds-text-${category}` : undefined,
     align ? `slds-text-align_${align}` : undefined,
     {
       'slds-truncate': truncate,

From 742828415d65e44b7058d567f8caaca80d5c51ec Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 29 May 2025 07:50:56 +0900
Subject: [PATCH 012/245] (Text): remove `label` from the `type` props

becuase it's no longer listed as a classname within https://v1.lightningdesignsystem.com/utilities/text/#CSS-Class-Overview
---
 src/scripts/PageHeader.tsx     |  8 ++++----
 src/scripts/Text.tsx           |  2 +-
 stories/PageHeader.stories.tsx | 14 ++++++--------
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/scripts/PageHeader.tsx b/src/scripts/PageHeader.tsx
index 0d04e6fa1..54c51bf44 100644
--- a/src/scripts/PageHeader.tsx
+++ b/src/scripts/PageHeader.tsx
@@ -31,9 +31,10 @@ export type PageHeaderDetailLabelProps = TextProps;
 export const PageHeaderDetailLabel: FC<PageHeaderDetailLabelProps> = ({
   children,
   ...props
-}) =>
-  typeof children === 'string' ? (
+}) => {
+  return (
     <Text
+      tag={typeof children !== 'string' ? 'div' : undefined}
       category='title'
       truncate
       className='slds-m-bottom_xx-small'
@@ -41,9 +42,8 @@ export const PageHeaderDetailLabel: FC<PageHeaderDetailLabelProps> = ({
     >
       {children}
     </Text>
-  ) : (
-    <>{children}</>
   );
+};
 
 /**
  *
diff --git a/src/scripts/Text.tsx b/src/scripts/Text.tsx
index d1a78c42d..6886457ad 100644
--- a/src/scripts/Text.tsx
+++ b/src/scripts/Text.tsx
@@ -7,7 +7,7 @@ import classnames from 'classnames';
 export type TextProps = {
   tag?: keyof ReactHTML;
   category?: 'body' | 'heading' | 'title';
-  type?: 'small' | 'regular' | 'medium' | 'large' | 'caps' | 'label';
+  type?: 'small' | 'regular' | 'medium' | 'large' | 'caps';
   align?: 'left' | 'center' | 'right';
   truncate?: boolean;
   section?: boolean;
diff --git a/stories/PageHeader.stories.tsx b/stories/PageHeader.stories.tsx
index addaa3520..e753d79dd 100644
--- a/stories/PageHeader.stories.tsx
+++ b/stories/PageHeader.stories.tsx
@@ -97,14 +97,12 @@ export const RecordHome: ComponentStoryObj<typeof PageHeader> = {
         </PageHeaderDetailItem>
         <PageHeaderDetailItem>
           <PageHeaderDetailLabel>
-            <Text tag='div' category='heading' type='label'>
-              FIELD 2 (3)
-              <DropdownButton type='icon-bare' iconSize='small' icon='down'>
-                <MenuItem>Menu Item #1</MenuItem>
-                <MenuItem>Menu Item #2</MenuItem>
-                <MenuItem>Menu Item #3</MenuItem>
-              </DropdownButton>
-            </Text>
+            FIELD 2 (3)
+            <DropdownButton type='icon-bare' iconSize='small' icon='down'>
+              <MenuItem>Menu Item #1</MenuItem>
+              <MenuItem>Menu Item #2</MenuItem>
+              <MenuItem>Menu Item #3</MenuItem>
+            </DropdownButton>
           </PageHeaderDetailLabel>
           <PageHeaderDetailBody>
             <Text category='body' type='regular' title='Multiple Values'>

From e691ea732bf614bcc740771c81f0a8ca545d0cf0 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 29 May 2025 09:59:32 +0900
Subject: [PATCH 013/245] (Pill): restrict the container tag to `span`

see: https://v1.lightningdesignsystem.com/components/pills/#About-Pills
---
 src/scripts/Pill.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/scripts/Pill.tsx b/src/scripts/Pill.tsx
index 62d902482..5f41a03df 100644
--- a/src/scripts/Pill.tsx
+++ b/src/scripts/Pill.tsx
@@ -1,5 +1,4 @@
 import React, {
-  ReactHTML,
   HTMLAttributes,
   MouseEvent,
   KeyboardEvent,
@@ -18,7 +17,6 @@ export type PillProps = {
   label?: string;
   truncate?: boolean;
   disabled?: boolean;
-  tag?: keyof ReactHTML;
   icon?: {
     category?: IconCategory;
     icon?: string;
@@ -35,7 +33,6 @@ export const Pill: FC<PillProps> = (props) => {
     icon,
     disabled,
     label,
-    tag,
     truncate,
     className,
     pillRef,
@@ -57,15 +54,13 @@ export const Pill: FC<PillProps> = (props) => {
     }
   });
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const Tag: any = disabled ? 'span' : tag || 'a';
   const pillClassNames = classnames(
     'slds-pill',
     { 'slds-truncate': truncate },
     className
   );
   return (
-    <Tag
+    <span
       ref={pillRef}
       className={pillClassNames}
       onKeyDown={onKeyDown}
@@ -88,6 +83,6 @@ export const Pill: FC<PillProps> = (props) => {
         tabIndex={-1}
         onClick={onPillRemove}
       />
-    </Tag>
+    </span>
   );
 };

From 2d589cc4abee060abecb15d0cee18ce17ecab4ff Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 29 May 2025 10:01:33 +0900
Subject: [PATCH 014/245] (Pill): make link render depending on the `disabled`
 prop

see: https://v1.lightningdesignsystem.com/components/pills/#About-Pills
---
 src/scripts/Pill.tsx     | 13 ++++++++++++-
 stories/Pill.stories.tsx |  1 +
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/scripts/Pill.tsx b/src/scripts/Pill.tsx
index 5f41a03df..a8e61c04c 100644
--- a/src/scripts/Pill.tsx
+++ b/src/scripts/Pill.tsx
@@ -15,6 +15,7 @@ import { useEventCallback } from './hooks';
  */
 export type PillProps = {
   label?: string;
+  fullLabel?: string;
   truncate?: boolean;
   disabled?: boolean;
   icon?: {
@@ -33,6 +34,7 @@ export const Pill: FC<PillProps> = (props) => {
     icon,
     disabled,
     label,
+    fullLabel,
     truncate,
     className,
     pillRef,
@@ -56,6 +58,7 @@ export const Pill: FC<PillProps> = (props) => {
 
   const pillClassNames = classnames(
     'slds-pill',
+    { 'slds-pill_link': !disabled },
     { 'slds-truncate': truncate },
     className
   );
@@ -73,7 +76,15 @@ export const Pill: FC<PillProps> = (props) => {
           icon={icon.icon}
         />
       ) : undefined}
-      <span className='slds-pill__label'>{label}</span>
+      {disabled ? (
+        <span className='slds-pill__label' title={fullLabel}>
+          {label}
+        </span>
+      ) : (
+        <a className='slds-pill__action' title={fullLabel}>
+          <span className='slds-pill__label'>{label}</span>
+        </a>
+      )}
       <Button
         disabled={disabled}
         className='slds-pill__remove'
diff --git a/stories/Pill.stories.tsx b/stories/Pill.stories.tsx
index be55f1d9c..4be41f7be 100644
--- a/stories/Pill.stories.tsx
+++ b/stories/Pill.stories.tsx
@@ -22,6 +22,7 @@ export const ControlledWithKnobs: ComponentStoryObj<typeof Pill> = {
   name: 'Controlled with knobs',
   args: {
     label: 'Pill Label',
+    fullLabel: 'Full Label of the Pill',
   },
   parameters: {
     info: 'Pill controlled with knobs',

From 4425f47f8a62a871bfa0eddc5d5dae8cd1c94bed Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 29 May 2025 10:03:37 +0900
Subject: [PATCH 015/245] (Pill): add icon container instead of the
 `slds-pill__icon` classname

see: https://v1.lightningdesignsystem.com/components/pills/#About-Pills
---
 src/scripts/Pill.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/scripts/Pill.tsx b/src/scripts/Pill.tsx
index a8e61c04c..4563a4b00 100644
--- a/src/scripts/Pill.tsx
+++ b/src/scripts/Pill.tsx
@@ -70,11 +70,9 @@ export const Pill: FC<PillProps> = (props) => {
       onClick={onClick}
     >
       {icon && icon.icon ? (
-        <Icon
-          className='slds-pill__icon'
-          category={icon.category}
-          icon={icon.icon}
-        />
+        <span className='slds-pill__icon_container'>
+          <Icon category={icon.category} icon={icon.icon} />
+        </span>
       ) : undefined}
       {disabled ? (
         <span className='slds-pill__label' title={fullLabel}>

From 1bd65dba0332eb964c8a40d6a95efcf4bee3a903 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 29 May 2025 12:07:10 +0900
Subject: [PATCH 016/245] (Modal): move where to apply margin classnames

---
 stories/Modal.stories.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/stories/Modal.stories.tsx b/stories/Modal.stories.tsx
index 50d080d4d..e83bdfc47 100644
--- a/stories/Modal.stories.tsx
+++ b/stories/Modal.stories.tsx
@@ -52,7 +52,7 @@ const LOOKUP_DATA = [
 ];
 
 const modalContent = (
-  <div className='slds-p-around_small'>
+  <>
     <p>
       Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco
       deserunt aute id consequat veniam incididunt duis in sint irure nisi.
@@ -68,7 +68,7 @@ const modalContent = (
       Labore esse esse cupidatat amet velit id elit consequat minim ullamco
       mollit enim excepteur ea.
     </p>
-  </div>
+  </>
 );
 
 const footerButtons = (
@@ -116,6 +116,7 @@ export const ControlledWithKnobs: StoryObj<StoryProps> = {
     childProps: {
       header: {},
       content: {
+        className: 'slds-p-around_small',
         children: modalContent,
       },
       footer: {
@@ -147,6 +148,7 @@ export const Default: StoryObj<StoryProps> = {
         closeButton: true,
       },
       content: {
+        className: 'slds-p-around_small',
         children: modalContent,
       },
       footer: {
@@ -176,6 +178,7 @@ export const Large: StoryObj<StoryProps> = {
         closeButton: true,
       },
       content: {
+        className: 'slds-p-around_small',
         children: modalContent,
       },
       footer: {
@@ -205,6 +208,7 @@ export const WithTagline: StoryObj<StoryProps> = {
         closeButton: true,
       },
       content: {
+        className: 'slds-p-around_small',
         children: modalContent,
       },
       footer: {
@@ -233,6 +237,7 @@ export const FooterDirectional: StoryObj<StoryProps> = {
         closeButton: true,
       },
       content: {
+        className: 'slds-p-around_small',
         children: modalContent,
       },
       footer: {

From 8672c4900a3437adbe0b36498b2b8e2e831a471e Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 29 May 2025 12:08:34 +0900
Subject: [PATCH 017/245] (Modal): replace `h2` with `Text`

---
 src/scripts/Modal.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/scripts/Modal.tsx b/src/scripts/Modal.tsx
index 1324a79d2..f1a7cd75f 100644
--- a/src/scripts/Modal.tsx
+++ b/src/scripts/Modal.tsx
@@ -9,6 +9,7 @@ import React, {
 } from 'react';
 import classnames from 'classnames';
 import { Button } from './Button';
+import { Text } from './Text';
 import { useEventCallback } from './hooks';
 
 /**
@@ -49,7 +50,9 @@ export const ModalHeader: FC<ModalHeaderProps> = (props) => {
   const hdClassNames = classnames(className, 'slds-modal__header');
   return (
     <div className={hdClassNames} {...rprops}>
-      <h2 className='slds-text-heading_medium'>{title}</h2>
+      <Text tag='h2' category='heading' type='medium'>
+        {title}
+      </Text>
       {tagline ? <p className='slds-m-top_x-small'>{tagline}</p> : null}
       {closeButton ? (
         <Button

From 67571b9514aeff03c704150984900704d74bea31 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 29 May 2025 12:12:32 +0900
Subject: [PATCH 018/245] (Modal): add necessary attributes

---
 src/scripts/Modal.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/scripts/Modal.tsx b/src/scripts/Modal.tsx
index f1a7cd75f..65fa1741e 100644
--- a/src/scripts/Modal.tsx
+++ b/src/scripts/Modal.tsx
@@ -50,7 +50,7 @@ export const ModalHeader: FC<ModalHeaderProps> = (props) => {
   const hdClassNames = classnames(className, 'slds-modal__header');
   return (
     <div className={hdClassNames} {...rprops}>
-      <Text tag='h2' category='heading' type='medium'>
+      <Text tag='h2' category='heading' type='medium' tabIndex={-1}>
         {title}
       </Text>
       {tagline ? <p className='slds-m-top_x-small'>{tagline}</p> : null}
@@ -160,13 +160,15 @@ const Modal_: FC<ModalProps> = (props) => {
         className={modalClassNames}
         aria-hidden={!opened}
         role='dialog'
+        tabIndex={-1}
+        aria-modal='true'
         {...rprops}
       >
         <div className='slds-modal__container' style={containerStyle}>
           {children}
         </div>
       </div>
-      <div className={backdropClassNames} />
+      <div className={backdropClassNames} role='presentation' />
     </ModalHandlersContext.Provider>
   );
 };

From f3e4e1a53048270a305cc155b90ebeb72cccf68c Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 29 May 2025 12:12:58 +0900
Subject: [PATCH 019/245] (Modal): replace the container tag with `section`

---
 src/scripts/Modal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/scripts/Modal.tsx b/src/scripts/Modal.tsx
index 65fa1741e..ca16af5d5 100644
--- a/src/scripts/Modal.tsx
+++ b/src/scripts/Modal.tsx
@@ -156,7 +156,7 @@ const Modal_: FC<ModalProps> = (props) => {
   const handlers = useMemo(() => ({ onHide }), [onHide]);
   return (
     <ModalHandlersContext.Provider value={handlers}>
-      <div
+      <section
         className={modalClassNames}
         aria-hidden={!opened}
         role='dialog'
@@ -167,7 +167,7 @@ const Modal_: FC<ModalProps> = (props) => {
         <div className='slds-modal__container' style={containerStyle}>
           {children}
         </div>
-      </div>
+      </section>
       <div className={backdropClassNames} role='presentation' />
     </ModalHandlersContext.Provider>
   );

From c3a05048cfe2bbb11906d4a0a4e847c882a3bb91 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 29 May 2025 12:12:02 +0900
Subject: [PATCH 020/245] (Modal): move the close button

---
 src/scripts/Modal.tsx     | 68 +++++++++++++--------------------------
 stories/Modal.stories.tsx | 10 +++---
 2 files changed, 28 insertions(+), 50 deletions(-)

diff --git a/src/scripts/Modal.tsx b/src/scripts/Modal.tsx
index ca16af5d5..20631a3c2 100644
--- a/src/scripts/Modal.tsx
+++ b/src/scripts/Modal.tsx
@@ -1,24 +1,9 @@
-import React, {
-  HTMLAttributes,
-  CSSProperties,
-  FC,
-  createContext,
-  useContext,
-  useMemo,
-  ReactNode,
-} from 'react';
+import React, { HTMLAttributes, CSSProperties, FC, ReactNode } from 'react';
 import classnames from 'classnames';
 import { Button } from './Button';
 import { Text } from './Text';
 import { useEventCallback } from './hooks';
 
-/**
- *
- */
-const ModalHandlersContext = createContext<{
-  onHide?: () => void;
-}>({});
-
 /**
  *
  */
@@ -26,27 +11,13 @@ export type ModalHeaderProps = {
   className?: string;
   title?: string;
   tagline?: string;
-  closeButton?: boolean;
-  onClose?: () => void;
 };
 
 /**
  *
  */
 export const ModalHeader: FC<ModalHeaderProps> = (props) => {
-  const {
-    className,
-    title,
-    tagline,
-    closeButton,
-    onClose: onClose_,
-    ...rprops
-  } = props;
-  const { onHide: onHideModal } = useContext(ModalHandlersContext);
-  const onClose = useEventCallback(() => {
-    onClose_?.();
-    onHideModal?.();
-  });
+  const { className, title, tagline, ...rprops } = props;
   const hdClassNames = classnames(className, 'slds-modal__header');
   return (
     <div className={hdClassNames} {...rprops}>
@@ -54,17 +25,6 @@ export const ModalHeader: FC<ModalHeaderProps> = (props) => {
         {title}
       </Text>
       {tagline ? <p className='slds-m-top_x-small'>{tagline}</p> : null}
-      {closeButton ? (
-        <Button
-          type='icon-inverse'
-          className='slds-modal__close'
-          icon='close'
-          iconSize='large'
-          alt='Close'
-          inverse
-          onClick={onClose}
-        />
-      ) : null}
     </div>
   );
 };
@@ -131,6 +91,8 @@ export type ModalProps = {
   opened?: boolean;
   containerStyle?: CSSProperties;
   onHide?: () => void;
+  closeButton?: boolean;
+  onClose?: () => void;
 } & HTMLAttributes<HTMLDivElement>;
 
 /**
@@ -144,6 +106,8 @@ const Modal_: FC<ModalProps> = (props) => {
     size,
     containerStyle,
     onHide,
+    closeButton,
+    onClose: onClose_,
     ...rprops
   } = props;
   const modalClassNames = classnames(className, 'slds-modal', {
@@ -153,9 +117,12 @@ const Modal_: FC<ModalProps> = (props) => {
   const backdropClassNames = classnames(className, 'slds-backdrop', {
     'slds-backdrop_open': opened,
   });
-  const handlers = useMemo(() => ({ onHide }), [onHide]);
+  const onClose = useEventCallback(() => {
+    onClose_?.();
+    onHide?.();
+  });
   return (
-    <ModalHandlersContext.Provider value={handlers}>
+    <>
       <section
         className={modalClassNames}
         aria-hidden={!opened}
@@ -165,11 +132,22 @@ const Modal_: FC<ModalProps> = (props) => {
         {...rprops}
       >
         <div className='slds-modal__container' style={containerStyle}>
+          {closeButton ? (
+            <Button
+              type='icon-inverse'
+              className='slds-modal__close'
+              icon='close'
+              iconSize='large'
+              alt='Close'
+              inverse
+              onClick={onClose}
+            />
+          ) : null}
           {children}
         </div>
       </section>
       <div className={backdropClassNames} role='presentation' />
-    </ModalHandlersContext.Provider>
+    </>
   );
 };
 
diff --git a/stories/Modal.stories.tsx b/stories/Modal.stories.tsx
index e83bdfc47..ff9adb3bb 100644
--- a/stories/Modal.stories.tsx
+++ b/stories/Modal.stories.tsx
@@ -142,10 +142,10 @@ export const Default: StoryObj<StoryProps> = {
   name: 'Default',
   args: {
     opened: true,
+    closeButton: true,
     childProps: {
       header: {
         title: 'Default Modal',
-        closeButton: true,
       },
       content: {
         className: 'slds-p-around_small',
@@ -171,11 +171,11 @@ export const Large: StoryObj<StoryProps> = {
   name: 'Large',
   args: {
     opened: true,
+    closeButton: true,
     size: 'large',
     childProps: {
       header: {
         title: 'Large Size Modal',
-        closeButton: true,
       },
       content: {
         className: 'slds-p-around_small',
@@ -201,11 +201,11 @@ export const WithTagline: StoryObj<StoryProps> = {
   name: 'With tagline',
   args: {
     opened: true,
+    closeButton: true,
     childProps: {
       header: {
         title: 'Modal with tagline',
         tagline: 'This is a tagline',
-        closeButton: true,
       },
       content: {
         className: 'slds-p-around_small',
@@ -231,10 +231,10 @@ export const FooterDirectional: StoryObj<StoryProps> = {
   name: 'Footer directional',
   args: {
     opened: true,
+    closeButton: true,
     childProps: {
       header: {
         title: 'Modal with directional footer',
-        closeButton: true,
       },
       content: {
         className: 'slds-p-around_small',
@@ -261,10 +261,10 @@ export const FormElements: StoryObj<StoryProps> = {
   name: 'Form elements',
   args: {
     opened: true,
+    closeButton: true,
     childProps: {
       header: {
         title: 'Modal Form',
-        closeButton: true,
       },
       content: {
         className: 'slds-p-around_small',

From c2e2d78f0d910dbbe2a7694b95a4a083757750c3 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 29 May 2025 12:19:44 +0900
Subject: [PATCH 021/245] (Modal): stop using `icon-inverse` as a close button

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

diff --git a/src/scripts/Modal.tsx b/src/scripts/Modal.tsx
index 20631a3c2..1588124ba 100644
--- a/src/scripts/Modal.tsx
+++ b/src/scripts/Modal.tsx
@@ -134,7 +134,7 @@ const Modal_: FC<ModalProps> = (props) => {
         <div className='slds-modal__container' style={containerStyle}>
           {closeButton ? (
             <Button
-              type='icon-inverse'
+              type='icon'
               className='slds-modal__close'
               icon='close'
               iconSize='large'

From 3842c8125a62dd3f09d55a27df2330e2449d7588 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 29 May 2025 13:10:48 +0900
Subject: [PATCH 022/245] (MediaObject): replace undocumented `mediaCenter`
 with `isVerticalCenter`

---
 src/scripts/MediaObject.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/scripts/MediaObject.tsx b/src/scripts/MediaObject.tsx
index 25f9234e3..61e890e45 100644
--- a/src/scripts/MediaObject.tsx
+++ b/src/scripts/MediaObject.tsx
@@ -7,7 +7,7 @@ import classnames from 'classnames';
 export type MediaObjectProps = {
   figureLeft?: ReactNode;
   figureRight?: ReactNode;
-  figureCenter?: ReactNode;
+  isVerticalCenter?: boolean;
   children?: ReactNode;
 } & HTMLAttributes<HTMLDivElement>;
 
@@ -19,16 +19,17 @@ export const MediaObject: FC<MediaObjectProps> = (props) => {
     className,
     figureLeft,
     figureRight,
-    figureCenter,
+    isVerticalCenter,
     children,
     ...rprops
   } = props;
-  const mediaClassNames = classnames('slds-media', className);
+  const mediaClassNames = classnames(
+    'slds-media',
+    { 'slds-media_center': isVerticalCenter },
+    className
+  );
   return (
     <div className={mediaClassNames} {...rprops}>
-      {figureCenter ? (
-        <div className='slds-media__figure'>{figureCenter}</div>
-      ) : undefined}
       {figureLeft ? (
         <div className='slds-media__figure'>{figureLeft}</div>
       ) : undefined}

From 5b95ef673b4f6e532b94a0c4a54eb7fc2b9f9d98 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 29 May 2025 13:11:47 +0900
Subject: [PATCH 023/245] (MediaObject): add stories corresponding to the
 `isVerticalCenter` prop

---
 stories/MediaObject.stories.tsx | 46 +++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/stories/MediaObject.stories.tsx b/stories/MediaObject.stories.tsx
index ceccc7e34..f962f3145 100644
--- a/stories/MediaObject.stories.tsx
+++ b/stories/MediaObject.stories.tsx
@@ -50,6 +50,21 @@ export const Figure: ComponentStoryObj<typeof MediaObject> = {
   },
 };
 
+/**
+ *
+ */
+export const FigureCenter: ComponentStoryObj<typeof MediaObject> = {
+  name: 'Figure (Center)',
+  args: {
+    figureLeft: image1,
+    isVerticalCenter: true,
+    children: mediaContent,
+  },
+  parameters: {
+    info: 'Vertically centered Media Object with figure in left',
+  },
+};
+
 /**
  *
  */
@@ -64,6 +79,21 @@ export const FigureReverse: ComponentStoryObj<typeof MediaObject> = {
   },
 };
 
+/**
+ *
+ */
+export const FigureReverseCenter: ComponentStoryObj<typeof MediaObject> = {
+  name: 'Figure - Reverse (Center)',
+  args: {
+    figureRight: image2,
+    isVerticalCenter: true,
+    children: mediaContent,
+  },
+  parameters: {
+    info: 'Vertically centered Media Object with figure in right',
+  },
+};
+
 /**
  *
  */
@@ -78,3 +108,19 @@ export const FigureBothSide: ComponentStoryObj<typeof MediaObject> = {
     info: 'Media Object with figure in left and right',
   },
 };
+
+/**
+ *
+ */
+export const FigureBothSideCenter: ComponentStoryObj<typeof MediaObject> = {
+  name: 'Figure - Both Side (Center)',
+  args: {
+    figureLeft: image1,
+    figureRight: image2,
+    isVerticalCenter: true,
+    children: mediaContent,
+  },
+  parameters: {
+    info: 'Vertically centered Media Object with figure in left and right',
+  },
+};

From a9b31ed0970abf573aa1355543976829ce961e6d Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 29 May 2025 17:02:04 +0900
Subject: [PATCH 024/245] (Grid): replace the value of the vertical align prop
 from `medium` to `middle`

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

diff --git a/src/scripts/Grid.tsx b/src/scripts/Grid.tsx
index 3df5112be..feae36b53 100644
--- a/src/scripts/Grid.tsx
+++ b/src/scripts/Grid.tsx
@@ -67,7 +67,7 @@ function adjustCols(colNum: number, large?: boolean) {
  */
 export type ColProps = {
   padded?: boolean | 'medium' | 'large';
-  align?: 'top' | 'medium' | 'bottom';
+  align?: 'top' | 'middle' | 'bottom';
   noFlex?: boolean;
   order?: number;
   orderSmall?: number;

From 0c2bed11f89602e9b343df0e409d83d1388d45b4 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 30 May 2025 12:03:51 +0900
Subject: [PATCH 025/245] (FormElement): add `aria-hidden='true'` to the `abbr`
 element

---
 src/scripts/FormElement.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/scripts/FormElement.tsx b/src/scripts/FormElement.tsx
index 9294d22a9..e311c4757 100644
--- a/src/scripts/FormElement.tsx
+++ b/src/scripts/FormElement.tsx
@@ -101,7 +101,11 @@ export const FormElement = createFC<
               onClick={id ? undefined : onClickLabel}
             >
               {required ? (
-                <abbr className='slds-required' title='required'>
+                <abbr
+                  className='slds-required'
+                  title='required'
+                  aria-hidden='true'
+                >
                   *
                 </abbr>
               ) : undefined}

From d0174135e2bd6a122c3be70261dd86b4cecb1fb1 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 30 May 2025 12:05:33 +0900
Subject: [PATCH 026/245] (FormElement): apply `errorId`

---
 src/scripts/FormElement.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/scripts/FormElement.tsx b/src/scripts/FormElement.tsx
index e311c4757..4a11293a3 100644
--- a/src/scripts/FormElement.tsx
+++ b/src/scripts/FormElement.tsx
@@ -21,6 +21,7 @@ export type FormElementProps = {
   label?: string;
   required?: boolean;
   error?: boolean | string | { message: string };
+  errorId?: string;
   readOnly?: boolean;
   cols?: number;
   dropdown?: JSX.Element;
@@ -47,6 +48,7 @@ export const FormElement = createFC<
       label,
       required,
       error,
+      errorId,
       dropdown,
       children,
       readOnly,
@@ -119,7 +121,12 @@ export const FormElement = createFC<
             {children}
             {dropdown}
             {errorMessage ? (
-              <span className='slds-form-element__help'>{errorMessage}</span>
+              <span
+                className='slds-form-element__help'
+                id={error ? errorId : undefined}
+              >
+                {errorMessage}
+              </span>
             ) : undefined}
           </div>
         </div>

From 3b308d3566c595132b45e8ef346fdb2261a41ebe Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 30 May 2025 12:07:06 +0900
Subject: [PATCH 027/245] (FormElement): change a markup for `readOnly`

---
 src/scripts/FormElement.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/scripts/FormElement.tsx b/src/scripts/FormElement.tsx
index 4a11293a3..fdb88a0a1 100644
--- a/src/scripts/FormElement.tsx
+++ b/src/scripts/FormElement.tsx
@@ -68,13 +68,9 @@ export const FormElement = createFC<
         : undefined
       : undefined;
 
-    const formElementControlClassNames = classnames(
-      'slds-form-element__control',
-      { 'slds-has-divider_bottom': readOnly }
-    );
-
     const formElementClassNames = classnames(
       'slds-form-element',
+      readOnly ? 'slds-form-element_readonly' : null,
       error ? 'slds-has-error' : null,
       typeof totalCols === 'number'
         ? `slds-size_${cols}-of-${totalCols}`
@@ -93,11 +89,13 @@ export const FormElement = createFC<
 
     const emptyCtx = useMemo(() => ({}), []);
 
+    const LabelTag = readOnly ? 'span' : 'label';
+
     return (
       <FieldSetColumnContext.Provider value={emptyCtx}>
         <div ref={elementRef} className={formElementClassNames}>
           {label ? (
-            <label
+            <LabelTag
               className='slds-form-element__label'
               htmlFor={id}
               onClick={id ? undefined : onClickLabel}
@@ -112,13 +110,17 @@ export const FormElement = createFC<
                 </abbr>
               ) : undefined}
               {label}
-            </label>
+            </LabelTag>
           ) : null}
           {tooltip ? (
             <TooltipContent icon={tooltipIcon}>{tooltip}</TooltipContent>
           ) : null}
-          <div ref={controlElRef} className={formElementControlClassNames}>
-            {children}
+          <div ref={controlElRef} className='slds-form-element__control'>
+            {readOnly ? (
+              <div className='slds-form-element__static'>{children}</div>
+            ) : (
+              children
+            )}
             {dropdown}
             {errorMessage ? (
               <span

From 58f9bd4609793630561d15e7dcea51993f37f6be Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 30 May 2025 12:08:19 +0900
Subject: [PATCH 028/245] (FormElement): apply `id` and `htmlFor`
 straightforwardly

---
 src/scripts/FormElement.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/scripts/FormElement.tsx b/src/scripts/FormElement.tsx
index fdb88a0a1..1ff850bf9 100644
--- a/src/scripts/FormElement.tsx
+++ b/src/scripts/FormElement.tsx
@@ -18,6 +18,7 @@ import { TooltipContent } from './TooltipContent';
 export type FormElementProps = {
   id?: string;
   className?: string;
+  htmlFor?: string;
   label?: string;
   required?: boolean;
   error?: boolean | string | { message: string };
@@ -43,6 +44,7 @@ export const FormElement = createFC<
     const {
       id,
       className,
+      htmlFor,
       cols = 1,
       elementRef,
       label,
@@ -96,8 +98,9 @@ export const FormElement = createFC<
         <div ref={elementRef} className={formElementClassNames}>
           {label ? (
             <LabelTag
+              id={id}
               className='slds-form-element__label'
-              htmlFor={id}
+              htmlFor={htmlFor}
               onClick={id ? undefined : onClickLabel}
             >
               {required ? (

From 5e1010698e138eeccd56e2a49c0e6f8f69a53cad Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 30 May 2025 12:01:56 +0900
Subject: [PATCH 029/245] (FieldSet): update classnames

see: https://v1.lightningdesignsystem.com/components/form-element/#Compound
---
 src/scripts/FieldSet.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/scripts/FieldSet.tsx b/src/scripts/FieldSet.tsx
index 9e41d0ef0..6c6161e3c 100644
--- a/src/scripts/FieldSet.tsx
+++ b/src/scripts/FieldSet.tsx
@@ -75,13 +75,19 @@ export const FieldSet = createFC<
   { isFormElement: boolean; Row: typeof FieldSetRow }
 >(
   ({ className, label, children, ...props }) => {
-    const fsClassNames = classnames(className, 'slds-form_compound');
+    const fsClassNames = classnames(
+      className,
+      'slds-form-element',
+      'slds-form-element_compound'
+    );
+    const legendClassNames = classnames(
+      'slds-form-element__legend',
+      'slds-form-element__label'
+    );
     return (
       <fieldset className={fsClassNames} {...props}>
-        {label ? (
-          <legend className='slds-form-element__label'>{label}</legend>
-        ) : null}
-        <div className='form-element__group'>{children}</div>
+        {label ? <legend className={legendClassNames}>{label}</legend> : null}
+        <div className='slds-form-element__control'>{children}</div>
       </fieldset>
     );
   },

From ad1b5e76c6c42a39a66f7d08a99daa0d27ed7d14 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 30 May 2025 12:17:45 +0900
Subject: [PATCH 030/245] Update src/scripts/FormElement.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/scripts/FormElement.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scripts/FormElement.tsx b/src/scripts/FormElement.tsx
index 1ff850bf9..ea330b814 100644
--- a/src/scripts/FormElement.tsx
+++ b/src/scripts/FormElement.tsx
@@ -100,7 +100,7 @@ export const FormElement = createFC<
             <LabelTag
               id={id}
               className='slds-form-element__label'
-              htmlFor={htmlFor}
+              {...(LabelTag === 'label' ? { htmlFor } : {})}
               onClick={id ? undefined : onClickLabel}
             >
               {required ? (

From 4f2d7cd13a3d58808a190a6e7ef5c144ce5abc52 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Mon, 2 Jun 2025 16:02:15 +0900
Subject: [PATCH 031/245] (Tree): improve a11y

---
 src/scripts/Tree.tsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/scripts/Tree.tsx b/src/scripts/Tree.tsx
index 8545cde66..e80a20fa7 100644
--- a/src/scripts/Tree.tsx
+++ b/src/scripts/Tree.tsx
@@ -1,4 +1,10 @@
-import React, { HTMLAttributes, createContext, FC, useMemo } from 'react';
+import React, {
+  useId,
+  HTMLAttributes,
+  createContext,
+  FC,
+  useMemo,
+} from 'react';
 import classnames from 'classnames';
 import { TreeNodeProps } from './TreeNode';
 
@@ -47,10 +53,19 @@ export const Tree: FC<TreeProps> = (props) => {
     }),
     [toggleOnNodeClick, onNodeClick, onNodeLabelClick, onNodeToggle]
   );
+  const id = useId();
   return (
-    <div className={treeClassNames} role='application' {...rprops}>
-      {label ? <h4 className='slds-text-heading_label'>{label}</h4> : null}
-      <ul className='slds-tree' role='tree'>
+    <div className={treeClassNames} {...rprops}>
+      {label ? (
+        <h4 className='slds-text-heading_label' id={id}>
+          {label}
+        </h4>
+      ) : null}
+      <ul
+        aria-labelledby={label ? id : undefined}
+        className='slds-tree'
+        role='tree'
+      >
         <TreeContext.Provider value={ctx}>{children}</TreeContext.Provider>
       </ul>
     </div>

From 41f517c6940a1cc7915b70fd8796992d9a1bf8a0 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Mon, 2 Jun 2025 16:01:06 +0900
Subject: [PATCH 032/245] (Tree): update classnames

---
 src/scripts/Tree.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/scripts/Tree.tsx b/src/scripts/Tree.tsx
index e80a20fa7..5d05e5f6b 100644
--- a/src/scripts/Tree.tsx
+++ b/src/scripts/Tree.tsx
@@ -43,7 +43,7 @@ export const Tree: FC<TreeProps> = (props) => {
     onNodeToggle,
     ...rprops
   } = props;
-  const treeClassNames = classnames(className, 'slds-tree-container');
+  const treeClassNames = classnames(className, 'slds-tree_container');
   const ctx = useMemo(
     () => ({
       toggleOnNodeClick,
@@ -57,7 +57,7 @@ export const Tree: FC<TreeProps> = (props) => {
   return (
     <div className={treeClassNames} {...rprops}>
       {label ? (
-        <h4 className='slds-text-heading_label' id={id}>
+        <h4 className='slds-tree__group-header' id={id}>
           {label}
         </h4>
       ) : null}

From aa717e459252f008f3e8261a994def74e2e3c1b4 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Mon, 2 Jun 2025 16:04:31 +0900
Subject: [PATCH 033/245] (TreeNode): improve a11y

---
 src/scripts/TreeNode.tsx | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index 4002534e5..179063c31 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -28,6 +28,7 @@ export type TreeNodeProps = {
   leaf?: boolean;
   loading?: boolean;
   level?: number;
+  disabled?: boolean;
   children?: ReactNode;
   onClick?: (e: React.MouseEvent) => void;
   onLabelClick?: (e: React.MouseEvent) => void;
@@ -85,10 +86,13 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
         <Button
           className='slds-m-right_small'
           aria-controls=''
+          aria-hidden='true'
+          tabIndex={-1}
           type='icon-bare'
           icon={icon}
           iconSize='small'
           onClick={onToggle}
+          title={typeof label === 'string' ? `Expand ${label}` : undefined}
           // Prevent focus loss during loading by keeping the toggle button in the DOM with opacity set to 0.
           style={loading ? { opacity: 0, pointerEvents: 'none' } : undefined}
         />
@@ -96,7 +100,6 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
       <a
         className='slds-truncate'
         tabIndex={-1}
-        role='presentation'
         onClick={onLabelClick}
       >
         {ItemRender ? <ItemRender {...props} /> : label}
@@ -114,6 +117,8 @@ export const TreeNode: FC<TreeNodeProps> = (props) => {
     defaultOpened,
     opened: opened_,
     leaf,
+    selected,
+    disabled,
     children,
     onClick: onClick_,
     onToggle: onToggle_,
@@ -153,15 +158,31 @@ export const TreeNode: FC<TreeNodeProps> = (props) => {
     'slds-show': opened,
     'slds-hide': !opened,
   });
+  const labelText =
+    typeof rprops.label === 'string' ? rprops.label : 'Tree Branch';
+  const ariaLabel = !leaf ? labelText : undefined;
   return (
     <li
       role='treeitem'
       aria-level={level}
-      {...(leaf ? {} : { 'aria-expanded': opened })}
+      aria-expanded={!leaf ? opened : undefined}
+      aria-label={ariaLabel}
+      aria-selected={selected || undefined}
+      aria-disabled={disabled || undefined}
     >
       <TreeNodeItem
         {...rprops}
-        {...{ leaf, opened, level, children, onClick, onLabelClick, onToggle }}
+        {...{
+          leaf,
+          opened,
+          level,
+          selected,
+          disabled,
+          children,
+          onClick,
+          onLabelClick,
+          onToggle,
+        }}
       />
       {!leaf ? (
         <ul className={grpClassNames} role='group'>

From 4d3af82f713de933674a04e7cac58833140b24fb Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Mon, 2 Jun 2025 16:10:18 +0900
Subject: [PATCH 034/245] (TreeNode): update markups

---
 src/scripts/TreeNode.tsx | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index 179063c31..a57289bcb 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -84,26 +84,37 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
       )}
       {!leaf ? (
         <Button
-          className='slds-m-right_small'
+          className='slds-m-right_x-small'
           aria-controls=''
           aria-hidden='true'
           tabIndex={-1}
           type='icon-bare'
           icon={icon}
-          iconSize='small'
+          iconSize='x-small'
           onClick={onToggle}
           title={typeof label === 'string' ? `Expand ${label}` : undefined}
           // Prevent focus loss during loading by keeping the toggle button in the DOM with opacity set to 0.
           style={loading ? { opacity: 0, pointerEvents: 'none' } : undefined}
         />
       ) : null}
-      <a
-        className='slds-truncate'
-        tabIndex={-1}
-        onClick={onLabelClick}
-      >
-        {ItemRender ? <ItemRender {...props} /> : label}
-      </a>
+      <span className='slds-has-flexi-truncate'>
+        {onLabelClick ? (
+          <a
+            className='slds-tree__item-label slds-truncate'
+            tabIndex={-1}
+            onClick={onLabelClick}
+          >
+            {ItemRender ? <ItemRender {...props} /> : label}
+          </a>
+        ) : (
+          <span
+            className='slds-tree__item-label slds-truncate'
+            title={typeof label === 'string' ? label : undefined}
+          >
+            {ItemRender ? <ItemRender {...props} /> : label}
+          </span>
+        )}
+      </span>
       {leaf ? children : null}
     </div>
   );

From 3f270edd41fe51d17e21a4543861d3b6387fb701 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Mon, 2 Jun 2025 16:29:18 +0900
Subject: [PATCH 035/245] (DropdownMenu): update markups

---
 src/scripts/DropdownMenu.tsx | 66 ++++++++++++++++++++----------------
 1 file changed, 37 insertions(+), 29 deletions(-)

diff --git a/src/scripts/DropdownMenu.tsx b/src/scripts/DropdownMenu.tsx
index cc524e969..6f3bdaa54 100644
--- a/src/scripts/DropdownMenu.tsx
+++ b/src/scripts/DropdownMenu.tsx
@@ -44,13 +44,14 @@ export const DropdownMenuHeader: FC<DropdownMenuHeaderProps> = ({
 }) => {
   const menuHeaderClass = classnames(
     'slds-dropdown__header',
+    'slds-truncate',
     divider ? `slds-has-divider_${divider}-space` : undefined,
     className
   );
   return (
-    <div className={menuHeaderClass}>
-      <span className='slds-text-heading_label'>{children}</span>
-    </div>
+    <li className={menuHeaderClass}>
+      <span>{children}</span>
+    </li>
   );
 };
 
@@ -221,35 +222,42 @@ export const DropdownMenuItem: FC<DropdownMenuItemProps> = (props) => {
   const menuItemClass = classnames(
     'slds-dropdown__item',
     { 'slds-is-selected': selected },
-    divider ? `slds-has-divider_${divider}-space` : undefined,
     submenu ? 'slds-has-submenu' : undefined,
     className
   );
   return (
-    <li className={menuItemClass}>
-      <a
-        role='menuitem'
-        {...rprops}
-        className='slds-truncate react-slds-menuitem'
-        aria-disabled={disabled}
-        aria-haspopup={submenu != null}
-        aria-expanded={submenuExpanded}
-        tabIndex={disabled ? undefined : tabIndex}
-        onClick={disabled ? undefined : onMenuItemClick}
-        onBlur={disabled ? undefined : onMenuItemBlur}
-        onFocus={disabled ? undefined : onMenuItemFocus}
-        onKeyDown={disabled ? undefined : onKeyDown}
-      >
-        <p className='slds-truncate'>
-          {icon ? <Icon icon={icon} size='x-small' align='left' /> : null}
-          {label || children}
-        </p>
-        {iconRight || submenu ? (
-          <Icon icon={iconRight ?? 'right'} size='x-small' align='right' />
-        ) : null}
-      </a>
-      {submenu && submenuExpanded ? submenu : undefined}
-    </li>
+    <>
+      {divider === 'top' ? (
+        <li className={`slds-has-divider_${divider}-space`} role='separator' />
+      ) : null}
+      <li className={menuItemClass}>
+        <a
+          role='menuitem'
+          {...rprops}
+          className='react-slds-menuitem'
+          aria-disabled={disabled}
+          aria-haspopup={submenu != null}
+          aria-expanded={submenuExpanded}
+          tabIndex={disabled ? undefined : tabIndex}
+          onClick={disabled ? undefined : onMenuItemClick}
+          onBlur={disabled ? undefined : onMenuItemBlur}
+          onFocus={disabled ? undefined : onMenuItemFocus}
+          onKeyDown={disabled ? undefined : onKeyDown}
+        >
+          <span className='slds-truncate'>
+            {icon ? <Icon icon={icon} size='x-small' align='left' /> : null}
+            {label || children}
+          </span>
+          {iconRight || submenu ? (
+            <Icon icon={iconRight ?? 'right'} size='x-small' align='right' />
+          ) : null}
+        </a>
+        {submenu && submenuExpanded ? submenu : undefined}
+      </li>
+      {divider === 'bottom' ? (
+        <li className={`slds-has-divider_${divider}-space`} role='separator' />
+      ) : null}
+    </>
   );
 };
 
@@ -389,8 +397,8 @@ const DropdownMenuInner: FC<DropdownMenuProps & AutoAlignInjectedProps> = (
       onBlur={onBlur}
       {...rprops}
     >
-      {header ? <MenuHeader>{header}</MenuHeader> : null}
       <ul className='slds-dropdown__list' role='menu'>
+        {header ? <MenuHeader>{header}</MenuHeader> : null}
         <DropdownMenuHandlerContext.Provider value={handlers}>
           <OpenSubmenuContext.Provider
             value={{ openSubmenuKeys, handleSubmenuOpen }}

From 7416d403d8aea8b29e762d1eb986d3494b293722 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Mon, 2 Jun 2025 16:30:32 +0900
Subject: [PATCH 036/245] (DropdownMenu): improve a11y

---
 src/scripts/DropdownMenu.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/scripts/DropdownMenu.tsx b/src/scripts/DropdownMenu.tsx
index 6f3bdaa54..6dafb0d11 100644
--- a/src/scripts/DropdownMenu.tsx
+++ b/src/scripts/DropdownMenu.tsx
@@ -49,7 +49,7 @@ export const DropdownMenuHeader: FC<DropdownMenuHeaderProps> = ({
     className
   );
   return (
-    <li className={menuHeaderClass}>
+    <li className={menuHeaderClass} role='presentation'>
       <span>{children}</span>
     </li>
   );
@@ -230,7 +230,7 @@ export const DropdownMenuItem: FC<DropdownMenuItemProps> = (props) => {
       {divider === 'top' ? (
         <li className={`slds-has-divider_${divider}-space`} role='separator' />
       ) : null}
-      <li className={menuItemClass}>
+      <li className={menuItemClass} role='presentation'>
         <a
           role='menuitem'
           {...rprops}
@@ -244,7 +244,10 @@ export const DropdownMenuItem: FC<DropdownMenuItemProps> = (props) => {
           onFocus={disabled ? undefined : onMenuItemFocus}
           onKeyDown={disabled ? undefined : onKeyDown}
         >
-          <span className='slds-truncate'>
+          <span
+            className='slds-truncate'
+            title={typeof label === 'string' ? label : undefined}
+          >
             {icon ? <Icon icon={icon} size='x-small' align='left' /> : null}
             {label || children}
           </span>
@@ -397,7 +400,7 @@ const DropdownMenuInner: FC<DropdownMenuProps & AutoAlignInjectedProps> = (
       onBlur={onBlur}
       {...rprops}
     >
-      <ul className='slds-dropdown__list' role='menu'>
+      <ul className='slds-dropdown__list' role='menu' aria-label={header}>
         {header ? <MenuHeader>{header}</MenuHeader> : null}
         <DropdownMenuHandlerContext.Provider value={handlers}>
           <OpenSubmenuContext.Provider

From 08e3764ea172da7eb3d6f558307c5476877dd9fc Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Mon, 2 Jun 2025 16:31:41 +0900
Subject: [PATCH 037/245] (DropdownButton): update classnames

---
 src/scripts/DropdownButton.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/scripts/DropdownButton.tsx b/src/scripts/DropdownButton.tsx
index ab744d771..d9f305b64 100644
--- a/src/scripts/DropdownButton.tsx
+++ b/src/scripts/DropdownButton.tsx
@@ -207,10 +207,16 @@ export const DropdownButton = (props: DropdownButtonProps) => {
     />
   );
 
-  const dropdownClassNames = classnames(className, 'slds-dropdown-trigger', {
-    'slds-button-space-left': !grouped,
-    'react-slds-dropdown-opened': opened,
-  });
+  const dropdownClassNames = classnames(
+    className,
+    'slds-dropdown-trigger',
+    'slds-dropdown-trigger_click',
+    {
+      'slds-button-space-left': !grouped,
+      'slds-is-open': opened,
+      'react-slds-dropdown-opened': opened,
+    }
+  );
   const noneStyle = { display: 'none' };
 
   return (

From f1baf01f298df48c36c946decc09bbd7bc2ada92 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Mon, 2 Jun 2025 16:32:00 +0900
Subject: [PATCH 038/245] (DropdownButton): improve a11y

---
 src/scripts/DropdownButton.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/scripts/DropdownButton.tsx b/src/scripts/DropdownButton.tsx
index d9f305b64..541a0b213 100644
--- a/src/scripts/DropdownButton.tsx
+++ b/src/scripts/DropdownButton.tsx
@@ -199,7 +199,8 @@ export const DropdownButton = (props: DropdownButtonProps) => {
         iconMore,
       }}
       {...rprops}
-      aria-haspopup
+      aria-haspopup={true}
+      aria-expanded={opened}
       buttonRef={buttonRef}
       onClick={onTriggerClick}
       onKeyDown={onKeyDown}

From d418f1b21782e565638aa7a7f89ca646545085ab Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 3 Jun 2025 10:29:21 +0900
Subject: [PATCH 039/245] (Popover): update markups

---
 src/scripts/Popover.tsx     | 8 ++++----
 stories/Popover.stories.tsx | 8 +++++++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/scripts/Popover.tsx b/src/scripts/Popover.tsx
index d5aa83a72..bce24f915 100644
--- a/src/scripts/Popover.tsx
+++ b/src/scripts/Popover.tsx
@@ -70,13 +70,13 @@ export type PopoverProps = {
   bodyStyle?: CSSProperties;
   offsetX?: number;
   offsetY?: number;
-} & HTMLAttributes<HTMLDivElement>;
+} & HTMLAttributes<HTMLElement>;
 
 /**
  *
  */
 export const PopoverInner = forwardRef<
-  HTMLDivElement,
+  HTMLElement,
   PopoverProps & AutoAlignInjectedProps
 >((props, ref) => {
   const {
@@ -118,7 +118,7 @@ export const PopoverInner = forwardRef<
         : undefined,
   };
   return (
-    <div
+    <section
       ref={ref}
       className={popoverClassNames}
       role={tooltip ? 'tooltip' : 'dialog'}
@@ -126,7 +126,7 @@ export const PopoverInner = forwardRef<
       {...rprops}
     >
       <PopoverBody style={bodyStyle}>{children}</PopoverBody>
-    </div>
+    </section>
   );
 });
 
diff --git a/stories/Popover.stories.tsx b/stories/Popover.stories.tsx
index 3b9596ca0..070f41f42 100644
--- a/stories/Popover.stories.tsx
+++ b/stories/Popover.stories.tsx
@@ -5,6 +5,7 @@ import {
   ComponentStoryObj,
   DecoratorFn,
 } from '@storybook/react';
+import classNames from 'classnames';
 
 /**
  *
@@ -20,7 +21,12 @@ const paddingDecorator: DecoratorFn = (story) => (
       padding: '100px 350px',
     }}
   >
-    <div className='slds-dropdown-trigger'>
+    <div
+      className={classNames(
+        'slds-dropdown-trigger',
+        'slds-dropdown-trigger_click'
+      )}
+    >
       <Button type='icon' icon='question' />
       {story()}
     </div>

From bbdd4031d268754afd748141135e8feeb7d8bf5d Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 3 Jun 2025 10:29:57 +0900
Subject: [PATCH 040/245] (Popover): improve a11y

---
 src/scripts/Popover.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/scripts/Popover.tsx b/src/scripts/Popover.tsx
index bce24f915..8d6eb30c7 100644
--- a/src/scripts/Popover.tsx
+++ b/src/scripts/Popover.tsx
@@ -4,6 +4,7 @@ import React, {
   FC,
   ReactNode,
   forwardRef,
+  useId,
   useEffect,
 } from 'react';
 import classnames from 'classnames';
@@ -117,15 +118,19 @@ export const PopoverInner = forwardRef<
           : undefined
         : undefined,
   };
+  const bodyId = useId();
   return (
     <section
       ref={ref}
       className={popoverClassNames}
       role={tooltip ? 'tooltip' : 'dialog'}
       style={rootStyle}
+      aria-describedby={bodyId}
       {...rprops}
     >
-      <PopoverBody style={bodyStyle}>{children}</PopoverBody>
+      <PopoverBody id={bodyId} style={bodyStyle}>
+        {children}
+      </PopoverBody>
     </section>
   );
 });

From 9aea71ecf27e63ade860d49af290c927f6df7c0e Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 3 Jun 2025 13:52:51 +0900
Subject: [PATCH 041/245] (Table): update deprecated Element types

---
 src/scripts/Table.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/scripts/Table.tsx b/src/scripts/Table.tsx
index 913988d25..e63670c12 100644
--- a/src/scripts/Table.tsx
+++ b/src/scripts/Table.tsx
@@ -130,7 +130,7 @@ export type TableHeaderColumnProps = {
   sorted?: boolean;
   align?: 'left' | 'center' | 'right';
   onSort?: () => void;
-} & ThHTMLAttributes<HTMLTableHeaderCellElement>;
+} & ThHTMLAttributes<HTMLTableCellElement>;
 
 /**
  *
@@ -207,7 +207,7 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
 export type TableRowColumnProps = {
   width?: string | number;
   truncate?: boolean;
-} & TdHTMLAttributes<HTMLTableDataCellElement>;
+} & TdHTMLAttributes<HTMLTableCellElement>;
 
 /**
  *

From 78b474bfeaadc8f5edcd3bb2f8958fa12b3e2590 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 3 Jun 2025 13:58:14 +0900
Subject: [PATCH 042/245] (Table): update classnames and markups

---
 src/scripts/Table.tsx | 37 +++++++++++++++++++++++++++----------
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/scripts/Table.tsx b/src/scripts/Table.tsx
index e63670c12..2757978c9 100644
--- a/src/scripts/Table.tsx
+++ b/src/scripts/Table.tsx
@@ -102,7 +102,7 @@ export const TableRow: FC<TableRowProps> = (props) => {
   }
   const rowClassName = classnames(
     className,
-    header ? 'slds-text-title_caps' : 'slds-hint-parent'
+    header ? 'slds-line-height_reset' : 'slds-hint-parent'
   );
   const style = selected
     ? {
@@ -152,7 +152,6 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
   const sortable = typeof sortable_ === 'undefined' ? rowSortable : sortable_;
   const oClassNames = classnames(
     className,
-    'slds-text-title_caps slds-truncate',
     {
       'slds-is-sortable': sortable,
       'slds-is-resizable': resizable,
@@ -165,6 +164,13 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
 
   const icon = sortDir === 'DESC' ? 'arrowdown' : 'arrowup';
 
+  const content = typeof children === 'string' ? children : undefined;
+  const cellContent = (
+    <div className='slds-truncate' title={content}>
+      {children}
+    </div>
+  );
+
   return (
     <th {...pprops} className={oClassNames} scope='col' style={style}>
       {sortable ? (
@@ -178,11 +184,10 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
           className='slds-th__action slds-text-link_reset'
         >
           <span className='slds-assistive-text'>Sort </span>
-          <span className='slds-truncate'>{children}</span>
+          {cellContent}
           <Icon
             className='slds-is-sortable__icon'
             textColor='default'
-            container
             size='x-small'
             category='utility'
             icon={icon}
@@ -195,7 +200,7 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
           />
         </a>
       ) : (
-        children
+        cellContent
       )}
     </th>
   );
@@ -213,17 +218,29 @@ export type TableRowColumnProps = {
  *
  */
 export const TableRowColumn: FC<TableRowColumnProps> = (props) => {
-  const { truncate = true, className, width, children, ...pprops } = props;
-  const oClassNames = classnames(className, {
-    'slds-truncate': truncate,
-  });
+  const {
+    truncate = true,
+    className: oClassNames,
+    width,
+    children,
+    ...pprops
+  } = props;
   const style: CSSProperties = {};
   if (width !== undefined) style.width = width;
   if (!truncate) style.position = 'static';
 
+  const content = typeof children === 'string' ? children : undefined;
+  const cellContent = truncate ? (
+    <div className='slds-truncate' title={content}>
+      {children}
+    </div>
+  ) : (
+    children
+  );
+
   return (
     <td role='gridcell' style={style} className={oClassNames} {...pprops}>
-      {children}
+      {cellContent}
     </td>
   );
 };

From db0873b64e869b598730b0cd2999e1440dd7ccd8 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 3 Jun 2025 13:59:10 +0900
Subject: [PATCH 043/245] (Table): improve a11y

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

diff --git a/src/scripts/Table.tsx b/src/scripts/Table.tsx
index 2757978c9..4a7187109 100644
--- a/src/scripts/Table.tsx
+++ b/src/scripts/Table.tsx
@@ -239,7 +239,7 @@ export const TableRowColumn: FC<TableRowColumnProps> = (props) => {
   );
 
   return (
-    <td role='gridcell' style={style} className={oClassNames} {...pprops}>
+    <td style={style} className={oClassNames} {...pprops}>
       {cellContent}
     </td>
   );

From f07220a59a14bc31aa72bc94bc76a739876522b1 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 3 Jun 2025 14:03:12 +0900
Subject: [PATCH 044/245] (Table): consider `scope`

---
 src/scripts/Table.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/scripts/Table.tsx b/src/scripts/Table.tsx
index 4a7187109..f40c8d2b7 100644
--- a/src/scripts/Table.tsx
+++ b/src/scripts/Table.tsx
@@ -223,6 +223,7 @@ export const TableRowColumn: FC<TableRowColumnProps> = (props) => {
     className: oClassNames,
     width,
     children,
+    scope,
     ...pprops
   } = props;
   const style: CSSProperties = {};
@@ -238,11 +239,15 @@ export const TableRowColumn: FC<TableRowColumnProps> = (props) => {
     children
   );
 
-  return (
-    <td style={style} className={oClassNames} {...pprops}>
-      {cellContent}
-    </td>
-  );
+  const CellComponent = scope === 'row' ? 'th' : 'td';
+  const cellProps = {
+    style,
+    className: oClassNames,
+    ...pprops,
+    ...(scope === 'row' ? { scope: 'row' } : {}),
+  };
+
+  return <CellComponent {...cellProps}>{cellContent}</CellComponent>;
 };
 
 /**

From 72e02ac643631c775c2d88a45b16fedd36db8c70 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 3 Jun 2025 14:24:36 +0900
Subject: [PATCH 045/245] (SalesPath): update classnames

---
 src/scripts/SalesPath.tsx | 34 ++++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/scripts/SalesPath.tsx b/src/scripts/SalesPath.tsx
index 10f3c20b3..bbccc1f10 100644
--- a/src/scripts/SalesPath.tsx
+++ b/src/scripts/SalesPath.tsx
@@ -23,8 +23,9 @@ type SalesPathKey = string | number;
  */
 const SalesPathTypeContext = createContext<SalesPathItemType>('incomplete');
 
-const SalesPathHandlersContext = createContext<{
+const SalesPathContext = createContext<{
   onSelect?: Bivariant<(eventKey: SalesPathKey) => void>;
+  activeKey?: SalesPathKey | null;
 }>({});
 
 /**
@@ -44,7 +45,7 @@ export type SalesPathItemProps = {
 export const SalesPathItem: FC<SalesPathItemProps> = (props) => {
   const { className, eventKey, type: type_, title, completedTitle } = props;
   const evaluatedType = useContext(SalesPathTypeContext);
-  const { onSelect } = useContext(SalesPathHandlersContext);
+  const { onSelect, activeKey } = useContext(SalesPathContext);
   const type = type_ ?? evaluatedType;
 
   const onItemClick = useEventCallback(() => {
@@ -53,9 +54,18 @@ export const SalesPathItem: FC<SalesPathItemProps> = (props) => {
     }
   });
 
+  const isSelected = activeKey === eventKey;
+  const isCurrent = type === 'current';
+  const isActive = isSelected || (isCurrent && activeKey == null);
+
   const pathItemClassName = classnames(
-    'slds-tabs_path__item',
-    type ? `slds-is-${type}` : undefined,
+    'slds-path__item',
+    {
+      'slds-is-complete': type === 'complete',
+      'slds-is-current': isCurrent,
+      'slds-is-incomplete': type === 'incomplete',
+      'slds-is-active': isActive,
+    },
     className
   );
 
@@ -65,20 +75,20 @@ export const SalesPathItem: FC<SalesPathItemProps> = (props) => {
   return (
     <li className={pathItemClassName} role='presentation'>
       <a
-        className='slds-tabs_path__link'
+        className='slds-path__link'
         aria-selected='false'
         tabIndex={tabIndex}
         role='tab'
         aria-live='assertive'
         onClick={onItemClick}
       >
-        <span className='slds-tabs_path__stage'>
+        <span className='slds-path__stage'>
           <Icon category='utility' icon='check' size='x-small' />
           {type === 'complete' ? (
             <span className='slds-assistive-text'>{completedText}</span>
           ) : null}
         </span>
-        <span className='slds-tabs_path__title'>{title}</span>
+        <span className='slds-path__title'>{title}</span>
       </a>
     </li>
   );
@@ -114,7 +124,7 @@ export const SalesPath = createFC<
       activeKey_,
       defaultActiveKey ?? null
     );
-    const salesPathClassNames = classnames(className, 'slds-tabs_path');
+    const salesPathClassNames = classnames(className, 'slds-path');
 
     const onSelect = useEventCallback((itemKey: SalesPathKey) => {
       onSelect_?.(itemKey);
@@ -133,12 +143,12 @@ export const SalesPath = createFC<
       }
     });
 
-    const handlers = useMemo(() => ({ onSelect }), [onSelect]);
+    const ctx = useMemo(() => ({ onSelect, activeKey }), [onSelect, activeKey]);
 
     return (
       <div className={salesPathClassNames} role='application tablist'>
-        <ul className='slds-tabs_path__nav' role='presentation'>
-          <SalesPathHandlersContext.Provider value={handlers}>
+        <ul className='slds-path__nav' role='presentation'>
+          <SalesPathContext.Provider value={ctx}>
             {React.Children.map(children, (child, idx) => {
               const evaluatedType =
                 idx === activeIdx
@@ -152,7 +162,7 @@ export const SalesPath = createFC<
                 </SalesPathTypeContext.Provider>
               );
             })}
-          </SalesPathHandlersContext.Provider>
+          </SalesPathContext.Provider>
         </ul>
       </div>
     );

From 4fd5c8ebb57ec7bfee9e622a73b71f464590929e Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 3 Jun 2025 14:29:56 +0900
Subject: [PATCH 046/245] (SalesPath): refactor

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

diff --git a/src/scripts/SalesPath.tsx b/src/scripts/SalesPath.tsx
index bbccc1f10..e0287517d 100644
--- a/src/scripts/SalesPath.tsx
+++ b/src/scripts/SalesPath.tsx
@@ -69,7 +69,7 @@ export const SalesPathItem: FC<SalesPathItemProps> = (props) => {
     className
   );
 
-  const tabIndex = type === 'current' ? 0 : -1;
+  const tabIndex = isActive ? 0 : -1;
   const completedText = completedTitle || 'Stage Complete';
 
   return (

From 6168fae60ee0cf551eadaa2bb5a2b89fcefd9ab1 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 3 Jun 2025 14:32:11 +0900
Subject: [PATCH 047/245] (SalesPath): update markups

---
 src/scripts/SalesPath.tsx | 47 +++++++++++++++++++++++++--------------
 1 file changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/scripts/SalesPath.tsx b/src/scripts/SalesPath.tsx
index e0287517d..84d90a6fd 100644
--- a/src/scripts/SalesPath.tsx
+++ b/src/scripts/SalesPath.tsx
@@ -87,6 +87,9 @@ export const SalesPathItem: FC<SalesPathItemProps> = (props) => {
           {type === 'complete' ? (
             <span className='slds-assistive-text'>{completedText}</span>
           ) : null}
+          {isCurrent ? (
+            <span className='slds-assistive-text'>Current Stage:</span>
+          ) : null}
         </span>
         <span className='slds-path__title'>{title}</span>
       </a>
@@ -147,23 +150,33 @@ export const SalesPath = createFC<
 
     return (
       <div className={salesPathClassNames} role='application tablist'>
-        <ul className='slds-path__nav' role='presentation'>
-          <SalesPathContext.Provider value={ctx}>
-            {React.Children.map(children, (child, idx) => {
-              const evaluatedType =
-                idx === activeIdx
-                  ? 'current'
-                  : idx < activeIdx
-                  ? 'complete'
-                  : 'incomplete';
-              return (
-                <SalesPathTypeContext.Provider value={evaluatedType}>
-                  {child}
-                </SalesPathTypeContext.Provider>
-              );
-            })}
-          </SalesPathContext.Provider>
-        </ul>
+        <div className={classnames('slds-grid', 'slds-path__track')}>
+          <div
+            className={classnames('slds-grid', 'slds-path__scroller-container')}
+          >
+            <div className='slds-path__scroller'>
+              <div className='slds-path__scroller_inner'>
+                <ul className='slds-path__nav' role='presentation'>
+                  <SalesPathContext.Provider value={ctx}>
+                    {React.Children.map(children, (child, idx) => {
+                      const evaluatedType =
+                        idx === activeIdx
+                          ? 'current'
+                          : idx < activeIdx
+                            ? 'complete'
+                            : 'incomplete';
+                      return (
+                        <SalesPathTypeContext.Provider value={evaluatedType}>
+                          {child}
+                        </SalesPathTypeContext.Provider>
+                      );
+                    })}
+                  </SalesPathContext.Provider>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     );
   },

From 19cb3e08afa3afca3cea8cd6a3e638cdd761a322 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 3 Jun 2025 14:33:32 +0900
Subject: [PATCH 048/245] (SalesPath): improve a11y

---
 src/scripts/SalesPath.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/scripts/SalesPath.tsx b/src/scripts/SalesPath.tsx
index 84d90a6fd..35a1922d5 100644
--- a/src/scripts/SalesPath.tsx
+++ b/src/scripts/SalesPath.tsx
@@ -76,10 +76,9 @@ export const SalesPathItem: FC<SalesPathItemProps> = (props) => {
     <li className={pathItemClassName} role='presentation'>
       <a
         className='slds-path__link'
-        aria-selected='false'
+        aria-selected={isActive}
         tabIndex={tabIndex}
-        role='tab'
-        aria-live='assertive'
+        role='option'
         onClick={onItemClick}
       >
         <span className='slds-path__stage'>
@@ -149,14 +148,18 @@ export const SalesPath = createFC<
     const ctx = useMemo(() => ({ onSelect, activeKey }), [onSelect, activeKey]);
 
     return (
-      <div className={salesPathClassNames} role='application tablist'>
+      <div className={salesPathClassNames}>
         <div className={classnames('slds-grid', 'slds-path__track')}>
           <div
             className={classnames('slds-grid', 'slds-path__scroller-container')}
           >
             <div className='slds-path__scroller'>
               <div className='slds-path__scroller_inner'>
-                <ul className='slds-path__nav' role='presentation'>
+                <ul
+                  className='slds-path__nav'
+                  role='listbox'
+                  aria-orientation='horizontal'
+                >
                   <SalesPathContext.Provider value={ctx}>
                     {React.Children.map(children, (child, idx) => {
                       const evaluatedType =

From e53b7b2317a4682215ed51b94a97ba47f544ee70 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 3 Jun 2025 14:57:23 +0900
Subject: [PATCH 049/245] (SalesPath): resolve `prettier` errors

---
 src/scripts/SalesPath.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/scripts/SalesPath.tsx b/src/scripts/SalesPath.tsx
index 35a1922d5..9f4f235ad 100644
--- a/src/scripts/SalesPath.tsx
+++ b/src/scripts/SalesPath.tsx
@@ -166,8 +166,8 @@ export const SalesPath = createFC<
                         idx === activeIdx
                           ? 'current'
                           : idx < activeIdx
-                            ? 'complete'
-                            : 'incomplete';
+                          ? 'complete'
+                          : 'incomplete';
                       return (
                         <SalesPathTypeContext.Provider value={evaluatedType}>
                           {child}

From d6eed551dfd4f6d5492b7f374b3271adaed7e9dc Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 3 Jun 2025 15:06:18 +0900
Subject: [PATCH 050/245] (Tabs): update classnames

---
 src/scripts/Tabs.tsx | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/scripts/Tabs.tsx b/src/scripts/Tabs.tsx
index b948d2a56..d9ebdd5a6 100644
--- a/src/scripts/Tabs.tsx
+++ b/src/scripts/Tabs.tsx
@@ -59,9 +59,10 @@ export type TabContentProps = {
  */
 const TabContent: FC<TabContentProps> = (props) => {
   const { className, active, children, ...rprops } = props;
+  const { type } = useContext(TabsContext);
   const tabClassNames = classnames(
     className,
-    'slds-tabs__content',
+    `slds-tabs_${type}__content`,
     `slds-${active ? 'show' : 'hide'}`
   );
   return (
@@ -152,9 +153,9 @@ const TabItem = <RendererProps extends TabItemRendererProps>(
   const menuProps = (menu?.props as unknown) ?? {};
   const isActive = eventKey === activeKey;
   const tabItemClassName = classnames(
-    { 'slds-tabs__item': !!menuItems },
+    'react-slds-tab-item',
     `slds-tabs_${type}__item`,
-    { 'slds-active': isActive },
+    { 'slds-is-active': isActive },
     { 'react-slds-tab-with-menu': menu || menuItems }
   );
   const tabLinkClassName = `slds-tabs_${type}__link`;
@@ -273,24 +274,24 @@ function useInitComponentStyle() {
   useEffect(() => {
     registerStyle('tab-menu', [
       [
-        '.slds-tabs__item.react-slds-tab-with-menu',
+        '.react-slds-tab-item.react-slds-tab-with-menu',
         '{ position: relative !important; overflow: visible !important; }',
       ],
       [
-        '.slds-tabs__item.react-slds-tab-with-menu > .react-slds-tab-item-content',
+        '.react-slds-tab-item.react-slds-tab-with-menu > .react-slds-tab-item-content',
         '{ overflow: hidden }',
       ],
       [
-        '.slds-tabs__item.react-slds-tab-with-menu > .react-slds-tab-item-content > a',
+        '.react-slds-tab-item.react-slds-tab-with-menu > .react-slds-tab-item-content > a',
         '{ padding-right: 2rem; }',
       ],
       [
-        '.slds-tabs__item.react-slds-tab-with-menu > .react-slds-tab-item-content.react-slds-tooltip-enabled > a',
+        '.react-slds-tab-item.react-slds-tab-with-menu > .react-slds-tab-item-content.react-slds-tooltip-enabled > a',
         '{ padding-right: 3.5rem; }',
       ],
       ['.react-slds-tab-menu', '{ position: absolute; top: 0; right: 0; }'],
       [
-        '.slds-tabs__item.react-slds-tab-with-menu .react-slds-tab-item-content .react-slds-tooltip-content',
+        '.react-slds-tab-item.react-slds-tab-with-menu .react-slds-tab-item-content .react-slds-tooltip-content',
         '{ position: absolute; top: 0.6rem; right: 2.25rem; }',
       ],
       [
@@ -298,9 +299,9 @@ function useInitComponentStyle() {
         '{ height: 2.5rem; line-height: 2rem; width: 2rem; visibility: hidden; justify-content: center }',
       ],
       [
-        '.slds-tabs__item.slds-active .react-slds-tab-menu button',
-        '.slds-tabs__item:hover .react-slds-tab-menu button',
-        '.slds-tabs__item .react-slds-tab-menu button:focus',
+        '.react-slds-tab-item.slds-is-active .react-slds-tab-menu button',
+        '.react-slds-tab-item:hover .react-slds-tab-menu button',
+        '.react-slds-tab-item .react-slds-tab-menu button:focus',
         '{ visibility: visible }',
       ],
     ]);

From a50212d13e2a72488606792242800a9eac0d532f Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 3 Jun 2025 15:24:43 +0900
Subject: [PATCH 051/245] (Tabs): improve a11y

---
 src/scripts/Tabs.tsx | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/scripts/Tabs.tsx b/src/scripts/Tabs.tsx
index d9ebdd5a6..e80280744 100644
--- a/src/scripts/Tabs.tsx
+++ b/src/scripts/Tabs.tsx
@@ -6,6 +6,7 @@ import React, {
   ReactNode,
   Ref,
   createContext,
+  useId,
   useContext,
   useMemo,
   useRef,
@@ -45,6 +46,8 @@ const TabsActiveKeyContext = createContext<TabKey | undefined>(undefined);
 const TabsContext = createContext<{
   type: TabType;
   activeTabRef?: Ref<HTMLAnchorElement>;
+  tabId?: string;
+  tabItemId?: string;
 }>({ type: 'default' });
 
 /**
@@ -59,14 +62,20 @@ export type TabContentProps = {
  */
 const TabContent: FC<TabContentProps> = (props) => {
   const { className, active, children, ...rprops } = props;
-  const { type } = useContext(TabsContext);
+  const { type, tabId, tabItemId } = useContext(TabsContext);
   const tabClassNames = classnames(
     className,
     `slds-tabs_${type}__content`,
     `slds-${active ? 'show' : 'hide'}`
   );
   return (
-    <div className={tabClassNames} role='tabpanel' {...rprops}>
+    <div
+      id={tabId}
+      className={tabClassNames}
+      role='tabpanel'
+      aria-labelledby={tabItemId}
+      {...rprops}
+    >
       {children}
     </div>
   );
@@ -141,7 +150,7 @@ const TabItem = <RendererProps extends TabItemRendererProps>(
   props: TabItemProps<RendererProps>
 ) => {
   const { title, eventKey, menu, menuIcon, tooltip, tooltipIcon } = props;
-  const { type, activeTabRef } = useContext(TabsContext);
+  const { type, activeTabRef, tabId, tabItemId } = useContext(TabsContext);
   const activeKey = useContext(TabsActiveKeyContext);
   const { onTabClick, onTabKeyDown } = useContext(TabsHandlersContext);
   let { menuItems } = props;
@@ -174,7 +183,7 @@ const TabItem = <RendererProps extends TabItemRendererProps>(
     onTabKeyDown,
   } as RendererProps;
   return (
-    <li className={tabItemClassName} role='presentation'>
+    <li className={tabItemClassName} title={title} role='presentation'>
       <TabItemRenderer {...itemRendererProps}>
         <span
           className={`react-slds-tab-item-content ${
@@ -182,11 +191,13 @@ const TabItem = <RendererProps extends TabItemRendererProps>(
           }`}
         >
           <a
+            id={tabItemId}
             className={tabLinkClassName}
             role='tab'
             ref={isActive ? activeTabRef : undefined}
             tabIndex={isActive ? 0 : -1}
             aria-selected={isActive}
+            aria-controls={tabId}
             onClick={
               eventKey != null ? () => onTabClick?.(eventKey) : undefined
             }
@@ -370,7 +381,13 @@ export const Tabs: FC<TabsProps> = (props) => {
     }
   }, [focusTab]);
 
-  const tabCtx = useMemo(() => ({ type, activeTabRef }), [type]);
+  const tabId = useId();
+  const tabItemId = useId();
+  const tabCtx = useMemo(
+    () => ({ type, activeTabRef, tabId, tabItemId }),
+    [type, tabId, tabItemId]
+  );
+
   const handlers = useMemo(
     () => ({ onTabClick, onTabKeyDown }),
     [onTabClick, onTabKeyDown]

From efc0cfe959ac2f09279efa87f3a07436a55f0e01 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 4 Jun 2025 14:44:24 +0900
Subject: [PATCH 052/245] (Notification): update classnames and markups

---
 src/scripts/Notification.tsx     | 48 ++++++++++++++++----------------
 stories/Notification.stories.tsx |  3 --
 2 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/src/scripts/Notification.tsx b/src/scripts/Notification.tsx
index 0908fc580..e49d2bc88 100644
--- a/src/scripts/Notification.tsx
+++ b/src/scripts/Notification.tsx
@@ -16,7 +16,6 @@ export type NotificationProps = {
   alt?: string;
   icon?: string;
   iconSize?: IconSize;
-  alertTexture?: boolean;
   onClose?: EventHandler<MouseEvent<HTMLButtonElement>>;
 } & HTMLAttributes<HTMLDivElement>;
 
@@ -26,7 +25,6 @@ export const Notification: FC<NotificationProps> = (props) => {
     type,
     level,
     alt,
-    alertTexture = true,
     icon,
     iconSize = 'small',
     onClose,
@@ -46,16 +44,20 @@ export const Notification: FC<NotificationProps> = (props) => {
     'slds-notify',
     typeClassName,
     levelClassName,
-    alertTexture ? 'slds-theme_alert-texture' : null
+    {
+      [`slds-alert_${level}`]: type === 'alert' && level && level !== 'info',
+    }
   );
 
   const iconEl = icon ? (
     <Icon
-      className={
-        type === 'toast' ? 'slds-m-right_small' : 'slds-m-right_x-small'
-      }
+      container={true}
+      containerClassName={classnames(
+        type === 'toast' ? 'slds-m-right_small' : 'slds-m-right_x-small',
+        type === 'alert' ? ['slds-no-flex', 'slds-align-top'] : null
+      )}
       icon={icon}
-      size={iconSize}
+      size={iconSize ?? (type === 'toast' ? 'small' : 'x-small')}
       fillColor='none'
       textColor={level === 'warning' ? 'default' : null}
     />
@@ -65,27 +67,25 @@ export const Notification: FC<NotificationProps> = (props) => {
     <div className={alertClassNames} role='alert' {...pprops}>
       {alt ? <span className='slds-assistive-text'>{alt}</span> : undefined}
       {onClose ? (
-        <Button
-          className='slds-notify__close'
-          type='icon-inverse'
-          icon='close'
-          iconSize={type === 'toast' ? 'large' : 'small'}
-          alt='Close'
-          onClick={onClose}
-        />
+        <div className='slds-notify__close'>
+          <Button
+            type='icon-inverse'
+            icon='close'
+            iconSize={type === 'toast' ? 'small' : 'x-small'}
+            alt='Close'
+            onClick={onClose}
+          >
+            <span className='slds-assistive-text'>Close</span>
+          </Button>
+        </div>
       ) : undefined}
+      {iconEl}
       {type === 'toast' ? (
-        <div className='slds-notify__content slds-grid'>
-          {iconEl}
-          <div className='slds-col slds-align-middle'>
-            <h2 className='slds-text-heading_small'>{children}</h2>
-          </div>
+        <div className='slds-notify__content'>
+          <h2 className='slds-text-heading_small'>{children}</h2>
         </div>
       ) : (
-        <h2>
-          {iconEl}
-          {children}
-        </h2>
+        <h2>{children}</h2>
       )}
     </div>
   );
diff --git a/stories/Notification.stories.tsx b/stories/Notification.stories.tsx
index a2166ffa3..67125d186 100644
--- a/stories/Notification.stories.tsx
+++ b/stories/Notification.stories.tsx
@@ -19,7 +19,6 @@ export const ControlledWithKnobs: ComponentStoryObj<typeof Notification> = {
   name: 'Controlled with knobs',
   args: {
     type: 'alert',
-    alertTexture: true,
     children: 'This is notification text.',
   },
   argTypes: {
@@ -241,7 +240,6 @@ export const ToastWarning: ComponentStoryObj<typeof Toast> = {
   args: {
     icon: 'warning',
     level: 'warning',
-    alertTexture: false,
     children: (
       <>
         This is <strong>warning</strong> toast with icon and close button.
@@ -269,7 +267,6 @@ export const ToastError: ComponentStoryObj<typeof Toast> = {
   args: {
     icon: 'warning',
     level: 'error',
-    alertTexture: false,
     children: (
       <>
         This is <strong>error</strong> toast with icon and close button.

From 1e34457c12845567ed3dc8dbedd1651518a42582 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 6 Jun 2025 09:23:03 +0900
Subject: [PATCH 053/245] (Pill): use simpler naming

---
 src/scripts/Pill.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/scripts/Pill.tsx b/src/scripts/Pill.tsx
index 4563a4b00..2281346f2 100644
--- a/src/scripts/Pill.tsx
+++ b/src/scripts/Pill.tsx
@@ -15,7 +15,7 @@ import { useEventCallback } from './hooks';
  */
 export type PillProps = {
   label?: string;
-  fullLabel?: string;
+  title?: string;
   truncate?: boolean;
   disabled?: boolean;
   icon?: {
@@ -34,7 +34,7 @@ export const Pill: FC<PillProps> = (props) => {
     icon,
     disabled,
     label,
-    fullLabel,
+    title,
     truncate,
     className,
     pillRef,
@@ -75,11 +75,11 @@ export const Pill: FC<PillProps> = (props) => {
         </span>
       ) : undefined}
       {disabled ? (
-        <span className='slds-pill__label' title={fullLabel}>
+        <span className='slds-pill__label' title={title}>
           {label}
         </span>
       ) : (
-        <a className='slds-pill__action' title={fullLabel}>
+        <a className='slds-pill__action' title={title}>
           <span className='slds-pill__label'>{label}</span>
         </a>
       )}

From 49c2b49b4a022f010e0e3055ef223741b69feacb Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 6 Jun 2025 09:29:10 +0900
Subject: [PATCH 054/245] (Pill): use simpler naming in stories as well

---
 stories/Pill.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stories/Pill.stories.tsx b/stories/Pill.stories.tsx
index 4be41f7be..185d9b6be 100644
--- a/stories/Pill.stories.tsx
+++ b/stories/Pill.stories.tsx
@@ -22,7 +22,7 @@ export const ControlledWithKnobs: ComponentStoryObj<typeof Pill> = {
   name: 'Controlled with knobs',
   args: {
     label: 'Pill Label',
-    fullLabel: 'Full Label of the Pill',
+    title: 'Full Label of the Pill',
   },
   parameters: {
     info: 'Pill controlled with knobs',

From 3cb63b52ff47e692dcc904de940290b8172768ca Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 6 Jun 2025 16:28:30 +0900
Subject: [PATCH 055/245] (MediaObject): rename `isVerticalCenter` with
 `centered`

---
 src/scripts/MediaObject.tsx     | 14 ++++----------
 stories/MediaObject.stories.tsx |  6 +++---
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/scripts/MediaObject.tsx b/src/scripts/MediaObject.tsx
index 61e890e45..092fd3fe5 100644
--- a/src/scripts/MediaObject.tsx
+++ b/src/scripts/MediaObject.tsx
@@ -7,7 +7,7 @@ import classnames from 'classnames';
 export type MediaObjectProps = {
   figureLeft?: ReactNode;
   figureRight?: ReactNode;
-  isVerticalCenter?: boolean;
+  centered?: boolean;
   children?: ReactNode;
 } & HTMLAttributes<HTMLDivElement>;
 
@@ -15,17 +15,11 @@ export type MediaObjectProps = {
  *
  */
 export const MediaObject: FC<MediaObjectProps> = (props) => {
-  const {
-    className,
-    figureLeft,
-    figureRight,
-    isVerticalCenter,
-    children,
-    ...rprops
-  } = props;
+  const { className, figureLeft, figureRight, centered, children, ...rprops } =
+    props;
   const mediaClassNames = classnames(
     'slds-media',
-    { 'slds-media_center': isVerticalCenter },
+    { 'slds-media_center': centered },
     className
   );
   return (
diff --git a/stories/MediaObject.stories.tsx b/stories/MediaObject.stories.tsx
index f962f3145..181008892 100644
--- a/stories/MediaObject.stories.tsx
+++ b/stories/MediaObject.stories.tsx
@@ -57,7 +57,7 @@ export const FigureCenter: ComponentStoryObj<typeof MediaObject> = {
   name: 'Figure (Center)',
   args: {
     figureLeft: image1,
-    isVerticalCenter: true,
+    centered: true,
     children: mediaContent,
   },
   parameters: {
@@ -86,7 +86,7 @@ export const FigureReverseCenter: ComponentStoryObj<typeof MediaObject> = {
   name: 'Figure - Reverse (Center)',
   args: {
     figureRight: image2,
-    isVerticalCenter: true,
+    centered: true,
     children: mediaContent,
   },
   parameters: {
@@ -117,7 +117,7 @@ export const FigureBothSideCenter: ComponentStoryObj<typeof MediaObject> = {
   args: {
     figureLeft: image1,
     figureRight: image2,
-    isVerticalCenter: true,
+    centered: true,
     children: mediaContent,
   },
   parameters: {

From 91c971fb854658e4fa1d2a840d847db2d95c52ab Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 6 Jun 2025 17:34:14 +0900
Subject: [PATCH 056/245] (TreeNode): revert mistakenly added button size

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

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index a57289bcb..ecd2b5a9d 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -90,7 +90,7 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
           tabIndex={-1}
           type='icon-bare'
           icon={icon}
-          iconSize='x-small'
+          iconSize='small'
           onClick={onToggle}
           title={typeof label === 'string' ? `Expand ${label}` : undefined}
           // Prevent focus loss during loading by keeping the toggle button in the DOM with opacity set to 0.

From d9d94d47ec6478275d4f1ec5fb9af00fee777ae9 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 6 Jun 2025 17:35:05 +0900
Subject: [PATCH 057/245] (TreeNode): remove a switch that wouldn't be required

---
 src/scripts/TreeNode.tsx | 23 +++++++----------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index ecd2b5a9d..d3a5d310f 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -98,22 +98,13 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
         />
       ) : null}
       <span className='slds-has-flexi-truncate'>
-        {onLabelClick ? (
-          <a
-            className='slds-tree__item-label slds-truncate'
-            tabIndex={-1}
-            onClick={onLabelClick}
-          >
-            {ItemRender ? <ItemRender {...props} /> : label}
-          </a>
-        ) : (
-          <span
-            className='slds-tree__item-label slds-truncate'
-            title={typeof label === 'string' ? label : undefined}
-          >
-            {ItemRender ? <ItemRender {...props} /> : label}
-          </span>
-        )}
+        <a
+          className='slds-tree__item-label slds-truncate'
+          tabIndex={-1}
+          onClick={onLabelClick}
+        >
+          {ItemRender ? <ItemRender {...props} /> : label}
+        </a>
       </span>
       {leaf ? children : null}
     </div>

From a97270c85925df6019b024d6ac33a6ea26f2cc19 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 6 Jun 2025 17:37:46 +0900
Subject: [PATCH 058/245] (TreeNode): add `title` prop to item label

---
 src/scripts/TreeNode.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index d3a5d310f..b8260a3e9 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -102,6 +102,7 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
           className='slds-tree__item-label slds-truncate'
           tabIndex={-1}
           onClick={onLabelClick}
+          title={typeof label === 'string' ? label : undefined}
         >
           {ItemRender ? <ItemRender {...props} /> : label}
         </a>

From f9c516646f271e160ee7abbc07b68e29ffbe874c Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 6 Jun 2025 17:39:05 +0900
Subject: [PATCH 059/245] (TreeNode): remove implicit `title` setting

---
 src/scripts/TreeNode.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index b8260a3e9..f1c5efce3 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -92,7 +92,6 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
           icon={icon}
           iconSize='small'
           onClick={onToggle}
-          title={typeof label === 'string' ? `Expand ${label}` : undefined}
           // Prevent focus loss during loading by keeping the toggle button in the DOM with opacity set to 0.
           style={loading ? { opacity: 0, pointerEvents: 'none' } : undefined}
         />

From 1ce5ad389e513dc9df044b2526f11e98a6b4a5e1 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Mon, 9 Jun 2025 14:21:24 +0900
Subject: [PATCH 060/245] (TreeNode): remove the `aria-hidden` that may prevent
 a11y improvement

---
 src/scripts/TreeNode.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index f1c5efce3..af0c55687 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -86,7 +86,6 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
         <Button
           className='slds-m-right_x-small'
           aria-controls=''
-          aria-hidden='true'
           tabIndex={-1}
           type='icon-bare'
           icon={icon}

From d4cb6839561895619ffdc5d77103ca48e4653183 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Mon, 9 Jun 2025 14:22:46 +0900
Subject: [PATCH 061/245] (TreeNode): remove `tabIndex`es that differ from the
 existing implementation

---
 src/scripts/TreeNode.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index af0c55687..30f6d272a 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -86,7 +86,6 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
         <Button
           className='slds-m-right_x-small'
           aria-controls=''
-          tabIndex={-1}
           type='icon-bare'
           icon={icon}
           iconSize='small'
@@ -98,7 +97,6 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
       <span className='slds-has-flexi-truncate'>
         <a
           className='slds-tree__item-label slds-truncate'
-          tabIndex={-1}
           onClick={onLabelClick}
           title={typeof label === 'string' ? label : undefined}
         >

From 7a9263f6bcac670d6d95acc9f61aea2eebc2f46b Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Mon, 9 Jun 2025 14:34:42 +0900
Subject: [PATCH 062/245] (Popover): pass static classnames statically

---
 stories/Popover.stories.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/stories/Popover.stories.tsx b/stories/Popover.stories.tsx
index 070f41f42..ce8e07b4a 100644
--- a/stories/Popover.stories.tsx
+++ b/stories/Popover.stories.tsx
@@ -5,7 +5,6 @@ import {
   ComponentStoryObj,
   DecoratorFn,
 } from '@storybook/react';
-import classNames from 'classnames';
 
 /**
  *
@@ -21,12 +20,7 @@ const paddingDecorator: DecoratorFn = (story) => (
       padding: '100px 350px',
     }}
   >
-    <div
-      className={classNames(
-        'slds-dropdown-trigger',
-        'slds-dropdown-trigger_click'
-      )}
-    >
+    <div className='slds-dropdown-trigger slds-dropdown-trigger_click'>
       <Button type='icon' icon='question' />
       {story()}
     </div>

From 6775f9bbb07e2b29471a4d3a1587cc06584dc85b Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 10 Jun 2025 09:54:58 +0900
Subject: [PATCH 063/245] (Tabs): make `tabId` and `tabItemId` unique across
 each tab

---
 src/scripts/Tabs.tsx | 39 ++++++++++++++++++++++++---------------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/scripts/Tabs.tsx b/src/scripts/Tabs.tsx
index e80280744..52d8bac10 100644
--- a/src/scripts/Tabs.tsx
+++ b/src/scripts/Tabs.tsx
@@ -46,10 +46,21 @@ const TabsActiveKeyContext = createContext<TabKey | undefined>(undefined);
 const TabsContext = createContext<{
   type: TabType;
   activeTabRef?: Ref<HTMLAnchorElement>;
-  tabId?: string;
-  tabItemId?: string;
+  tabIdPrefix?: string;
+  tabItemIdPrefix?: string;
 }>({ type: 'default' });
 
+/**
+ * Custom hook to generate unique tab IDs
+ */
+const useTabIds = (eventKey?: TabKey) => {
+  const { tabIdPrefix, tabItemIdPrefix } = useContext(TabsContext);
+  const tabIndex = eventKey ? String(eventKey) : '0';
+  const tabId = `${tabIdPrefix}-${tabIndex}`;
+  const tabItemId = `${tabItemIdPrefix}-${tabIndex}`;
+  return { tabId, tabItemId };
+};
+
 /**
  *
  */
@@ -62,20 +73,14 @@ export type TabContentProps = {
  */
 const TabContent: FC<TabContentProps> = (props) => {
   const { className, active, children, ...rprops } = props;
-  const { type, tabId, tabItemId } = useContext(TabsContext);
+  const { type } = useContext(TabsContext);
   const tabClassNames = classnames(
     className,
     `slds-tabs_${type}__content`,
     `slds-${active ? 'show' : 'hide'}`
   );
   return (
-    <div
-      id={tabId}
-      className={tabClassNames}
-      role='tabpanel'
-      aria-labelledby={tabItemId}
-      {...rprops}
-    >
+    <div className={tabClassNames} role='tabpanel' {...rprops}>
       {children}
     </div>
   );
@@ -150,9 +155,10 @@ const TabItem = <RendererProps extends TabItemRendererProps>(
   props: TabItemProps<RendererProps>
 ) => {
   const { title, eventKey, menu, menuIcon, tooltip, tooltipIcon } = props;
-  const { type, activeTabRef, tabId, tabItemId } = useContext(TabsContext);
+  const { type, activeTabRef } = useContext(TabsContext);
   const activeKey = useContext(TabsActiveKeyContext);
   const { onTabClick, onTabKeyDown } = useContext(TabsHandlersContext);
+  const { tabId, tabItemId } = useTabIds(eventKey);
   let { menuItems } = props;
   menuItems = menu
     ? React.Children.toArray(
@@ -256,10 +262,13 @@ export const Tab = <
 ) => {
   const { className, eventKey, children } = props;
   const activeKey = useContext(TabsActiveKeyContext);
+  const { tabId, tabItemId } = useTabIds(eventKey);
   return (
     <TabContent
+      id={tabId}
       className={className}
       active={eventKey != null && eventKey === activeKey}
+      aria-labelledby={tabItemId}
     >
       {children}
     </TabContent>
@@ -381,11 +390,11 @@ export const Tabs: FC<TabsProps> = (props) => {
     }
   }, [focusTab]);
 
-  const tabId = useId();
-  const tabItemId = useId();
+  const tabIdPrefix = useId();
+  const tabItemIdPrefix = useId();
   const tabCtx = useMemo(
-    () => ({ type, activeTabRef, tabId, tabItemId }),
-    [type, tabId, tabItemId]
+    () => ({ type, activeTabRef, tabIdPrefix, tabItemIdPrefix }),
+    [type, tabIdPrefix, tabItemIdPrefix]
   );
 
   const handlers = useMemo(

From d3b5d1f69b7031228d0cda316a4b3106e950863c Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 11 Jun 2025 14:21:31 +0900
Subject: [PATCH 064/245] (Table): remove all the `scope` attributes

---
 src/scripts/Table.tsx | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/scripts/Table.tsx b/src/scripts/Table.tsx
index f40c8d2b7..d11d00776 100644
--- a/src/scripts/Table.tsx
+++ b/src/scripts/Table.tsx
@@ -172,7 +172,7 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
   );
 
   return (
-    <th {...pprops} className={oClassNames} scope='col' style={style}>
+    <th {...pprops} className={oClassNames} style={style}>
       {sortable ? (
         <a
           onClick={(e) => {
@@ -223,7 +223,6 @@ export const TableRowColumn: FC<TableRowColumnProps> = (props) => {
     className: oClassNames,
     width,
     children,
-    scope,
     ...pprops
   } = props;
   const style: CSSProperties = {};
@@ -239,15 +238,11 @@ export const TableRowColumn: FC<TableRowColumnProps> = (props) => {
     children
   );
 
-  const CellComponent = scope === 'row' ? 'th' : 'td';
-  const cellProps = {
-    style,
-    className: oClassNames,
-    ...pprops,
-    ...(scope === 'row' ? { scope: 'row' } : {}),
-  };
-
-  return <CellComponent {...cellProps}>{cellContent}</CellComponent>;
+  return (
+    <td style={style} className={oClassNames} {...pprops}>
+      {cellContent}
+    </td>
+  );
 };
 
 /**

From 8020109972047917b390b167329ce1d5f2c05b06 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 11 Jun 2025 16:09:14 +0900
Subject: [PATCH 065/245] Revert "(TreeNode): remove `tabIndex`es that differ
 from the existing implementation"

This reverts commit d4cb6839561895619ffdc5d77103ca48e4653183.
---
 src/scripts/TreeNode.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index 30f6d272a..af0c55687 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -86,6 +86,7 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
         <Button
           className='slds-m-right_x-small'
           aria-controls=''
+          tabIndex={-1}
           type='icon-bare'
           icon={icon}
           iconSize='small'
@@ -97,6 +98,7 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
       <span className='slds-has-flexi-truncate'>
         <a
           className='slds-tree__item-label slds-truncate'
+          tabIndex={-1}
           onClick={onLabelClick}
           title={typeof label === 'string' ? label : undefined}
         >

From 613c5689a275451ddd45b64037f57d96c0029499 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 11 Jun 2025 16:09:21 +0900
Subject: [PATCH 066/245] Revert "(TreeNode): remove the `aria-hidden` that may
 prevent a11y improvement"

This reverts commit 1ce5ad389e513dc9df044b2526f11e98a6b4a5e1.
---
 src/scripts/TreeNode.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index af0c55687..f1c5efce3 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -86,6 +86,7 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
         <Button
           className='slds-m-right_x-small'
           aria-controls=''
+          aria-hidden='true'
           tabIndex={-1}
           type='icon-bare'
           icon={icon}

From fbfd6dfa7fd70b71b48a192b6c02fc4ecdef2501 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 11 Jun 2025 16:09:29 +0900
Subject: [PATCH 067/245] Revert "(TreeNode): remove implicit `title` setting"

This reverts commit f9c516646f271e160ee7abbc07b68e29ffbe874c.
---
 src/scripts/TreeNode.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index f1c5efce3..b8260a3e9 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -92,6 +92,7 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
           icon={icon}
           iconSize='small'
           onClick={onToggle}
+          title={typeof label === 'string' ? `Expand ${label}` : undefined}
           // Prevent focus loss during loading by keeping the toggle button in the DOM with opacity set to 0.
           style={loading ? { opacity: 0, pointerEvents: 'none' } : undefined}
         />

From 9bd19ac570b8f5d6b65d0486a00865f0f549cf82 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 11 Jun 2025 16:09:37 +0900
Subject: [PATCH 068/245] Revert "(TreeNode): add `title` prop to item label"

This reverts commit a97270c85925df6019b024d6ac33a6ea26f2cc19.
---
 src/scripts/TreeNode.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index b8260a3e9..d3a5d310f 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -102,7 +102,6 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
           className='slds-tree__item-label slds-truncate'
           tabIndex={-1}
           onClick={onLabelClick}
-          title={typeof label === 'string' ? label : undefined}
         >
           {ItemRender ? <ItemRender {...props} /> : label}
         </a>

From c26f2fede8542bab8c82a16f670540d4e546f012 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 11 Jun 2025 16:09:45 +0900
Subject: [PATCH 069/245] Revert "(TreeNode): remove a switch that wouldn't be
 required"

This reverts commit d9d94d47ec6478275d4f1ec5fb9af00fee777ae9.
---
 src/scripts/TreeNode.tsx | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index d3a5d310f..ecd2b5a9d 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -98,13 +98,22 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
         />
       ) : null}
       <span className='slds-has-flexi-truncate'>
-        <a
-          className='slds-tree__item-label slds-truncate'
-          tabIndex={-1}
-          onClick={onLabelClick}
-        >
-          {ItemRender ? <ItemRender {...props} /> : label}
-        </a>
+        {onLabelClick ? (
+          <a
+            className='slds-tree__item-label slds-truncate'
+            tabIndex={-1}
+            onClick={onLabelClick}
+          >
+            {ItemRender ? <ItemRender {...props} /> : label}
+          </a>
+        ) : (
+          <span
+            className='slds-tree__item-label slds-truncate'
+            title={typeof label === 'string' ? label : undefined}
+          >
+            {ItemRender ? <ItemRender {...props} /> : label}
+          </span>
+        )}
       </span>
       {leaf ? children : null}
     </div>

From 1114b2e73dae9b424f3959dd9deb78bef934f8dd Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 11 Jun 2025 16:09:51 +0900
Subject: [PATCH 070/245] Revert "(TreeNode): revert mistakenly added button
 size"

This reverts commit 91c971fb854658e4fa1d2a840d847db2d95c52ab.
---
 src/scripts/TreeNode.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index ecd2b5a9d..a57289bcb 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -90,7 +90,7 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
           tabIndex={-1}
           type='icon-bare'
           icon={icon}
-          iconSize='small'
+          iconSize='x-small'
           onClick={onToggle}
           title={typeof label === 'string' ? `Expand ${label}` : undefined}
           // Prevent focus loss during loading by keeping the toggle button in the DOM with opacity set to 0.

From 4589d04fcb00dabeab72137ac166269e7112c136 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 11 Jun 2025 16:09:59 +0900
Subject: [PATCH 071/245] Revert "(TreeNode): update markups"

This reverts commit 4d3af82f713de933674a04e7cac58833140b24fb.
---
 src/scripts/TreeNode.tsx | 29 +++++++++--------------------
 1 file changed, 9 insertions(+), 20 deletions(-)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index a57289bcb..179063c31 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -84,37 +84,26 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
       )}
       {!leaf ? (
         <Button
-          className='slds-m-right_x-small'
+          className='slds-m-right_small'
           aria-controls=''
           aria-hidden='true'
           tabIndex={-1}
           type='icon-bare'
           icon={icon}
-          iconSize='x-small'
+          iconSize='small'
           onClick={onToggle}
           title={typeof label === 'string' ? `Expand ${label}` : undefined}
           // Prevent focus loss during loading by keeping the toggle button in the DOM with opacity set to 0.
           style={loading ? { opacity: 0, pointerEvents: 'none' } : undefined}
         />
       ) : null}
-      <span className='slds-has-flexi-truncate'>
-        {onLabelClick ? (
-          <a
-            className='slds-tree__item-label slds-truncate'
-            tabIndex={-1}
-            onClick={onLabelClick}
-          >
-            {ItemRender ? <ItemRender {...props} /> : label}
-          </a>
-        ) : (
-          <span
-            className='slds-tree__item-label slds-truncate'
-            title={typeof label === 'string' ? label : undefined}
-          >
-            {ItemRender ? <ItemRender {...props} /> : label}
-          </span>
-        )}
-      </span>
+      <a
+        className='slds-truncate'
+        tabIndex={-1}
+        onClick={onLabelClick}
+      >
+        {ItemRender ? <ItemRender {...props} /> : label}
+      </a>
       {leaf ? children : null}
     </div>
   );

From 7637fb021666a1eb3b7d314969e35f2143217870 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 11 Jun 2025 16:10:06 +0900
Subject: [PATCH 072/245] Revert "(TreeNode): improve a11y"

This reverts commit aa717e459252f008f3e8261a994def74e2e3c1b4.
---
 src/scripts/TreeNode.tsx | 27 +++------------------------
 1 file changed, 3 insertions(+), 24 deletions(-)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index 179063c31..4002534e5 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -28,7 +28,6 @@ export type TreeNodeProps = {
   leaf?: boolean;
   loading?: boolean;
   level?: number;
-  disabled?: boolean;
   children?: ReactNode;
   onClick?: (e: React.MouseEvent) => void;
   onLabelClick?: (e: React.MouseEvent) => void;
@@ -86,13 +85,10 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
         <Button
           className='slds-m-right_small'
           aria-controls=''
-          aria-hidden='true'
-          tabIndex={-1}
           type='icon-bare'
           icon={icon}
           iconSize='small'
           onClick={onToggle}
-          title={typeof label === 'string' ? `Expand ${label}` : undefined}
           // Prevent focus loss during loading by keeping the toggle button in the DOM with opacity set to 0.
           style={loading ? { opacity: 0, pointerEvents: 'none' } : undefined}
         />
@@ -100,6 +96,7 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
       <a
         className='slds-truncate'
         tabIndex={-1}
+        role='presentation'
         onClick={onLabelClick}
       >
         {ItemRender ? <ItemRender {...props} /> : label}
@@ -117,8 +114,6 @@ export const TreeNode: FC<TreeNodeProps> = (props) => {
     defaultOpened,
     opened: opened_,
     leaf,
-    selected,
-    disabled,
     children,
     onClick: onClick_,
     onToggle: onToggle_,
@@ -158,31 +153,15 @@ export const TreeNode: FC<TreeNodeProps> = (props) => {
     'slds-show': opened,
     'slds-hide': !opened,
   });
-  const labelText =
-    typeof rprops.label === 'string' ? rprops.label : 'Tree Branch';
-  const ariaLabel = !leaf ? labelText : undefined;
   return (
     <li
       role='treeitem'
       aria-level={level}
-      aria-expanded={!leaf ? opened : undefined}
-      aria-label={ariaLabel}
-      aria-selected={selected || undefined}
-      aria-disabled={disabled || undefined}
+      {...(leaf ? {} : { 'aria-expanded': opened })}
     >
       <TreeNodeItem
         {...rprops}
-        {...{
-          leaf,
-          opened,
-          level,
-          selected,
-          disabled,
-          children,
-          onClick,
-          onLabelClick,
-          onToggle,
-        }}
+        {...{ leaf, opened, level, children, onClick, onLabelClick, onToggle }}
       />
       {!leaf ? (
         <ul className={grpClassNames} role='group'>

From 52605ad69fd8c511ed61d18bce1245e66787ac72 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 11 Jun 2025 16:10:16 +0900
Subject: [PATCH 073/245] Revert "(Tree): update classnames"

This reverts commit 41f517c6940a1cc7915b70fd8796992d9a1bf8a0.
---
 src/scripts/Tree.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/scripts/Tree.tsx b/src/scripts/Tree.tsx
index 5d05e5f6b..e80a20fa7 100644
--- a/src/scripts/Tree.tsx
+++ b/src/scripts/Tree.tsx
@@ -43,7 +43,7 @@ export const Tree: FC<TreeProps> = (props) => {
     onNodeToggle,
     ...rprops
   } = props;
-  const treeClassNames = classnames(className, 'slds-tree_container');
+  const treeClassNames = classnames(className, 'slds-tree-container');
   const ctx = useMemo(
     () => ({
       toggleOnNodeClick,
@@ -57,7 +57,7 @@ export const Tree: FC<TreeProps> = (props) => {
   return (
     <div className={treeClassNames} {...rprops}>
       {label ? (
-        <h4 className='slds-tree__group-header' id={id}>
+        <h4 className='slds-text-heading_label' id={id}>
           {label}
         </h4>
       ) : null}

From 1bce255c0523bae4fdc949d19075a41a51158354 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 11 Jun 2025 16:10:22 +0900
Subject: [PATCH 074/245] Revert "(Tree): improve a11y"

This reverts commit 4f2d7cd13a3d58808a190a6e7ef5c144ce5abc52.
---
 src/scripts/Tree.tsx | 23 ++++-------------------
 1 file changed, 4 insertions(+), 19 deletions(-)

diff --git a/src/scripts/Tree.tsx b/src/scripts/Tree.tsx
index e80a20fa7..8545cde66 100644
--- a/src/scripts/Tree.tsx
+++ b/src/scripts/Tree.tsx
@@ -1,10 +1,4 @@
-import React, {
-  useId,
-  HTMLAttributes,
-  createContext,
-  FC,
-  useMemo,
-} from 'react';
+import React, { HTMLAttributes, createContext, FC, useMemo } from 'react';
 import classnames from 'classnames';
 import { TreeNodeProps } from './TreeNode';
 
@@ -53,19 +47,10 @@ export const Tree: FC<TreeProps> = (props) => {
     }),
     [toggleOnNodeClick, onNodeClick, onNodeLabelClick, onNodeToggle]
   );
-  const id = useId();
   return (
-    <div className={treeClassNames} {...rprops}>
-      {label ? (
-        <h4 className='slds-text-heading_label' id={id}>
-          {label}
-        </h4>
-      ) : null}
-      <ul
-        aria-labelledby={label ? id : undefined}
-        className='slds-tree'
-        role='tree'
-      >
+    <div className={treeClassNames} role='application' {...rprops}>
+      {label ? <h4 className='slds-text-heading_label'>{label}</h4> : null}
+      <ul className='slds-tree' role='tree'>
         <TreeContext.Provider value={ctx}>{children}</TreeContext.Provider>
       </ul>
     </div>

From 746cd9299019a18b38a456210e5f4aa68c9fd65e Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 11 Jun 2025 16:26:09 +0900
Subject: [PATCH 075/245] (Text): revert changes in `PageHeader.tsx`

---
 src/scripts/PageHeader.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/scripts/PageHeader.tsx b/src/scripts/PageHeader.tsx
index 54c51bf44..0d04e6fa1 100644
--- a/src/scripts/PageHeader.tsx
+++ b/src/scripts/PageHeader.tsx
@@ -31,10 +31,9 @@ export type PageHeaderDetailLabelProps = TextProps;
 export const PageHeaderDetailLabel: FC<PageHeaderDetailLabelProps> = ({
   children,
   ...props
-}) => {
-  return (
+}) =>
+  typeof children === 'string' ? (
     <Text
-      tag={typeof children !== 'string' ? 'div' : undefined}
       category='title'
       truncate
       className='slds-m-bottom_xx-small'
@@ -42,8 +41,9 @@ export const PageHeaderDetailLabel: FC<PageHeaderDetailLabelProps> = ({
     >
       {children}
     </Text>
+  ) : (
+    <>{children}</>
   );
-};
 
 /**
  *

From e938990a753a79d598ae8ca69d0233f33a6d88da Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 11 Jun 2025 16:38:14 +0900
Subject: [PATCH 076/245] (Table): remove unused `.slds-assistive-text`

---
 src/scripts/Table.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/scripts/Table.tsx b/src/scripts/Table.tsx
index d11d00776..57f151d09 100644
--- a/src/scripts/Table.tsx
+++ b/src/scripts/Table.tsx
@@ -193,11 +193,6 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
             icon={icon}
             style={{ position: 'absolute' }}
           />
-          <span
-            className='slds-assistive-text'
-            aria-live='assertive'
-            aria-atomic='true'
-          />
         </a>
       ) : (
         cellContent

From 635703c8ef79761c87fd64654cf56b997ea34152 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 11 Jun 2025 17:26:58 +0900
Subject: [PATCH 077/245] (Table): remove directly added style

---
 src/scripts/Table.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/scripts/Table.tsx b/src/scripts/Table.tsx
index 57f151d09..4075a82d7 100644
--- a/src/scripts/Table.tsx
+++ b/src/scripts/Table.tsx
@@ -191,7 +191,6 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
             size='x-small'
             category='utility'
             icon={icon}
-            style={{ position: 'absolute' }}
           />
         </a>
       ) : (

From a939fafbeebad77268845c5a43cdcb05b83b6a5e Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 11 Jun 2025 17:27:52 +0900
Subject: [PATCH 078/245] (Table): wrap `Icon` with container, following docs

---
 src/scripts/Table.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/scripts/Table.tsx b/src/scripts/Table.tsx
index 4075a82d7..a33164d6f 100644
--- a/src/scripts/Table.tsx
+++ b/src/scripts/Table.tsx
@@ -186,6 +186,7 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
           <span className='slds-assistive-text'>Sort </span>
           {cellContent}
           <Icon
+            container
             className='slds-is-sortable__icon'
             textColor='default'
             size='x-small'

From e8dfc9d63d88b3ff59583ff4b8ecf7aa01314fb3 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 11 Jun 2025 17:28:34 +0900
Subject: [PATCH 079/245] (Table): apply `.slds-table_resizable-cols` and
 remove `.slds-table_cell-buffer`, if sortable

---
 src/scripts/Table.tsx | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/scripts/Table.tsx b/src/scripts/Table.tsx
index a33164d6f..3f22b7bd0 100644
--- a/src/scripts/Table.tsx
+++ b/src/scripts/Table.tsx
@@ -286,17 +286,15 @@ export const Table: FC<TableProps> = (props) => {
     ...rprops
   } = props;
 
-  const tableClassNames = classnames(
-    className,
-    'slds-table slds-table_cell-buffer',
-    {
-      'slds-table_bordered': bordered,
-      'slds-no-row-hover': noRowHover,
-      'slds-table_striped': striped,
-      'slds-table_fixed-layout': fixedLayout,
-      'slds-table_col-bordered': verticalBorders,
-    }
-  );
+  const tableClassNames = classnames(className, 'slds-table', {
+    'slds-table_bordered': bordered,
+    'slds-no-row-hover': noRowHover,
+    'slds-table_striped': striped,
+    'slds-table_fixed-layout': fixedLayout,
+    'slds-table_resizable-cols': sortable,
+    'slds-table_cell-buffer': !sortable,
+    'slds-table_col-bordered': verticalBorders,
+  });
 
   const style: CSSProperties = { ...style_ };
   if (autoWidth) {

From 8404ed03d675256eaa5e9467f8fd5ee4a953c55c Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 12 Jun 2025 13:55:49 +0900
Subject: [PATCH 080/245] Revert "Revert "(Tree): improve a11y""

This reverts commit 1bce255c0523bae4fdc949d19075a41a51158354.
---
 src/scripts/Tree.tsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/scripts/Tree.tsx b/src/scripts/Tree.tsx
index 8545cde66..e80a20fa7 100644
--- a/src/scripts/Tree.tsx
+++ b/src/scripts/Tree.tsx
@@ -1,4 +1,10 @@
-import React, { HTMLAttributes, createContext, FC, useMemo } from 'react';
+import React, {
+  useId,
+  HTMLAttributes,
+  createContext,
+  FC,
+  useMemo,
+} from 'react';
 import classnames from 'classnames';
 import { TreeNodeProps } from './TreeNode';
 
@@ -47,10 +53,19 @@ export const Tree: FC<TreeProps> = (props) => {
     }),
     [toggleOnNodeClick, onNodeClick, onNodeLabelClick, onNodeToggle]
   );
+  const id = useId();
   return (
-    <div className={treeClassNames} role='application' {...rprops}>
-      {label ? <h4 className='slds-text-heading_label'>{label}</h4> : null}
-      <ul className='slds-tree' role='tree'>
+    <div className={treeClassNames} {...rprops}>
+      {label ? (
+        <h4 className='slds-text-heading_label' id={id}>
+          {label}
+        </h4>
+      ) : null}
+      <ul
+        aria-labelledby={label ? id : undefined}
+        className='slds-tree'
+        role='tree'
+      >
         <TreeContext.Provider value={ctx}>{children}</TreeContext.Provider>
       </ul>
     </div>

From 1ac4e09b191256b91e12800424bdaf37b66ebab6 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 12 Jun 2025 13:55:56 +0900
Subject: [PATCH 081/245] Revert "Revert "(Tree): update classnames""

This reverts commit 52605ad69fd8c511ed61d18bce1245e66787ac72.
---
 src/scripts/Tree.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/scripts/Tree.tsx b/src/scripts/Tree.tsx
index e80a20fa7..5d05e5f6b 100644
--- a/src/scripts/Tree.tsx
+++ b/src/scripts/Tree.tsx
@@ -43,7 +43,7 @@ export const Tree: FC<TreeProps> = (props) => {
     onNodeToggle,
     ...rprops
   } = props;
-  const treeClassNames = classnames(className, 'slds-tree-container');
+  const treeClassNames = classnames(className, 'slds-tree_container');
   const ctx = useMemo(
     () => ({
       toggleOnNodeClick,
@@ -57,7 +57,7 @@ export const Tree: FC<TreeProps> = (props) => {
   return (
     <div className={treeClassNames} {...rprops}>
       {label ? (
-        <h4 className='slds-text-heading_label' id={id}>
+        <h4 className='slds-tree__group-header' id={id}>
           {label}
         </h4>
       ) : null}

From 038b3bb0d9e07563c06e168764cda66a51b3b848 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 12 Jun 2025 13:56:01 +0900
Subject: [PATCH 082/245] Revert "Revert "(TreeNode): improve a11y""

This reverts commit 7637fb021666a1eb3b7d314969e35f2143217870.
---
 src/scripts/TreeNode.tsx | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index 4002534e5..179063c31 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -28,6 +28,7 @@ export type TreeNodeProps = {
   leaf?: boolean;
   loading?: boolean;
   level?: number;
+  disabled?: boolean;
   children?: ReactNode;
   onClick?: (e: React.MouseEvent) => void;
   onLabelClick?: (e: React.MouseEvent) => void;
@@ -85,10 +86,13 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
         <Button
           className='slds-m-right_small'
           aria-controls=''
+          aria-hidden='true'
+          tabIndex={-1}
           type='icon-bare'
           icon={icon}
           iconSize='small'
           onClick={onToggle}
+          title={typeof label === 'string' ? `Expand ${label}` : undefined}
           // Prevent focus loss during loading by keeping the toggle button in the DOM with opacity set to 0.
           style={loading ? { opacity: 0, pointerEvents: 'none' } : undefined}
         />
@@ -96,7 +100,6 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
       <a
         className='slds-truncate'
         tabIndex={-1}
-        role='presentation'
         onClick={onLabelClick}
       >
         {ItemRender ? <ItemRender {...props} /> : label}
@@ -114,6 +117,8 @@ export const TreeNode: FC<TreeNodeProps> = (props) => {
     defaultOpened,
     opened: opened_,
     leaf,
+    selected,
+    disabled,
     children,
     onClick: onClick_,
     onToggle: onToggle_,
@@ -153,15 +158,31 @@ export const TreeNode: FC<TreeNodeProps> = (props) => {
     'slds-show': opened,
     'slds-hide': !opened,
   });
+  const labelText =
+    typeof rprops.label === 'string' ? rprops.label : 'Tree Branch';
+  const ariaLabel = !leaf ? labelText : undefined;
   return (
     <li
       role='treeitem'
       aria-level={level}
-      {...(leaf ? {} : { 'aria-expanded': opened })}
+      aria-expanded={!leaf ? opened : undefined}
+      aria-label={ariaLabel}
+      aria-selected={selected || undefined}
+      aria-disabled={disabled || undefined}
     >
       <TreeNodeItem
         {...rprops}
-        {...{ leaf, opened, level, children, onClick, onLabelClick, onToggle }}
+        {...{
+          leaf,
+          opened,
+          level,
+          selected,
+          disabled,
+          children,
+          onClick,
+          onLabelClick,
+          onToggle,
+        }}
       />
       {!leaf ? (
         <ul className={grpClassNames} role='group'>

From de416565f04c0f946be894cd069d38d75327e7a3 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 12 Jun 2025 13:56:07 +0900
Subject: [PATCH 083/245] Revert "Revert "(TreeNode): update markups""

This reverts commit 4589d04fcb00dabeab72137ac166269e7112c136.
---
 src/scripts/TreeNode.tsx | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index 179063c31..a57289bcb 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -84,26 +84,37 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
       )}
       {!leaf ? (
         <Button
-          className='slds-m-right_small'
+          className='slds-m-right_x-small'
           aria-controls=''
           aria-hidden='true'
           tabIndex={-1}
           type='icon-bare'
           icon={icon}
-          iconSize='small'
+          iconSize='x-small'
           onClick={onToggle}
           title={typeof label === 'string' ? `Expand ${label}` : undefined}
           // Prevent focus loss during loading by keeping the toggle button in the DOM with opacity set to 0.
           style={loading ? { opacity: 0, pointerEvents: 'none' } : undefined}
         />
       ) : null}
-      <a
-        className='slds-truncate'
-        tabIndex={-1}
-        onClick={onLabelClick}
-      >
-        {ItemRender ? <ItemRender {...props} /> : label}
-      </a>
+      <span className='slds-has-flexi-truncate'>
+        {onLabelClick ? (
+          <a
+            className='slds-tree__item-label slds-truncate'
+            tabIndex={-1}
+            onClick={onLabelClick}
+          >
+            {ItemRender ? <ItemRender {...props} /> : label}
+          </a>
+        ) : (
+          <span
+            className='slds-tree__item-label slds-truncate'
+            title={typeof label === 'string' ? label : undefined}
+          >
+            {ItemRender ? <ItemRender {...props} /> : label}
+          </span>
+        )}
+      </span>
       {leaf ? children : null}
     </div>
   );

From 4aee558951ff4b0ff6ae2e097f99f171f328b3f8 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 12 Jun 2025 13:56:12 +0900
Subject: [PATCH 084/245] Revert "Revert "(TreeNode): revert mistakenly added
 button size""

This reverts commit 1114b2e73dae9b424f3959dd9deb78bef934f8dd.
---
 src/scripts/TreeNode.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index a57289bcb..ecd2b5a9d 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -90,7 +90,7 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
           tabIndex={-1}
           type='icon-bare'
           icon={icon}
-          iconSize='x-small'
+          iconSize='small'
           onClick={onToggle}
           title={typeof label === 'string' ? `Expand ${label}` : undefined}
           // Prevent focus loss during loading by keeping the toggle button in the DOM with opacity set to 0.

From 9c287d142e9b2a42cafd04602f90ea35a6f11e79 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 12 Jun 2025 13:56:17 +0900
Subject: [PATCH 085/245] Revert "Revert "(TreeNode): remove a switch that
 wouldn't be required""

This reverts commit c26f2fede8542bab8c82a16f670540d4e546f012.
---
 src/scripts/TreeNode.tsx | 23 +++++++----------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index ecd2b5a9d..d3a5d310f 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -98,22 +98,13 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
         />
       ) : null}
       <span className='slds-has-flexi-truncate'>
-        {onLabelClick ? (
-          <a
-            className='slds-tree__item-label slds-truncate'
-            tabIndex={-1}
-            onClick={onLabelClick}
-          >
-            {ItemRender ? <ItemRender {...props} /> : label}
-          </a>
-        ) : (
-          <span
-            className='slds-tree__item-label slds-truncate'
-            title={typeof label === 'string' ? label : undefined}
-          >
-            {ItemRender ? <ItemRender {...props} /> : label}
-          </span>
-        )}
+        <a
+          className='slds-tree__item-label slds-truncate'
+          tabIndex={-1}
+          onClick={onLabelClick}
+        >
+          {ItemRender ? <ItemRender {...props} /> : label}
+        </a>
       </span>
       {leaf ? children : null}
     </div>

From 53b0c13fadf9da0f9b155aea34bf3b51db9a52a6 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 12 Jun 2025 13:56:24 +0900
Subject: [PATCH 086/245] Revert "Revert "(TreeNode): add `title` prop to item
 label""

This reverts commit 9bd19ac570b8f5d6b65d0486a00865f0f549cf82.
---
 src/scripts/TreeNode.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index d3a5d310f..b8260a3e9 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -102,6 +102,7 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
           className='slds-tree__item-label slds-truncate'
           tabIndex={-1}
           onClick={onLabelClick}
+          title={typeof label === 'string' ? label : undefined}
         >
           {ItemRender ? <ItemRender {...props} /> : label}
         </a>

From f69aa7e84c6dc8cbd25bcc6dda4536f91b69966e Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 12 Jun 2025 13:56:30 +0900
Subject: [PATCH 087/245] Revert "Revert "(TreeNode): remove implicit `title`
 setting""

This reverts commit fbfd6dfa7fd70b71b48a192b6c02fc4ecdef2501.
---
 src/scripts/TreeNode.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index b8260a3e9..f1c5efce3 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -92,7 +92,6 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
           icon={icon}
           iconSize='small'
           onClick={onToggle}
-          title={typeof label === 'string' ? `Expand ${label}` : undefined}
           // Prevent focus loss during loading by keeping the toggle button in the DOM with opacity set to 0.
           style={loading ? { opacity: 0, pointerEvents: 'none' } : undefined}
         />

From aaf7222d5f907b6d0b676cbd55b4c7d59f275088 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 12 Jun 2025 13:56:36 +0900
Subject: [PATCH 088/245] Revert "Revert "(TreeNode): remove the `aria-hidden`
 that may prevent a11y improvement""

This reverts commit 613c5689a275451ddd45b64037f57d96c0029499.
---
 src/scripts/TreeNode.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index f1c5efce3..af0c55687 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -86,7 +86,6 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
         <Button
           className='slds-m-right_x-small'
           aria-controls=''
-          aria-hidden='true'
           tabIndex={-1}
           type='icon-bare'
           icon={icon}

From 2ad814c1b22efcb084c42c8b87d81aff9de219af Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 12 Jun 2025 13:56:43 +0900
Subject: [PATCH 089/245] Revert "Revert "(TreeNode): remove `tabIndex`es that
 differ from the existing implementation""

This reverts commit 8020109972047917b390b167329ce1d5f2c05b06.
---
 src/scripts/TreeNode.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index af0c55687..30f6d272a 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -86,7 +86,6 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
         <Button
           className='slds-m-right_x-small'
           aria-controls=''
-          tabIndex={-1}
           type='icon-bare'
           icon={icon}
           iconSize='small'
@@ -98,7 +97,6 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
       <span className='slds-has-flexi-truncate'>
         <a
           className='slds-tree__item-label slds-truncate'
-          tabIndex={-1}
           onClick={onLabelClick}
           title={typeof label === 'string' ? label : undefined}
         >

From 2182d6316c39ccb3535592e03b90f84a40c1ed26 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 12 Jun 2025 17:42:44 +0900
Subject: [PATCH 090/245] (FormElement): rename `htmlFor` with `controlId`

---
 src/scripts/FormElement.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/scripts/FormElement.tsx b/src/scripts/FormElement.tsx
index ea330b814..cae09a906 100644
--- a/src/scripts/FormElement.tsx
+++ b/src/scripts/FormElement.tsx
@@ -18,7 +18,7 @@ import { TooltipContent } from './TooltipContent';
 export type FormElementProps = {
   id?: string;
   className?: string;
-  htmlFor?: string;
+  controlId?: string;
   label?: string;
   required?: boolean;
   error?: boolean | string | { message: string };
@@ -44,7 +44,7 @@ export const FormElement = createFC<
     const {
       id,
       className,
-      htmlFor,
+      controlId,
       cols = 1,
       elementRef,
       label,
@@ -100,7 +100,7 @@ export const FormElement = createFC<
             <LabelTag
               id={id}
               className='slds-form-element__label'
-              {...(LabelTag === 'label' ? { htmlFor } : {})}
+              {...(LabelTag === 'label' ? { htmlFor: controlId } : {})}
               onClick={id ? undefined : onClickLabel}
             >
               {required ? (

From b5009c934cdf23e0c83cabfbe37d12bf0166577e Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 13 Jun 2025 08:30:13 +0900
Subject: [PATCH 091/245] (DropdownButton): rename duprecated
 `.slds-button-space-left` with `.slds-m-left_xx-small`

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

diff --git a/src/scripts/DropdownButton.tsx b/src/scripts/DropdownButton.tsx
index 541a0b213..7d3b6987e 100644
--- a/src/scripts/DropdownButton.tsx
+++ b/src/scripts/DropdownButton.tsx
@@ -213,7 +213,7 @@ export const DropdownButton = (props: DropdownButtonProps) => {
     'slds-dropdown-trigger',
     'slds-dropdown-trigger_click',
     {
-      'slds-button-space-left': !grouped,
+      'slds-m-left_xx-small': !grouped,
       'slds-is-open': opened,
       'react-slds-dropdown-opened': opened,
     }

From 42a8b4c6fe7ffe2d7252610fc1e987c64cef4fce Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 5 Jun 2025 16:33:50 +0900
Subject: [PATCH 092/245] (PageHeader): update markups significantly

---
 src/scripts/PageHeader.tsx     | 223 ++++++++++++++++++++++-----------
 stories/PageHeader.stories.tsx | 157 +++++++++--------------
 2 files changed, 210 insertions(+), 170 deletions(-)

diff --git a/src/scripts/PageHeader.tsx b/src/scripts/PageHeader.tsx
index 0d04e6fa1..f2f15b6dd 100644
--- a/src/scripts/PageHeader.tsx
+++ b/src/scripts/PageHeader.tsx
@@ -1,10 +1,6 @@
 import React, { FC } from 'react';
 import classNames from 'classnames';
-
-import { MediaObject } from './MediaObject';
-import { Text, TextProps } from './Text';
-import { Grid, Row, Col, GridProps } from './Grid';
-import { BreadCrumbs, Crumb } from './BreadCrumbs';
+import { TextProps } from './Text';
 
 /**
  *
@@ -16,9 +12,9 @@ export const PageHeaderDetailBody: FC<PageHeaderDetailBodyProps> = ({
   ...props
 }) =>
   typeof children === 'string' ? (
-    <Text category='body' type='regular' truncate {...props}>
+    <div className='slds-truncate' title={children} {...props}>
       {children}
-    </Text>
+    </div>
   ) : (
     <>{children}</>
   );
@@ -33,14 +29,9 @@ export const PageHeaderDetailLabel: FC<PageHeaderDetailLabelProps> = ({
   ...props
 }) =>
   typeof children === 'string' ? (
-    <Text
-      category='title'
-      truncate
-      className='slds-m-bottom_xx-small'
-      {...props}
-    >
+    <div className='slds-text-title slds-truncate' title={children} {...props}>
       {children}
-    </Text>
+    </div>
   ) : (
     <>{children}</>
   );
@@ -70,17 +61,20 @@ export const PageHeaderDetailItem: FC<PageHeaderDetailItemProps> = (props) => {
 /**
  *
  */
-export type PageHeaderDetailProps = GridProps;
+export type PageHeaderDetailProps = React.HTMLAttributes<HTMLDivElement>;
 
-export const PageHeaderDetail: FC<GridProps> = ({ children, ...props }) => (
-  <Grid
-    tag='ul'
-    vertical={false}
-    className='slds-page-header__detail-row'
+export const PageHeaderDetail: FC<PageHeaderDetailProps> = ({
+  children,
+  ...props
+}) => (
+  <div
+    className='slds-page-header__row slds-page-header__row_gutters'
     {...props}
   >
-    {children}
-  </Grid>
+    <div className='slds-page-header__col-details'>
+      <ul className='slds-page-header__detail-row'>{children}</ul>
+    </div>
+  </div>
 );
 
 /**
@@ -133,71 +127,101 @@ export const PageHeaderHeading: FC<PageHeaderHeadingProps> = (props) => {
   } = props;
 
   const infoPart = info ? (
-    <Text category='body' type='small'>
-      {info}
-    </Text>
+    <p className='slds-page-header__name-meta'>{info}</p>
   ) : null;
 
   const titlePart =
     typeof title === 'string' ? (
-      <PageHeaderHeadingTitle className='slds-m-right_small'>
-        {title}
-      </PageHeaderHeadingTitle>
+      <div className='slds-page-header__name-title'>
+        <h1>
+          {legend && <span>{legend}</span>}
+          <span className='slds-page-header__title slds-truncate' title={title}>
+            {title}
+          </span>
+        </h1>
+      </div>
     ) : (
-      title
+      <div className='slds-page-header__name-title'>
+        <h1>{title}</h1>
+      </div>
     );
 
   let breadCrumbsPart = null;
   if (breadCrumbs) {
-    breadCrumbsPart =
-      breadCrumbs.length && breadCrumbs[0].type === Crumb ? (
-        <BreadCrumbs>{breadCrumbs}</BreadCrumbs>
-      ) : (
-        breadCrumbs
-      );
+    breadCrumbsPart = (
+      <nav role='navigation' aria-label='Breadcrumbs'>
+        <ol className='slds-breadcrumb slds-list_horizontal slds-wrap'>
+          {breadCrumbs}
+        </ol>
+      </nav>
+    );
   }
 
-  const content_ = (
-    <div>
-      {breadCrumbsPart}
-      {legend ? (
-        <Text category='title' type='caps' className='slds-line-height_reset'>
-          {legend}
-        </Text>
-      ) : null}
-      {leftActions ? (
-        <Grid vertical={false}>
-          {titlePart}
-          <Col className='slds-shrink-none'>{leftActions}</Col>
-        </Grid>
-      ) : (
-        titlePart
-      )}
-      {!breadCrumbs && !legend && !rightActions ? infoPart : null}
+  const mediaContent = (
+    <div className='slds-media__body'>
+      <div className='slds-page-header__name'>
+        {titlePart}
+        {leftActions && (
+          <div className='slds-page-header__name-switcher slds-is-relative'>
+            {leftActions}
+          </div>
+        )}
+      </div>
+      {!breadCrumbs && infoPart}
     </div>
   );
-  const content = figure ? (
-    <MediaObject figureLeft={figure}>{content_}</MediaObject>
-  ) : (
-    content_
-  );
 
-  return rightActions ? (
-    <div>
-      <Grid vertical={false}>
-        <Col className='slds-has-flexi-truncate'>{content}</Col>
-        <Col align='top' noFlex>
-          <Grid>
-            <Row cols={1}>{rightActions}</Row>
-          </Grid>
-        </Col>
-      </Grid>
-      {breadCrumbs || legend || rightActions ? infoPart : null}
+  const mediaObject = figure ? (
+    <div className='slds-media'>
+      <div className='slds-media__figure'>
+        {React.cloneElement(figure, {
+          className: classNames(
+            (() => {
+              const props: unknown = figure.props;
+              const isPropsObject = typeof props === 'object' && props !== null;
+
+              if (
+                isPropsObject &&
+                'className' in props &&
+                typeof props.className === 'string'
+              ) {
+                return props.className;
+              } else {
+                return null;
+              }
+            })(),
+            'slds-page-header__icon'
+          ),
+          'aria-hidden': 'true',
+        })}
+      </div>
+      {mediaContent}
     </div>
   ) : (
-    <div>
-      {content}
-      {breadCrumbs || legend || rightActions ? infoPart : null}
+    <div className='slds-media'>{mediaContent}</div>
+  );
+
+  return (
+    <div className='slds-page-header__row'>
+      <div className='slds-page-header__col-title'>
+        {breadCrumbsPart}
+        {mediaObject}
+      </div>
+      {rightActions && (
+        <div className='slds-page-header__col-actions'>
+          <div className='slds-page-header__controls'>
+            {Array.isArray(rightActions) ? (
+              rightActions.map((action, index) => (
+                <div key={index} className='slds-page-header__control'>
+                  {action}
+                </div>
+              ))
+            ) : (
+              <div className='slds-page-header__control'>{rightActions}</div>
+            )}
+          </div>
+        </div>
+      )}
     </div>
   );
 };
@@ -205,10 +229,59 @@ export const PageHeaderHeading: FC<PageHeaderHeadingProps> = (props) => {
 /**
  *
  */
-export type PageHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+export type PageHeaderMetaProps = {
+  info?: string;
+  rightActions?: JSX.Element | Array<JSX.Element>;
+} & React.HTMLAttributes<HTMLDivElement>;
 
-export const PageHeader: FC<PageHeaderProps> = (props) => (
-  <div className='slds-page-header' role='banner' {...props}>
-    {props.children}
+export const PageHeaderMeta: FC<PageHeaderMetaProps> = ({
+  info,
+  rightActions,
+  ...props
+}) => (
+  <div className='slds-page-header__row' {...props}>
+    <div className='slds-page-header__col-meta'>
+      {info && <p className='slds-page-header__meta-text'>{info}</p>}
+    </div>
+    {rightActions && (
+      <div className='slds-page-header__col-controls'>
+        <div className='slds-page-header__controls'>
+          {Array.isArray(rightActions) ? (
+            rightActions.map((action, index) => (
+              <div key={index} className='slds-page-header__control'>
+                {action}
+              </div>
+            ))
+          ) : (
+            <div className='slds-page-header__control'>{rightActions}</div>
+          )}
+        </div>
+      </div>
+    )}
   </div>
 );
+
+/**
+ *
+ */
+export type PageHeaderProps = {
+  variant?: 'record-home' | 'related-list';
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export const PageHeader: FC<PageHeaderProps> = ({
+  variant,
+  className,
+  ...props
+}) => {
+  const pageHeaderClassNames = classNames(
+    'slds-page-header',
+    variant ? `slds-page-header_${variant}` : null,
+    className
+  );
+
+  return (
+    <div className={pageHeaderClassNames} role='banner' {...props}>
+      {props.children}
+    </div>
+  );
+};
diff --git a/stories/PageHeader.stories.tsx b/stories/PageHeader.stories.tsx
index e753d79dd..3617d7b68 100644
--- a/stories/PageHeader.stories.tsx
+++ b/stories/PageHeader.stories.tsx
@@ -8,14 +8,13 @@ import {
   PageHeaderDetailItem,
   PageHeaderDetailBody,
   PageHeaderDetailLabel,
+  PageHeaderMeta,
   Icon,
   Crumb,
   Button,
   ButtonGroup,
   DropdownButton,
   MenuItem,
-  Text,
-  Grid,
 } from '../src/scripts';
 
 /**
@@ -61,60 +60,47 @@ export const Base: ComponentStoryObj<typeof PageHeader> = {
  */
 export const RecordHome: ComponentStoryObj<typeof PageHeader> = {
   render: (args) => (
-    <PageHeader {...args}>
+    <PageHeader variant='record-home' {...args}>
       <PageHeaderHeading
-        legend='RECORD TYPE'
+        legend='Record Type'
         title='Record Title'
-        figure={<Icon category='standard' icon='user' size='large' />}
-        leftActions={
-          <Button type='neutral' icon='add' iconAlign='left'>
+        figure={<Icon category='standard' icon='user' />}
+        rightActions={[
+          <Button key={0} type='neutral' icon='add' iconAlign='left'>
             Follow
-          </Button>
-        }
-        rightActions={
-          <ButtonGroup>
+          </Button>,
+          <ButtonGroup key={1}>
             <Button type='neutral'>Edit</Button>
             <Button type='neutral'>Delete</Button>
             <Button type='neutral'>Clone</Button>
-            <DropdownButton type='icon-border' menuAlign='right'>
+            <DropdownButton type='icon-border-filled' menuAlign='right'>
               <MenuItem>Menu Item #1</MenuItem>
               <MenuItem>Menu Item #2</MenuItem>
               <MenuItem>Menu Item #3</MenuItem>
             </DropdownButton>
-          </ButtonGroup>
-        }
+          </ButtonGroup>,
+        ]}
       />
       <PageHeaderDetail>
-        <PageHeaderDetailItem label='FIELD 1'>
-          <Text
-            category='body'
-            type='regular'
-            truncate
-            title='Description that demonstrates truncation with a long text field'
-          >
-            Description that demonstrates truncation with a long text field
-          </Text>
+        <PageHeaderDetailItem label='Field 1'>
+          Description that demonstrates truncation with a long text field.
         </PageHeaderDetailItem>
         <PageHeaderDetailItem>
           <PageHeaderDetailLabel>
-            FIELD 2 (3)
+            Field 2 (3)
             <DropdownButton type='icon-bare' iconSize='small' icon='down'>
               <MenuItem>Menu Item #1</MenuItem>
               <MenuItem>Menu Item #2</MenuItem>
               <MenuItem>Menu Item #3</MenuItem>
             </DropdownButton>
           </PageHeaderDetailLabel>
-          <PageHeaderDetailBody>
-            <Text category='body' type='regular' title='Multiple Values'>
-              Multiple Values
-            </Text>
-          </PageHeaderDetailBody>
+          <PageHeaderDetailBody>Multiple Values</PageHeaderDetailBody>
         </PageHeaderDetailItem>
-        <PageHeaderDetailItem label='FIELD 3'>
-          <a>Hyperlink</a>
+        <PageHeaderDetailItem label='Field 3'>
+          <a href='#'>Hyperlink</a>
         </PageHeaderDetailItem>
-        <PageHeaderDetailItem label='FIELD 4'>
-          <span>Description (2-line truncat...</span>
+        <PageHeaderDetailItem label='Field 4'>
+          Description (2-line truncati...
         </PageHeaderDetailItem>
       </PageHeaderDetail>
     </PageHeader>
@@ -135,62 +121,44 @@ export const ObjectHome: ComponentStoryObj<typeof PageHeader> = {
   render: (args) => (
     <PageHeader {...args}>
       <PageHeaderHeading
-        legend='LEADS'
-        title={
-          <Grid vertical={false}>
-            <PageHeaderHeadingTitle>
-              My Leads (truncates)
-            </PageHeaderHeadingTitle>
-            <DropdownButton
-              type='icon-bare'
-              icon='down'
-              className='slds-align-middle'
-            >
+        legend='Leads'
+        title='Recently Viewed'
+        leftActions={
+          <DropdownButton type='icon-bare' icon='down'>
+            <MenuItem>Menu Item #1</MenuItem>
+            <MenuItem>Menu Item #2</MenuItem>
+            <MenuItem>Menu Item #3</MenuItem>
+          </DropdownButton>
+        }
+        rightActions={
+          <ButtonGroup>
+            <Button type='neutral'>New</Button>
+            <DropdownButton type='icon-border-filled' menuAlign='right'>
               <MenuItem>Menu Item #1</MenuItem>
               <MenuItem>Menu Item #2</MenuItem>
               <MenuItem>Menu Item #3</MenuItem>
             </DropdownButton>
-          </Grid>
+          </ButtonGroup>
         }
+      />
+      <PageHeaderMeta
         info='10 items • Sorted by Name'
-        leftActions={
-          <DropdownButton
-            type='icon-more'
-            icon='settings'
-            className='slds-m-left_large'
-          >
+        rightActions={[
+          <DropdownButton key={0} type='icon-more' icon='settings'>
             <MenuItem>Menu Item #1</MenuItem>
             <MenuItem>Menu Item #2</MenuItem>
             <MenuItem>Menu Item #3</MenuItem>
-          </DropdownButton>
-        }
-        rightActions={[
-          <DropdownButton
-            key={0}
-            type='icon-more'
-            icon='table'
-            menuAlign='right'
-          >
+          </DropdownButton>,
+          <DropdownButton key={1} type='icon-more' icon='table'>
             <MenuItem>Menu Item #1</MenuItem>
             <MenuItem>Menu Item #2</MenuItem>
             <MenuItem>Menu Item #3</MenuItem>
           </DropdownButton>,
-          <ButtonGroup key={1} className='slds-button-space-left'>
-            <Button type='icon-border' icon='chart' />
-            <Button type='icon-border' icon='filterList' />
-            <DropdownButton type='icon-more' icon='sort' menuAlign='right'>
-              <MenuItem>Menu Item #1</MenuItem>
-              <MenuItem>Menu Item #2</MenuItem>
-              <MenuItem>Menu Item #3</MenuItem>
-            </DropdownButton>
-          </ButtonGroup>,
-          <ButtonGroup key={2} className='slds-button-space-left'>
-            <Button type='neutral'>New Lead</Button>
-            <DropdownButton type='icon-border-filled' menuAlign='right'>
-              <MenuItem>Menu Item #1</MenuItem>
-              <MenuItem>Menu Item #2</MenuItem>
-              <MenuItem>Menu Item #3</MenuItem>
-            </DropdownButton>
+          <Button key={2} type='icon-border-filled' icon='edit' />,
+          <Button key={3} type='icon-border-filled' icon='refresh' />,
+          <ButtonGroup key={4}>
+            <Button type='icon-border-filled' icon='chart' />
+            <Button type='icon-border-filled' icon='filterList' />
           </ButtonGroup>,
         ]}
       />
@@ -210,30 +178,37 @@ export const ObjectHome: ComponentStoryObj<typeof PageHeader> = {
  */
 export const RelatedList: ComponentStoryObj<typeof PageHeader> = {
   render: (args) => (
-    <PageHeader {...args}>
+    <PageHeader variant='related-list' {...args}>
       <PageHeaderHeading
         breadCrumbs={[
           <Crumb key={0} href='#'>
-            ACCOUNTS
+            Accounts
           </Crumb>,
           <Crumb key={1} href='#'>
-            COMPANY ONE
+            Company One
           </Crumb>,
         ]}
         title='Contacts (will truncate)'
-        info='10 items, sorted by name'
+        rightActions={
+          <ButtonGroup>
+            <Button type='neutral'>Add Contact</Button>
+            <DropdownButton type='icon-border-filled' menuAlign='right'>
+              <MenuItem>Menu Item #1</MenuItem>
+              <MenuItem>Menu Item #2</MenuItem>
+              <MenuItem>Menu Item #3</MenuItem>
+            </DropdownButton>
+          </ButtonGroup>
+        }
+      />
+      <PageHeaderMeta
+        info='10 items • sorted by name'
         rightActions={[
-          <DropdownButton
-            key={0}
-            type='icon-more'
-            icon='table'
-            menuAlign='right'
-          >
+          <DropdownButton key={0} type='icon-more' icon='table'>
             <MenuItem>Menu Item #1</MenuItem>
             <MenuItem>Menu Item #2</MenuItem>
             <MenuItem>Menu Item #3</MenuItem>
           </DropdownButton>,
-          <ButtonGroup key={1} className='slds-button-space-left'>
+          <ButtonGroup key={1}>
             <Button type='icon-border' icon='chart' />
             <Button type='icon-border' icon='filterList' />
             <DropdownButton type='icon-more' icon='sort' menuAlign='right'>
@@ -242,14 +217,6 @@ export const RelatedList: ComponentStoryObj<typeof PageHeader> = {
               <MenuItem>Menu Item #3</MenuItem>
             </DropdownButton>
           </ButtonGroup>,
-          <ButtonGroup key={2} className='slds-button-space-left'>
-            <Button type='neutral'>Add Contact</Button>
-            <DropdownButton type='icon-border-filled' menuAlign='right'>
-              <MenuItem>Menu Item #1</MenuItem>
-              <MenuItem>Menu Item #2</MenuItem>
-              <MenuItem>Menu Item #3</MenuItem>
-            </DropdownButton>
-          </ButtonGroup>,
         ]}
       />
     </PageHeader>

From 4997a5990f7d8ed0e9320cfe36dca4ec5af745cf Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 13 Jun 2025 08:59:12 +0900
Subject: [PATCH 093/245] (Notification): remove duplicated
 `.slds-assistive-text`

---
 src/scripts/Notification.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/scripts/Notification.tsx b/src/scripts/Notification.tsx
index e49d2bc88..5559cf1ff 100644
--- a/src/scripts/Notification.tsx
+++ b/src/scripts/Notification.tsx
@@ -74,9 +74,7 @@ export const Notification: FC<NotificationProps> = (props) => {
             iconSize={type === 'toast' ? 'small' : 'x-small'}
             alt='Close'
             onClick={onClose}
-          >
-            <span className='slds-assistive-text'>Close</span>
-          </Button>
+          />
         </div>
       ) : undefined}
       {iconEl}

From 791848b5ee950321d78b5bbad0537f9d7ccd3ebc Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 13 Jun 2025 09:16:53 +0900
Subject: [PATCH 094/245] (Notification): split a markup based on its `type`

---
 src/scripts/Notification.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/scripts/Notification.tsx b/src/scripts/Notification.tsx
index 5559cf1ff..ddf7a1adb 100644
--- a/src/scripts/Notification.tsx
+++ b/src/scripts/Notification.tsx
@@ -67,15 +67,25 @@ export const Notification: FC<NotificationProps> = (props) => {
     <div className={alertClassNames} role='alert' {...pprops}>
       {alt ? <span className='slds-assistive-text'>{alt}</span> : undefined}
       {onClose ? (
-        <div className='slds-notify__close'>
+        type === 'toast' ? (
           <Button
-            type='icon-inverse'
+            className='slds-notification__close slds-button_icon-inverse'
+            type='icon-container'
             icon='close'
-            iconSize={type === 'toast' ? 'small' : 'x-small'}
             alt='Close'
             onClick={onClose}
           />
-        </div>
+        ) : (
+          <div className='slds-notify__close'>
+            <Button
+              type='icon-inverse'
+              icon='close'
+              size='small'
+              alt='Close'
+              onClick={onClose}
+            />
+          </div>
+        )
       ) : undefined}
       {iconEl}
       {type === 'toast' ? (

From 4272771b8b784df27a39b8baa7cdbbcaefd2391b Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 30 May 2025 12:26:14 +0900
Subject: [PATCH 095/245] (Toggle): pass `id` as `controlId`

---
 src/scripts/Toggle.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/scripts/Toggle.tsx b/src/scripts/Toggle.tsx
index 418d0e006..d8414e31d 100644
--- a/src/scripts/Toggle.tsx
+++ b/src/scripts/Toggle.tsx
@@ -62,7 +62,14 @@ export const Toggle = createFC<ToggleProps, { isFormElement: boolean }>(
         </span>
       </label>
     );
-    const formElemProps = { id, label, required, error, cols, elementRef };
+    const formElemProps = {
+      controlId: id,
+      label,
+      required,
+      error,
+      cols,
+      elementRef,
+    };
     return <FormElement {...formElemProps}>{toggle}</FormElement>;
   },
   { isFormElement: true }

From fa9c314b21db465fb5cf833801725d325e035cdb Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 30 May 2025 12:26:58 +0900
Subject: [PATCH 096/245] (Toggle): remove undocumented `aria-live` attribute

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

diff --git a/src/scripts/Toggle.tsx b/src/scripts/Toggle.tsx
index d8414e31d..ca428d3b3 100644
--- a/src/scripts/Toggle.tsx
+++ b/src/scripts/Toggle.tsx
@@ -55,7 +55,7 @@ export const Toggle = createFC<ToggleProps, { isFormElement: boolean }>(
           {...rprops}
           onChange={onChange}
         />
-        <span className='slds-checkbox_faux_container' aria-live='assertive'>
+        <span className='slds-checkbox_faux_container'>
           <span className='slds-checkbox_faux' />
           <span className='slds-checkbox_on'>Enabled</span>
           <span className='slds-checkbox_off'>Disabled</span>

From 000f488cecf27cac41b399de1db43ac6410e8d39 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 30 May 2025 12:28:28 +0900
Subject: [PATCH 097/245] (Toggle): handle `aria-describedby`

---
 src/scripts/Toggle.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/scripts/Toggle.tsx b/src/scripts/Toggle.tsx
index ca428d3b3..be391377a 100644
--- a/src/scripts/Toggle.tsx
+++ b/src/scripts/Toggle.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, InputHTMLAttributes, Ref } from 'react';
+import React, { useId, ChangeEvent, InputHTMLAttributes, Ref } from 'react';
 import classnames from 'classnames';
 import { FormElement, FormElementProps } from './FormElement';
 import { useEventCallback } from './hooks';
@@ -44,18 +44,19 @@ export const Toggle = createFC<ToggleProps, { isFormElement: boolean }>(
       className,
       'slds-checkbox_toggle slds-grid'
     );
+    const name = useId();
     const toggle = (
       <label className={toggleClassNames}>
         <input
           ref={inputRef}
           id={id}
-          name='checkbox'
+          name={name}
           type='checkbox'
-          aria-describedby='toggle-desc'
+          aria-describedby={name}
           {...rprops}
           onChange={onChange}
         />
-        <span className='slds-checkbox_faux_container'>
+        <span id={name} className='slds-checkbox_faux_container'>
           <span className='slds-checkbox_faux' />
           <span className='slds-checkbox_on'>Enabled</span>
           <span className='slds-checkbox_off'>Disabled</span>

From 6145d4efc7b8a07707b6dac36d793ef2fed526f5 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 30 May 2025 12:37:58 +0900
Subject: [PATCH 098/245] (Select): pass `id` as `controlId`

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

diff --git a/src/scripts/Select.tsx b/src/scripts/Select.tsx
index df04c0d52..5330fd0e6 100644
--- a/src/scripts/Select.tsx
+++ b/src/scripts/Select.tsx
@@ -71,7 +71,7 @@ export const Select = createFC<SelectProps, { isFormElement: boolean }>(
     );
     if (isFieldSetColumn || label || required || error || cols) {
       const formElemProps = {
-        id,
+        controlId: id,
         label,
         required,
         error,

From da98ae1e89395f5d36897fb5edf854d28c6060ea Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 30 May 2025 12:38:19 +0900
Subject: [PATCH 099/245] (Select): insert `.slds-select_container` inside the
 `FormElement`

---
 src/scripts/Select.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/scripts/Select.tsx b/src/scripts/Select.tsx
index 5330fd0e6..f6811d19d 100644
--- a/src/scripts/Select.tsx
+++ b/src/scripts/Select.tsx
@@ -80,7 +80,15 @@ export const Select = createFC<SelectProps, { isFormElement: boolean }>(
         tooltipIcon,
         elementRef,
       };
-      return <FormElement {...formElemProps}>{selectElem}</FormElement>;
+      return (
+        <FormElement {...formElemProps}>
+          {rprops.multiple ? (
+            selectElem
+          ) : (
+            <div className='slds-select_container'>{selectElem}</div>
+          )}
+        </FormElement>
+      );
     }
     return selectElem;
   },

From f8b18fabcc9838b7e30e9917c86adb01f4395700 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 30 May 2025 12:56:56 +0900
Subject: [PATCH 100/245] (Radio): update markup

---
 src/scripts/Radio.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/scripts/Radio.tsx b/src/scripts/Radio.tsx
index 2c4686785..0bd88b8c0 100644
--- a/src/scripts/Radio.tsx
+++ b/src/scripts/Radio.tsx
@@ -37,7 +37,7 @@ export const Radio: FC<RadioProps> = ({
   );
   const radioClassNames = classnames(className, 'slds-radio');
   return (
-    <label className={radioClassNames}>
+    <span className={radioClassNames}>
       <input
         ref={inputRef}
         type='radio'
@@ -46,8 +46,10 @@ export const Radio: FC<RadioProps> = ({
         onChange={onChange}
         {...props}
       />
-      <span className='slds-radio_faux' />
-      <span className='slds-form-element__label'>{label || children}</span>
-    </label>
+      <label className='slds-radio__label' htmlFor={id}>
+        <span className='slds-radio_faux' />
+        <span className='slds-form-element__label'>{label || children}</span>
+      </label>
+    </span>
   );
 };

From 4bde0ab5952ebe31f2c3ee935056ea8146d129f4 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 30 May 2025 13:02:05 +0900
Subject: [PATCH 101/245] (Checkbox): update markup

---
 src/scripts/Checkbox.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/scripts/Checkbox.tsx b/src/scripts/Checkbox.tsx
index 80f3f0d91..331709268 100644
--- a/src/scripts/Checkbox.tsx
+++ b/src/scripts/Checkbox.tsx
@@ -56,11 +56,13 @@ export const Checkbox: FC<CheckboxProps> = (props) => {
   };
   const checkClassNames = classnames(className, 'slds-checkbox');
   const check = (
-    <label className={checkClassNames}>
+    <div className={checkClassNames}>
       <input ref={inputRef} type='checkbox' {...rprops} />
-      <span className='slds-checkbox_faux' />
-      <span className='slds-form-element__label'>{label || children}</span>
-    </label>
+      <label className='slds-checkbox__label'>
+        <span className='slds-checkbox_faux' />
+        <span className='slds-form-element__label'>{label || children}</span>
+      </label>
+    </div>
   );
   return grouped ? (
     check

From 8c20590087b9e3037743d3b6ff494a389463ed92 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 30 May 2025 13:03:07 +0900
Subject: [PATCH 102/245] (Checkbox, CheckboxGroup): handle a11y

---
 src/scripts/Checkbox.tsx      | 19 +++++++++++++------
 src/scripts/CheckboxGroup.tsx | 24 ++++++++++++++++++++----
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/scripts/Checkbox.tsx b/src/scripts/Checkbox.tsx
index 331709268..db1273714 100644
--- a/src/scripts/Checkbox.tsx
+++ b/src/scripts/Checkbox.tsx
@@ -6,7 +6,7 @@ import React, {
   ReactNode,
 } from 'react';
 import classnames from 'classnames';
-import { FormElement, FormElementProps } from './FormElement';
+import { FormElement } from './FormElement';
 import { CheckboxGroupContext, CheckboxValueType } from './CheckboxGroup';
 
 /**
@@ -15,7 +15,6 @@ import { CheckboxGroupContext, CheckboxValueType } from './CheckboxGroup';
 export type CheckboxProps = {
   label?: string;
   required?: boolean;
-  error?: FormElementProps['error'];
   cols?: number;
   name?: string;
   value?: CheckboxValueType;
@@ -33,10 +32,10 @@ export type CheckboxProps = {
 export const Checkbox: FC<CheckboxProps> = (props) => {
   const {
     type, // eslint-disable-line @typescript-eslint/no-unused-vars
+    id,
     className,
     label,
     required,
-    error,
     cols,
     tooltip,
     tooltipIcon,
@@ -45,10 +44,12 @@ export const Checkbox: FC<CheckboxProps> = (props) => {
     children,
     ...rprops
   } = props;
-  const { grouped } = useContext(CheckboxGroupContext);
+
+  const { grouped, error, errorId } = useContext(CheckboxGroupContext);
   const formElemProps = {
     required,
     error,
+    errorId,
     cols,
     tooltip,
     tooltipIcon,
@@ -57,8 +58,14 @@ export const Checkbox: FC<CheckboxProps> = (props) => {
   const checkClassNames = classnames(className, 'slds-checkbox');
   const check = (
     <div className={checkClassNames}>
-      <input ref={inputRef} type='checkbox' {...rprops} />
-      <label className='slds-checkbox__label'>
+      <input
+        ref={inputRef}
+        type='checkbox'
+        {...rprops}
+        id={id}
+        aria-describedby={error ? errorId : undefined}
+      />
+      <label className='slds-checkbox__label' htmlFor={id}>
         <span className='slds-checkbox_faux' />
         <span className='slds-form-element__label'>{label || children}</span>
       </label>
diff --git a/src/scripts/CheckboxGroup.tsx b/src/scripts/CheckboxGroup.tsx
index 6f255837b..af6ef30d8 100644
--- a/src/scripts/CheckboxGroup.tsx
+++ b/src/scripts/CheckboxGroup.tsx
@@ -1,4 +1,5 @@
 import React, {
+  useId,
   createContext,
   FieldsetHTMLAttributes,
   Ref,
@@ -23,7 +24,11 @@ export type CheckboxValueType = string | number;
 /**
  *
  */
-export const CheckboxGroupContext = createContext<{ grouped?: boolean }>({});
+export const CheckboxGroupContext = createContext<{
+  grouped?: boolean;
+  error?: FormElementProps['error'];
+  errorId?: string;
+}>({});
 
 /**
  *
@@ -107,19 +112,25 @@ export const CheckboxGroup = createFC<
         ? error.message
         : undefined
       : undefined;
-    const grpCtx = useMemo(() => ({ grouped: true }), []);
+
+    const errorId = useId();
+    const grpCtx = useMemo(
+      () => ({ grouped: true, error, errorId }),
+      [error, errorId]
+    );
 
     return (
       <fieldset
         ref={elementRef}
         className={grpClassNames}
         style={grpStyles}
+        aria-required={required}
         {...rprops}
         onChange={onChange}
       >
         <legend className='slds-form-element__label'>
           {required ? (
-            <abbr className='slds-required' title='required'>
+            <abbr className='slds-required' title='required' aria-hidden='true'>
               *
             </abbr>
           ) : undefined}
@@ -135,7 +146,12 @@ export const CheckboxGroup = createFC<
             {children}
           </CheckboxGroupContext.Provider>
           {errorMessage ? (
-            <div className='slds-form-element__help'>{errorMessage}</div>
+            <div
+              className='slds-form-element__help'
+              id={error ? errorId : undefined}
+            >
+              {errorMessage}
+            </div>
           ) : undefined}
         </div>
       </fieldset>

From d506fe66091e2ac6f17b319c80207fc4f205ee2e Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 13 Jun 2025 13:18:22 +0900
Subject: [PATCH 103/245] (Radio, RadioGroup): improve a11y

---
 src/scripts/Radio.tsx      | 10 +++++++++-
 src/scripts/RadioGroup.tsx | 21 +++++++++++++++++----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/scripts/Radio.tsx b/src/scripts/Radio.tsx
index 0bd88b8c0..d19405216 100644
--- a/src/scripts/Radio.tsx
+++ b/src/scripts/Radio.tsx
@@ -17,6 +17,7 @@ export type RadioProps = {
  *
  */
 export const Radio: FC<RadioProps> = ({
+  id,
   className,
   label,
   name,
@@ -26,7 +27,12 @@ export const Radio: FC<RadioProps> = ({
   children,
   ...props
 }) => {
-  const { name: grpName, onValueChange } = useContext(RadioGroupContext);
+  const {
+    name: grpName,
+    error,
+    errorId,
+    onValueChange,
+  } = useContext(RadioGroupContext);
   const onChange = useEventCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       onChange_?.(e);
@@ -45,6 +51,8 @@ export const Radio: FC<RadioProps> = ({
         value={value}
         onChange={onChange}
         {...props}
+        id={id}
+        aria-describedby={error ? errorId : undefined}
       />
       <label className='slds-radio__label' htmlFor={id}>
         <span className='slds-radio_faux' />
diff --git a/src/scripts/RadioGroup.tsx b/src/scripts/RadioGroup.tsx
index 328f8f22d..6712f22b7 100644
--- a/src/scripts/RadioGroup.tsx
+++ b/src/scripts/RadioGroup.tsx
@@ -1,4 +1,5 @@
 import React, {
+  useId,
   HTMLAttributes,
   Ref,
   createContext,
@@ -9,6 +10,7 @@ import React, {
 import classnames from 'classnames';
 import { FieldSetColumnContext } from './FieldSet';
 import { TooltipContent } from './TooltipContent';
+import { FormElementProps } from './FormElement';
 import { createFC } from './common';
 import { Bivariant } from './typeUtils';
 
@@ -22,6 +24,8 @@ export type RadioValueType = string | number;
  */
 export const RadioGroupContext = createContext<{
   name?: string;
+  error?: FormElementProps['error'];
+  errorId?: string;
   onValueChange?: Bivariant<(value: RadioValueType) => void>;
 }>({});
 
@@ -83,9 +87,11 @@ export const RadioGroup = createFC<RadioGroupProps, { isFormElement: boolean }>(
         ? error.message
         : undefined
       : undefined;
+
+    const errorId = useId();
     const grpCtx = useMemo(
-      () => ({ name, onValueChange }),
-      [name, onValueChange]
+      () => ({ name, error, errorId, onValueChange }),
+      [name, error, errorId, onValueChange]
     );
 
     return (
@@ -93,11 +99,13 @@ export const RadioGroup = createFC<RadioGroupProps, { isFormElement: boolean }>(
         ref={elementRef}
         className={grpClassNames}
         style={grpStyles}
+        role='radiogroup'
+        aria-required={required}
         {...rprops}
       >
         <legend className='slds-form-element__label'>
           {required ? (
-            <abbr className='slds-required' title='required'>
+            <abbr className='slds-required' title='required' aria-hidden='true'>
               *
             </abbr>
           ) : undefined}
@@ -112,7 +120,12 @@ export const RadioGroup = createFC<RadioGroupProps, { isFormElement: boolean }>(
           <RadioGroupContext.Provider value={grpCtx}>
             {children}
             {errorMessage ? (
-              <div className='slds-form-element__help'>{errorMessage}</div>
+              <div
+                className='slds-form-element__help'
+                id={error ? errorId : undefined}
+              >
+                {errorMessage}
+              </div>
             ) : undefined}
           </RadioGroupContext.Provider>
         </div>

From 67c17c81f9e820d65b9473e73dd3a4e320a97b81 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 30 May 2025 13:10:03 +0900
Subject: [PATCH 104/245] (Input): improve a11y

---
 src/scripts/Input.tsx | 48 ++++++++++++++++++++++++++++++++++++-------
 1 file changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/scripts/Input.tsx b/src/scripts/Input.tsx
index b7fcc7bdc..141e81ed0 100644
--- a/src/scripts/Input.tsx
+++ b/src/scripts/Input.tsx
@@ -1,4 +1,5 @@
 import React, {
+  useId,
   ReactElement,
   InputHTMLAttributes,
   KeyboardEvent,
@@ -37,12 +38,19 @@ function useInitComponentStyle() {
 /**
  *
  */
-const InputAddon = ({ content }: { content: string }) => (
+const InputAddon = ({
+  content,
+  id,
+}: {
+  content: string;
+  id: string | undefined;
+}) => (
   <Text
     tag='span'
     className='slds-form-element__addon'
     category='body'
     type='regular'
+    id={id}
   >
     {content}
   </Text>
@@ -155,6 +163,23 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
       prevValueRef.current = e.target.value;
     });
 
+    const labelId = useId();
+
+    const fallbackLabelFor = useId();
+    const labelFor = id ?? fallbackLabelFor;
+
+    const originalPreAddonId = useId();
+    const preAddonId = addonLeft ? originalPreAddonId : undefined;
+
+    const originalPostAddonId = useId();
+    const postAddonId = addonRight ? originalPostAddonId : undefined;
+
+    const labelledBy = [labelId, preAddonId, postAddonId]
+      .filter((id) => id !== undefined)
+      .join(' ');
+
+    const errorId = useId();
+
     const { isFieldSetColumn } = useContext(FieldSetColumnContext);
     const inputClassNames = classnames(
       className,
@@ -162,10 +187,10 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
     );
     const inputElem = readOnly ? (
       <Text
-        id={id}
+        id={labelFor}
         type='regular'
         category='body'
-        className='slds-form-element__static'
+        aria-labelledby={labelledBy}
       >
         {value}
       </Text>
@@ -173,7 +198,7 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
       <input
         ref={inputRef}
         className={inputClassNames}
-        id={id}
+        id={labelFor}
         type={type}
         value={value}
         defaultValue={defaultValue}
@@ -181,6 +206,9 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
         {...rprops}
         onChange={onChange}
         onKeyDown={onKeyDown}
+        aria-labelledby={labelledBy}
+        aria-describedby={error ? errorId : undefined}
+        aria-invalid={error ? true : undefined}
       />
     );
 
@@ -196,20 +224,26 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
       );
       contentElem = (
         <div className={wrapperClassName}>
-          {addonLeft ? <InputAddon content={addonLeft} /> : undefined}
+          {addonLeft ? (
+            <InputAddon content={addonLeft} id={preAddonId} />
+          ) : undefined}
           {iconLeft ? <InputIcon icon={iconLeft} align='left' /> : undefined}
           {inputElem}
           {iconRight ? <InputIcon icon={iconRight} align='right' /> : undefined}
-          {addonRight ? <InputAddon content={addonRight} /> : undefined}
+          {addonRight ? (
+            <InputAddon content={addonRight} id={postAddonId} />
+          ) : undefined}
         </div>
       );
     }
     if (isFieldSetColumn || label || required || error || cols) {
       const formElemProps = {
-        id,
+        id: labelId,
+        controlId: labelFor,
         label,
         required,
         error,
+        errorId,
         readOnly,
         cols,
         tooltip,

From 571ab0f4d9c0520ee3b0f0c9d1da09d76dc548f1 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 30 May 2025 13:18:43 +0900
Subject: [PATCH 105/245] (Textarea): update markup for `readOnly`

---
 src/scripts/Textarea.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/scripts/Textarea.tsx b/src/scripts/Textarea.tsx
index 4222a34a5..3838b8c37 100644
--- a/src/scripts/Textarea.tsx
+++ b/src/scripts/Textarea.tsx
@@ -7,6 +7,7 @@ import React, {
   useRef,
 } from 'react';
 import classnames from 'classnames';
+import { Text } from './Text';
 import { FormElement, FormElementProps } from './FormElement';
 import { FieldSetColumnContext } from './FieldSet';
 import { useEventCallback } from './hooks';
@@ -45,6 +46,7 @@ export const Textarea = createFC<TextareaProps, { isFormElement: boolean }>(
       textareaRef,
       onChange: onChange_,
       onValueChange,
+      readOnly,
       ...rprops
     } = props;
     const prevValueRef = useRef<string>();
@@ -55,7 +57,11 @@ export const Textarea = createFC<TextareaProps, { isFormElement: boolean }>(
     });
     const { isFieldSetColumn } = useContext(FieldSetColumnContext);
     const taClassNames = classnames(className, 'slds-input');
-    const textareaElem = (
+    const textareaElem = readOnly ? (
+      <Text type='regular' category='body'>
+        {rprops.value}
+      </Text>
+    ) : (
       <textarea
         id={id}
         ref={textareaRef}
@@ -74,6 +80,7 @@ export const Textarea = createFC<TextareaProps, { isFormElement: boolean }>(
         tooltip,
         tooltipIcon,
         elementRef,
+        readOnly,
       };
       return <FormElement {...formElemProps}>{textareaElem}</FormElement>;
     }

From 84094cd0226fd84cfed7a7129251d503581f1caf Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 30 May 2025 13:19:39 +0900
Subject: [PATCH 106/245] (Textarea): update a classname

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

diff --git a/src/scripts/Textarea.tsx b/src/scripts/Textarea.tsx
index 3838b8c37..d405885c5 100644
--- a/src/scripts/Textarea.tsx
+++ b/src/scripts/Textarea.tsx
@@ -56,7 +56,7 @@ export const Textarea = createFC<TextareaProps, { isFormElement: boolean }>(
       prevValueRef.current = e.target.value;
     });
     const { isFieldSetColumn } = useContext(FieldSetColumnContext);
-    const taClassNames = classnames(className, 'slds-input');
+    const taClassNames = classnames(className, 'slds-textarea');
     const textareaElem = readOnly ? (
       <Text type='regular' category='body'>
         {rprops.value}

From aeeaae8afef9e3de56d2878f003f4233f8f2da85 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 30 May 2025 13:20:15 +0900
Subject: [PATCH 107/245] (Textarea): improve a11y

---
 src/scripts/Textarea.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/scripts/Textarea.tsx b/src/scripts/Textarea.tsx
index d405885c5..24bf6872b 100644
--- a/src/scripts/Textarea.tsx
+++ b/src/scripts/Textarea.tsx
@@ -1,4 +1,5 @@
 import React, {
+  useId,
   ChangeEvent,
   ReactNode,
   Ref,
@@ -56,6 +57,7 @@ export const Textarea = createFC<TextareaProps, { isFormElement: boolean }>(
       prevValueRef.current = e.target.value;
     });
     const { isFieldSetColumn } = useContext(FieldSetColumnContext);
+    const errorId = useId();
     const taClassNames = classnames(className, 'slds-textarea');
     const textareaElem = readOnly ? (
       <Text type='regular' category='body'>
@@ -68,14 +70,16 @@ export const Textarea = createFC<TextareaProps, { isFormElement: boolean }>(
         className={taClassNames}
         {...rprops}
         onChange={onChange}
+        aria-describedby={error ? errorId : undefined}
       />
     );
     if (isFieldSetColumn || label || required || error || cols) {
       const formElemProps = {
-        id,
+        htmlFor: id,
         label,
         required,
         error,
+        errorId,
         cols,
         tooltip,
         tooltipIcon,

From 3895a6879c0fbf21f7dd3bc92388d2f2768da026 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 13 Jun 2025 13:35:16 +0900
Subject: [PATCH 108/245] (DateInput): pass id as controlId

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

diff --git a/src/scripts/DateInput.tsx b/src/scripts/DateInput.tsx
index 743a8134f..499b54f03 100644
--- a/src/scripts/DateInput.tsx
+++ b/src/scripts/DateInput.tsx
@@ -322,7 +322,7 @@ export const DateInput = createFC<DateInputProps, { isFormElement: boolean }>(
     });
 
     const formElemProps = {
-      id,
+      controlId: id,
       cols,
       label,
       required,

From 434a5018465a1b9249cd7eef8d800506cd033bce Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 3 Jun 2025 12:31:30 +0900
Subject: [PATCH 109/245] (DateInput): update classnames

---
 src/scripts/DateInput.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/scripts/DateInput.tsx b/src/scripts/DateInput.tsx
index 499b54f03..cf418b60a 100644
--- a/src/scripts/DateInput.tsx
+++ b/src/scripts/DateInput.tsx
@@ -333,7 +333,16 @@ export const DateInput = createFC<DateInputProps, { isFormElement: boolean }>(
     };
     return (
       <FormElement {...formElemProps}>
-        <div className={classnames(className, 'slds-dropdown-trigger')}>
+        <div
+          className={classnames(
+            className,
+            'slds-dropdown-trigger',
+            'slds-dropdown-trigger_click',
+            {
+              'slds-is-open': opened,
+            }
+          )}
+        >
           <div className='slds-input-has-icon slds-input-has-icon_right'>
             <Input
               inputRef={inputRef}

From d27457c16f612e5404db5cb8a82974992e7d1478 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 3 Jun 2025 12:31:45 +0900
Subject: [PATCH 110/245] (DateInput): improve a11y

---
 src/scripts/DateInput.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/scripts/DateInput.tsx b/src/scripts/DateInput.tsx
index cf418b60a..3e6a18bab 100644
--- a/src/scripts/DateInput.tsx
+++ b/src/scripts/DateInput.tsx
@@ -358,6 +358,7 @@ export const DateInput = createFC<DateInputProps, { isFormElement: boolean }>(
               icon='event'
               disabled={props.disabled}
               className='slds-input__icon slds-input__icon_right'
+              alt='Select a date'
               tabIndex={-1}
               onClick={props.disabled ? undefined : onDateIconClick}
               onBlur={onInputBlur}

From 226d03f83483d356edb40c5057af659ea57820db Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 3 Jun 2025 11:13:53 +0900
Subject: [PATCH 111/245] (Datepicker): update markups and classnames

---
 src/scripts/Datepicker.tsx | 38 +++++++++++++++++---------------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/scripts/Datepicker.tsx b/src/scripts/Datepicker.tsx
index fc54c8944..28ec076d1 100644
--- a/src/scripts/Datepicker.tsx
+++ b/src/scripts/Datepicker.tsx
@@ -141,13 +141,11 @@ const DatepickerFilter: FC<DatepickerFilterProps> = (props) => {
   const onNextMonth = useEventCallback(() => onMonthChange(1));
   return (
     <div className='slds-datepicker__filter slds-grid'>
-      <div className='slds-datepicker__filter_month slds-grid slds-grid_align-spread slds-size_2-of-3'>
+      <div className='slds-datepicker__filter_month slds-grid slds-grid_align-spread slds-grow'>
         <div className='slds-align-middle'>
           <Button
-            className='slds-align-middle'
             type='icon-container'
             icon='left'
-            size='small'
             alt='Previous Month'
             onClick={onPrevMonth}
           />
@@ -155,25 +153,26 @@ const DatepickerFilter: FC<DatepickerFilterProps> = (props) => {
         <h2 className='slds-align-middle'>{dayjs.monthsShort()[cal.month]}</h2>
         <div className='slds-align-middle'>
           <Button
-            className='slds-align-middle'
             type='icon-container'
             icon='right'
-            size='small'
             alt='Next Month'
             onClick={onNextMonth}
           />
         </div>
       </div>
-      <div className='slds-size_1-of-3'>
-        <Select value={cal.year} onChange={onYearChange}>
-          {new Array(11)
-            .join('_')
-            .split('_')
-            .map((a, i) => {
-              const year = cal.year + i - 5;
-              return <Option key={year} label={String(year)} value={year} />;
-            })}
-        </Select>
+      <div className='slds-shrink-none'>
+        <label className='slds-assistive-text'>Pick a Year</label>
+        <div className='slds-select_container'>
+          <Select value={cal.year} onChange={onYearChange}>
+            {new Array(11)
+              .join('_')
+              .split('_')
+              .map((a, i) => {
+                const year = cal.year + i - 5;
+                return <Option key={year} label={String(year)} value={year} />;
+              })}
+          </Select>
+        </div>
       </div>
     </div>
   );
@@ -241,10 +240,12 @@ const DatepickerDate: FC<DatepickerDateProps> = (props) => {
   }
   const selected = date.value === selectedDate;
   const isToday = date.value === today;
+  const isAdjacentMonth = date.month !== cal.month;
   const dateClassName = classnames({
     'slds-disabled-text': !enabled,
     'slds-is-selected': selected,
     'slds-is-today': isToday,
+    'slds-day_adjacent-month': isAdjacentMonth,
   });
   return (
     <td
@@ -292,12 +293,7 @@ const DatepickerMonth = forwardRef(
       onDateKeyDown,
     } = props;
     return (
-      <table
-        ref={ref}
-        className='datepicker__month'
-        role='grid'
-        aria-labelledby='month'
-      >
+      <table ref={ref} className='slds-datepicker__month' role='grid'>
         <thead>
           <tr>
             {dayjs.weekdaysMin(true).map((wd, i) => (

From d2d898d6d5aecc363b2ee19e989728aa6b0d9195 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 3 Jun 2025 11:16:00 +0900
Subject: [PATCH 112/245] (Datepicker): improve a11y

---
 src/scripts/Datepicker.tsx | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/scripts/Datepicker.tsx b/src/scripts/Datepicker.tsx
index 28ec076d1..36d9d2d77 100644
--- a/src/scripts/Datepicker.tsx
+++ b/src/scripts/Datepicker.tsx
@@ -150,7 +150,13 @@ const DatepickerFilter: FC<DatepickerFilterProps> = (props) => {
             onClick={onPrevMonth}
           />
         </div>
-        <h2 className='slds-align-middle'>{dayjs.monthsShort()[cal.month]}</h2>
+        <h2
+          className='slds-align-middle'
+          aria-atomic='false'
+          aria-live='polite'
+        >
+          {dayjs.monthsShort()[cal.month]}
+        </h2>
         <div className='slds-align-middle'>
           <Button
             type='icon-container'
@@ -195,7 +201,6 @@ type DatepickerDateProps = {
   selectedDate: string | undefined;
   today: string;
   date: CalendarDate;
-  dayIndex: number;
 } & DatepickerHandlers;
 
 /**
@@ -207,7 +212,6 @@ const DatepickerDate: FC<DatepickerDateProps> = (props) => {
     selectedDate,
     today,
     date,
-    dayIndex,
     onDateKeyDown: onDateKeyDown_,
     onDateClick: onDateClick_,
     onDateFocus: onDateFocus_,
@@ -250,10 +254,10 @@ const DatepickerDate: FC<DatepickerDateProps> = (props) => {
   return (
     <td
       className={dateClassName}
-      headers={dayjs().weekday(dayIndex).format('ddd')}
       role='gridcell'
-      aria-disabled={!enabled}
       aria-selected={selected}
+      aria-current={isToday ? 'date' : undefined}
+      aria-label={dayjs(date.value).format('D MMMM YYYY')}
     >
       <span
         className='slds-day'
@@ -293,7 +297,12 @@ const DatepickerMonth = forwardRef(
       onDateKeyDown,
     } = props;
     return (
-      <table ref={ref} className='slds-datepicker__month' role='grid'>
+      <table
+        ref={ref}
+        className='slds-datepicker__month'
+        role='grid'
+        aria-multiselectable='true'
+      >
         <thead>
           <tr>
             {dayjs.weekdaysMin(true).map((wd, i) => (
@@ -485,7 +494,9 @@ export const Datepicker: FC<DatepickerProps> = (props) => {
       className={datepickerClassNames}
       ref={elementRef}
       tabIndex={-1}
+      role='dialog'
       aria-hidden={false}
+      aria-label={`Date picker: ${dayjs.monthsShort()[cal.month]}`}
       onBlur={onBlur}
       onKeyDown={onKeyDown}
     >

From 214c35db380de946044229c39f68cdd27da2b189 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 13 Jun 2025 13:39:23 +0900
Subject: [PATCH 113/245] (Picklist): update markups to combobox pattern

---
 src/scripts/Picklist.tsx | 368 ++++++++++++++++++++++++++++-----------
 1 file changed, 266 insertions(+), 102 deletions(-)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index af241172e..6f7a0adf4 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -6,17 +6,15 @@ import React, {
   useRef,
   Ref,
   ReactNode,
+  useId,
+  useState,
+  useEffect,
+  useCallback,
 } from 'react';
 import classnames from 'classnames';
 import { FormElement, FormElementProps } from './FormElement';
 import { Icon } from './Icon';
-import { Button, ButtonProps } from './Button';
-import {
-  DropdownMenu,
-  DropdownMenuItem,
-  DropdownMenuItemProps,
-  DropdownMenuProps,
-} from './DropdownMenu';
+import { DropdownMenuProps } from './DropdownMenu';
 import { isElInChildren } from './util';
 import { ComponentSettingsContext } from './ComponentSettings';
 import { useControlledValue, useEventCallback, useMergeRefs } from './hooks';
@@ -37,12 +35,24 @@ type PicklistValueType<Multi extends boolean | undefined> = Multi extends true
 /**
  *
  */
-const PicklistValuesContext = createContext<PicklistValue[]>([]);
+const PicklistContext = createContext<{
+  values: PicklistValue[];
+  multiSelect?: boolean;
+  onSelect: (value: PicklistValue) => void;
+  focusedValue?: PicklistValue;
+}>({
+  values: [],
+  onSelect: () => {
+    // noop
+  },
+});
 
 /**
  *
  */
 export type PicklistProps<MultiSelect extends boolean | undefined> = {
+  id?: string;
+  className?: string;
   label?: string;
   required?: boolean;
   multiSelect?: MultiSelect;
@@ -72,10 +82,8 @@ export type PicklistProps<MultiSelect extends boolean | undefined> = {
   onKeyDown?: (e: React.KeyboardEvent) => void;
   onBlur?: () => void;
   onComplete?: () => void;
-} & Omit<
-  ButtonProps,
-  'type' | 'value' | 'defaultValue' | 'onSelect' | 'onBlur' | 'onKeyDown'
->;
+  children?: React.ReactNode;
+};
 
 /**
  *
@@ -85,8 +93,8 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
 ) => ReturnType<FC>) & { isFormElement: boolean } = createFC(
   (props) => {
     const {
+      id: id_,
       className,
-      id,
       value: value_,
       defaultValue,
       opened: opened_,
@@ -104,7 +112,6 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       tooltip,
       tooltipIcon,
       elementRef: elementRef_,
-      buttonRef: buttonRef_,
       dropdownRef: dropdownRef_,
       onSelect,
       onComplete,
@@ -115,6 +122,10 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       ...rprops
     } = props;
 
+    const fallbackId = useId();
+    const id = id_ ?? fallbackId;
+    const listboxId = `${id}-listbox`;
+
     const values_: PicklistValue[] | undefined =
       typeof value_ === 'undefined'
         ? undefined
@@ -140,13 +151,81 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       opened_,
       defaultOpened ?? false
     );
+    const [focusedValue, setFocusedValue] = useState<
+      PicklistValue | undefined
+    >();
 
     const { getActiveElement } = useContext(ComponentSettingsContext);
 
+    // Get option values from children
+    const getOptionValues = useCallback(() => {
+      const optionValues: PicklistValue[] = [];
+      React.Children.forEach(children, (child) => {
+        if (!React.isValidElement(child)) {
+          return;
+        }
+
+        const props: unknown = child.props;
+        const isPropsObject = typeof props === 'object' && props !== null;
+
+        if (
+          isPropsObject &&
+          'value' in props &&
+          (typeof props.value === 'string' || typeof props.value === 'number')
+        ) {
+          optionValues.push(props.value);
+        }
+      });
+      return optionValues;
+    }, [children]);
+
+    // Get next option value for keyboard navigation
+    const getNextValue = useCallback(
+      (currentValue?: PicklistValue) => {
+        const optionValues = getOptionValues();
+        if (optionValues.length === 0) return undefined;
+
+        if (!currentValue) return optionValues[0];
+
+        const currentIndex = optionValues.indexOf(currentValue);
+        return optionValues[currentIndex + 1] || optionValues[0]; // wrap around
+      },
+      [getOptionValues]
+    );
+
+    // Get previous option value for keyboard navigation
+    const getPrevValue = useCallback(
+      (currentValue?: PicklistValue) => {
+        const optionValues = getOptionValues();
+        if (optionValues.length === 0) return undefined;
+
+        if (!currentValue) return optionValues[optionValues.length - 1];
+
+        const currentIndex = optionValues.indexOf(currentValue);
+        return (
+          optionValues[currentIndex - 1] ||
+          optionValues[optionValues.length - 1]
+        ); // wrap around
+      },
+      [getOptionValues]
+    );
+
+    // Set initial focus when dropdown opens
+    useEffect(() => {
+      if (opened && !focusedValue) {
+        // Focus on first selected value or first option
+        const initialFocus =
+          values.length > 0 ? values[0] : getOptionValues()[0];
+        setFocusedValue(initialFocus);
+      } else if (!opened) {
+        // Reset focus when dropdown closes
+        setFocusedValue(undefined);
+      }
+    }, [opened, values, getOptionValues, focusedValue]);
+
     const elRef = useRef<HTMLDivElement | null>(null);
     const elementRef = useMergeRefs([elRef, elementRef_]);
-    const buttonElRef = useRef<HTMLButtonElement | null>(null);
-    const buttonRef = useMergeRefs([buttonElRef, buttonRef_]);
+    const comboboxElRef = useRef<HTMLDivElement | null>(null);
     const dropdownElRef = useRef<HTMLDivElement | null>(null);
     const dropdownRef = useMergeRefs([dropdownElRef, dropdownRef_]);
 
@@ -180,6 +259,11 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       } else {
         // set only one value
         setPicklistValues([itemValue]);
+        setOpened(false);
+        setTimeout(() => {
+          comboboxElRef.current?.focus();
+          onComplete?.();
+        }, 10);
       }
     });
 
@@ -191,43 +275,15 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       );
     });
 
-    const focusToTargetItemEl = useEventCallback(() => {
-      const dropdownEl = dropdownElRef.current;
-      if (!dropdownEl) {
-        return;
-      }
-      const firstItemEl: HTMLAnchorElement | null =
-        dropdownEl.querySelector(
-          '.slds-is-selected > .react-slds-menuitem[tabIndex]'
-        ) || dropdownEl.querySelector('.react-slds-menuitem[tabIndex]');
-      if (firstItemEl) {
-        firstItemEl.focus();
-      }
-    });
-
     const onClick = useEventCallback(() => {
-      setOpened((opened) => !opened);
-      setTimeout(() => {
-        focusToTargetItemEl();
-      }, 10);
+      if (!disabled) {
+        setOpened((opened) => !opened);
+      }
     });
 
     const onPicklistItemSelect = useEventCallback((value: PicklistValue) => {
       updateItemValue(value);
       onSelect?.(value);
-      if (!multiSelect) {
-        // close if only single select
-        setTimeout(() => {
-          setOpened(false);
-          onComplete?.();
-          buttonElRef.current?.focus();
-        }, 200);
-      }
-    });
-
-    const onPicklistClose = useEventCallback(() => {
-      buttonElRef.current?.focus();
-      setOpened(false);
     });
 
     const onBlur = useEventCallback(() => {
@@ -240,18 +296,28 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       }, 10);
     });
 
-    const onKeydown = useEventCallback((e: React.KeyboardEvent) => {
+    const onKeyDown = useEventCallback((e: React.KeyboardEvent) => {
       if (e.keyCode === 40) {
         // down
         e.preventDefault();
         e.stopPropagation();
         if (!opened) {
           setOpened(true);
-          setTimeout(() => {
-            focusToTargetItemEl();
-          }, 10);
         } else {
-          focusToTargetItemEl();
+          // Navigate to next option
+          const nextValue = getNextValue(focusedValue);
+          setFocusedValue(nextValue);
+        }
+      } else if (e.keyCode === 38) {
+        // up
+        e.preventDefault();
+        e.stopPropagation();
+        if (!opened) {
+          setOpened(true);
+        } else {
+          // Navigate to previous option
+          const prevValue = getPrevValue(focusedValue);
+          setFocusedValue(prevValue);
         }
       } else if (e.keyCode === 27) {
         // ESC
@@ -259,6 +325,16 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
         e.stopPropagation();
         setOpened(false);
         onComplete?.();
+      } else if (e.keyCode === 13 || e.keyCode === 32) {
+        // Enter or Space
+        e.preventDefault();
+        e.stopPropagation();
+        if (opened && focusedValue != null) {
+          // Select focused option
+          onPicklistItemSelect(focusedValue);
+        } else {
+          setOpened((opened) => !opened);
+        }
       }
       onKeyDown_?.(e);
     });
@@ -266,7 +342,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
     function getSelectedItemLabel() {
       // many items selected
       if (values.length > 1) {
-        return optionsSelectedText;
+        return `${values.length} ${optionsSelectedText}`;
       }
 
       // one item
@@ -288,11 +364,34 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       return selectedText;
     }
 
-    const picklistClassNames = classnames(
+    const hasValue = values.length > 0;
+    const containerClassNames = classnames(
       className,
-      'slds-picklist',
-      'slds-dropdown-trigger'
+      'slds-combobox_container',
+      'slds-size_small'
+    );
+    const comboboxClassNames = classnames(
+      'slds-combobox',
+      'slds-dropdown-trigger',
+      'slds-dropdown-trigger_click',
+      {
+        'slds-is-open': opened,
+      }
+    );
+    const inputClassNames = classnames(
+      'slds-input_faux',
+      'slds-combobox__input',
+      {
+        'slds-has-focus': opened,
+        'slds-combobox__input-value': hasValue,
+      }
+    );
+    const dropdownClassNames = classnames(
+      'slds-dropdown',
+      'slds-dropdown_length-5',
+      'slds-dropdown_fluid'
     );
+
     const formElemProps = {
       id,
       label,
@@ -303,43 +402,70 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       tooltipIcon,
       elementRef,
     };
+
+    const contextValue = {
+      values,
+      multiSelect,
+      onSelect: onPicklistItemSelect,
+      focusedValue,
+    };
+
     return (
       <FormElement {...formElemProps}>
-        <div className={picklistClassNames} aria-expanded={opened}>
-          <Button
-            id={id}
-            buttonRef={buttonRef}
-            {...rprops}
-            className='slds-picklist__label'
-            style={{ justifyContent: 'normal' }}
-            type='neutral'
-            disabled={disabled}
-            onClick={disabled ? undefined : onClick}
-            onBlur={disabled ? undefined : onBlur}
-            onKeyDown={disabled ? undefined : onKeydown}
-          >
-            <span className='slds-truncate'>
-              {getSelectedItemLabel() || <span>&nbsp;</span>}
-            </span>
-            <Icon icon='down' />
-          </Button>
-          {opened ? (
-            <DropdownMenu
-              portalClassName={classnames(className, 'slds-picklist')}
-              elementRef={dropdownRef}
-              size={menuSize}
-              style={menuStyle}
-              onMenuSelect={onPicklistItemSelect}
-              onMenuClose={onPicklistClose}
-              onBlur={onBlur}
+        <div className={containerClassNames}>
+          <div className={comboboxClassNames} ref={elementRef}>
+            <div
+              className='slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right'
+              role='none'
             >
-              <PicklistValuesContext.Provider value={values}>
-                {children}
-              </PicklistValuesContext.Provider>
-            </DropdownMenu>
-          ) : (
-            <div ref={dropdownElRef} />
-          )}
+              <div
+                ref={comboboxElRef}
+                role='combobox'
+                tabIndex={disabled ? -1 : 0}
+                className={inputClassNames}
+                aria-labelledby={label ? id : undefined}
+                aria-controls={listboxId}
+                aria-expanded={opened}
+                aria-haspopup='listbox'
+                aria-activedescendant={
+                  focusedValue ? `option-${focusedValue}` : undefined
+                }
+                onClick={onClick}
+                onKeyDown={onKeyDown}
+                onBlur={onBlur}
+                {...rprops}
+              >
+                <span className='slds-truncate'>{getSelectedItemLabel()}</span>
+              </div>
+              <span className='slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right'>
+                <Icon
+                  icon='down'
+                  className='slds-icon slds-icon_x-small slds-icon-text-default'
+                />
+              </span>
+            </div>
+            {opened && (
+              <div
+                id={listboxId}
+                className={dropdownClassNames}
+                role='listbox'
+                aria-label='Options'
+                tabIndex={0}
+                aria-busy={false}
+                ref={dropdownRef}
+                style={{ ...menuStyle, left: 0, transform: 'translate(0)' }}
+              >
+                <ul
+                  className='slds-listbox slds-listbox_vertical'
+                  role='presentation'
+                >
+                  <PicklistContext.Provider value={contextValue}>
+                    {children}
+                  </PicklistContext.Provider>
+                </ul>
+              </div>
+            )}
+          </div>
         </div>
       </FormElement>
     );
@@ -350,8 +476,12 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
 /**
  *
  */
-export type PicklistItemProps = DropdownMenuItemProps & {
+export type PicklistItemProps = {
+  label?: React.ReactNode;
   value?: string | number;
+  selected?: boolean;
+  disabled?: boolean;
+  children?: React.ReactNode;
 };
 
 /**
@@ -361,21 +491,55 @@ export const PicklistItem: FC<PicklistItemProps> = ({
   label,
   selected: selected_,
   value,
+  disabled,
   children,
-  ...props
 }) => {
-  const values = useContext(PicklistValuesContext);
+  const { values, multiSelect, onSelect, focusedValue } =
+    useContext(PicklistContext);
   const selected =
     selected_ ?? (value != null ? values.indexOf(value) >= 0 : false);
+  const isFocused = focusedValue === value;
+
+  const onClick = useEventCallback(() => {
+    if (!disabled && value != null) {
+      onSelect(value);
+    }
+  });
+
+  const itemClassNames = classnames(
+    'slds-media',
+    'slds-listbox__option',
+    'slds-listbox__option_plain',
+    'slds-media_small',
+    {
+      'slds-is-selected': selected,
+      'slds-has-focus': isFocused,
+    }
+  );
+
   return (
-    <DropdownMenuItem
-      icon={selected ? 'check' : 'none'}
-      role='menuitemradio'
-      selected={selected}
-      eventKey={value}
-      {...props}
-    >
-      {label || children}
-    </DropdownMenuItem>
+    <li role='presentation' className='slds-listbox__item'>
+      <div
+        id={value ? `option-${value}` : undefined}
+        className={itemClassNames}
+        role='option'
+        aria-selected={selected}
+        aria-checked={multiSelect ? selected : undefined}
+        onClick={onClick}
+      >
+        <span className='slds-media__figure slds-listbox__option-icon'>
+          {selected && (
+            <span className='slds-icon_container slds-icon-utility-check slds-current-color'>
+              <Icon icon='check' className='slds-icon slds-icon_x-small' />
+            </span>
+          )}
+        </span>
+        <span className='slds-media__body'>
+          <span className='slds-truncate' title={String(label || children)}>
+            {label || children}
+          </span>
+        </span>
+      </div>
+    </li>
   );
 };

From 4dd62f91f5012098fb0832d7bf2a1d849fe87517 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 5 Jun 2025 07:39:44 +0900
Subject: [PATCH 114/245] (Picklist): update classnames for dropdown sizing

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

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index 6f7a0adf4..37e6a8ba8 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -389,7 +389,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
     const dropdownClassNames = classnames(
       'slds-dropdown',
       'slds-dropdown_length-5',
-      'slds-dropdown_fluid'
+      menuSize ? `slds-dropdown_${menuSize}` : 'slds-dropdown_fluid'
     );
 
     const formElemProps = {

From 18274d848631787830d1295b6dc649ad6884e74c Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 5 Jun 2025 07:40:17 +0900
Subject: [PATCH 115/245] (Picklist): improve a11y for disabled state

---
 src/scripts/Picklist.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index 37e6a8ba8..012cc0e80 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -382,8 +382,9 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       'slds-input_faux',
       'slds-combobox__input',
       {
-        'slds-has-focus': opened,
+        'slds-has-focus': opened && !disabled,
         'slds-combobox__input-value': hasValue,
+        'slds-is-disabled': disabled,
       }
     );
     const dropdownClassNames = classnames(
@@ -427,6 +428,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
                 aria-controls={listboxId}
                 aria-expanded={opened}
                 aria-haspopup='listbox'
+                aria-disabled={disabled}
                 aria-activedescendant={
                   focusedValue ? `option-${focusedValue}` : undefined
                 }
@@ -525,6 +527,7 @@ export const PicklistItem: FC<PicklistItemProps> = ({
         role='option'
         aria-selected={selected}
         aria-checked={multiSelect ? selected : undefined}
+        aria-disabled={disabled}
         onClick={onClick}
       >
         <span className='slds-media__figure slds-listbox__option-icon'>

From 6730e1c5ad87ce523c24aebe620c13562634ae9e Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 10 Jun 2025 17:12:13 +0900
Subject: [PATCH 116/245] (Form): update markups

---
 src/scripts/Form.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/scripts/Form.tsx b/src/scripts/Form.tsx
index 037575084..9b743b3f1 100644
--- a/src/scripts/Form.tsx
+++ b/src/scripts/Form.tsx
@@ -1,4 +1,4 @@
-import React, { FC, FormHTMLAttributes } from 'react';
+import React, { FC, HTMLAttributes } from 'react';
 import classnames from 'classnames';
 import { FormElement } from './FormElement';
 
@@ -7,7 +7,7 @@ import { FormElement } from './FormElement';
  */
 export type FormProps = {
   type?: 'stacked' | 'horizontal' | 'inline' | 'compound';
-} & FormHTMLAttributes<HTMLFormElement>;
+} & HTMLAttributes<HTMLDivElement>;
 
 /**
  *
@@ -16,7 +16,7 @@ export const Form: FC<FormProps> = (props) => {
   const { className, type = 'stacked', children, ...rprops } = props;
   const formClassNames = classnames(className, `slds-form_${type}`);
   return (
-    <form className={formClassNames} {...rprops}>
+    <div className={formClassNames} {...rprops}>
       {React.Children.map(children, (child) => {
         if (
           React.isValidElement(child) &&
@@ -26,6 +26,6 @@ export const Form: FC<FormProps> = (props) => {
         }
         return child;
       })}
-    </form>
+    </div>
   );
 };

From c563045859afc4beae5a8228b510c08466e7b981 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 10 Jun 2025 17:13:11 +0900
Subject: [PATCH 117/245] (Form): apply form type to each form element

---
 src/scripts/CheckboxGroup.tsx |  3 +++
 src/scripts/FieldSet.tsx      |  6 +++++-
 src/scripts/Form.tsx          | 31 ++++++++++++++++++++-----------
 src/scripts/FormElement.tsx   |  7 +++++++
 src/scripts/RadioGroup.tsx    |  3 +++
 5 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/src/scripts/CheckboxGroup.tsx b/src/scripts/CheckboxGroup.tsx
index 6f255837b..d1d926ff6 100644
--- a/src/scripts/CheckboxGroup.tsx
+++ b/src/scripts/CheckboxGroup.tsx
@@ -8,6 +8,7 @@ import React, {
   ReactNode,
 } from 'react';
 import classnames from 'classnames';
+import { FormTypeContext } from './Form';
 import { FormElementProps } from './FormElement';
 import { FieldSetColumnContext } from './FieldSet';
 import { TooltipContent } from './TooltipContent';
@@ -63,6 +64,7 @@ export const CheckboxGroup = createFC<
       children,
       ...rprops
     } = props;
+    const type = useContext(FormTypeContext);
     const { totalCols } = useContext(FieldSetColumnContext);
     const controlElRef = useRef<HTMLDivElement | null>(null);
 
@@ -88,6 +90,7 @@ export const CheckboxGroup = createFC<
     const grpClassNames = classnames(
       className,
       'slds-form-element',
+      type ? `slds-form-element_${type}` : null,
       {
         'slds-has-error': error,
         'slds-is-required': required,
diff --git a/src/scripts/FieldSet.tsx b/src/scripts/FieldSet.tsx
index 6c6161e3c..e254dae30 100644
--- a/src/scripts/FieldSet.tsx
+++ b/src/scripts/FieldSet.tsx
@@ -3,8 +3,10 @@ import React, {
   HTMLAttributes,
   ReactNode,
   useMemo,
+  useContext,
 } from 'react';
 import classnames from 'classnames';
+import { FormTypeContext } from './Form';
 import { FormElement } from './FormElement';
 import { createFC } from './common';
 
@@ -75,10 +77,12 @@ export const FieldSet = createFC<
   { isFormElement: boolean; Row: typeof FieldSetRow }
 >(
   ({ className, label, children, ...props }) => {
+    const type = useContext(FormTypeContext) ?? 'compound';
+
     const fsClassNames = classnames(
       className,
       'slds-form-element',
-      'slds-form-element_compound'
+      `slds-form-element_${type}`
     );
     const legendClassNames = classnames(
       'slds-form-element__legend',
diff --git a/src/scripts/Form.tsx b/src/scripts/Form.tsx
index 9b743b3f1..e83e0d067 100644
--- a/src/scripts/Form.tsx
+++ b/src/scripts/Form.tsx
@@ -9,6 +9,12 @@ export type FormProps = {
   type?: 'stacked' | 'horizontal' | 'inline' | 'compound';
 } & HTMLAttributes<HTMLDivElement>;
 
+/**
+ *
+ */
+export const FormTypeContext =
+  React.createContext<FormProps['type']>(undefined);
+
 /**
  *
  */
@@ -16,16 +22,19 @@ export const Form: FC<FormProps> = (props) => {
   const { className, type = 'stacked', children, ...rprops } = props;
   const formClassNames = classnames(className, `slds-form_${type}`);
   return (
-    <div className={formClassNames} {...rprops}>
-      {React.Children.map(children, (child) => {
-        if (
-          React.isValidElement(child) &&
-          !(child.type as unknown as { isFormElement?: boolean }).isFormElement
-        ) {
-          return <FormElement>{child}</FormElement>;
-        }
-        return child;
-      })}
-    </div>
+    <FormTypeContext.Provider value={type === 'compound' ? 'stacked' : type}>
+      <div className={formClassNames} {...rprops}>
+        {React.Children.map(children, (child) => {
+          if (
+            React.isValidElement(child) &&
+            !(child.type as unknown as { isFormElement?: boolean })
+              .isFormElement
+          ) {
+            return <FormElement>{child}</FormElement>;
+          }
+          return child;
+        })}
+      </div>
+    </FormTypeContext.Provider>
   );
 };
diff --git a/src/scripts/FormElement.tsx b/src/scripts/FormElement.tsx
index cae09a906..1762d72eb 100644
--- a/src/scripts/FormElement.tsx
+++ b/src/scripts/FormElement.tsx
@@ -8,6 +8,7 @@ import React, {
   useCallback,
 } from 'react';
 import classnames from 'classnames';
+import { FormTypeContext } from './Form';
 import { FieldSetColumnContext } from './FieldSet';
 import { createFC } from './common';
 import { TooltipContent } from './TooltipContent';
@@ -31,6 +32,7 @@ export type FormElementProps = {
   children?: ReactNode;
   tooltip?: ReactNode;
   tooltipIcon?: string;
+  type?: 'stacked' | 'horizontal' | 'inline' | 'compound';
 };
 
 /**
@@ -56,8 +58,12 @@ export const FormElement = createFC<
       readOnly,
       tooltip,
       tooltipIcon,
+      type: propsType,
     } = props;
 
+    const contextType = useContext(FormTypeContext);
+    const type = propsType ?? contextType;
+
     const controlElRef = useRef<HTMLDivElement>(null);
 
     const { totalCols } = useContext(FieldSetColumnContext);
@@ -72,6 +78,7 @@ export const FormElement = createFC<
 
     const formElementClassNames = classnames(
       'slds-form-element',
+      type ? `slds-form-element_${type}` : null,
       readOnly ? 'slds-form-element_readonly' : null,
       error ? 'slds-has-error' : null,
       typeof totalCols === 'number'
diff --git a/src/scripts/RadioGroup.tsx b/src/scripts/RadioGroup.tsx
index 328f8f22d..7e73b6ff0 100644
--- a/src/scripts/RadioGroup.tsx
+++ b/src/scripts/RadioGroup.tsx
@@ -7,6 +7,7 @@ import React, {
   ReactNode,
 } from 'react';
 import classnames from 'classnames';
+import { FormTypeContext } from './Form';
 import { FieldSetColumnContext } from './FieldSet';
 import { TooltipContent } from './TooltipContent';
 import { createFC } from './common';
@@ -60,10 +61,12 @@ export const RadioGroup = createFC<RadioGroupProps, { isFormElement: boolean }>(
       onValueChange,
       ...rprops
     } = props;
+    const type = useContext(FormTypeContext);
     const { totalCols } = useContext(FieldSetColumnContext);
     const grpClassNames = classnames(
       className,
       'slds-form-element',
+      type ? `slds-form-element_${type}` : null,
       {
         'slds-has-error': error,
         'slds-is-required': required,

From 0746be92647b8ab6f77f8acf88179cf0ef5385f1 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 5 Jun 2025 14:47:13 +0900
Subject: [PATCH 118/245] (Icon): add `xx-small` size

---
 src/scripts/Icon.tsx     | 6 ++++--
 stories/Icon.stories.tsx | 7 ++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx
index 4f1f7dd0d..d2c4a9a2a 100644
--- a/src/scripts/Icon.tsx
+++ b/src/scripts/Icon.tsx
@@ -153,7 +153,7 @@ export type IconCategory =
   | 'doctype'
   | 'standard'
   | 'utility';
-export type IconSize = 'x-small' | 'small' | 'medium' | 'large';
+export type IconSize = 'xx-small' | 'x-small' | 'small' | 'medium' | 'large';
 export type IconContainer = boolean | 'default' | 'circle';
 export type IconTextColor = 'default' | 'warning' | 'error' | null;
 
@@ -202,7 +202,9 @@ const SvgIcon = forwardRef(
       'react-slds-icon',
       {
         'slds-icon': !/slds-button__icon/.test(className),
-        [`slds-icon_${size}`]: /^(x-small|small|medium|large)$/.test(size),
+        [`slds-icon_${size}`]: /^(xx-small|x-small|small|medium|large)$/.test(
+          size
+        ),
         [`slds-icon-text-${textColor ?? 'default'}`]:
           /^(default|warning|error)$/.test(textColor ?? '') && !iconColor,
         [`slds-icon-${iconColor ?? ''}`]: !container && iconColor,
diff --git a/stories/Icon.stories.tsx b/stories/Icon.stories.tsx
index 86d5a23e6..6d43164e3 100644
--- a/stories/Icon.stories.tsx
+++ b/stories/Icon.stories.tsx
@@ -27,6 +27,7 @@ const ListEntry: FC<{ title: string; children?: ReactNode }> = ({
 );
 
 type StoryProps = ComponentProps<typeof Icon> & {
+  xxsmall_onClick?: ComponentProps<typeof Icon>['onClick'];
   xsmall_onClick?: ComponentProps<typeof Icon>['onClick'];
   small_onClick?: ComponentProps<typeof Icon>['onClick'];
   medium_onClick?: ComponentProps<typeof Icon>['onClick'];
@@ -68,12 +69,15 @@ export const ControlledWithKnobs: StoryObj<ComponentProps<typeof Icon>> = {
  */
 export const Sizes: StoryObj<StoryProps> = {
   render: ({
+    xxsmall_onClick,
     xsmall_onClick,
     small_onClick,
     medium_onClick,
     large_onClick,
   }) => (
     <div>
+      <Icon icon='standard:case' size='xx-small' onClick={xxsmall_onClick} />
+      <span className='slds-p-right_small' />
       <Icon icon='standard:case' size='x-small' onClick={xsmall_onClick} />
       <span className='slds-p-right_small' />
       <Icon icon='standard:case' size='small' onClick={small_onClick} />
@@ -84,6 +88,7 @@ export const Sizes: StoryObj<StoryProps> = {
     </div>
   ),
   argTypes: {
+    xxsmall_onClick: { action: 'xx-small:click' },
     xsmall_onClick: { action: 'x-small:click' },
     small_onClick: { action: 'small:click' },
     medium_onClick: { action: 'medium:click' },
@@ -92,7 +97,7 @@ export const Sizes: StoryObj<StoryProps> = {
   parameters: {
     docs: {
       storyDescription:
-        'Icon with different size (x-small, small, medium, large)',
+        'Icon with different size (xx-small, x-small, small, medium, large)',
     },
   },
 };

From 7dbc1211a76010618395bb17afbb050e0f6593cf Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 5 Jun 2025 14:49:55 +0900
Subject: [PATCH 119/245] (Spinner): add `x-small` size

---
 src/scripts/Spinner.tsx     |  2 +-
 stories/Spinner.stories.tsx | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/scripts/Spinner.tsx b/src/scripts/Spinner.tsx
index b357e4d39..3c7aefdc5 100644
--- a/src/scripts/Spinner.tsx
+++ b/src/scripts/Spinner.tsx
@@ -4,7 +4,7 @@ import classnames from 'classnames';
 /**
  *
  */
-export type SpinnerSize = 'small' | 'medium' | 'large';
+export type SpinnerSize = 'x-small' | 'small' | 'medium' | 'large';
 export type SpinnerType = 'brand' | 'inverse';
 export type SpinnerProps = {
   container?: boolean;
diff --git a/stories/Spinner.stories.tsx b/stories/Spinner.stories.tsx
index f326e050e..2947f062f 100644
--- a/stories/Spinner.stories.tsx
+++ b/stories/Spinner.stories.tsx
@@ -50,6 +50,9 @@ export const ControlledWithKnobs: ComponentStoryObj<typeof Spinner> = {
 export const Default: ComponentStoryObj<typeof Spinner> = {
   render: (args) => (
     <div {...args}>
+      <div style={containerStyle}>
+        <Spinner size='x-small' {...args} />
+      </div>
       <div style={containerStyle}>
         <Spinner size='small' {...args} />
       </div>
@@ -64,7 +67,8 @@ export const Default: ComponentStoryObj<typeof Spinner> = {
   parameters: {
     docs: {
       description: {
-        story: 'Default spinner with different sizes (small, medium, large)',
+        story:
+          'Default spinner with different sizes (x-small, small, medium, large)',
       },
     },
   },
@@ -81,7 +85,8 @@ export const Brand: ComponentStoryObj<typeof Spinner> = {
   parameters: {
     docs: {
       description: {
-        story: 'Brand spinner with different sizes (small, medium, large)',
+        story:
+          'Brand spinner with different sizes (x-small, small, medium, large)',
       },
     },
   },
@@ -93,6 +98,9 @@ export const Brand: ComponentStoryObj<typeof Spinner> = {
 export const Inverse: ComponentStoryObj<typeof Spinner> = {
   render: (args) => (
     <div>
+      <div style={inverseContainerStyle}>
+        <Spinner size='x-small' {...args} />
+      </div>
       <div style={inverseContainerStyle}>
         <Spinner size='small' {...args} />
       </div>
@@ -110,7 +118,8 @@ export const Inverse: ComponentStoryObj<typeof Spinner> = {
   parameters: {
     docs: {
       description: {
-        story: 'Inverse spinner with different sizes (small, medium, large)',
+        story:
+          'Inverse spinner with different sizes (x-small, small, medium, large)',
       },
     },
   },

From 0d68f52bcdeb4f0290db4d3e76e57944a9b037e3 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 5 Jun 2025 14:50:12 +0900
Subject: [PATCH 120/245] (Spinner): add a `layout` prop

---
 src/scripts/Spinner.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/scripts/Spinner.tsx b/src/scripts/Spinner.tsx
index 3c7aefdc5..421475e65 100644
--- a/src/scripts/Spinner.tsx
+++ b/src/scripts/Spinner.tsx
@@ -6,10 +6,12 @@ import classnames from 'classnames';
  */
 export type SpinnerSize = 'x-small' | 'small' | 'medium' | 'large';
 export type SpinnerType = 'brand' | 'inverse';
+export type SpinnerLayout = 'inline';
 export type SpinnerProps = {
   container?: boolean;
   size?: SpinnerSize;
   type?: SpinnerType;
+  layout?: SpinnerLayout;
 } & HTMLAttributes<HTMLDivElement>;
 
 /**
@@ -21,13 +23,15 @@ export const Spinner: FC<SpinnerProps> = (props) => {
     container = true,
     size = 'small',
     type,
+    layout,
     ...rprops
   } = props;
   const spinnerClassNames = classnames(
     className,
     'slds-spinner',
     `slds-spinner_${size}`,
-    type ? `slds-spinner_${type}` : null
+    type ? `slds-spinner_${type}` : null,
+    layout ? `slds-spinner_${layout}` : null
   );
   const spinner = (
     <div className={spinnerClassNames} role='status' {...rprops}>

From e761b0ed82d9338e13d5adf65528ccf417d38d2e Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 5 Jun 2025 14:58:29 +0900
Subject: [PATCH 121/245] (Lookup): implement basic SLDS-compliant combobox
 pattern

- add SLDS-compliant combobox markup structure
- implement basic aria attributes (role, aria-expanded, aria-haspopup, etc.)
- add keyboard navigation (arrow keys, Enter, Escape)
- support search functionality with dropdown display
- include listHeader and listFooter support
- add loading state display
- maintain existing API compatibility for basic features
- temporarily comment out future features in stories to avoid type errors
---
 src/scripts/Lookup.tsx     | 999 +++++++++++++------------------------
 stories/Lookup.stories.tsx | 135 +++--
 2 files changed, 437 insertions(+), 697 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 13e339bc5..73e95d5c6 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -2,28 +2,20 @@ import React, {
   InputHTMLAttributes,
   ChangeEvent,
   KeyboardEvent,
-  SyntheticEvent,
-  MouseEvent,
-  FC,
   Ref,
   useRef,
   useContext,
   useState,
   useEffect,
-  EventHandler,
   ReactNode,
+  useId,
+  useCallback,
 } from 'react';
 import classnames from 'classnames';
-import { AutoAlign, AutoAlignInjectedProps, AutoAlignProps } from './AutoAlign';
-import { Button } from './Button';
 import { FormElement, FormElementProps } from './FormElement';
-import { Input, InputProps } from './Input';
 import { Icon, IconCategory } from './Icon';
 import { Spinner } from './Spinner';
-import { Pill } from './Pill';
-import { DropdownButton } from './DropdownButton';
-import { DropdownMenuItem } from './DropdownMenu';
-import { isElInChildren, registerStyle } from './util';
+import { isElInChildren } from './util';
 import { ComponentSettingsContext } from './ComponentSettings';
 import { useControlledValue, useEventCallback, useMergeRefs } from './hooks';
 import { createFC } from './common';
@@ -41,504 +33,16 @@ export type LookupEntry = {
   meta?: string;
 };
 
-export type LookupSelectionProps = {
-  id?: string;
-  selected?: LookupEntry;
-  hidden?: boolean;
-  onResetSelection?: () => void;
-  lookupSelectionRef?: Ref<HTMLDivElement>;
-};
-
-/**
- *
- */
-export const LookupSelection: FC<LookupSelectionProps> = (props) => {
-  const { id, hidden, selected, lookupSelectionRef, onResetSelection } = props;
-  const pillRef = useRef<HTMLElement | null>(null);
-
-  const onKeyDown = useEventCallback((e: KeyboardEvent<HTMLElement>) => {
-    if (e.keyCode === 8 || e.keyCode === 46) {
-      // Bacspace / DEL
-      e.preventDefault();
-      e.stopPropagation();
-      onResetSelection?.();
-    }
-  });
-
-  const onPillClick = useEventCallback((e: MouseEvent<HTMLSpanElement>) => {
-    e.currentTarget.focus();
-    e.preventDefault();
-    e.stopPropagation();
-  });
-
-  const lookupClassNames = classnames({ 'slds-hide': hidden });
-  return (
-    <div ref={lookupSelectionRef} className={lookupClassNames}>
-      <div className='slds-pill_container'>
-        {selected ? (
-          <Pill
-            id={id}
-            truncate
-            pillRef={pillRef}
-            onKeyDown={onKeyDown}
-            onClick={onPillClick}
-            tabIndex={0}
-            icon={
-              selected.icon
-                ? {
-                    category: selected.category,
-                    icon: selected.icon,
-                  }
-                : undefined
-            }
-            label={selected.label}
-            onRemove={onResetSelection}
-          />
-        ) : undefined}
-      </div>
-    </div>
-  );
-};
-
 /**
  *
  */
 export type LookupScope = {
   label: string;
-  value: string;
-  icon: string;
-};
-
-/**
- *
- */
-export type LookupSearchProps = Omit<
-  InputProps,
-  'value' | 'defaultValue' | 'onChange' | 'onSelect' | 'onValueChange'
-> & {
-  hidden?: boolean;
-  searchText?: string;
-  scopes?: LookupScope[];
-  targetScope?: string;
-  iconAlign?: 'left' | 'right';
-  disabled?: boolean;
-  onBlur?: () => void;
-  onSearchTextChange?: (searchText: string) => void;
-  onScopeMenuClick?: EventHandler<SyntheticEvent<HTMLButtonElement>>;
-  onScopeSelect?: (value: string) => void;
-  onPressDown?: () => void;
-  onSubmit?: () => void;
-  onComplete?: (cancel?: boolean) => void;
-};
-
-/**
- *
- */
-function useInitLookupSearchComponent() {
-  useEffect(() => {
-    registerStyle('lookup-search', [
-      [
-        '.react-slds-lookup.slds-lookup[data-scope="multi"] .react-slds-lookup-scope-selector',
-        '{ min-width: 3rem; }',
-      ],
-      [
-        '.react-slds-lookup.slds-lookup[data-scope="multi"] .react-slds-lookup-scope-selector .slds-dropdown-trigger',
-        '{ margin-left: 0; }',
-      ],
-      [
-        '.react-slds-lookup.slds-lookup[data-scope="multi"] .react-slds-lookup-scope-selector .slds-dropdown-trigger .slds-button',
-        '{ padding: 0 0.25rem; }',
-      ],
-      [
-        '.react-slds-lookup.slds-lookup[data-scope="multi"] .slds-box_border',
-        '{ background-color: white; }',
-      ],
-      [
-        '.react-slds-lookup.slds-lookup[data-scope="multi"] .slds-box_border.react-slds-box-disabled',
-        '{ background-color: #e0e5ee; border-color: #a8b7c7; cursor: not-allowed; }',
-      ],
-      [
-        '.react-slds-lookup.slds-lookup[data-scope="multi"] .slds-box_border .slds-input_bare',
-        '{ height: 2.15rem; width: 100%; }',
-      ],
-    ]);
-  }, []);
-}
-
-/**
- *
- */
-export const LookupSearch: FC<LookupSearchProps> = (props) => {
-  const {
-    className,
-    hidden,
-    searchText,
-    iconAlign = 'right',
-    scopes,
-    targetScope,
-    disabled,
-    inputRef: inputRef_,
-    onSearchTextChange,
-    onScopeMenuClick,
-    onScopeSelect,
-    onKeyDown,
-    onPressDown,
-    onBlur,
-    onComplete,
-    onSubmit,
-    ...rprops
-  } = props;
-
-  useInitLookupSearchComponent();
-
-  const inputElRef = useRef<HTMLInputElement | null>(null);
-  const inputRef = useMergeRefs([inputElRef, inputRef_]);
-
-  const elRef = useRef<HTMLDivElement | null>(null);
-
-  const onLookupIconClick = useEventCallback(() => {
-    inputElRef.current?.focus();
-    onSubmit?.();
-  });
-
-  const onInputKeyDown = useEventCallback(
-    (e: KeyboardEvent<HTMLInputElement>) => {
-      if (e.keyCode === 13) {
-        // return key
-        e.preventDefault();
-        e.stopPropagation();
-        const searchText = e.currentTarget.value;
-        if (searchText) {
-          onSubmit?.();
-        } else {
-          // if no search text, quit lookup search
-          onComplete?.();
-        }
-      } else if (e.keyCode === 40) {
-        // down key
-        e.preventDefault();
-        e.stopPropagation();
-        onPressDown?.();
-      } else if (e.keyCode === 27) {
-        // ESC
-        e.preventDefault();
-        e.stopPropagation();
-        // quit lookup search (cancel)
-        const cancel = true;
-        onComplete?.(cancel);
-      }
-      onKeyDown?.(e);
-    }
-  );
-
-  const onInputChange = useEventCallback((e: ChangeEvent<HTMLInputElement>) => {
-    const searchText = e.target.value;
-    onSearchTextChange?.(searchText);
-  });
-
-  const onInputBlur = useEventCallback(() => {
-    setTimeout(() => {
-      if (!isFocusedInComponent()) {
-        onBlur?.();
-      }
-    }, 10);
-  });
-
-  const { getActiveElement } = useContext(ComponentSettingsContext);
-
-  const isFocusedInComponent = useEventCallback(() => {
-    const targetEl = getActiveElement();
-    return isElInChildren(elRef.current, targetEl);
-  });
-
-  const searchInputClassNames = classnames(
-    'slds-grid',
-    'slds-input-has-icon',
-    `slds-input-has-icon_${iconAlign}`,
-    { 'slds-hide': hidden },
-    scopes != null ? 'slds-col' : undefined,
-    className
-  );
-  const searchInput = (
-    <div
-      ref={scopes != null ? undefined : elRef}
-      className={searchInputClassNames}
-    >
-      <Input
-        {...rprops}
-        disabled={disabled}
-        bare={scopes != null}
-        inputRef={inputRef}
-        value={searchText}
-        onKeyDown={onInputKeyDown}
-        onChange={onInputChange}
-        onBlur={onInputBlur}
-      />
-      <Button
-        type='icon'
-        icon='search'
-        disabled={disabled}
-        className='slds-input__icon slds-input__icon_right'
-        tabIndex={-1}
-        onClick={disabled ? undefined : onLookupIconClick}
-        onBlur={onInputBlur}
-      />
-    </div>
-  );
-
-  if (scopes) {
-    let target = scopes[0] || {};
-    for (const scope of scopes) {
-      if (scope.value === targetScope) {
-        target = scope;
-        break;
-      }
-    }
-    const icon = <Icon icon={target.icon || 'none'} size='x-small' />;
-    const selectorClassNames = classnames(
-      'slds-grid',
-      'slds-grid_align-center',
-      'slds-grid_vertical-align-center',
-      'react-slds-lookup-scope-selector'
-    );
-    const lookupSearchClassNames = classnames(
-      'slds-grid',
-      'slds-form-element__control',
-      'slds-box_border',
-      { 'react-slds-box-disabled': disabled },
-      { 'slds-hide': hidden }
-    );
-    const styles = {
-      WebkitFlexWrap: 'nowrap' as const,
-      msFlexWrap: 'nowrap',
-      flexWrap: 'nowrap' as const,
-    };
-    return (
-      <div ref={elRef} className={lookupSearchClassNames} style={styles}>
-        <div className={selectorClassNames}>
-          <DropdownButton
-            label={icon}
-            disabled={disabled}
-            onClick={onScopeMenuClick}
-            onMenuSelect={(v: string | number) =>
-              onScopeSelect && onScopeSelect(String(v))
-            }
-            onBlur={onInputBlur}
-          >
-            {scopes.map((scope: LookupScope) => (
-              <DropdownMenuItem
-                key={scope.value}
-                eventKey={scope.value}
-                label={scope.label}
-                icon={scope.icon}
-              />
-            ))}
-          </DropdownButton>
-        </div>
-        {searchInput}
-      </div>
-    );
-  }
-  return searchInput;
-};
-
-/**
- *
- */
-type LookupCandidateListProps = {
-  data?: LookupEntry[];
-  focus?: boolean;
-  loading?: boolean;
-  filter?: (entry: LookupEntry) => boolean;
-  elementRef?: Ref<HTMLDivElement>;
-  onSelect?: (entry: LookupEntry | null) => void;
-  onBlur?: (e: React.FocusEvent<HTMLAnchorElement>) => void;
-  header?: JSX.Element;
-  footer?: JSX.Element;
-};
-
-function trueFilter() {
-  return true;
-}
-
-/**
- *
- */
-const LookupCandidateListInner: FC<
-  LookupCandidateListProps & AutoAlignInjectedProps
-> = (props) => {
-  const {
-    data = [],
-    loading,
-    header,
-    footer,
-    filter = trueFilter,
-    alignment,
-    elementRef: elementRef_,
-    focus,
-    onSelect: onSelect_,
-    onBlur,
-  } = props;
-
-  const elRef = useRef<HTMLDivElement | null>(null);
-  const elementRef = useMergeRefs([elRef, elementRef_]);
-
-  const focusToTargetItemEl = useEventCallback((index: number) => {
-    const el = elRef.current;
-    if (!el) {
-      return;
-    }
-    const anchors = el.querySelectorAll<HTMLAnchorElement>(
-      '.react-slds-candidate[tabIndex]'
-    );
-    if (anchors[index]) {
-      anchors[index].focus();
-    }
-  });
-
-  useEffect(() => {
-    if (focus) {
-      setTimeout(() => {
-        focusToTargetItemEl(0);
-      }, 10);
-    }
-  }, [focus, focusToTargetItemEl]);
-
-  const onSelect = useEventCallback((entry: LookupEntry | null) => {
-    onSelect_?.(entry);
-  });
-
-  const onKeyDown = useEventCallback((e: KeyboardEvent<HTMLElement>) => {
-    if (e.keyCode === 38 || e.keyCode === 40) {
-      // UP/DOWN
-      e.preventDefault();
-      e.stopPropagation();
-      const currentEl = (e.target as HTMLElement).parentElement;
-      let itemEl: Element | null = currentEl
-        ? e.keyCode === 40
-          ? currentEl.nextElementSibling
-          : currentEl.previousElementSibling
-        : null;
-      while (itemEl) {
-        const anchorEl = itemEl.querySelector<HTMLAnchorElement>(
-          '.react-slds-candidate[tabIndex]'
-        );
-        if (anchorEl && !anchorEl.ariaDisabled) {
-          anchorEl.focus();
-          return;
-        }
-        itemEl =
-          e.keyCode === 40
-            ? itemEl.nextElementSibling
-            : itemEl.previousElementSibling;
-      }
-    } else if (e.keyCode === 27) {
-      // ESC
-      e.preventDefault();
-      e.stopPropagation();
-      onSelect(null);
-    }
-  });
-
-  const lookupMenuClassNames = classnames('slds-lookup__menu', 'slds-show');
-  const [vertAlign, align] = alignment;
-  const listStyles = {
-    minWidth: '15rem',
-    ...(vertAlign === 'bottom' ? { bottom: '100%' } : {}),
-    ...(align === 'right' ? { left: 'auto', right: 0 } : {}),
-  };
-  return (
-    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-    <div
-      ref={elementRef}
-      className={lookupMenuClassNames}
-      style={listStyles}
-      role='listbox'
-      tabIndex={-1}
-      onKeyDown={onKeyDown}
-    >
-      {header ? <div className='slds-lookup__item'>{header}</div> : undefined}
-      <ul className='slds-lookup__list' role='presentation'>
-        {data.filter(filter).map((entry) => {
-          const { category, icon, label, value, meta } = entry;
-          return (
-            <li key={value} role='presentation'>
-              <a
-                className='slds-lookup__item-action react-slds-candidate'
-                tabIndex={-1}
-                role='option'
-                aria-selected={false}
-                onKeyDown={(e) => e.keyCode === 13 && onSelect(entry)}
-                onBlur={onBlur}
-                onClick={() => onSelect(entry)}
-              >
-                <span
-                  className='slds-truncate'
-                  style={{ display: 'inline-flex', alignItems: 'center' }}
-                >
-                  {icon ? (
-                    <Icon
-                      style={{ minWidth: '1.5rem' }}
-                      className='slds-m-right_x-small'
-                      category={category}
-                      icon={icon}
-                      size='small'
-                    />
-                  ) : undefined}
-                  <div className='slds-truncate'>
-                    <span className='slds-lookup__result-text slds-truncate'>
-                      {label}
-                    </span>
-                    {meta ? (
-                      <span className='slds-lookup__result-meta slds-truncate'>
-                        {meta}
-                      </span>
-                    ) : undefined}
-                  </div>
-                </span>
-              </a>
-            </li>
-          );
-        })}
-        {loading ? (
-          <li
-            className='slds-lookup__item'
-            key='loading'
-            style={{ height: 20 }}
-          >
-            <Spinner
-              container={false}
-              size='small'
-              style={{ margin: '0 auto' }}
-            />
-          </li>
-        ) : undefined}
-      </ul>
-      {footer ? <div className='slds-lookup__item'>{footer}</div> : undefined}
-    </div>
-  );
+  value?: string;
+  icon?: string;
+  category?: IconCategory;
 };
 
-/**
- *
- */
-const LookupCandidateList: FC<
-  LookupCandidateListProps &
-    Pick<AutoAlignProps, 'align' | 'portalClassName' | 'portalStyle'>
-> = ({ align, portalClassName, portalStyle, ...props }) => (
-  <AutoAlign
-    triggerSelector='.slds-lookup'
-    alignmentStyle='menu'
-    align={align}
-    portalClassName={portalClassName}
-    portalStyle={portalStyle}
-  >
-    {(injectedProps) => (
-      <LookupCandidateListInner {...props} {...injectedProps} />
-    )}
-  </AutoAlign>
-);
-
 /**
  *
  */
@@ -547,7 +51,6 @@ export type LookupProps = {
   disabled?: boolean;
   required?: boolean;
   error?: FormElementProps['error'];
-  iconAlign?: 'left' | 'right';
 
   value?: string | null;
   defaultValue?: string | null;
@@ -564,25 +67,19 @@ export type LookupProps = {
   loading?: boolean;
   data?: LookupEntry[];
   lookupFilter?: Bivariant<
-    (entry: LookupEntry, searchText?: string, targetScope?: string) => boolean
+    (entry: LookupEntry, searchText?: string, scope?: string) => boolean
   >;
   listHeader?: JSX.Element;
   listFooter?: JSX.Element;
-  scopes?: LookupScope[];
-  targetScope?: string;
-  defaultTargetScope?: string;
   cols?: number;
   tooltip?: ReactNode;
   tooltipIcon?: string;
 
   elementRef?: Ref<HTMLDivElement>;
-  inputRef?: Ref<HTMLDivElement>;
+  inputRef?: Ref<HTMLInputElement>;
   dropdownRef?: Ref<HTMLDivElement>;
-  selectionRef?: Ref<HTMLDivElement>;
 
   onSearchTextChange?: (searchText: string) => void;
-  onScopeMenuClick?: EventHandler<SyntheticEvent<HTMLButtonElement>>;
-  onScopeSelect?: (targetScope: string) => void;
   onLookupRequest?: (searchText: string) => void;
   onBlur?: () => void;
   onFocus?: () => void;
@@ -591,7 +88,7 @@ export type LookupProps = {
   onComplete?: (cancel?: boolean) => void;
 } & Omit<
   InputHTMLAttributes<HTMLInputElement>,
-  'onChange' | 'onBlur' | 'onFocus' | 'onSelect'
+  'onChange' | 'onBlur' | 'onFocus' | 'onSelect' | 'value' | 'defaultValue'
 >;
 
 /**
@@ -600,7 +97,7 @@ export type LookupProps = {
 export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
   (props) => {
     const {
-      id,
+      id: id_,
       value: value_,
       defaultValue,
       selected: selected_,
@@ -609,36 +106,36 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       defaultOpened,
       searchText: searchText_,
       defaultSearchText,
-      targetScope: targetScope_,
-      defaultTargetScope,
       cols,
       label,
       required,
       error,
       className,
+      disabled,
       loading,
       lookupFilter,
       listHeader,
       listFooter,
-      data,
-      scopes,
+      data = [],
       tooltip,
       tooltipIcon,
       onSelect: onSelect_,
-      onScopeMenuClick: onScopeMenuClick_,
-      onScopeSelect: onScopeSelect_,
       onSearchTextChange: onSearchTextChange_,
       onLookupRequest: onLookupRequest_,
       onBlur: onBlur_,
+      onFocus: onFocus_,
       onValueChange,
       onComplete,
       elementRef: elementRef_,
       inputRef: inputRef_,
-      selectionRef: selectionRef_,
       dropdownRef: dropdownRef_,
       ...rprops
     } = props;
 
+    const id = useId();
+    const comboboxId = id_ || `combobox-${id}`;
+    const listboxId = `listbox-${id}`;
+
     const [value, setValue] = useControlledValue<string | null>(
       value_,
       defaultValue ?? null
@@ -655,180 +152,378 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       searchText_,
       defaultSearchText ?? ''
     );
-    const [targetScope, setTargetScope] = useControlledValue(
-      targetScope_,
-      defaultTargetScope ?? ''
+    const [focusedValue, setFocusedValue] = useState<string | undefined>();
+
+    const { getActiveElement } = useContext(ComponentSettingsContext);
+
+    // Get option values from data
+    const getOptionValues = useCallback(() => {
+      const filteredData = lookupFilter
+        ? data.filter((entry) => lookupFilter(entry, searchText))
+        : data;
+      return filteredData.map((entry) => entry.value);
+    }, [data, lookupFilter, searchText]);
+
+    // Get next option value for keyboard navigation
+    const getNextValue = useCallback(
+      (currentValue?: string) => {
+        const optionValues = getOptionValues();
+        if (optionValues.length === 0) return undefined;
+
+        if (!currentValue) return optionValues[0];
+
+        const currentIndex = optionValues.indexOf(currentValue);
+        return optionValues[currentIndex + 1] || optionValues[0]; // wrap around
+      },
+      [getOptionValues]
+    );
+
+    // Get previous option value for keyboard navigation
+    const getPrevValue = useCallback(
+      (currentValue?: string) => {
+        const optionValues = getOptionValues();
+        if (optionValues.length === 0) return undefined;
+
+        if (!currentValue) return optionValues[optionValues.length - 1];
+
+        const currentIndex = optionValues.indexOf(currentValue);
+        return (
+          optionValues[currentIndex - 1] ||
+          optionValues[optionValues.length - 1]
+        ); // wrap around
+      },
+      [getOptionValues]
     );
-    const [focusFirstCandidate, setFocusFirstCandidate] = useState(false);
+
+    // Set initial focus when dropdown opens
+    useEffect(() => {
+      if (opened && !focusedValue) {
+        const initialFocus = getOptionValues()[0];
+        setFocusedValue(initialFocus);
+      } else if (!opened) {
+        setFocusedValue(undefined);
+      }
+    }, [opened, getOptionValues, focusedValue]);
 
     const elRef = useRef<HTMLDivElement | null>(null);
     const elementRef = useMergeRefs([elRef, elementRef_]);
-    const inputElRef = useRef<HTMLDivElement | null>(null);
+    const inputElRef = useRef<HTMLInputElement | null>(null);
     const inputRef = useMergeRefs([inputElRef, inputRef_]);
-    const selectionElRef = useRef<HTMLDivElement | null>(null);
-    const selectionRef = useMergeRefs([selectionElRef, selectionRef_]);
     const dropdownElRef = useRef<HTMLDivElement | null>(null);
     const dropdownRef = useMergeRefs([dropdownElRef, dropdownRef_]);
 
-    const onScopeMenuClick = useEventCallback(
-      (e: MouseEvent<HTMLButtonElement>) => {
-        setOpened(false);
-        onScopeMenuClick_?.(e);
-      }
-    );
-
-    const onScopeSelect = useEventCallback((targetScope: string) => {
-      setTargetScope(targetScope);
-      onScopeSelect_?.(targetScope);
+    const isFocusedInComponent = useEventCallback(() => {
+      const targetEl = getActiveElement();
+      return (
+        isElInChildren(elRef.current, targetEl) ||
+        isElInChildren(dropdownElRef.current, targetEl)
+      );
     });
 
-    const onSearchTextChange = useEventCallback((searchText: string) => {
-      setSearchText(searchText);
-      onSearchTextChange_?.(searchText);
+    const onSelect = useEventCallback((selectedEntry: LookupEntry | null) => {
+      const currValue = selectedEntry?.value ?? null;
+      setValue(currValue);
+      setSelected(selectedEntry);
+      onValueChange?.(currValue, value);
+      onSelect_?.(selectedEntry);
     });
 
-    const onLookupRequest = useEventCallback((searchText: string) => {
-      setOpened(true);
-      onLookupRequest_?.(searchText);
+    const onSearchTextChange = useEventCallback((newSearchText: string) => {
+      setSearchText(newSearchText);
+      onSearchTextChange_?.(newSearchText);
+      if (newSearchText && !opened) {
+        setOpened(true);
+        onLookupRequest_?.(newSearchText);
+      }
     });
 
-    const onSelect = useEventCallback((selected: LookupEntry | null) => {
-      const currValue = selected?.value ?? null;
-      setValue(currValue);
-      setSelected(selected);
-      onValueChange?.(currValue, value);
-      onSelect_?.(selected);
+    const onInputChange = useEventCallback(
+      (e: ChangeEvent<HTMLInputElement>) => {
+        const newSearchText = e.target.value;
+        onSearchTextChange(newSearchText);
+      }
+    );
+
+    const onInputFocus = useEventCallback(() => {
+      onFocus_?.();
+      if (searchText && !opened) {
+        setOpened(true);
+        onLookupRequest_?.(searchText);
+      }
     });
 
-    const onResetSelection = useEventCallback(() => {
-      onSelect(null);
-      onSearchTextChange('');
-      onLookupRequest('');
+    const onInputBlur = useEventCallback(() => {
       setTimeout(() => {
-        const inputEl = inputElRef.current;
-        inputEl?.focus();
+        if (!isFocusedInComponent()) {
+          setOpened(false);
+          onBlur_?.();
+          onComplete?.(true);
+        }
       }, 10);
     });
 
-    const onLookupItemSelect = useEventCallback(
-      (selected: LookupEntry | null) => {
-        if (selected) {
-          onSelect(selected);
+    const onInputKeyDown = useEventCallback(
+      (e: KeyboardEvent<HTMLInputElement>) => {
+        if (e.keyCode === 40) {
+          // down
+          e.preventDefault();
+          e.stopPropagation();
+          if (!opened) {
+            setOpened(true);
+            onLookupRequest_?.(searchText);
+          } else {
+            const nextValue = getNextValue(focusedValue);
+            setFocusedValue(nextValue);
+          }
+        } else if (e.keyCode === 38) {
+          // up
+          e.preventDefault();
+          e.stopPropagation();
+          if (!opened) {
+            setOpened(true);
+            onLookupRequest_?.(searchText);
+          } else {
+            const prevValue = getPrevValue(focusedValue);
+            setFocusedValue(prevValue);
+          }
+        } else if (e.keyCode === 27) {
+          // ESC
+          e.preventDefault();
+          e.stopPropagation();
           setOpened(false);
-          setTimeout(() => {
-            const pillElem = selectionElRef.current?.querySelector('a');
-            pillElem?.focus();
-          }, 10);
-        } else {
-          setOpened(false);
-          setTimeout(() => {
-            const inputEl = inputElRef.current;
-            inputEl?.focus();
-          }, 10);
+          onComplete?.(true);
+        } else if (e.keyCode === 13) {
+          // Enter
+          e.preventDefault();
+          e.stopPropagation();
+          if (opened && focusedValue) {
+            const selectedEntry = data.find(
+              (entry) => entry.value === focusedValue
+            );
+            if (selectedEntry) {
+              onSelect(selectedEntry);
+              setOpened(false);
+              onComplete?.();
+            }
+          } else if (searchText) {
+            setOpened(true);
+            onLookupRequest_?.(searchText);
+          }
         }
-        onComplete?.();
       }
     );
 
-    const onFocusFirstCandidate = useEventCallback(() => {
-      if (!opened) {
-        onLookupRequest(searchText);
-      } else {
-        setFocusFirstCandidate(true);
-        setTimeout(() => {
-          setFocusFirstCandidate(false);
-        }, 10);
-      }
+    const onOptionClick = useEventCallback((entry: LookupEntry) => {
+      onSelect(entry);
+      setOpened(false);
+      setTimeout(() => {
+        inputElRef.current?.focus();
+        onComplete?.();
+      }, 10);
     });
 
-    const { getActiveElement } = useContext(ComponentSettingsContext);
-    const isFocusedInComponent = useEventCallback(() => {
-      const targetEl = getActiveElement();
-      return (
-        isElInChildren(elRef.current, targetEl) ||
-        isElInChildren(dropdownElRef.current, targetEl)
-      );
-    });
+    const hasSelection = selected != null;
+    const hasValue = searchText.length > 0;
 
-    const onSearch = useEventCallback(() => onLookupRequest(searchText || ''));
+    const containerClassNames = classnames(
+      'slds-combobox_container',
+      {
+        'slds-has-selection': hasSelection,
+      },
+      className
+    );
 
-    const onBlur = useEventCallback(() => {
-      setTimeout(() => {
-        if (!isFocusedInComponent()) {
-          setOpened(false);
-          onBlur_?.();
-          onComplete?.(true); // quit lookup (cancel)
-        }
-      }, 500);
+    const comboboxClassNames = classnames(
+      'slds-combobox',
+      'slds-dropdown-trigger',
+      'slds-dropdown-trigger_click',
+      {
+        'slds-is-open': opened,
+      }
+    );
+
+    const inputClassNames = classnames('slds-input', 'slds-combobox__input', {
+      'slds-has-focus': opened,
+      'slds-combobox__input-value': hasValue,
     });
 
-    const lookupClassNames = classnames(
-      'slds-lookup',
-      'react-slds-lookup',
-      { 'slds-has-selection': selected },
-      className
+    const dropdownClassNames = classnames(
+      'slds-dropdown',
+      'slds-dropdown_length-with-icon-7',
+      'slds-dropdown_fluid'
     );
+
     const formElemProps = {
       id,
-      cols,
       label,
       required,
       error,
+      cols,
       tooltip,
       tooltipIcon,
+      elementRef,
     };
+
+    const filteredData = lookupFilter
+      ? data.filter((entry) => lookupFilter(entry, searchText))
+      : data;
+
+    const renderListHeader = () => {
+      if (!listHeader) return null;
+      return (
+        <li role='presentation' className='slds-listbox__item'>
+          <div
+            className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity slds-listbox__option_term'
+            role='option'
+            aria-selected='true'
+          >
+            {listHeader}
+          </div>
+        </li>
+      );
+    };
+
+    const renderListFooter = () => {
+      if (!listFooter) return null;
+      return (
+        <li role='presentation' className='slds-listbox__item'>
+          <div
+            className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity'
+            role='option'
+          >
+            {listFooter}
+          </div>
+        </li>
+      );
+    };
+
+    const renderDataItems = () => {
+      return filteredData.map((entry) => {
+        const isFocused = focusedValue === entry.value;
+        const itemClassNames = classnames(
+          'slds-media',
+          'slds-media_center',
+          'slds-listbox__option',
+          'slds-listbox__option_entity',
+          {
+            'slds-listbox__option_has-meta': entry.meta,
+            'slds-has-focus': isFocused,
+          }
+        );
+
+        return (
+          <li
+            key={entry.value}
+            role='presentation'
+            className='slds-listbox__item'
+          >
+            <div
+              id={`option-${entry.value}`}
+              className={itemClassNames}
+              role='option'
+              aria-selected={isFocused}
+              onClick={() => onOptionClick(entry)}
+            >
+              <span className='slds-media__figure slds-listbox__option-icon'>
+                {entry.icon && (
+                  <span
+                    className={`slds-icon_container slds-icon-${entry.category || 'standard'}-${entry.icon}`}
+                  >
+                    <Icon
+                      category={entry.category}
+                      icon={entry.icon}
+                      className='slds-icon slds-icon_small'
+                    />
+                  </span>
+                )}
+              </span>
+              <span className='slds-media__body'>
+                <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
+                  {entry.label}
+                </span>
+                {entry.meta && (
+                  <span className='slds-listbox__option-meta slds-listbox__option-meta_entity'>
+                    {entry.meta}
+                  </span>
+                )}
+              </span>
+            </div>
+          </li>
+        );
+      });
+    };
+
+    const renderLoadingSpinner = () => {
+      if (!loading) return null;
+      return (
+        <li role='option' className='slds-listbox__item'>
+          <div className='slds-align_absolute-center slds-p-top_medium'>
+            <Spinner container={false} size='x-small' layout='inline' />
+          </div>
+        </li>
+      );
+    };
+
+    // Render search state
     return (
       <FormElement {...formElemProps}>
-        <div
-          className={lookupClassNames}
-          ref={elementRef}
-          data-select='single'
-          data-scope={scopes ? 'multi' : 'single'}
-          data-typeahead={false}
-        >
-          {selected ? (
-            <LookupSelection
-              id={id}
-              lookupSelectionRef={selectionRef}
-              selected={selected}
-              onResetSelection={onResetSelection}
-            />
-          ) : (
-            <LookupSearch
-              {...rprops}
-              id={id}
-              inputRef={inputRef}
-              searchText={searchText}
-              scopes={scopes}
-              targetScope={targetScope}
-              onScopeMenuClick={onScopeMenuClick}
-              onScopeSelect={onScopeSelect}
-              onSearchTextChange={onSearchTextChange}
-              onSubmit={onSearch}
-              onPressDown={onFocusFirstCandidate}
-              onComplete={onComplete}
-              onBlur={onBlur}
-            />
-          )}
-          {opened ? (
-            <LookupCandidateList
-              portalClassName={lookupClassNames}
-              elementRef={dropdownRef}
-              data={data}
-              focus={focusFirstCandidate}
-              loading={loading}
-              filter={
-                lookupFilter
-                  ? (entry: LookupEntry) =>
-                      lookupFilter(entry, searchText, targetScope)
-                  : undefined
-              }
-              header={listHeader}
-              footer={listFooter}
-              onSelect={onLookupItemSelect}
-              onBlur={onBlur}
-            />
-          ) : undefined}
+        <div className={containerClassNames}>
+          <div className={comboboxClassNames} ref={elementRef}>
+            <div
+              className='slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right'
+              role='none'
+            >
+              <input
+                {...rprops}
+                type='text'
+                className={inputClassNames}
+                id={comboboxId}
+                ref={inputRef}
+                value={searchText}
+                disabled={disabled}
+                aria-autocomplete='list'
+                aria-controls={listboxId}
+                aria-expanded={opened}
+                aria-haspopup='listbox'
+                aria-activedescendant={
+                  focusedValue ? `option-${focusedValue}` : undefined
+                }
+                autoComplete='off'
+                role='combobox'
+                onChange={onInputChange}
+                onFocus={onInputFocus}
+                onBlur={onInputBlur}
+                onKeyDown={onInputKeyDown}
+              />
+              <span className='slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right'>
+                <Icon
+                  icon='search'
+                  className='slds-icon slds-icon_x-small slds-icon-text-default'
+                />
+              </span>
+            </div>
+            {opened && (
+              <div
+                id={listboxId}
+                className={dropdownClassNames}
+                role='listbox'
+                aria-label='Search Results'
+                tabIndex={0}
+                aria-busy={loading}
+                ref={dropdownRef}
+              >
+                <ul
+                  className='slds-listbox slds-listbox_vertical'
+                  role='presentation'
+                >
+                  {renderListHeader()}
+                  {renderDataItems()}
+                  {renderLoadingSpinner()}
+                  {renderListFooter()}
+                </ul>
+              </div>
+            )}
+          </div>
         </div>
       </FormElement>
     );
diff --git a/stories/Lookup.stories.tsx b/stories/Lookup.stories.tsx
index 4b40ad69f..43e1f2536 100644
--- a/stories/Lookup.stories.tsx
+++ b/stories/Lookup.stories.tsx
@@ -4,7 +4,7 @@ import React, {
   useCallback,
   useState,
 } from 'react';
-import { Button, Lookup, LookupEntry, LookupScope } from '../src/scripts';
+import { Icon, Lookup, LookupEntry, LookupScope } from '../src/scripts';
 import COMPANIES from './data/COMPANIES';
 import OPPORTUNITIES from './data/OPPORTUNITIES';
 import CAMPAIGNS from './data/CAMPAIGNS';
@@ -82,8 +82,8 @@ const LookupControlled: React.FC<
   }
 > = ({
   children: renderer,
-  onScopeMenuClick: onScopeMenuClick_,
-  onScopeSelect: onScopeSelect_,
+  // onScopeMenuClick: onScopeMenuClick_,
+  // onScopeSelect: onScopeSelect_,
   onSearchTextChange: onSearchTextChange_,
   onLookupRequest: onLookupRequest_,
   onSelect: onSelect_,
@@ -95,23 +95,30 @@ const LookupControlled: React.FC<
   const [selected, setSelected] = useState<LookupProps['selected']>(null);
   const [loading, setLoading] = useState<LookupProps['loading']>(false);
   const [opened, setOpened] = useState<LookupProps['opened']>(false);
-  const [targetScope, setTargetScope] = useState<LookupProps['targetScope']>(
-    props.targetScope
-  );
-  const onScopeMenuClick = useCallback(
-    (...args: Parameters<NonNullable<LookupProps['onScopeMenuClick']>>) => {
-      onScopeMenuClick_?.(...args);
-      setOpened(false);
-    },
-    [onScopeMenuClick_]
-  );
-  const onScopeSelect = useCallback(
-    (targetScope: string) => {
-      onScopeSelect_?.(targetScope);
-      setTargetScope(targetScope);
-    },
-    [onScopeSelect_]
-  );
+  // const [targetScope, setTargetScope] = useState<LookupProps['targetScope']>(
+  //   props.targetScope
+  // );
+  const [targetScope, setTargetScope] = useState<string>('Account');
+  // const onScopeMenuClick = useCallback(
+  //   (...args: Parameters<NonNullable<LookupProps['onScopeMenuClick']>>) => {
+  //     onScopeMenuClick_?.(...args);
+  //     setOpened(false);
+  //   },
+  //   [onScopeMenuClick_]
+  // );
+  // const onScopeSelect = useCallback(
+  //   (targetScope: string) => {
+  //     onScopeSelect_?.(targetScope);
+  //     setTargetScope(targetScope);
+  //   },
+  //   [onScopeSelect_]
+  // );
+  const onScopeMenuClick = useCallback(() => {
+    setOpened(false);
+  }, []);
+  const onScopeSelect = useCallback((targetScope: string) => {
+    setTargetScope(targetScope);
+  }, []);
   const onSearchTextChange = useCallback(
     (searchText: string) => {
       onSearchTextChange_?.(searchText);
@@ -153,9 +160,9 @@ const LookupControlled: React.FC<
     selected,
     data,
     loading,
-    targetScope,
-    onScopeSelect,
-    onScopeMenuClick,
+    // targetScope,
+    // onScopeSelect,
+    // onScopeMenuClick,
     onSearchTextChange,
     onLookupRequest,
     onSelect,
@@ -173,8 +180,8 @@ const meta: ComponentMeta<typeof Lookup> = {
     onSearchTextChange: { action: 'searchTextChange' },
     onLookupRequest: { action: 'lookupRequest' },
     onSelect: { action: 'select' },
-    onScopeMenuClick: { action: 'scopeMenuClick' },
-    onScopeSelect: { action: 'scopeSelect' },
+    // onScopeMenuClick: { action: 'scopeMenuClick' },
+    // onScopeSelect: { action: 'scopeSelect' },
     onBlur: { action: 'blur' },
     onValueChange: { action: 'valueChange' },
     onComplete: { action: 'complete' },
@@ -288,7 +295,7 @@ export const WithSearchIconInLeft: ComponentStoryObj<typeof Lookup> = {
   args: {
     label: 'Lookup Label',
     searchText: 'A',
-    iconAlign: 'left',
+    // iconAlign: 'left',
   },
   parameters: {
     docs: {
@@ -374,14 +381,33 @@ export const OpenedWithListHeaderFooter: ComponentStoryObj<typeof Lookup> = {
     data: COMPANY_DATA,
     selected: null,
     listHeader: (
-      <Button icon='search' iconAlign='left'>
-        &quot;A&quot; in Account
-      </Button>
+      <>
+        <span className='slds-media__figure slds-listbox__option-icon'>
+          <Icon
+            container={true}
+            category='utility'
+            icon='search'
+            size='x-small'
+          />
+        </span>
+        <span className='slds-media__body'>
+          <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
+            &quot;A&quot; in Account
+          </span>
+        </span>
+      </>
     ),
     listFooter: (
-      <Button icon='add' iconAlign='left'>
-        Add new Account
-      </Button>
+      <>
+        <span className='slds-media__figure slds-listbox__option-icon'>
+          <Icon container={true} category='utility' icon='add' size='x-small' />
+        </span>
+        <span className='slds-media__body'>
+          <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
+            Add new Account
+          </span>
+        </span>
+      </>
     ),
   },
   decorators: [containerDecorator({ height: 420 })],
@@ -454,14 +480,33 @@ export const DefaultOpenedWithListHeaderFooter: ComponentStoryObj<
     data: COMPANY_DATA,
     selected: null,
     listHeader: (
-      <Button icon='search' iconAlign='left'>
-        &quot;A&quot; in Account
-      </Button>
+      <>
+        <span className='slds-media__figure slds-listbox__option-icon'>
+          <Icon
+            container={true}
+            category='utility'
+            icon='search'
+            size='x-small'
+          />
+        </span>
+        <span className='slds-media__body'>
+          <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
+            &quot;A&quot; in Account
+          </span>
+        </span>
+      </>
     ),
     listFooter: (
-      <Button icon='add' iconAlign='left'>
-        Add new Account
-      </Button>
+      <>
+        <span className='slds-media__figure slds-listbox__option-icon'>
+          <Icon container={true} category='utility' icon='add' size='x-small' />
+        </span>
+        <span className='slds-media__body'>
+          <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
+            Add new Account
+          </span>
+        </span>
+      </>
     ),
   },
   parameters: {
@@ -483,7 +528,7 @@ export const MultiScope: ComponentStoryObj<typeof Lookup> = {
     opened: false,
     selected: null,
     searchText: 'A',
-    scopes: LOOKUP_SCOPES,
+    // scopes: LOOKUP_SCOPES,
   },
   parameters: {
     docs: {
@@ -506,7 +551,7 @@ export const MultiScopeRequired: ComponentStoryObj<typeof Lookup> = {
     opened: false,
     selected: null,
     required: true,
-    scopes: LOOKUP_SCOPES,
+    // scopes: LOOKUP_SCOPES,
   },
   parameters: {
     docs: {
@@ -530,7 +575,7 @@ export const MultiScopeError: ComponentStoryObj<typeof Lookup> = {
     selected: null,
     required: true,
     error: 'This field is required',
-    scopes: LOOKUP_SCOPES,
+    // scopes: LOOKUP_SCOPES,
   },
   parameters: {
     docs: {
@@ -553,7 +598,7 @@ export const MultiScopeDisabled: ComponentStoryObj<typeof Lookup> = {
     opened: false,
     selected: null,
     disabled: true,
-    scopes: LOOKUP_SCOPES,
+    // scopes: LOOKUP_SCOPES,
   },
   parameters: {
     docs: {
@@ -617,7 +662,7 @@ export const ControlledWithMultiScope: ComponentStoryObj<typeof Lookup> = {
   name: 'Controlled with Multi Scope',
   args: {
     label: 'Lookup (Controlled, Multi Scope)',
-    scopes: LOOKUP_SCOPES,
+    // scopes: LOOKUP_SCOPES,
   },
   parameters: {
     docs: {
@@ -636,8 +681,8 @@ export const UncontrolledWithMultiScope: ComponentStoryObj<typeof Lookup> = {
   name: 'Uncontrolled with Multi Scope',
   args: {
     label: 'Lookup (Uncontrolled, Multi Scope)',
-    scopes: LOOKUP_SCOPES,
-    defaultTargetScope: 'Opportunity',
+    // scopes: LOOKUP_SCOPES,
+    // defaultTargetScope: 'Opportunity',
     defaultSearchText: 'A',
     data: LOOKUP_DATASET,
     lookupFilter: (entry, searchText, scope) =>

From d69e781525c6e32346a5817b2a547ccfb87cf3d8 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 5 Jun 2025 15:17:36 +0900
Subject: [PATCH 122/245] (Lookup): improve accessibility with unified a11y
 attributes

- add unified a11y ID generation (labelId, scopeId)
- implement proper label-input association with FormElement
- add common a11y props (ariaLabelledBy, ariaControls, ariaHaspopup)
- improve ID generation with fallbackId pattern
- enhance WAI-ARIA compliance for better screen reader support
---
 src/scripts/Lookup.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 73e95d5c6..9aba8a8b8 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -132,9 +132,11 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       ...rprops
     } = props;
 
-    const id = useId();
-    const comboboxId = id_ || `combobox-${id}`;
-    const listboxId = `listbox-${id}`;
+    const fallbackId = useId();
+    const comboboxId = id_ || `${fallbackId}-combobox`;
+    const listboxId = `${fallbackId}-listbox`;
+
+    const labelId = label ? `${comboboxId}-label` : undefined;
 
     const [value, setValue] = useControlledValue<string | null>(
       value_,
@@ -354,7 +356,8 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     );
 
     const formElemProps = {
-      id,
+      id: labelId,
+      htmlFor: comboboxId,
       label,
       required,
       error,
@@ -485,6 +488,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
                 aria-controls={listboxId}
                 aria-expanded={opened}
                 aria-haspopup='listbox'
+                aria-labelledby={labelId}
                 aria-activedescendant={
                   focusedValue ? `option-${focusedValue}` : undefined
                 }

From c13b711d849eaaef105341571c46d08bff2abfef Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 5 Jun 2025 15:21:57 +0900
Subject: [PATCH 123/245] (Lookup): implement Multi Entity Lookup with scope
 selection

- add scope-related props (scopes, targetScope, onScopeSelect, etc.)
- implement scope state management with controlled values
- add scope selection UI with icon-only display (slds-has-icon-only)
- implement scope dropdown with entity icons and selection states
- add blur-to-close functionality for scope dropdown
- support Multi Entity Lookup pattern with combobox-group layout
- maintain existing API compatibility for single-scope lookups
---
 src/scripts/Lookup.tsx | 260 +++++++++++++++++++++++++++++++++--------
 1 file changed, 211 insertions(+), 49 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 9aba8a8b8..0da8e72ee 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -75,6 +75,13 @@ export type LookupProps = {
   tooltip?: ReactNode;
   tooltipIcon?: string;
 
+  // Multi Entity Lookup (scope) props
+  scopes?: LookupScope[];
+  targetScope?: string;
+  defaultTargetScope?: string;
+  onScopeMenuClick?: () => void;
+  onScopeSelect?: (scope: string) => void;
+
   elementRef?: Ref<HTMLDivElement>;
   inputRef?: Ref<HTMLInputElement>;
   dropdownRef?: Ref<HTMLDivElement>;
@@ -119,6 +126,12 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       data = [],
       tooltip,
       tooltipIcon,
+      // Multi Entity Lookup props
+      scopes,
+      targetScope: targetScope_,
+      defaultTargetScope,
+      onScopeMenuClick: onScopeMenuClick_,
+      onScopeSelect: onScopeSelect_,
       onSelect: onSelect_,
       onSearchTextChange: onSearchTextChange_,
       onLookupRequest: onLookupRequest_,
@@ -137,11 +150,17 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     const listboxId = `${fallbackId}-listbox`;
 
     const labelId = label ? `${comboboxId}-label` : undefined;
+    const scopeId = `${comboboxId}-scope`;
 
     const [value, setValue] = useControlledValue<string | null>(
       value_,
       defaultValue ?? null
     );
+    const [targetScope, setTargetScope] = useControlledValue(
+      targetScope_,
+      defaultTargetScope ?? (scopes?.[0]?.value || scopes?.[0]?.label)
+    );
+    const [scopeOpened, setScopeOpened] = useState(false);
     const [selected, setSelected] = useControlledValue<LookupEntry | null>(
       selected_,
       defaultSelected ?? data?.find((entry) => entry.value === value) ?? null
@@ -222,6 +241,23 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       );
     });
 
+    const onScopeMenuClick = useEventCallback(() => {
+      setScopeOpened(!scopeOpened);
+      onScopeMenuClick_?.();
+    });
+
+    const onScopeBlur = useEventCallback(() => {
+      setTimeout(() => {
+        setScopeOpened(false);
+      }, 10);
+    });
+
+    const onScopeSelect = useEventCallback((scope: string) => {
+      setTargetScope(scope);
+      setScopeOpened(false);
+      onScopeSelect_?.(scope);
+    });
+
     const onSelect = useEventCallback((selectedEntry: LookupEntry | null) => {
       const currValue = selectedEntry?.value ?? null;
       setValue(currValue);
@@ -467,68 +503,194 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       );
     };
 
-    // Render search state
-    return (
-      <FormElement {...formElemProps}>
-        <div className={containerClassNames}>
-          <div className={comboboxClassNames} ref={elementRef}>
-            <div
-              className='slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right'
-              role='none'
-            >
-              <input
-                {...rprops}
-                type='text'
-                className={inputClassNames}
-                id={comboboxId}
-                ref={inputRef}
-                value={searchText}
-                disabled={disabled}
-                aria-autocomplete='list'
-                aria-controls={listboxId}
-                aria-expanded={opened}
-                aria-haspopup='listbox'
-                aria-labelledby={labelId}
-                aria-activedescendant={
-                  focusedValue ? `option-${focusedValue}` : undefined
-                }
-                autoComplete='off'
-                role='combobox'
-                onChange={onInputChange}
-                onFocus={onInputFocus}
-                onBlur={onInputBlur}
-                onKeyDown={onInputKeyDown}
-              />
-              <span className='slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right'>
-                <Icon
-                  icon='search'
-                  className='slds-icon slds-icon_x-small slds-icon-text-default'
-                />
-              </span>
+    // Render scope selection UI
+    const renderScopeSelection = () => {
+      if (!scopes || scopes.length === 0) return null;
+
+      const currentScope = scopes.find(
+        (scope) => (scope.value || scope.label) === targetScope
+      );
+
+      return (
+        <div className='slds-combobox_container slds-combobox-addon_start slds-has-icon-only'>
+          <div className='slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click'>
+            <div className='slds-combobox__form-element' role='none'>
+              <label
+                className='slds-form-element__label slds-assistive-text'
+                htmlFor={scopeId}
+              >
+                Filter Search by:
+              </label>
+              <div className='slds-input_faux slds-combobox__input'>
+                <div className='slds-combobox__input-entity-icon'>
+                  {currentScope?.icon && (
+                    <Icon
+                      category={currentScope.category}
+                      icon={currentScope.icon}
+                      className='slds-icon slds-icon_x-small'
+                      container={true}
+                    />
+                  )}
+                  <input
+                    type='text'
+                    className='slds-input slds-combobox__input slds-combobox__input-value'
+                    id={scopeId}
+                    aria-controls='objectswitcher-listbox-id'
+                    aria-expanded={scopeOpened}
+                    aria-haspopup='listbox'
+                    autoComplete='off'
+                    role='combobox'
+                    placeholder=' '
+                    value={targetScope || ''}
+                    disabled={disabled}
+                    onClick={onScopeMenuClick}
+                    onBlur={onScopeBlur}
+                    readOnly
+                  />
+                </div>
+                <span className='slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right'>
+                  <Icon
+                    icon='down'
+                    className='slds-icon slds-icon_x-small slds-icon-text-default'
+                  />
+                </span>
+              </div>
             </div>
-            {opened && (
+            {scopeOpened && (
               <div
-                id={listboxId}
-                className={dropdownClassNames}
+                className='slds-dropdown slds-dropdown_left slds-dropdown_small'
                 role='listbox'
-                aria-label='Search Results'
-                tabIndex={0}
-                aria-busy={loading}
-                ref={dropdownRef}
+                aria-label='Scope Selection'
               >
                 <ul
                   className='slds-listbox slds-listbox_vertical'
                   role='presentation'
                 >
-                  {renderListHeader()}
-                  {renderDataItems()}
-                  {renderLoadingSpinner()}
-                  {renderListFooter()}
+                  {scopes.map((scope) => {
+                    const scopeValue = scope.value || scope.label;
+                    const isSelected = scopeValue === targetScope;
+                    return (
+                      <li
+                        key={scopeValue}
+                        role='presentation'
+                        className='slds-listbox__item'
+                      >
+                        <div
+                          className={classnames(
+                            'slds-media',
+                            'slds-listbox__option',
+                            'slds-listbox__option_entity',
+                            'slds-listbox__option_has-meta',
+                            {
+                              'slds-is-selected': isSelected,
+                            }
+                          )}
+                          role='option'
+                          aria-selected={isSelected}
+                          onClick={() => onScopeSelect(scopeValue)}
+                        >
+                          <span className='slds-media__figure slds-listbox__option-icon'>
+                            {scope.icon && (
+                              <Icon
+                                category={scope.category}
+                                icon={scope.icon}
+                                className='slds-icon slds-icon_small'
+                                container={true}
+                              />
+                            )}
+                          </span>
+                          <span className='slds-media__body'>
+                            <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
+                              {scope.label}
+                            </span>
+                          </span>
+                          {isSelected && (
+                            <span className='slds-media__figure slds-media__figure_reverse'>
+                              <Icon
+                                icon='check'
+                                className='slds-icon slds-icon_x-small slds-icon-text-default'
+                              />
+                            </span>
+                          )}
+                        </div>
+                      </li>
+                    );
+                  })}
                 </ul>
               </div>
             )}
           </div>
         </div>
+      );
+    };
+
+    // Render search state
+    return (
+      <FormElement {...formElemProps}>
+        <div className={containerClassNames}>
+          <div className='slds-form-element__control'>
+            <div className='slds-combobox-group'>
+              {renderScopeSelection()}
+              <div className={comboboxClassNames} ref={elementRef}>
+                <div
+                  className='slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right'
+                  role='none'
+                >
+                  <input
+                    {...rprops}
+                    type='text'
+                    className={inputClassNames}
+                    id={comboboxId}
+                    ref={inputRef}
+                    value={searchText}
+                    disabled={disabled}
+                    aria-autocomplete='list'
+                    aria-controls={listboxId}
+                    aria-expanded={opened}
+                    aria-haspopup='listbox'
+                    aria-labelledby={labelId}
+                    aria-activedescendant={
+                      focusedValue ? `option-${focusedValue}` : undefined
+                    }
+                    autoComplete='off'
+                    role='combobox'
+                    onChange={onInputChange}
+                    onFocus={onInputFocus}
+                    onBlur={onInputBlur}
+                    onKeyDown={onInputKeyDown}
+                  />
+                  <span className='slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right'>
+                    <Icon
+                      icon='search'
+                      className='slds-icon slds-icon_x-small slds-icon-text-default'
+                    />
+                  </span>
+                </div>
+                {opened && (
+                  <div
+                    id={listboxId}
+                    className={dropdownClassNames}
+                    role='listbox'
+                    aria-label='Search Results'
+                    tabIndex={0}
+                    aria-busy={loading}
+                    ref={dropdownRef}
+                  >
+                    <ul
+                      className='slds-listbox slds-listbox_vertical'
+                      role='presentation'
+                    >
+                      {renderListHeader()}
+                      {renderDataItems()}
+                      {renderLoadingSpinner()}
+                      {renderListFooter()}
+                    </ul>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
       </FormElement>
     );
   },

From c7f0cdfbc77832ca55b733c4d08e252419b3795c Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 5 Jun 2025 15:23:34 +0900
Subject: [PATCH 124/245] (Lookup): unify Icon component usage with container
 prop

- replace manual slds-icon_container spans with container={true}
- unify data item icons to use Icon component container prop
- unify search icon to use Icon component container prop
- unify scope dropdown icon to use Icon component container prop
- simplify code by leveraging Icon component functionality
- ensure consistent Icon usage across all components
---
 src/scripts/Lookup.tsx | 37 ++++++++++++++++---------------------
 1 file changed, 16 insertions(+), 21 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 0da8e72ee..a83e9f013 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -465,15 +465,12 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
             >
               <span className='slds-media__figure slds-listbox__option-icon'>
                 {entry.icon && (
-                  <span
-                    className={`slds-icon_container slds-icon-${entry.category || 'standard'}-${entry.icon}`}
-                  >
-                    <Icon
-                      category={entry.category}
-                      icon={entry.icon}
-                      className='slds-icon slds-icon_small'
-                    />
-                  </span>
+                  <Icon
+                    category={entry.category}
+                    icon={entry.icon}
+                    className='slds-icon slds-icon_small'
+                    container={true}
+                  />
                 )}
               </span>
               <span className='slds-media__body'>
@@ -548,12 +545,11 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
                     readOnly
                   />
                 </div>
-                <span className='slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right'>
-                  <Icon
-                    icon='down'
-                    className='slds-icon slds-icon_x-small slds-icon-text-default'
-                  />
-                </span>
+                <Icon
+                  icon='down'
+                  className='slds-icon slds-icon_x-small slds-icon-text-default slds-input__icon slds-input__icon_right'
+                  container={true}
+                />
               </div>
             </div>
             {scopeOpened && (
@@ -659,12 +655,11 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
                     onBlur={onInputBlur}
                     onKeyDown={onInputKeyDown}
                   />
-                  <span className='slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right'>
-                    <Icon
-                      icon='search'
-                      className='slds-icon slds-icon_x-small slds-icon-text-default'
-                    />
-                  </span>
+                  <Icon
+                    icon='search'
+                    className='slds-icon slds-icon_x-small slds-icon-text-default slds-input__icon slds-input__icon_right'
+                    container={true}
+                  />
                 </div>
                 {opened && (
                   <div

From 6c2fe845a01d4d3bf41b1249aa2aa82bb2e191e3 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 5 Jun 2025 15:25:15 +0900
Subject: [PATCH 125/245] (Lookup): implement SLDS-compliant selected state
 markup

- add selected state combobox with SLDS-compliant markup structure
- implement entity icon and selected value display with slds-media layout
- add remove selection button with close icon and accessibility
- use slds-lookup__result-text for selected value display
- implement conditional rendering between selected and search states
- add onRemoveSelection handler for clearing selection
- maintain proper aria attributes for selected state combobox
- follow reference markup pattern for selected state display
---
 src/scripts/Lookup.tsx | 65 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index a83e9f013..ec2526a2a 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -258,6 +258,13 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       onScopeSelect_?.(scope);
     });
 
+    const onRemoveSelection = useEventCallback(() => {
+      onSelect(null);
+      setTimeout(() => {
+        inputElRef.current?.focus();
+      }, 10);
+    });
+
     const onSelect = useEventCallback((selectedEntry: LookupEntry | null) => {
       const currValue = selectedEntry?.value ?? null;
       setValue(currValue);
@@ -620,6 +627,64 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       );
     };
 
+    // Render selected state or search state
+    if (hasSelection) {
+      return (
+        <FormElement {...formElemProps}>
+          <div className={containerClassNames}>
+            <div className='slds-form-element__control'>
+              <div className='slds-combobox-group'>
+                {renderScopeSelection()}
+                <div className={comboboxClassNames} ref={elementRef}>
+                  <div
+                    role='combobox'
+                    tabIndex={disabled ? -1 : 0}
+                    className='slds-input_faux slds-combobox__input slds-combobox__input-value'
+                    aria-labelledby={labelId}
+                    aria-controls={listboxId}
+                    aria-expanded='false'
+                    aria-haspopup='listbox'
+                  >
+                    <span className='slds-media slds-media_center'>
+                      <span className='slds-media__figure slds-listbox__option-icon'>
+                        {selected.icon && (
+                          <Icon
+                            category={selected.category}
+                            icon={selected.icon}
+                            className='slds-icon slds-icon_small'
+                            container={true}
+                          />
+                        )}
+                      </span>
+                      <span className='slds-media__body'>
+                        <span className='slds-lookup__result-text'>
+                          {selected.label}
+                        </span>
+                      </span>
+                    </span>
+                    <button
+                      className='slds-button slds-button_icon slds-input__icon slds-input__icon_right'
+                      title='Remove selected option'
+                      onClick={onRemoveSelection}
+                      disabled={disabled}
+                    >
+                      <Icon
+                        icon='close'
+                        className='slds-button__icon slds-icon-text-default'
+                      />
+                      <span className='slds-assistive-text'>
+                        Remove selected option
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </FormElement>
+      );
+    }
+
     // Render search state
     return (
       <FormElement {...formElemProps}>

From 947a1a223ae514fb50a8b021f0ef79691c06986f Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 5 Jun 2025 15:27:31 +0900
Subject: [PATCH 126/245] (Lookup): add iconAlign feature and restore Stories
 functionality

- add iconAlign prop to control search icon position (left/right)
- implement dynamic className generation for icon positioning
- add slds-input-has-icon_left/right and slds-input__icon_left/right classes
- restore Stories functionality by uncommenting scope-related features
- restore iconAlign: 'left' in WithSearchIconInLeft story
- restore scopes: LOOKUP_SCOPES in MultiScope story
- restore scope event handlers in LookupControlled component
- complete all planned Lookup component features and improvements
---
 src/scripts/Lookup.tsx     | 25 ++++++++++++--
 stories/Lookup.stories.tsx | 71 +++++++++++++++++---------------------
 2 files changed, 55 insertions(+), 41 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index ec2526a2a..5907a1c22 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -82,6 +82,9 @@ export type LookupProps = {
   onScopeMenuClick?: () => void;
   onScopeSelect?: (scope: string) => void;
 
+  // Icon alignment
+  iconAlign?: 'left' | 'right';
+
   elementRef?: Ref<HTMLDivElement>;
   inputRef?: Ref<HTMLInputElement>;
   dropdownRef?: Ref<HTMLDivElement>;
@@ -132,6 +135,8 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       defaultTargetScope,
       onScopeMenuClick: onScopeMenuClick_,
       onScopeSelect: onScopeSelect_,
+      // Icon alignment
+      iconAlign = 'right',
       onSelect: onSelect_,
       onSearchTextChange: onSearchTextChange_,
       onLookupRequest: onLookupRequest_,
@@ -694,7 +699,14 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
               {renderScopeSelection()}
               <div className={comboboxClassNames} ref={elementRef}>
                 <div
-                  className='slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right'
+                  className={classnames(
+                    'slds-combobox__form-element',
+                    'slds-input-has-icon',
+                    {
+                      'slds-input-has-icon_left': iconAlign === 'left',
+                      'slds-input-has-icon_right': iconAlign === 'right',
+                    }
+                  )}
                   role='none'
                 >
                   <input
@@ -722,7 +734,16 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
                   />
                   <Icon
                     icon='search'
-                    className='slds-icon slds-icon_x-small slds-icon-text-default slds-input__icon slds-input__icon_right'
+                    className={classnames(
+                      'slds-icon',
+                      'slds-icon_x-small',
+                      'slds-icon-text-default',
+                      'slds-input__icon',
+                      {
+                        'slds-input__icon_left': iconAlign === 'left',
+                        'slds-input__icon_right': iconAlign === 'right',
+                      }
+                    )}
                     container={true}
                   />
                 </div>
diff --git a/stories/Lookup.stories.tsx b/stories/Lookup.stories.tsx
index 43e1f2536..d3e07af27 100644
--- a/stories/Lookup.stories.tsx
+++ b/stories/Lookup.stories.tsx
@@ -82,8 +82,8 @@ const LookupControlled: React.FC<
   }
 > = ({
   children: renderer,
-  // onScopeMenuClick: onScopeMenuClick_,
-  // onScopeSelect: onScopeSelect_,
+  onScopeMenuClick: onScopeMenuClick_,
+  onScopeSelect: onScopeSelect_,
   onSearchTextChange: onSearchTextChange_,
   onLookupRequest: onLookupRequest_,
   onSelect: onSelect_,
@@ -95,30 +95,23 @@ const LookupControlled: React.FC<
   const [selected, setSelected] = useState<LookupProps['selected']>(null);
   const [loading, setLoading] = useState<LookupProps['loading']>(false);
   const [opened, setOpened] = useState<LookupProps['opened']>(false);
-  // const [targetScope, setTargetScope] = useState<LookupProps['targetScope']>(
-  //   props.targetScope
-  // );
-  const [targetScope, setTargetScope] = useState<string>('Account');
-  // const onScopeMenuClick = useCallback(
-  //   (...args: Parameters<NonNullable<LookupProps['onScopeMenuClick']>>) => {
-  //     onScopeMenuClick_?.(...args);
-  //     setOpened(false);
-  //   },
-  //   [onScopeMenuClick_]
-  // );
-  // const onScopeSelect = useCallback(
-  //   (targetScope: string) => {
-  //     onScopeSelect_?.(targetScope);
-  //     setTargetScope(targetScope);
-  //   },
-  //   [onScopeSelect_]
-  // );
-  const onScopeMenuClick = useCallback(() => {
-    setOpened(false);
-  }, []);
-  const onScopeSelect = useCallback((targetScope: string) => {
-    setTargetScope(targetScope);
-  }, []);
+  const [targetScope, setTargetScope] = useState<LookupProps['targetScope']>(
+    props.targetScope
+  );
+  const onScopeMenuClick = useCallback(
+    (...args: Parameters<NonNullable<LookupProps['onScopeMenuClick']>>) => {
+      onScopeMenuClick_?.(...args);
+      setOpened(false);
+    },
+    [onScopeMenuClick_]
+  );
+  const onScopeSelect = useCallback(
+    (targetScope: string) => {
+      onScopeSelect_?.(targetScope);
+      setTargetScope(targetScope);
+    },
+    [onScopeSelect_]
+  );
   const onSearchTextChange = useCallback(
     (searchText: string) => {
       onSearchTextChange_?.(searchText);
@@ -160,9 +153,9 @@ const LookupControlled: React.FC<
     selected,
     data,
     loading,
-    // targetScope,
-    // onScopeSelect,
-    // onScopeMenuClick,
+    targetScope,
+    onScopeSelect,
+    onScopeMenuClick,
     onSearchTextChange,
     onLookupRequest,
     onSelect,
@@ -180,8 +173,8 @@ const meta: ComponentMeta<typeof Lookup> = {
     onSearchTextChange: { action: 'searchTextChange' },
     onLookupRequest: { action: 'lookupRequest' },
     onSelect: { action: 'select' },
-    // onScopeMenuClick: { action: 'scopeMenuClick' },
-    // onScopeSelect: { action: 'scopeSelect' },
+    onScopeMenuClick: { action: 'scopeMenuClick' },
+    onScopeSelect: { action: 'scopeSelect' },
     onBlur: { action: 'blur' },
     onValueChange: { action: 'valueChange' },
     onComplete: { action: 'complete' },
@@ -295,7 +288,7 @@ export const WithSearchIconInLeft: ComponentStoryObj<typeof Lookup> = {
   args: {
     label: 'Lookup Label',
     searchText: 'A',
-    // iconAlign: 'left',
+    iconAlign: 'left',
   },
   parameters: {
     docs: {
@@ -528,7 +521,7 @@ export const MultiScope: ComponentStoryObj<typeof Lookup> = {
     opened: false,
     selected: null,
     searchText: 'A',
-    // scopes: LOOKUP_SCOPES,
+    scopes: LOOKUP_SCOPES,
   },
   parameters: {
     docs: {
@@ -551,7 +544,7 @@ export const MultiScopeRequired: ComponentStoryObj<typeof Lookup> = {
     opened: false,
     selected: null,
     required: true,
-    // scopes: LOOKUP_SCOPES,
+    scopes: LOOKUP_SCOPES,
   },
   parameters: {
     docs: {
@@ -575,7 +568,7 @@ export const MultiScopeError: ComponentStoryObj<typeof Lookup> = {
     selected: null,
     required: true,
     error: 'This field is required',
-    // scopes: LOOKUP_SCOPES,
+    scopes: LOOKUP_SCOPES,
   },
   parameters: {
     docs: {
@@ -598,7 +591,7 @@ export const MultiScopeDisabled: ComponentStoryObj<typeof Lookup> = {
     opened: false,
     selected: null,
     disabled: true,
-    // scopes: LOOKUP_SCOPES,
+    scopes: LOOKUP_SCOPES,
   },
   parameters: {
     docs: {
@@ -662,7 +655,7 @@ export const ControlledWithMultiScope: ComponentStoryObj<typeof Lookup> = {
   name: 'Controlled with Multi Scope',
   args: {
     label: 'Lookup (Controlled, Multi Scope)',
-    // scopes: LOOKUP_SCOPES,
+    scopes: LOOKUP_SCOPES,
   },
   parameters: {
     docs: {
@@ -681,8 +674,8 @@ export const UncontrolledWithMultiScope: ComponentStoryObj<typeof Lookup> = {
   name: 'Uncontrolled with Multi Scope',
   args: {
     label: 'Lookup (Uncontrolled, Multi Scope)',
-    // scopes: LOOKUP_SCOPES,
-    // defaultTargetScope: 'Opportunity',
+    scopes: LOOKUP_SCOPES,
+    defaultTargetScope: 'Opportunity',
     defaultSearchText: 'A',
     data: LOOKUP_DATASET,
     lookupFilter: (entry, searchText, scope) =>

From 296b5144679471c7b458c0f9af887c9e94f1cb1d Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 5 Jun 2025 15:36:36 +0900
Subject: [PATCH 127/245] (Lookup): apply rest updates

---
 src/scripts/Lookup.tsx | 589 +++++++++++++++++++++++------------------
 1 file changed, 324 insertions(+), 265 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 5907a1c22..efc6a0e9a 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -12,6 +12,7 @@ import React, {
   useCallback,
 } from 'react';
 import classnames from 'classnames';
+import { Button } from './Button';
 import { FormElement, FormElementProps } from './FormElement';
 import { Icon, IconCategory } from './Icon';
 import { Spinner } from './Spinner';
@@ -51,6 +52,7 @@ export type LookupProps = {
   disabled?: boolean;
   required?: boolean;
   error?: FormElementProps['error'];
+  iconAlign?: 'left' | 'right';
 
   value?: string | null;
   defaultValue?: string | null;
@@ -71,7 +73,6 @@ export type LookupProps = {
   >;
   listHeader?: JSX.Element;
   listFooter?: JSX.Element;
-  cols?: number;
   tooltip?: ReactNode;
   tooltipIcon?: string;
 
@@ -79,17 +80,15 @@ export type LookupProps = {
   scopes?: LookupScope[];
   targetScope?: string;
   defaultTargetScope?: string;
-  onScopeMenuClick?: () => void;
-  onScopeSelect?: (scope: string) => void;
-
-  // Icon alignment
-  iconAlign?: 'left' | 'right';
+  cols?: number;
 
   elementRef?: Ref<HTMLDivElement>;
   inputRef?: Ref<HTMLInputElement>;
   dropdownRef?: Ref<HTMLDivElement>;
 
   onSearchTextChange?: (searchText: string) => void;
+  onScopeMenuClick?: () => void;
+  onScopeSelect?: (scope: string) => void;
   onLookupRequest?: (searchText: string) => void;
   onBlur?: () => void;
   onFocus?: () => void;
@@ -151,7 +150,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     } = props;
 
     const fallbackId = useId();
-    const comboboxId = id_ || `${fallbackId}-combobox`;
+    const comboboxId = id_ && `${fallbackId}-combobox`;
     const listboxId = `${fallbackId}-listbox`;
 
     const labelId = label ? `${comboboxId}-label` : undefined;
@@ -161,11 +160,6 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       value_,
       defaultValue ?? null
     );
-    const [targetScope, setTargetScope] = useControlledValue(
-      targetScope_,
-      defaultTargetScope ?? (scopes?.[0]?.value || scopes?.[0]?.label)
-    );
-    const [scopeOpened, setScopeOpened] = useState(false);
     const [selected, setSelected] = useControlledValue<LookupEntry | null>(
       selected_,
       defaultSelected ?? data?.find((entry) => entry.value === value) ?? null
@@ -178,17 +172,23 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       searchText_,
       defaultSearchText ?? ''
     );
+    const [targetScope, setTargetScope] = useControlledValue(
+      targetScope_,
+      defaultTargetScope ??
+        (scopes && scopes.length > 0 ? scopes[0].label : undefined)
+    );
     const [focusedValue, setFocusedValue] = useState<string | undefined>();
+    const [scopeOpened, setScopeOpened] = useState(false);
 
     const { getActiveElement } = useContext(ComponentSettingsContext);
 
     // Get option values from data
     const getOptionValues = useCallback(() => {
       const filteredData = lookupFilter
-        ? data.filter((entry) => lookupFilter(entry, searchText))
+        ? data.filter((entry) => lookupFilter(entry, searchText, targetScope))
         : data;
       return filteredData.map((entry) => entry.value);
-    }, [data, lookupFilter, searchText]);
+    }, [data, lookupFilter, searchText, targetScope]);
 
     // Get next option value for keyboard navigation
     const getNextValue = useCallback(
@@ -246,30 +246,6 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       );
     });
 
-    const onScopeMenuClick = useEventCallback(() => {
-      setScopeOpened(!scopeOpened);
-      onScopeMenuClick_?.();
-    });
-
-    const onScopeBlur = useEventCallback(() => {
-      setTimeout(() => {
-        setScopeOpened(false);
-      }, 10);
-    });
-
-    const onScopeSelect = useEventCallback((scope: string) => {
-      setTargetScope(scope);
-      setScopeOpened(false);
-      onScopeSelect_?.(scope);
-    });
-
-    const onRemoveSelection = useEventCallback(() => {
-      onSelect(null);
-      setTimeout(() => {
-        inputElRef.current?.focus();
-      }, 10);
-    });
-
     const onSelect = useEventCallback((selectedEntry: LookupEntry | null) => {
       const currValue = selectedEntry?.value ?? null;
       setValue(currValue);
@@ -372,6 +348,31 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       }, 10);
     });
 
+    const onRemoveSelection = useEventCallback(() => {
+      onSelect(null);
+      setSearchText('');
+      setTimeout(() => {
+        inputElRef.current?.focus();
+      }, 10);
+    });
+
+    const onScopeSelect = useEventCallback((scope: string) => {
+      setTargetScope(scope);
+      setScopeOpened(false);
+      onScopeSelect_?.(scope);
+    });
+
+    const onScopeMenuClick = useEventCallback(() => {
+      setScopeOpened(!scopeOpened);
+      onScopeMenuClick_?.();
+    });
+
+    const onScopeBlur = useEventCallback(() => {
+      setTimeout(() => {
+        setScopeOpened(false);
+      }, 10);
+    });
+
     const hasSelection = selected != null;
     const hasValue = searchText.length > 0;
 
@@ -416,7 +417,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     };
 
     const filteredData = lookupFilter
-      ? data.filter((entry) => lookupFilter(entry, searchText))
+      ? data.filter((entry) => lookupFilter(entry, searchText, targetScope))
       : data;
 
     const renderListHeader = () => {
@@ -478,10 +479,10 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
               <span className='slds-media__figure slds-listbox__option-icon'>
                 {entry.icon && (
                   <Icon
+                    container={true}
                     category={entry.category}
                     icon={entry.icon}
-                    className='slds-icon slds-icon_small'
-                    container={true}
+                    size='small'
                   />
                 )}
               </span>
@@ -512,176 +513,235 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       );
     };
 
-    // Render scope selection UI
-    const renderScopeSelection = () => {
-      if (!scopes || scopes.length === 0) return null;
-
-      const currentScope = scopes.find(
-        (scope) => (scope.value || scope.label) === targetScope
-      );
-
+    // Render selected state
+    if (hasSelection && selected) {
       return (
-        <div className='slds-combobox_container slds-combobox-addon_start slds-has-icon-only'>
-          <div className='slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click'>
-            <div className='slds-combobox__form-element' role='none'>
-              <label
-                className='slds-form-element__label slds-assistive-text'
-                htmlFor={scopeId}
+        <FormElement {...formElemProps}>
+          <div className={containerClassNames}>
+            <div className={comboboxClassNames} ref={elementRef}>
+              <div
+                className='slds-combobox__form-element slds-input-has-icon slds-input-has-icon_left-right'
+                role='none'
               >
-                Filter Search by:
-              </label>
-              <div className='slds-input_faux slds-combobox__input'>
-                <div className='slds-combobox__input-entity-icon'>
-                  {currentScope?.icon && (
-                    <Icon
-                      category={currentScope.category}
-                      icon={currentScope.icon}
-                      className='slds-icon slds-icon_x-small'
-                      container={true}
-                    />
-                  )}
-                  <input
-                    type='text'
-                    className='slds-input slds-combobox__input slds-combobox__input-value'
-                    id={scopeId}
-                    aria-controls='objectswitcher-listbox-id'
-                    aria-expanded={scopeOpened}
-                    aria-haspopup='listbox'
-                    autoComplete='off'
-                    role='combobox'
-                    placeholder=' '
-                    value={targetScope || ''}
-                    disabled={disabled}
-                    onClick={onScopeMenuClick}
-                    onBlur={onScopeBlur}
-                    readOnly
+                {selected.icon && (
+                  <Icon
+                    container={true}
+                    containerClassName='slds-combobox__input-entity-icon'
+                    category={selected.category}
+                    icon={selected.icon}
+                    size='small'
                   />
+                )}
+                <div
+                  role='combobox'
+                  tabIndex={disabled ? -1 : 0}
+                  className='slds-input_faux slds-combobox__input slds-combobox__input-value'
+                  aria-labelledby={labelId}
+                  aria-controls={listboxId}
+                  aria-haspopup='listbox'
+                  aria-expanded='false'
+                >
+                  <span className='slds-truncate'>{selected.label}</span>
                 </div>
-                <Icon
-                  icon='down'
-                  className='slds-icon slds-icon_x-small slds-icon-text-default slds-input__icon slds-input__icon_right'
-                  container={true}
-                />
+                <Button
+                  type='icon'
+                  icon='close'
+                  className='slds-input__icon slds-input__icon_right'
+                  title='Remove selected option'
+                  onClick={onRemoveSelection}
+                >
+                  <span className='slds-assistive-text'>
+                    Remove selected option
+                  </span>
+                </Button>
               </div>
             </div>
-            {scopeOpened && (
-              <div
-                className='slds-dropdown slds-dropdown_left slds-dropdown_small'
-                role='listbox'
-                aria-label='Scope Selection'
-              >
-                <ul
-                  className='slds-listbox slds-listbox_vertical'
-                  role='presentation'
-                >
-                  {scopes.map((scope) => {
-                    const scopeValue = scope.value || scope.label;
-                    const isSelected = scopeValue === targetScope;
-                    return (
-                      <li
-                        key={scopeValue}
-                        role='presentation'
-                        className='slds-listbox__item'
+          </div>
+        </FormElement>
+      );
+    }
+
+    // Render search state with optional scope selector
+    if (scopes && scopes.length > 0) {
+      // Multi Entity Lookup with scope selector
+      return (
+        <FormElement {...formElemProps}>
+          <div className={containerClassNames}>
+            <div className='slds-combobox-group'>
+              <div className='slds-combobox_object-switcher slds-combobox-addon_start'>
+                <div className='slds-form-element'>
+                  <label
+                    className='slds-form-element__label slds-assistive-text'
+                    htmlFor={scopeId}
+                  >
+                    Filter Search by:
+                  </label>
+                  <div className='slds-form-element__control'>
+                    <div className='slds-combobox_container slds-has-icon-only'>
+                      <div
+                        className={classnames(
+                          'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click',
+                          {
+                            'slds-is-open': scopeOpened,
+                          }
+                        )}
                       >
                         <div
-                          className={classnames(
-                            'slds-media',
-                            'slds-listbox__option',
-                            'slds-listbox__option_entity',
-                            'slds-listbox__option_has-meta',
-                            {
-                              'slds-is-selected': isSelected,
-                            }
-                          )}
-                          role='option'
-                          aria-selected={isSelected}
-                          onClick={() => onScopeSelect(scopeValue)}
+                          className='slds-combobox__form-element slds-input-has-icon slds-input-has-icon_left-right'
+                          role='none'
                         >
-                          <span className='slds-media__figure slds-listbox__option-icon'>
-                            {scope.icon && (
+                          {(() => {
+                            const currentScope = scopes.find(
+                              (scope) => scope.label === targetScope
+                            );
+                            return currentScope?.icon ? (
                               <Icon
-                                category={scope.category}
-                                icon={scope.icon}
-                                className='slds-icon slds-icon_small'
                                 container={true}
+                                containerClassName={classnames(
+                                  'slds-input__icon',
+                                  'slds-input__icon_left'
+                                )}
+                                category={currentScope.category}
+                                icon={currentScope.icon}
+                                size='x-small'
                               />
+                            ) : null;
+                          })()}
+                          <input
+                            type='text'
+                            className='slds-input slds-combobox__input slds-combobox__input-value'
+                            id={scopeId}
+                            aria-controls='objectswitcher-listbox-id'
+                            aria-expanded={scopeOpened}
+                            aria-haspopup='listbox'
+                            autoComplete='off'
+                            role='combobox'
+                            placeholder=' '
+                            value={targetScope || ''}
+                            disabled={disabled}
+                            onClick={onScopeMenuClick}
+                            onBlur={onScopeBlur}
+                            readOnly
+                          />
+                          <Icon
+                            container={true}
+                            containerClassName={classnames(
+                              'slds-input__icon',
+                              'slds-input__icon_right'
                             )}
-                          </span>
-                          <span className='slds-media__body'>
-                            <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
-                              {scope.label}
-                            </span>
-                          </span>
-                          {isSelected && (
-                            <span className='slds-media__figure slds-media__figure_reverse'>
-                              <Icon
-                                icon='check'
-                                className='slds-icon slds-icon_x-small slds-icon-text-default'
-                              />
-                            </span>
-                          )}
+                            icon='down'
+                            size='xx-small'
+                          />
                         </div>
-                      </li>
-                    );
-                  })}
-                </ul>
+                        {scopeOpened && (
+                          <div
+                            className='slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid'
+                            role='listbox'
+                            aria-label='Scope Options'
+                            style={{ left: 0, transform: 'translateX(0)' }}
+                          >
+                            <ul
+                              className='slds-listbox slds-listbox_vertical'
+                              role='presentation'
+                            >
+                              {scopes.map((scope) => (
+                                <li
+                                  key={scope.label}
+                                  role='presentation'
+                                  className='slds-listbox__item'
+                                >
+                                  <div
+                                    className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity'
+                                    role='option'
+                                    aria-selected={scope.label === targetScope}
+                                    onClick={() => onScopeSelect(scope.label)}
+                                  >
+                                    <span className='slds-media__figure slds-listbox__option-icon'>
+                                      {scope.icon && (
+                                        <Icon
+                                          container={true}
+                                          category={scope.category}
+                                          icon={scope.icon}
+                                          size='small'
+                                        />
+                                      )}
+                                    </span>
+                                    <span className='slds-media__body'>
+                                      <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
+                                        {scope.label}
+                                      </span>
+                                    </span>
+                                  </div>
+                                </li>
+                              ))}
+                            </ul>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
-            )}
-          </div>
-        </div>
-      );
-    };
-
-    // Render selected state or search state
-    if (hasSelection) {
-      return (
-        <FormElement {...formElemProps}>
-          <div className={containerClassNames}>
-            <div className='slds-form-element__control'>
-              <div className='slds-combobox-group'>
-                {renderScopeSelection()}
+              <div className='slds-combobox_container slds-combobox-addon_end'>
                 <div className={comboboxClassNames} ref={elementRef}>
                   <div
-                    role='combobox'
-                    tabIndex={disabled ? -1 : 0}
-                    className='slds-input_faux slds-combobox__input slds-combobox__input-value'
-                    aria-labelledby={labelId}
-                    aria-controls={listboxId}
-                    aria-expanded='false'
-                    aria-haspopup='listbox'
+                    className='slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right'
+                    role='none'
                   >
-                    <span className='slds-media slds-media_center'>
-                      <span className='slds-media__figure slds-listbox__option-icon'>
-                        {selected.icon && (
-                          <Icon
-                            category={selected.category}
-                            icon={selected.icon}
-                            className='slds-icon slds-icon_small'
-                            container={true}
-                          />
-                        )}
-                      </span>
-                      <span className='slds-media__body'>
-                        <span className='slds-lookup__result-text'>
-                          {selected.label}
-                        </span>
-                      </span>
-                    </span>
-                    <button
-                      className='slds-button slds-button_icon slds-input__icon slds-input__icon_right'
-                      title='Remove selected option'
-                      onClick={onRemoveSelection}
+                    <input
+                      {...rprops}
+                      type='text'
+                      className={inputClassNames}
+                      id={comboboxId}
+                      ref={inputRef}
+                      value={searchText}
                       disabled={disabled}
-                    >
-                      <Icon
-                        icon='close'
-                        className='slds-button__icon slds-icon-text-default'
-                      />
-                      <span className='slds-assistive-text'>
-                        Remove selected option
-                      </span>
-                    </button>
+                      aria-autocomplete='list'
+                      aria-controls={listboxId}
+                      aria-expanded={opened}
+                      aria-haspopup='listbox'
+                      aria-activedescendant={
+                        focusedValue ? `option-${focusedValue}` : undefined
+                      }
+                      autoComplete='off'
+                      role='combobox'
+                      onChange={onInputChange}
+                      onFocus={onInputFocus}
+                      onBlur={onInputBlur}
+                      onKeyDown={onInputKeyDown}
+                    />
+                    <Icon
+                      container={true}
+                      containerClassName={classnames(
+                        'slds-input__icon',
+                        'slds-input__icon_right'
+                      )}
+                      category='utility'
+                      icon='search'
+                      size='x-small'
+                    />
                   </div>
+                  {opened && (
+                    <div
+                      id={listboxId}
+                      className={dropdownClassNames}
+                      role='listbox'
+                      aria-label='Search Results'
+                      tabIndex={0}
+                      aria-busy={loading}
+                      ref={dropdownRef}
+                    >
+                      <ul
+                        className='slds-listbox slds-listbox_vertical'
+                        role='presentation'
+                      >
+                        {renderListHeader()}
+                        {renderDataItems()}
+                        {renderLoadingSpinner()}
+                        {renderListFooter()}
+                      </ul>
+                    </div>
+                  )}
                 </div>
               </div>
             </div>
@@ -690,86 +750,85 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       );
     }
 
-    // Render search state
+    // Render simple search state (no scopes)
+    const inputIconClasses =
+      iconAlign === 'left'
+        ? 'slds-combobox__form-element slds-input-has-icon slds-input-has-icon_left'
+        : 'slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right';
+
     return (
       <FormElement {...formElemProps}>
         <div className={containerClassNames}>
-          <div className='slds-form-element__control'>
-            <div className='slds-combobox-group'>
-              {renderScopeSelection()}
-              <div className={comboboxClassNames} ref={elementRef}>
-                <div
-                  className={classnames(
-                    'slds-combobox__form-element',
-                    'slds-input-has-icon',
-                    {
-                      'slds-input-has-icon_left': iconAlign === 'left',
-                      'slds-input-has-icon_right': iconAlign === 'right',
-                    }
+          <div className={comboboxClassNames} ref={elementRef}>
+            <div className={inputIconClasses} role='none'>
+              {iconAlign === 'left' && (
+                <Icon
+                  container={true}
+                  containerClassName={classnames(
+                    'slds-input__icon',
+                    `slds-input__icon_${iconAlign}`
                   )}
-                  role='none'
+                  category='utility'
+                  icon='search'
+                  size='x-small'
+                />
+              )}
+              <input
+                {...rprops}
+                type='text'
+                className={inputClassNames}
+                id={comboboxId}
+                ref={inputRef}
+                value={searchText}
+                disabled={disabled}
+                aria-autocomplete='list'
+                aria-controls={listboxId}
+                aria-expanded={opened}
+                aria-haspopup='listbox'
+                aria-activedescendant={
+                  focusedValue ? `option-${focusedValue}` : undefined
+                }
+                autoComplete='off'
+                role='combobox'
+                onChange={onInputChange}
+                onFocus={onInputFocus}
+                onBlur={onInputBlur}
+                onKeyDown={onInputKeyDown}
+              />
+              {iconAlign === 'right' && (
+                <Icon
+                  container={true}
+                  containerClassName={classnames(
+                    'slds-input__icon',
+                    `slds-input__icon_${iconAlign}`
+                  )}
+                  category='utility'
+                  icon='search'
+                  size='x-small'
+                />
+              )}
+            </div>
+            {opened && (
+              <div
+                id={listboxId}
+                className={dropdownClassNames}
+                role='listbox'
+                aria-label='Search Results'
+                tabIndex={0}
+                aria-busy={loading}
+                ref={dropdownRef}
+              >
+                <ul
+                  className='slds-listbox slds-listbox_vertical'
+                  role='presentation'
                 >
-                  <input
-                    {...rprops}
-                    type='text'
-                    className={inputClassNames}
-                    id={comboboxId}
-                    ref={inputRef}
-                    value={searchText}
-                    disabled={disabled}
-                    aria-autocomplete='list'
-                    aria-controls={listboxId}
-                    aria-expanded={opened}
-                    aria-haspopup='listbox'
-                    aria-labelledby={labelId}
-                    aria-activedescendant={
-                      focusedValue ? `option-${focusedValue}` : undefined
-                    }
-                    autoComplete='off'
-                    role='combobox'
-                    onChange={onInputChange}
-                    onFocus={onInputFocus}
-                    onBlur={onInputBlur}
-                    onKeyDown={onInputKeyDown}
-                  />
-                  <Icon
-                    icon='search'
-                    className={classnames(
-                      'slds-icon',
-                      'slds-icon_x-small',
-                      'slds-icon-text-default',
-                      'slds-input__icon',
-                      {
-                        'slds-input__icon_left': iconAlign === 'left',
-                        'slds-input__icon_right': iconAlign === 'right',
-                      }
-                    )}
-                    container={true}
-                  />
-                </div>
-                {opened && (
-                  <div
-                    id={listboxId}
-                    className={dropdownClassNames}
-                    role='listbox'
-                    aria-label='Search Results'
-                    tabIndex={0}
-                    aria-busy={loading}
-                    ref={dropdownRef}
-                  >
-                    <ul
-                      className='slds-listbox slds-listbox_vertical'
-                      role='presentation'
-                    >
-                      {renderListHeader()}
-                      {renderDataItems()}
-                      {renderLoadingSpinner()}
-                      {renderListFooter()}
-                    </ul>
-                  </div>
-                )}
+                  {renderListHeader()}
+                  {renderDataItems()}
+                  {renderLoadingSpinner()}
+                  {renderListFooter()}
+                </ul>
               </div>
-            </div>
+            )}
           </div>
         </div>
       </FormElement>

From d67ae9d0243825bf94ae9e47c6481502888e39cc Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 17 Jun 2025 14:40:38 +0900
Subject: [PATCH 128/245] (Input): use `useId()` as prefixes

---
 src/scripts/Input.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/scripts/Input.tsx b/src/scripts/Input.tsx
index 141e81ed0..e9fe17fa5 100644
--- a/src/scripts/Input.tsx
+++ b/src/scripts/Input.tsx
@@ -163,22 +163,21 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
       prevValueRef.current = e.target.value;
     });
 
-    const labelId = useId();
+    const prefix = useId();
 
-    const fallbackLabelFor = useId();
-    const labelFor = id ?? fallbackLabelFor;
+    const labelId = `${prefix}-label-id`;
 
-    const originalPreAddonId = useId();
-    const preAddonId = addonLeft ? originalPreAddonId : undefined;
+    const labelFor = id ?? `${prefix}-label-for`;
 
-    const originalPostAddonId = useId();
-    const postAddonId = addonRight ? originalPostAddonId : undefined;
+    const preAddonId = addonLeft ? `${prefix}-pre-addon-id` : undefined;
+
+    const postAddonId = addonRight ? `${prefix}-post-addon-id` : undefined;
 
     const labelledBy = [labelId, preAddonId, postAddonId]
       .filter((id) => id !== undefined)
       .join(' ');
 
-    const errorId = useId();
+    const errorId = `${prefix}-error-id`;
 
     const { isFieldSetColumn } = useContext(FieldSetColumnContext);
     const inputClassNames = classnames(

From 6113bbdd26b3dc2125b6ed7ef55d9269180d2842 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 17 Jun 2025 14:49:23 +0900
Subject: [PATCH 129/245] (Toggle): revert unnecessary attribute changes

---
 src/scripts/Toggle.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/scripts/Toggle.tsx b/src/scripts/Toggle.tsx
index be391377a..ca428d3b3 100644
--- a/src/scripts/Toggle.tsx
+++ b/src/scripts/Toggle.tsx
@@ -1,4 +1,4 @@
-import React, { useId, ChangeEvent, InputHTMLAttributes, Ref } from 'react';
+import React, { ChangeEvent, InputHTMLAttributes, Ref } from 'react';
 import classnames from 'classnames';
 import { FormElement, FormElementProps } from './FormElement';
 import { useEventCallback } from './hooks';
@@ -44,19 +44,18 @@ export const Toggle = createFC<ToggleProps, { isFormElement: boolean }>(
       className,
       'slds-checkbox_toggle slds-grid'
     );
-    const name = useId();
     const toggle = (
       <label className={toggleClassNames}>
         <input
           ref={inputRef}
           id={id}
-          name={name}
+          name='checkbox'
           type='checkbox'
-          aria-describedby={name}
+          aria-describedby='toggle-desc'
           {...rprops}
           onChange={onChange}
         />
-        <span id={name} className='slds-checkbox_faux_container'>
+        <span className='slds-checkbox_faux_container'>
           <span className='slds-checkbox_faux' />
           <span className='slds-checkbox_on'>Enabled</span>
           <span className='slds-checkbox_off'>Disabled</span>

From a32dd176d7763afce580de1168394d6dd0acd1d1 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 17 Jun 2025 15:02:22 +0900
Subject: [PATCH 130/245] (Select): wrap a select element with a container even
 when no label is given

---
 src/scripts/Select.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/scripts/Select.tsx b/src/scripts/Select.tsx
index f6811d19d..9f2f3b802 100644
--- a/src/scripts/Select.tsx
+++ b/src/scripts/Select.tsx
@@ -69,6 +69,11 @@ export const Select = createFC<SelectProps, { isFormElement: boolean }>(
         {children}
       </select>
     );
+    const selectElemWithContainer = rprops.multiple ? (
+      selectElem
+    ) : (
+      <div className='slds-select_container'>{selectElem}</div>
+    );
     if (isFieldSetColumn || label || required || error || cols) {
       const formElemProps = {
         controlId: id,
@@ -81,16 +86,10 @@ export const Select = createFC<SelectProps, { isFormElement: boolean }>(
         elementRef,
       };
       return (
-        <FormElement {...formElemProps}>
-          {rprops.multiple ? (
-            selectElem
-          ) : (
-            <div className='slds-select_container'>{selectElem}</div>
-          )}
-        </FormElement>
+        <FormElement {...formElemProps}>{selectElemWithContainer}</FormElement>
       );
     }
-    return selectElem;
+    return selectElemWithContainer;
   },
   { isFormElement: true }
 );

From 03449e564d4d1c6a5de869eea74235debefae85f Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 17 Jun 2025 15:14:28 +0900
Subject: [PATCH 131/245] (Radio): pass `id` explicitly to make `label` work
 fine

---
 src/scripts/Radio.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/scripts/Radio.tsx b/src/scripts/Radio.tsx
index d19405216..129003e2f 100644
--- a/src/scripts/Radio.tsx
+++ b/src/scripts/Radio.tsx
@@ -1,4 +1,4 @@
-import React, { FC, InputHTMLAttributes, Ref, useContext } from 'react';
+import React, { FC, InputHTMLAttributes, Ref, useId, useContext } from 'react';
 import classnames from 'classnames';
 import { RadioGroupContext, RadioValueType } from './RadioGroup';
 import { useEventCallback } from './hooks';
@@ -17,7 +17,7 @@ export type RadioProps = {
  *
  */
 export const Radio: FC<RadioProps> = ({
-  id,
+  id: id_,
   className,
   label,
   name,
@@ -33,6 +33,10 @@ export const Radio: FC<RadioProps> = ({
     errorId,
     onValueChange,
   } = useContext(RadioGroupContext);
+
+  const prefix = useId();
+  const id = id_ ?? `${prefix}-id`;
+
   const onChange = useEventCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       onChange_?.(e);

From 3a49bac74460f7d35c0b9dd37e476dc2ccbb4547 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 17 Jun 2025 15:23:22 +0900
Subject: [PATCH 132/245] (Checkbox): pass `id` surely to make `label` work
 fine

---
 src/scripts/Checkbox.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/scripts/Checkbox.tsx b/src/scripts/Checkbox.tsx
index db1273714..3f9bc7f74 100644
--- a/src/scripts/Checkbox.tsx
+++ b/src/scripts/Checkbox.tsx
@@ -2,6 +2,7 @@ import React, {
   FC,
   InputHTMLAttributes,
   Ref,
+  useId,
   useContext,
   ReactNode,
 } from 'react';
@@ -32,7 +33,7 @@ export type CheckboxProps = {
 export const Checkbox: FC<CheckboxProps> = (props) => {
   const {
     type, // eslint-disable-line @typescript-eslint/no-unused-vars
-    id,
+    id: id_,
     className,
     label,
     required,
@@ -45,6 +46,9 @@ export const Checkbox: FC<CheckboxProps> = (props) => {
     ...rprops
   } = props;
 
+  const prefix = useId();
+  const id = id_ ?? `${prefix}-id`;
+
   const { grouped, error, errorId } = useContext(CheckboxGroupContext);
   const formElemProps = {
     required,

From 78514d5fbddb40d118aa9265bda0702877f37c11 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 17 Jun 2025 15:41:10 +0900
Subject: [PATCH 133/245] (Textarea): pass `controlId` instead of `htmlFor`

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

diff --git a/src/scripts/Textarea.tsx b/src/scripts/Textarea.tsx
index 24bf6872b..5c96cc57a 100644
--- a/src/scripts/Textarea.tsx
+++ b/src/scripts/Textarea.tsx
@@ -75,7 +75,7 @@ export const Textarea = createFC<TextareaProps, { isFormElement: boolean }>(
     );
     if (isFieldSetColumn || label || required || error || cols) {
       const formElemProps = {
-        htmlFor: id,
+        controlId: id,
         label,
         required,
         error,

From 4dc475d8f6ecb43cc830ba87c40487a4e21b702f Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 17 Jun 2025 15:50:17 +0900
Subject: [PATCH 134/245] (Textarea): add `htmlReadOnly` prop and a
 corresponding story, following `Input`

---
 src/scripts/Textarea.tsx     |  4 ++++
 stories/Textarea.stories.tsx | 20 ++++++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/src/scripts/Textarea.tsx b/src/scripts/Textarea.tsx
index 5c96cc57a..6b0c27ebb 100644
--- a/src/scripts/Textarea.tsx
+++ b/src/scripts/Textarea.tsx
@@ -27,6 +27,8 @@ export type TextareaProps = {
   elementRef?: Ref<HTMLDivElement>;
   textareaRef?: Ref<HTMLTextAreaElement>;
   onValueChange?: (value: string, prevValue?: string) => void;
+  readOnly?: boolean;
+  htmlReadOnly?: boolean;
 } & TextareaHTMLAttributes<HTMLTextAreaElement>;
 
 /**
@@ -48,6 +50,7 @@ export const Textarea = createFC<TextareaProps, { isFormElement: boolean }>(
       onChange: onChange_,
       onValueChange,
       readOnly,
+      htmlReadOnly,
       ...rprops
     } = props;
     const prevValueRef = useRef<string>();
@@ -68,6 +71,7 @@ export const Textarea = createFC<TextareaProps, { isFormElement: boolean }>(
         id={id}
         ref={textareaRef}
         className={taClassNames}
+        readOnly={htmlReadOnly}
         {...rprops}
         onChange={onChange}
         aria-describedby={error ? errorId : undefined}
diff --git a/stories/Textarea.stories.tsx b/stories/Textarea.stories.tsx
index ab156d8c6..cecb81ae0 100644
--- a/stories/Textarea.stories.tsx
+++ b/stories/Textarea.stories.tsx
@@ -123,6 +123,26 @@ export const ReadOnly: ComponentStoryObj<typeof Textarea> = {
   },
 };
 
+/**
+ *
+ */
+export const ReadOnlyHtml: ComponentStoryObj<typeof Textarea> = {
+  name: 'Read only (HTML)',
+  args: {
+    label: 'Input Label',
+    value: 'Textarea Only',
+    htmlReadOnly: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Textarea control with readOnly status (passsed to HTML &lt;input&gt; element)',
+      },
+    },
+  },
+};
+
 /**
  *
  */

From a6aab955d439ce43cec1a94742a3da164dcee4f3 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 17 Jun 2025 15:51:03 +0900
Subject: [PATCH 135/245] (Textarea): add attributes to the static `Text`,
 following `Input`

---
 src/scripts/Textarea.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/scripts/Textarea.tsx b/src/scripts/Textarea.tsx
index 6b0c27ebb..9d2694789 100644
--- a/src/scripts/Textarea.tsx
+++ b/src/scripts/Textarea.tsx
@@ -63,7 +63,12 @@ export const Textarea = createFC<TextareaProps, { isFormElement: boolean }>(
     const errorId = useId();
     const taClassNames = classnames(className, 'slds-textarea');
     const textareaElem = readOnly ? (
-      <Text type='regular' category='body'>
+      <Text
+        id={id}
+        type='regular'
+        category='body'
+        className='slds-form-element__static'
+      >
         {rprops.value}
       </Text>
     ) : (

From 32b8fca35cf1bcadd4bad1ec54e8d7769cf621c1 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 17 Jun 2025 16:01:05 +0900
Subject: [PATCH 136/245] (DateInput, DatePicker): remove unnecessary a11y
 attributes

---
 src/scripts/DateInput.tsx  | 1 -
 src/scripts/Datepicker.tsx | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/scripts/DateInput.tsx b/src/scripts/DateInput.tsx
index 3e6a18bab..cf418b60a 100644
--- a/src/scripts/DateInput.tsx
+++ b/src/scripts/DateInput.tsx
@@ -358,7 +358,6 @@ export const DateInput = createFC<DateInputProps, { isFormElement: boolean }>(
               icon='event'
               disabled={props.disabled}
               className='slds-input__icon slds-input__icon_right'
-              alt='Select a date'
               tabIndex={-1}
               onClick={props.disabled ? undefined : onDateIconClick}
               onBlur={onInputBlur}
diff --git a/src/scripts/Datepicker.tsx b/src/scripts/Datepicker.tsx
index 36d9d2d77..da7f85882 100644
--- a/src/scripts/Datepicker.tsx
+++ b/src/scripts/Datepicker.tsx
@@ -496,7 +496,6 @@ export const Datepicker: FC<DatepickerProps> = (props) => {
       tabIndex={-1}
       role='dialog'
       aria-hidden={false}
-      aria-label={`Date picker: ${dayjs.monthsShort()[cal.month]}`}
       onBlur={onBlur}
       onKeyDown={onKeyDown}
     >

From 57183425dc3b7b0bfa223f420c8f4bc0f04d6c93 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 17 Jun 2025 18:58:31 +0900
Subject: [PATCH 137/245] (Picklist): add a `scrollIntoView()` behavoir

---
 src/scripts/Picklist.tsx | 51 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 50 insertions(+), 1 deletion(-)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index 012cc0e80..2dfbd1f04 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -210,6 +210,46 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       [getOptionValues]
     );
 
+    // Scroll focused element into view
+    const scrollFocusedElementIntoView = useEventCallback(
+      (nextFocusedValue: PicklistValue | undefined) => {
+        if (!nextFocusedValue || !dropdownElRef.current) {
+          return;
+        }
+
+        const dropdownContainer = dropdownElRef.current;
+        const targetElement = dropdownContainer.querySelector(
+          `#option-${nextFocusedValue}`
+        );
+
+        if (!(targetElement instanceof HTMLElement)) {
+          return;
+        }
+
+        // Calculate element position within container
+        const elementTopPosition = targetElement.offsetTop;
+        const elementBottomPosition =
+          elementTopPosition + targetElement.offsetHeight;
+
+        // Calculate currently visible area
+        const currentScrollPosition = dropdownContainer.scrollTop;
+        const visibleAreaHeight = dropdownContainer.clientHeight;
+        const visibleAreaTop = currentScrollPosition;
+        const visibleAreaBottom = currentScrollPosition + visibleAreaHeight;
+
+        // Check if element is outside the visible area
+        const isAbove = elementTopPosition < visibleAreaTop;
+        const isBelow = elementBottomPosition > visibleAreaBottom;
+
+        // Scroll only if element is not currently visible
+        if (isAbove || isBelow) {
+          targetElement.scrollIntoView({
+            block: 'center',
+          });
+        }
+      }
+    );
+
     // Set initial focus when dropdown opens
     useEffect(() => {
       if (opened && !focusedValue) {
@@ -217,11 +257,18 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
         const initialFocus =
           values.length > 0 ? values[0] : getOptionValues()[0];
         setFocusedValue(initialFocus);
+        scrollFocusedElementIntoView(initialFocus);
       } else if (!opened) {
         // Reset focus when dropdown closes
         setFocusedValue(undefined);
       }
-    }, [opened, values, getOptionValues, focusedValue]);
+    }, [
+      opened,
+      values,
+      getOptionValues,
+      focusedValue,
+      scrollFocusedElementIntoView,
+    ]);
 
     const elRef = useRef<HTMLDivElement | null>(null);
     const elementRef = useMergeRefs([elRef, elementRef_]);
@@ -307,6 +354,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
           // Navigate to next option
           const nextValue = getNextValue(focusedValue);
           setFocusedValue(nextValue);
+          scrollFocusedElementIntoView(nextValue);
         }
       } else if (e.keyCode === 38) {
         // up
@@ -318,6 +366,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
           // Navigate to previous option
           const prevValue = getPrevValue(focusedValue);
           setFocusedValue(prevValue);
+          scrollFocusedElementIntoView(prevValue);
         }
       } else if (e.keyCode === 27) {
         // ESC

From a4f0c446194d4ab81b650f5b8c050f385a395e17 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 17 Jun 2025 19:10:53 +0900
Subject: [PATCH 138/245] (Picklist): refactor to use `optionIdPrefix`

---
 src/scripts/Picklist.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index 2dfbd1f04..6a76c2e86 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -40,11 +40,13 @@ const PicklistContext = createContext<{
   multiSelect?: boolean;
   onSelect: (value: PicklistValue) => void;
   focusedValue?: PicklistValue;
+  optionIdPrefix: string;
 }>({
   values: [],
   onSelect: () => {
     // noop
   },
+  optionIdPrefix: '',
 });
 
 /**
@@ -126,6 +128,8 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
     const id = id_ ?? fallbackId;
     const listboxId = `${id}-listbox`;
 
+    const optionIdPrefix = `${useId()}-option`;
+
     const values_: PicklistValue[] | undefined =
       typeof value_ === 'undefined'
         ? undefined
@@ -219,7 +223,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
 
         const dropdownContainer = dropdownElRef.current;
         const targetElement = dropdownContainer.querySelector(
-          `#option-${nextFocusedValue}`
+          `#${CSS.escape(optionIdPrefix)}-${nextFocusedValue}`
         );
 
         if (!(targetElement instanceof HTMLElement)) {
@@ -458,6 +462,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       multiSelect,
       onSelect: onPicklistItemSelect,
       focusedValue,
+      optionIdPrefix,
     };
 
     return (
@@ -479,7 +484,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
                 aria-haspopup='listbox'
                 aria-disabled={disabled}
                 aria-activedescendant={
-                  focusedValue ? `option-${focusedValue}` : undefined
+                  focusedValue ? `${optionIdPrefix}-${focusedValue}` : undefined
                 }
                 onClick={onClick}
                 onKeyDown={onKeyDown}
@@ -545,7 +550,7 @@ export const PicklistItem: FC<PicklistItemProps> = ({
   disabled,
   children,
 }) => {
-  const { values, multiSelect, onSelect, focusedValue } =
+  const { values, multiSelect, onSelect, focusedValue, optionIdPrefix } =
     useContext(PicklistContext);
   const selected =
     selected_ ?? (value != null ? values.indexOf(value) >= 0 : false);
@@ -571,7 +576,7 @@ export const PicklistItem: FC<PicklistItemProps> = ({
   return (
     <li role='presentation' className='slds-listbox__item'>
       <div
-        id={value ? `option-${value}` : undefined}
+        id={value ? `${optionIdPrefix}-${value}` : undefined}
         className={itemClassNames}
         role='option'
         aria-selected={selected}

From 65b5886aa1699735173f7e1b97cb50e57a7e69b1 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 18 Jun 2025 12:56:36 +0900
Subject: [PATCH 139/245] Revert "(Form): apply form type to each form element"

This reverts commit c563045859afc4beae5a8228b510c08466e7b981.
---
 src/scripts/CheckboxGroup.tsx |  3 ---
 src/scripts/FieldSet.tsx      |  6 +-----
 src/scripts/Form.tsx          | 31 +++++++++++--------------------
 src/scripts/FormElement.tsx   |  7 -------
 src/scripts/RadioGroup.tsx    |  3 ---
 5 files changed, 12 insertions(+), 38 deletions(-)

diff --git a/src/scripts/CheckboxGroup.tsx b/src/scripts/CheckboxGroup.tsx
index d1d926ff6..6f255837b 100644
--- a/src/scripts/CheckboxGroup.tsx
+++ b/src/scripts/CheckboxGroup.tsx
@@ -8,7 +8,6 @@ import React, {
   ReactNode,
 } from 'react';
 import classnames from 'classnames';
-import { FormTypeContext } from './Form';
 import { FormElementProps } from './FormElement';
 import { FieldSetColumnContext } from './FieldSet';
 import { TooltipContent } from './TooltipContent';
@@ -64,7 +63,6 @@ export const CheckboxGroup = createFC<
       children,
       ...rprops
     } = props;
-    const type = useContext(FormTypeContext);
     const { totalCols } = useContext(FieldSetColumnContext);
     const controlElRef = useRef<HTMLDivElement | null>(null);
 
@@ -90,7 +88,6 @@ export const CheckboxGroup = createFC<
     const grpClassNames = classnames(
       className,
       'slds-form-element',
-      type ? `slds-form-element_${type}` : null,
       {
         'slds-has-error': error,
         'slds-is-required': required,
diff --git a/src/scripts/FieldSet.tsx b/src/scripts/FieldSet.tsx
index e254dae30..6c6161e3c 100644
--- a/src/scripts/FieldSet.tsx
+++ b/src/scripts/FieldSet.tsx
@@ -3,10 +3,8 @@ import React, {
   HTMLAttributes,
   ReactNode,
   useMemo,
-  useContext,
 } from 'react';
 import classnames from 'classnames';
-import { FormTypeContext } from './Form';
 import { FormElement } from './FormElement';
 import { createFC } from './common';
 
@@ -77,12 +75,10 @@ export const FieldSet = createFC<
   { isFormElement: boolean; Row: typeof FieldSetRow }
 >(
   ({ className, label, children, ...props }) => {
-    const type = useContext(FormTypeContext) ?? 'compound';
-
     const fsClassNames = classnames(
       className,
       'slds-form-element',
-      `slds-form-element_${type}`
+      'slds-form-element_compound'
     );
     const legendClassNames = classnames(
       'slds-form-element__legend',
diff --git a/src/scripts/Form.tsx b/src/scripts/Form.tsx
index e83e0d067..9b743b3f1 100644
--- a/src/scripts/Form.tsx
+++ b/src/scripts/Form.tsx
@@ -9,12 +9,6 @@ export type FormProps = {
   type?: 'stacked' | 'horizontal' | 'inline' | 'compound';
 } & HTMLAttributes<HTMLDivElement>;
 
-/**
- *
- */
-export const FormTypeContext =
-  React.createContext<FormProps['type']>(undefined);
-
 /**
  *
  */
@@ -22,19 +16,16 @@ export const Form: FC<FormProps> = (props) => {
   const { className, type = 'stacked', children, ...rprops } = props;
   const formClassNames = classnames(className, `slds-form_${type}`);
   return (
-    <FormTypeContext.Provider value={type === 'compound' ? 'stacked' : type}>
-      <div className={formClassNames} {...rprops}>
-        {React.Children.map(children, (child) => {
-          if (
-            React.isValidElement(child) &&
-            !(child.type as unknown as { isFormElement?: boolean })
-              .isFormElement
-          ) {
-            return <FormElement>{child}</FormElement>;
-          }
-          return child;
-        })}
-      </div>
-    </FormTypeContext.Provider>
+    <div className={formClassNames} {...rprops}>
+      {React.Children.map(children, (child) => {
+        if (
+          React.isValidElement(child) &&
+          !(child.type as unknown as { isFormElement?: boolean }).isFormElement
+        ) {
+          return <FormElement>{child}</FormElement>;
+        }
+        return child;
+      })}
+    </div>
   );
 };
diff --git a/src/scripts/FormElement.tsx b/src/scripts/FormElement.tsx
index 1762d72eb..cae09a906 100644
--- a/src/scripts/FormElement.tsx
+++ b/src/scripts/FormElement.tsx
@@ -8,7 +8,6 @@ import React, {
   useCallback,
 } from 'react';
 import classnames from 'classnames';
-import { FormTypeContext } from './Form';
 import { FieldSetColumnContext } from './FieldSet';
 import { createFC } from './common';
 import { TooltipContent } from './TooltipContent';
@@ -32,7 +31,6 @@ export type FormElementProps = {
   children?: ReactNode;
   tooltip?: ReactNode;
   tooltipIcon?: string;
-  type?: 'stacked' | 'horizontal' | 'inline' | 'compound';
 };
 
 /**
@@ -58,12 +56,8 @@ export const FormElement = createFC<
       readOnly,
       tooltip,
       tooltipIcon,
-      type: propsType,
     } = props;
 
-    const contextType = useContext(FormTypeContext);
-    const type = propsType ?? contextType;
-
     const controlElRef = useRef<HTMLDivElement>(null);
 
     const { totalCols } = useContext(FieldSetColumnContext);
@@ -78,7 +72,6 @@ export const FormElement = createFC<
 
     const formElementClassNames = classnames(
       'slds-form-element',
-      type ? `slds-form-element_${type}` : null,
       readOnly ? 'slds-form-element_readonly' : null,
       error ? 'slds-has-error' : null,
       typeof totalCols === 'number'
diff --git a/src/scripts/RadioGroup.tsx b/src/scripts/RadioGroup.tsx
index 7e73b6ff0..328f8f22d 100644
--- a/src/scripts/RadioGroup.tsx
+++ b/src/scripts/RadioGroup.tsx
@@ -7,7 +7,6 @@ import React, {
   ReactNode,
 } from 'react';
 import classnames from 'classnames';
-import { FormTypeContext } from './Form';
 import { FieldSetColumnContext } from './FieldSet';
 import { TooltipContent } from './TooltipContent';
 import { createFC } from './common';
@@ -61,12 +60,10 @@ export const RadioGroup = createFC<RadioGroupProps, { isFormElement: boolean }>(
       onValueChange,
       ...rprops
     } = props;
-    const type = useContext(FormTypeContext);
     const { totalCols } = useContext(FieldSetColumnContext);
     const grpClassNames = classnames(
       className,
       'slds-form-element',
-      type ? `slds-form-element_${type}` : null,
       {
         'slds-has-error': error,
         'slds-is-required': required,

From 4af32c75c5709320110f1d60e1cd61d89595eb54 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 18 Jun 2025 13:25:38 +0900
Subject: [PATCH 140/245] reflect the spec

---
 src/scripts/Notification.tsx | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/src/scripts/Notification.tsx b/src/scripts/Notification.tsx
index ddf7a1adb..1bdfdc325 100644
--- a/src/scripts/Notification.tsx
+++ b/src/scripts/Notification.tsx
@@ -67,25 +67,15 @@ export const Notification: FC<NotificationProps> = (props) => {
     <div className={alertClassNames} role='alert' {...pprops}>
       {alt ? <span className='slds-assistive-text'>{alt}</span> : undefined}
       {onClose ? (
-        type === 'toast' ? (
+        <div className='slds-notify__close'>
           <Button
-            className='slds-notification__close slds-button_icon-inverse'
-            type='icon-container'
+            type='icon-inverse'
             icon='close'
+            size={type === 'toast' ? undefined : 'small'}
             alt='Close'
             onClick={onClose}
           />
-        ) : (
-          <div className='slds-notify__close'>
-            <Button
-              type='icon-inverse'
-              icon='close'
-              size='small'
-              alt='Close'
-              onClick={onClose}
-            />
-          </div>
-        )
+        </div>
       ) : undefined}
       {iconEl}
       {type === 'toast' ? (

From 610776d5cbe8db680d5761117b4332c9447b5d50 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 07:37:38 +0900
Subject: [PATCH 141/245] (Picklist): make `getPrevValue()` and
 `getNextValue()` not wrap around

---
 src/scripts/Picklist.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index 6a76c2e86..6b7c20e54 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -192,7 +192,9 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
         if (!currentValue) return optionValues[0];
 
         const currentIndex = optionValues.indexOf(currentValue);
-        return optionValues[currentIndex + 1] || optionValues[0]; // wrap around
+        return optionValues[
+          Math.min(currentIndex + 1, optionValues.length - 1)
+        ]; // not wrap around
       },
       [getOptionValues]
     );
@@ -206,10 +208,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
         if (!currentValue) return optionValues[optionValues.length - 1];
 
         const currentIndex = optionValues.indexOf(currentValue);
-        return (
-          optionValues[currentIndex - 1] ||
-          optionValues[optionValues.length - 1]
-        ); // wrap around
+        return optionValues[Math.max(currentIndex - 1, 0)]; // not wrap around
       },
       [getOptionValues]
     );

From 52ff2a489111803d6dcecdafb075b1cd63cd1c1d Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 07:38:14 +0900
Subject: [PATCH 142/245] (Picklist): add Tab / Shift + Tab support

---
 src/scripts/Picklist.tsx | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index 6b7c20e54..c8e2c3ece 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -371,6 +371,40 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
           setFocusedValue(prevValue);
           scrollFocusedElementIntoView(prevValue);
         }
+      } else if (e.keyCode === 9) {
+        // Tab or Shift+Tab
+        if (opened) {
+          e.preventDefault();
+          e.stopPropagation();
+          const optionValues = getOptionValues();
+          const currentIndex = focusedValue
+            ? optionValues.indexOf(focusedValue)
+            : -1;
+
+          if (e.shiftKey) {
+            // Shift+Tab - Navigate to previous option or close if at first
+            if (currentIndex <= 0) {
+              // At first option or no focus, close the picklist
+              setOpened(false);
+              onComplete?.();
+            } else {
+              const prevValue = getPrevValue(focusedValue);
+              setFocusedValue(prevValue);
+              scrollFocusedElementIntoView(prevValue);
+            }
+          } else {
+            // Tab - Navigate to next option or close if at last
+            if (currentIndex >= optionValues.length - 1) {
+              // At last option, close the picklist
+              setOpened(false);
+              onComplete?.();
+            } else {
+              const nextValue = getNextValue(focusedValue);
+              setFocusedValue(nextValue);
+              scrollFocusedElementIntoView(nextValue);
+            }
+          }
+        }
       } else if (e.keyCode === 27) {
         // ESC
         e.preventDefault();

From 1750dd080d2754e32a6e7041275462ab9a006601 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 08:35:15 +0900
Subject: [PATCH 143/245] (Lookup): make `getPrevValue()` and `getNextValue()`
 not wrap around

---
 src/scripts/Lookup.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index efc6a0e9a..eb3b97488 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -199,7 +199,9 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
         if (!currentValue) return optionValues[0];
 
         const currentIndex = optionValues.indexOf(currentValue);
-        return optionValues[currentIndex + 1] || optionValues[0]; // wrap around
+        return optionValues[
+          Math.min(currentIndex + 1, optionValues.length - 1)
+        ]; // not wrap around
       },
       [getOptionValues]
     );
@@ -213,10 +215,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
         if (!currentValue) return optionValues[optionValues.length - 1];
 
         const currentIndex = optionValues.indexOf(currentValue);
-        return (
-          optionValues[currentIndex - 1] ||
-          optionValues[optionValues.length - 1]
-        ); // wrap around
+        return optionValues[Math.max(currentIndex - 1, 0)]; // not wrap around
       },
       [getOptionValues]
     );

From 2352af6f77539199cf7e913de65ac9db72f39066 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 08:35:49 +0900
Subject: [PATCH 144/245] (Lookup): add Tab / Shift + Tab support

---
 src/scripts/Lookup.tsx | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index eb3b97488..96a7288d4 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -311,6 +311,38 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
             const prevValue = getPrevValue(focusedValue);
             setFocusedValue(prevValue);
           }
+        } else if (e.keyCode === 9) {
+          // Tab or Shift+Tab
+          if (opened) {
+            e.preventDefault();
+            e.stopPropagation();
+            const optionValues = getOptionValues();
+            const currentIndex = focusedValue
+              ? optionValues.indexOf(focusedValue)
+              : -1;
+
+            if (e.shiftKey) {
+              // Shift+Tab - Navigate to previous option or close if at first
+              if (currentIndex <= 0) {
+                // At first option or no focus, close the lookup
+                setOpened(false);
+                onComplete?.();
+              } else {
+                const prevValue = getPrevValue(focusedValue);
+                setFocusedValue(prevValue);
+              }
+            } else {
+              // Tab - Navigate to next option or close if at last
+              if (currentIndex >= optionValues.length - 1) {
+                // At last option, close the lookup
+                setOpened(false);
+                onComplete?.();
+              } else {
+                const nextValue = getNextValue(focusedValue);
+                setFocusedValue(nextValue);
+              }
+            }
+          }
         } else if (e.keyCode === 27) {
           // ESC
           e.preventDefault();

From 87d3bef670ca7d61d32f817d25a357385073c86f Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 08:44:42 +0900
Subject: [PATCH 145/245] (Lookup): add a `scrollIntoView()` behavoir

---
 src/scripts/Lookup.tsx | 47 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 96a7288d4..2a3aa9c82 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -220,15 +220,56 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       [getOptionValues]
     );
 
+    // Scroll focused element into view
+    const scrollFocusedElementIntoView = useEventCallback(
+      (nextFocusedValue: string | undefined) => {
+        if (!nextFocusedValue || !dropdownElRef.current) {
+          return;
+        }
+
+        const dropdownContainer = dropdownElRef.current;
+        const targetElement = dropdownContainer.querySelector(
+          `#option-${nextFocusedValue}`
+        );
+
+        if (!(targetElement instanceof HTMLElement)) {
+          return;
+        }
+
+        // Calculate element position within container
+        const elementTopPosition = targetElement.offsetTop;
+        const elementBottomPosition =
+          elementTopPosition + targetElement.offsetHeight;
+
+        // Calculate currently visible area
+        const currentScrollPosition = dropdownContainer.scrollTop;
+        const visibleAreaHeight = dropdownContainer.clientHeight;
+        const visibleAreaTop = currentScrollPosition;
+        const visibleAreaBottom = currentScrollPosition + visibleAreaHeight;
+
+        // Check if element is outside the visible area
+        const isAbove = elementTopPosition < visibleAreaTop;
+        const isBelow = elementBottomPosition > visibleAreaBottom;
+
+        // Scroll only if element is not currently visible
+        if (isAbove || isBelow) {
+          targetElement.scrollIntoView({
+            block: 'center',
+          });
+        }
+      }
+    );
+
     // Set initial focus when dropdown opens
     useEffect(() => {
       if (opened && !focusedValue) {
         const initialFocus = getOptionValues()[0];
         setFocusedValue(initialFocus);
+        scrollFocusedElementIntoView(initialFocus);
       } else if (!opened) {
         setFocusedValue(undefined);
       }
-    }, [opened, getOptionValues, focusedValue]);
+    }, [opened, getOptionValues, focusedValue, scrollFocusedElementIntoView]);
 
     const elRef = useRef<HTMLDivElement | null>(null);
     const elementRef = useMergeRefs([elRef, elementRef_]);
@@ -299,6 +340,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
           } else {
             const nextValue = getNextValue(focusedValue);
             setFocusedValue(nextValue);
+            scrollFocusedElementIntoView(nextValue);
           }
         } else if (e.keyCode === 38) {
           // up
@@ -310,6 +352,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
           } else {
             const prevValue = getPrevValue(focusedValue);
             setFocusedValue(prevValue);
+            scrollFocusedElementIntoView(prevValue);
           }
         } else if (e.keyCode === 9) {
           // Tab or Shift+Tab
@@ -330,6 +373,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
               } else {
                 const prevValue = getPrevValue(focusedValue);
                 setFocusedValue(prevValue);
+                scrollFocusedElementIntoView(prevValue);
               }
             } else {
               // Tab - Navigate to next option or close if at last
@@ -340,6 +384,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
               } else {
                 const nextValue = getNextValue(focusedValue);
                 setFocusedValue(nextValue);
+                scrollFocusedElementIntoView(nextValue);
               }
             }
           }

From 76aaf73782dd932ccbab40ae95ae6d6072ceae16 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 08:51:17 +0900
Subject: [PATCH 146/245] (Lookup): add `onScopeKeyDown()`

---
 src/scripts/Lookup.tsx | 147 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 145 insertions(+), 2 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 2a3aa9c82..e80fcccf4 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -155,6 +155,9 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
 
     const labelId = label ? `${comboboxId}-label` : undefined;
     const scopeId = `${comboboxId}-scope`;
+    const scopeListboxId = `${comboboxId}-scope-listbox`;
+    const getScopeOptionId = (index: number) =>
+      `${scopeListboxId}-option-${index}`;
 
     const [value, setValue] = useControlledValue<string | null>(
       value_,
@@ -179,6 +182,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     );
     const [focusedValue, setFocusedValue] = useState<string | undefined>();
     const [scopeOpened, setScopeOpened] = useState(false);
+    const [scopeFocusedIndex, setScopeFocusedIndex] = useState<number>(-1);
 
     const { getActiveElement } = useContext(ComponentSettingsContext);
 
@@ -260,6 +264,50 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       }
     );
 
+    // Scroll focused scope element into view
+    const scrollFocusedScopeIntoView = useEventCallback(
+      (nextFocusedIndex: number) => {
+        if (nextFocusedIndex < 0 || !scopes) {
+          return;
+        }
+
+        const scopeDropdown = document.getElementById(scopeListboxId);
+        if (!scopeDropdown) {
+          return;
+        }
+
+        const targetElement = scopeDropdown.querySelector(
+          `#${CSS.escape(getScopeOptionId(nextFocusedIndex))}`
+        );
+
+        if (!(targetElement instanceof HTMLElement)) {
+          return;
+        }
+
+        // Calculate element position within container
+        const elementTopPosition = targetElement.offsetTop;
+        const elementBottomPosition =
+          elementTopPosition + targetElement.offsetHeight;
+
+        // Calculate currently visible area
+        const currentScrollPosition = scopeDropdown.scrollTop;
+        const visibleAreaHeight = scopeDropdown.clientHeight;
+        const visibleAreaTop = currentScrollPosition;
+        const visibleAreaBottom = currentScrollPosition + visibleAreaHeight;
+
+        // Check if element is outside the visible area
+        const isAbove = elementTopPosition < visibleAreaTop;
+        const isBelow = elementBottomPosition > visibleAreaBottom;
+
+        // Scroll only if element is not currently visible
+        if (isAbove || isBelow) {
+          targetElement.scrollIntoView({
+            block: 'center',
+          });
+        }
+      }
+    );
+
     // Set initial focus when dropdown opens
     useEffect(() => {
       if (opened && !focusedValue) {
@@ -443,6 +491,92 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       onScopeMenuClick_?.();
     });
 
+    const onScopeKeyDown = useEventCallback(
+      (e: KeyboardEvent<HTMLInputElement>) => {
+        if (!scopes) return;
+
+        if (e.keyCode === 40) {
+          // down
+          e.preventDefault();
+          e.stopPropagation();
+          if (!scopeOpened) {
+            setScopeOpened(true);
+            setScopeFocusedIndex(0);
+          } else {
+            const nextIndex = Math.min(
+              scopeFocusedIndex + 1,
+              scopes.length - 1
+            );
+            setScopeFocusedIndex(nextIndex);
+            scrollFocusedScopeIntoView(nextIndex);
+          }
+        } else if (e.keyCode === 38) {
+          // up
+          e.preventDefault();
+          e.stopPropagation();
+          if (!scopeOpened) {
+            setScopeOpened(true);
+            setScopeFocusedIndex(scopes.length - 1);
+          } else {
+            const prevIndex = Math.max(scopeFocusedIndex - 1, 0);
+            setScopeFocusedIndex(prevIndex);
+            scrollFocusedScopeIntoView(prevIndex);
+          }
+        } else if (e.keyCode === 9) {
+          // Tab or Shift+Tab
+          if (scopeOpened) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (e.shiftKey) {
+              // Shift+Tab - Navigate to previous option or close if at first
+              if (scopeFocusedIndex <= 0) {
+                setScopeOpened(false);
+                setScopeFocusedIndex(-1);
+              } else {
+                const prevIndex = Math.max(scopeFocusedIndex - 1, 0);
+                setScopeFocusedIndex(prevIndex);
+                scrollFocusedScopeIntoView(prevIndex);
+              }
+            } else {
+              // Tab - Navigate to next option or close if at last
+              if (scopeFocusedIndex >= scopes.length - 1) {
+                setScopeOpened(false);
+                setScopeFocusedIndex(-1);
+              } else {
+                const nextIndex = Math.min(
+                  scopeFocusedIndex + 1,
+                  scopes.length - 1
+                );
+                setScopeFocusedIndex(nextIndex);
+                scrollFocusedScopeIntoView(nextIndex);
+              }
+            }
+          }
+        } else if (e.keyCode === 27) {
+          // ESC
+          e.preventDefault();
+          e.stopPropagation();
+          setScopeOpened(false);
+          setScopeFocusedIndex(-1);
+        } else if (e.keyCode === 13) {
+          // Enter
+          e.preventDefault();
+          e.stopPropagation();
+          if (scopeOpened && scopeFocusedIndex >= 0) {
+            const selectedScope = scopes[scopeFocusedIndex];
+            if (selectedScope) {
+              onScopeSelect(selectedScope.label);
+              setScopeOpened(false);
+              setScopeFocusedIndex(-1);
+            }
+          } else {
+            setScopeOpened(!scopeOpened);
+          }
+        }
+      }
+    );
+
     const onScopeBlur = useEventCallback(() => {
       setTimeout(() => {
         setScopeOpened(false);
@@ -697,6 +831,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
                             disabled={disabled}
                             onClick={onScopeMenuClick}
                             onBlur={onScopeBlur}
+                            onKeyDown={onScopeKeyDown}
                             readOnly
                           />
                           <Icon
@@ -711,6 +846,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
                         </div>
                         {scopeOpened && (
                           <div
+                            id={scopeListboxId}
                             className='slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid'
                             role='listbox'
                             aria-label='Scope Options'
@@ -720,14 +856,21 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
                               className='slds-listbox slds-listbox_vertical'
                               role='presentation'
                             >
-                              {scopes.map((scope) => (
+                              {scopes.map((scope, index) => (
                                 <li
                                   key={scope.label}
                                   role='presentation'
                                   className='slds-listbox__item'
                                 >
                                   <div
-                                    className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity'
+                                    id={getScopeOptionId(index)}
+                                    className={classnames(
+                                      'slds-media slds-media_center slds-listbox__option slds-listbox__option_entity',
+                                      {
+                                        'slds-has-focus':
+                                          scopeFocusedIndex === index,
+                                      }
+                                    )}
                                     role='option'
                                     aria-selected={scope.label === targetScope}
                                     onClick={() => onScopeSelect(scope.label)}

From 3c7145a1eafaf67c977f1c0ffd0b13cf06a4be39 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 08:55:19 +0900
Subject: [PATCH 147/245] (Lookup): refactor `scrollIntoView()` logic

---
 src/scripts/Lookup.tsx | 63 +++++++++++++++++-------------------------
 1 file changed, 25 insertions(+), 38 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index e80fcccf4..fc9e19bcf 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -224,18 +224,9 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       [getOptionValues]
     );
 
-    // Scroll focused element into view
-    const scrollFocusedElementIntoView = useEventCallback(
-      (nextFocusedValue: string | undefined) => {
-        if (!nextFocusedValue || !dropdownElRef.current) {
-          return;
-        }
-
-        const dropdownContainer = dropdownElRef.current;
-        const targetElement = dropdownContainer.querySelector(
-          `#option-${nextFocusedValue}`
-        );
-
+    // Common scroll utility
+    const scrollElementIntoView = useEventCallback(
+      (container: Element, targetElement: Element) => {
         if (!(targetElement instanceof HTMLElement)) {
           return;
         }
@@ -246,8 +237,8 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
           elementTopPosition + targetElement.offsetHeight;
 
         // Calculate currently visible area
-        const currentScrollPosition = dropdownContainer.scrollTop;
-        const visibleAreaHeight = dropdownContainer.clientHeight;
+        const currentScrollPosition = container.scrollTop;
+        const visibleAreaHeight = container.clientHeight;
         const visibleAreaTop = currentScrollPosition;
         const visibleAreaBottom = currentScrollPosition + visibleAreaHeight;
 
@@ -264,6 +255,24 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       }
     );
 
+    // Scroll focused element into view
+    const scrollFocusedElementIntoView = useEventCallback(
+      (nextFocusedValue: string | undefined) => {
+        if (!nextFocusedValue || !dropdownElRef.current) {
+          return;
+        }
+
+        const dropdownContainer = dropdownElRef.current;
+        const targetElement = dropdownContainer.querySelector(
+          `#option-${nextFocusedValue}`
+        );
+
+        if (targetElement) {
+          scrollElementIntoView(dropdownContainer, targetElement);
+        }
+      }
+    );
+
     // Scroll focused scope element into view
     const scrollFocusedScopeIntoView = useEventCallback(
       (nextFocusedIndex: number) => {
@@ -280,30 +289,8 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
           `#${CSS.escape(getScopeOptionId(nextFocusedIndex))}`
         );
 
-        if (!(targetElement instanceof HTMLElement)) {
-          return;
-        }
-
-        // Calculate element position within container
-        const elementTopPosition = targetElement.offsetTop;
-        const elementBottomPosition =
-          elementTopPosition + targetElement.offsetHeight;
-
-        // Calculate currently visible area
-        const currentScrollPosition = scopeDropdown.scrollTop;
-        const visibleAreaHeight = scopeDropdown.clientHeight;
-        const visibleAreaTop = currentScrollPosition;
-        const visibleAreaBottom = currentScrollPosition + visibleAreaHeight;
-
-        // Check if element is outside the visible area
-        const isAbove = elementTopPosition < visibleAreaTop;
-        const isBelow = elementBottomPosition > visibleAreaBottom;
-
-        // Scroll only if element is not currently visible
-        if (isAbove || isBelow) {
-          targetElement.scrollIntoView({
-            block: 'center',
-          });
+        if (targetElement) {
+          scrollElementIntoView(scopeDropdown, targetElement);
         }
       }
     );

From 4dc553d8106301a82e70e36c981f858a55205b76 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 09:33:08 +0900
Subject: [PATCH 148/245] (Lookup): refactor keyboard handlers

---
 src/scripts/Lookup.tsx | 285 +++++++++++++++++++++--------------------
 1 file changed, 149 insertions(+), 136 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index fc9e19bcf..262c5c302 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -363,76 +363,83 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       }, 10);
     });
 
-    const onInputKeyDown = useEventCallback(
-      (e: KeyboardEvent<HTMLInputElement>) => {
-        if (e.keyCode === 40) {
-          // down
-          e.preventDefault();
-          e.stopPropagation();
-          if (!opened) {
-            setOpened(true);
-            onLookupRequest_?.(searchText);
-          } else {
-            const nextValue = getNextValue(focusedValue);
-            setFocusedValue(nextValue);
-            scrollFocusedElementIntoView(nextValue);
-          }
-        } else if (e.keyCode === 38) {
-          // up
-          e.preventDefault();
-          e.stopPropagation();
-          if (!opened) {
-            setOpened(true);
-            onLookupRequest_?.(searchText);
-          } else {
-            const prevValue = getPrevValue(focusedValue);
-            setFocusedValue(prevValue);
-            scrollFocusedElementIntoView(prevValue);
-          }
-        } else if (e.keyCode === 9) {
-          // Tab or Shift+Tab
-          if (opened) {
+    // Common keyboard handler utility
+    const createKeyHandler = useCallback(
+      (config: {
+        type: 'search' | 'scope';
+        opened: boolean;
+        onOpen: () => void;
+        onClose: () => void;
+        onNavigateDown: () => void;
+        onNavigateUp: () => void;
+        onSelect: () => void;
+        onTabNavigation?: (direction: 'forward' | 'backward') => void;
+      }) => {
+        return (e: KeyboardEvent<HTMLInputElement>) => {
+          if (e.keyCode === 40) {
+            // down
             e.preventDefault();
             e.stopPropagation();
-            const optionValues = getOptionValues();
-            const currentIndex = focusedValue
-              ? optionValues.indexOf(focusedValue)
-              : -1;
-
-            if (e.shiftKey) {
-              // Shift+Tab - Navigate to previous option or close if at first
-              if (currentIndex <= 0) {
-                // At first option or no focus, close the lookup
-                setOpened(false);
-                onComplete?.();
-              } else {
-                const prevValue = getPrevValue(focusedValue);
-                setFocusedValue(prevValue);
-                scrollFocusedElementIntoView(prevValue);
-              }
+            if (!config.opened) {
+              config.onOpen();
             } else {
-              // Tab - Navigate to next option or close if at last
-              if (currentIndex >= optionValues.length - 1) {
-                // At last option, close the lookup
-                setOpened(false);
-                onComplete?.();
-              } else {
-                const nextValue = getNextValue(focusedValue);
-                setFocusedValue(nextValue);
-                scrollFocusedElementIntoView(nextValue);
-              }
+              config.onNavigateDown();
             }
+          } else if (e.keyCode === 38) {
+            // up
+            e.preventDefault();
+            e.stopPropagation();
+            if (!config.opened) {
+              config.onOpen();
+            } else {
+              config.onNavigateUp();
+            }
+          } else if (e.keyCode === 9 && config.onTabNavigation) {
+            // Tab or Shift+Tab
+            if (config.opened) {
+              e.preventDefault();
+              e.stopPropagation();
+              config.onTabNavigation(e.shiftKey ? 'backward' : 'forward');
+            }
+          } else if (e.keyCode === 27) {
+            // ESC
+            e.preventDefault();
+            e.stopPropagation();
+            config.onClose();
+          } else if (e.keyCode === 13) {
+            // Enter
+            e.preventDefault();
+            e.stopPropagation();
+            config.onSelect();
           }
-        } else if (e.keyCode === 27) {
-          // ESC
-          e.preventDefault();
-          e.stopPropagation();
+        };
+      },
+      []
+    );
+
+    const onInputKeyDown = useEventCallback(
+      createKeyHandler({
+        type: 'search',
+        opened,
+        onOpen: () => {
+          setOpened(true);
+          onLookupRequest_?.(searchText);
+        },
+        onClose: () => {
           setOpened(false);
           onComplete?.(true);
-        } else if (e.keyCode === 13) {
-          // Enter
-          e.preventDefault();
-          e.stopPropagation();
+        },
+        onNavigateDown: () => {
+          const nextValue = getNextValue(focusedValue);
+          setFocusedValue(nextValue);
+          scrollFocusedElementIntoView(nextValue);
+        },
+        onNavigateUp: () => {
+          const prevValue = getPrevValue(focusedValue);
+          setFocusedValue(prevValue);
+          scrollFocusedElementIntoView(prevValue);
+        },
+        onSelect: () => {
           if (opened && focusedValue) {
             const selectedEntry = data.find(
               (entry) => entry.value === focusedValue
@@ -446,8 +453,34 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
             setOpened(true);
             onLookupRequest_?.(searchText);
           }
-        }
-      }
+        },
+        onTabNavigation: (direction) => {
+          const optionValues = getOptionValues();
+          const currentIndex = focusedValue
+            ? optionValues.indexOf(focusedValue)
+            : -1;
+
+          if (direction === 'backward') {
+            if (currentIndex <= 0) {
+              setOpened(false);
+              onComplete?.();
+            } else {
+              const prevValue = getPrevValue(focusedValue);
+              setFocusedValue(prevValue);
+              scrollFocusedElementIntoView(prevValue);
+            }
+          } else {
+            if (currentIndex >= optionValues.length - 1) {
+              setOpened(false);
+              onComplete?.();
+            } else {
+              const nextValue = getNextValue(focusedValue);
+              setFocusedValue(nextValue);
+              scrollFocusedElementIntoView(nextValue);
+            }
+          }
+        },
+      })
     );
 
     const onOptionClick = useEventCallback((entry: LookupEntry) => {
@@ -479,77 +512,32 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     });
 
     const onScopeKeyDown = useEventCallback(
-      (e: KeyboardEvent<HTMLInputElement>) => {
-        if (!scopes) return;
-
-        if (e.keyCode === 40) {
-          // down
-          e.preventDefault();
-          e.stopPropagation();
-          if (!scopeOpened) {
-            setScopeOpened(true);
-            setScopeFocusedIndex(0);
-          } else {
-            const nextIndex = Math.min(
-              scopeFocusedIndex + 1,
-              scopes.length - 1
-            );
-            setScopeFocusedIndex(nextIndex);
-            scrollFocusedScopeIntoView(nextIndex);
-          }
-        } else if (e.keyCode === 38) {
-          // up
-          e.preventDefault();
-          e.stopPropagation();
-          if (!scopeOpened) {
-            setScopeOpened(true);
-            setScopeFocusedIndex(scopes.length - 1);
-          } else {
-            const prevIndex = Math.max(scopeFocusedIndex - 1, 0);
-            setScopeFocusedIndex(prevIndex);
-            scrollFocusedScopeIntoView(prevIndex);
-          }
-        } else if (e.keyCode === 9) {
-          // Tab or Shift+Tab
-          if (scopeOpened) {
-            e.preventDefault();
-            e.stopPropagation();
-
-            if (e.shiftKey) {
-              // Shift+Tab - Navigate to previous option or close if at first
-              if (scopeFocusedIndex <= 0) {
-                setScopeOpened(false);
-                setScopeFocusedIndex(-1);
-              } else {
-                const prevIndex = Math.max(scopeFocusedIndex - 1, 0);
-                setScopeFocusedIndex(prevIndex);
-                scrollFocusedScopeIntoView(prevIndex);
-              }
-            } else {
-              // Tab - Navigate to next option or close if at last
-              if (scopeFocusedIndex >= scopes.length - 1) {
-                setScopeOpened(false);
-                setScopeFocusedIndex(-1);
-              } else {
-                const nextIndex = Math.min(
-                  scopeFocusedIndex + 1,
-                  scopes.length - 1
-                );
-                setScopeFocusedIndex(nextIndex);
-                scrollFocusedScopeIntoView(nextIndex);
-              }
-            }
-          }
-        } else if (e.keyCode === 27) {
-          // ESC
-          e.preventDefault();
-          e.stopPropagation();
+      createKeyHandler({
+        type: 'scope',
+        opened: scopeOpened,
+        onOpen: () => {
+          if (!scopes) return;
+          setScopeOpened(true);
+          setScopeFocusedIndex(0);
+        },
+        onClose: () => {
           setScopeOpened(false);
           setScopeFocusedIndex(-1);
-        } else if (e.keyCode === 13) {
-          // Enter
-          e.preventDefault();
-          e.stopPropagation();
+        },
+        onNavigateDown: () => {
+          if (!scopes) return;
+          const nextIndex = Math.min(scopeFocusedIndex + 1, scopes.length - 1);
+          setScopeFocusedIndex(nextIndex);
+          scrollFocusedScopeIntoView(nextIndex);
+        },
+        onNavigateUp: () => {
+          if (!scopes) return;
+          const prevIndex = Math.max(scopeFocusedIndex - 1, 0);
+          setScopeFocusedIndex(prevIndex);
+          scrollFocusedScopeIntoView(prevIndex);
+        },
+        onSelect: () => {
+          if (!scopes) return;
           if (scopeOpened && scopeFocusedIndex >= 0) {
             const selectedScope = scopes[scopeFocusedIndex];
             if (selectedScope) {
@@ -560,8 +548,33 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
           } else {
             setScopeOpened(!scopeOpened);
           }
-        }
-      }
+        },
+        onTabNavigation: (direction) => {
+          if (!scopes) return;
+          if (direction === 'backward') {
+            if (scopeFocusedIndex <= 0) {
+              setScopeOpened(false);
+              setScopeFocusedIndex(-1);
+            } else {
+              const prevIndex = Math.max(scopeFocusedIndex - 1, 0);
+              setScopeFocusedIndex(prevIndex);
+              scrollFocusedScopeIntoView(prevIndex);
+            }
+          } else {
+            if (scopeFocusedIndex >= scopes.length - 1) {
+              setScopeOpened(false);
+              setScopeFocusedIndex(-1);
+            } else {
+              const nextIndex = Math.min(
+                scopeFocusedIndex + 1,
+                scopes.length - 1
+              );
+              setScopeFocusedIndex(nextIndex);
+              scrollFocusedScopeIntoView(nextIndex);
+            }
+          }
+        },
+      })
     );
 
     const onScopeBlur = useEventCallback(() => {

From 20eff7fc345b9f345f6f6f915a793ac5241758ae Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 09:35:28 +0900
Subject: [PATCH 149/245] (Lookup): tweak icon sizes

---
 src/scripts/Lookup.tsx | 56 +++++++++++++++++++++++++++---------------
 1 file changed, 36 insertions(+), 20 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 262c5c302..01e076b60 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -805,22 +805,32 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
                               (scope) => scope.label === targetScope
                             );
                             return currentScope?.icon ? (
-                              <Icon
-                                container={true}
-                                containerClassName={classnames(
-                                  'slds-input__icon',
-                                  'slds-input__icon_left'
-                                )}
-                                category={currentScope.category}
-                                icon={currentScope.icon}
-                                size='x-small'
-                              />
+                              <div
+                                className='slds-is-absolute'
+                                style={{
+                                  top: '50%',
+                                  transform: 'translateY(-50%)',
+                                  left: '0.5rem',
+                                  pointerEvents: 'none',
+                                }}
+                              >
+                                <Icon
+                                  container={true}
+                                  category={currentScope.category}
+                                  icon={currentScope.icon}
+                                  size='small'
+                                />
+                              </div>
                             ) : null;
                           })()}
                           <input
                             type='text'
                             className='slds-input slds-combobox__input slds-combobox__input-value'
-                            id={scopeId}
+                            style={{
+                              paddingLeft: '1.5rem',
+                              background: 'transparent',
+                              cursor: 'pointer',
+                            }}
                             aria-controls='objectswitcher-listbox-id'
                             aria-expanded={scopeOpened}
                             aria-haspopup='listbox'
@@ -834,15 +844,21 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
                             onKeyDown={onScopeKeyDown}
                             readOnly
                           />
-                          <Icon
-                            container={true}
-                            containerClassName={classnames(
-                              'slds-input__icon',
-                              'slds-input__icon_right'
-                            )}
-                            icon='down'
-                            size='xx-small'
-                          />
+                          <div
+                            className='slds-is-absolute'
+                            style={{
+                              bottom: '0.2rem',
+                              right: '0.55rem',
+                              pointerEvents: 'none',
+                            }}
+                          >
+                            <Icon
+                              container={true}
+                              icon='down'
+                              size='x-small'
+                              style={{ width: '0.8rem', height: '0.8rem' }}
+                            />
+                          </div>
                         </div>
                         {scopeOpened && (
                           <div

From a3df6541ecda2cdf54cf5c241881e2f73b928278 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 09:44:06 +0900
Subject: [PATCH 150/245] (Lookup): refactor to use `optionIdPrefix`

---
 src/scripts/Lookup.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 01e076b60..cf89af856 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -155,6 +155,10 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
 
     const labelId = label ? `${comboboxId}-label` : undefined;
     const scopeId = `${comboboxId}-scope`;
+
+    const optionIdPrefix = `${comboboxId}-option`;
+    const getOptionId = (value: string) => `${optionIdPrefix}-${value}`;
+
     const scopeListboxId = `${comboboxId}-scope-listbox`;
     const getScopeOptionId = (index: number) =>
       `${scopeListboxId}-option-${index}`;
@@ -264,7 +268,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
 
         const dropdownContainer = dropdownElRef.current;
         const targetElement = dropdownContainer.querySelector(
-          `#option-${nextFocusedValue}`
+          `#${CSS.escape(getOptionId(nextFocusedValue))}`
         );
 
         if (targetElement) {
@@ -680,7 +684,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
             className='slds-listbox__item'
           >
             <div
-              id={`option-${entry.value}`}
+              id={getOptionId(entry.value)}
               className={itemClassNames}
               role='option'
               aria-selected={isFocused}
@@ -936,7 +940,9 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
                       aria-expanded={opened}
                       aria-haspopup='listbox'
                       aria-activedescendant={
-                        focusedValue ? `option-${focusedValue}` : undefined
+                        focusedValue
+                          ? `${optionIdPrefix}-${focusedValue}`
+                          : undefined
                       }
                       autoComplete='off'
                       role='combobox'
@@ -1021,7 +1027,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
                 aria-expanded={opened}
                 aria-haspopup='listbox'
                 aria-activedescendant={
-                  focusedValue ? `option-${focusedValue}` : undefined
+                  focusedValue ? `${optionIdPrefix}-${focusedValue}` : undefined
                 }
                 autoComplete='off'
                 role='combobox'

From 1cf0c6eb9d9a8d0b1faa5118471dc19cdb3be2ce Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 09:52:53 +0900
Subject: [PATCH 151/245] (Lookup): add a space key support

---
 src/scripts/Lookup.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index cf89af856..46bb1b77b 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -410,8 +410,8 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
             e.preventDefault();
             e.stopPropagation();
             config.onClose();
-          } else if (e.keyCode === 13) {
-            // Enter
+          } else if (e.keyCode === 13 || e.keyCode === 32) {
+            // Enter or Space
             e.preventDefault();
             e.stopPropagation();
             config.onSelect();

From 9f48228fa979e02369fc42d0284815ddfef28c76 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 10:13:59 +0900
Subject: [PATCH 152/245] (Lookup): enable skipping selections

---
 src/scripts/Lookup.tsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 46bb1b77b..262717839 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -301,11 +301,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
 
     // Set initial focus when dropdown opens
     useEffect(() => {
-      if (opened && !focusedValue) {
-        const initialFocus = getOptionValues()[0];
-        setFocusedValue(initialFocus);
-        scrollFocusedElementIntoView(initialFocus);
-      } else if (!opened) {
+      if (!opened) {
         setFocusedValue(undefined);
       }
     }, [opened, getOptionValues, focusedValue, scrollFocusedElementIntoView]);
@@ -377,6 +373,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
         onNavigateDown: () => void;
         onNavigateUp: () => void;
         onSelect: () => void;
+        isIgnoreTabNavigation?: () => boolean;
         onTabNavigation?: (direction: 'forward' | 'backward') => void;
       }) => {
         return (e: KeyboardEvent<HTMLInputElement>) => {
@@ -401,6 +398,13 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
           } else if (e.keyCode === 9 && config.onTabNavigation) {
             // Tab or Shift+Tab
             if (config.opened) {
+              if (
+                config.isIgnoreTabNavigation &&
+                config.isIgnoreTabNavigation()
+              ) {
+                return;
+              }
+
               e.preventDefault();
               e.stopPropagation();
               config.onTabNavigation(e.shiftKey ? 'backward' : 'forward');
@@ -458,6 +462,9 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
             onLookupRequest_?.(searchText);
           }
         },
+        isIgnoreTabNavigation: () => {
+          return focusedValue === undefined;
+        },
         onTabNavigation: (direction) => {
           const optionValues = getOptionValues();
           const currentIndex = focusedValue
@@ -553,6 +560,9 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
             setScopeOpened(!scopeOpened);
           }
         },
+        isIgnoreTabNavigation: () => {
+          return scopeFocusedIndex === -1;
+        },
         onTabNavigation: (direction) => {
           if (!scopes) return;
           if (direction === 'backward') {

From f5c8377bec8f7932119f88809664776df6bea019 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 10:54:40 +0900
Subject: [PATCH 153/245] (Toggle): remove unnecessary attributes

---
 src/scripts/Toggle.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/scripts/Toggle.tsx b/src/scripts/Toggle.tsx
index ca428d3b3..a6663b2df 100644
--- a/src/scripts/Toggle.tsx
+++ b/src/scripts/Toggle.tsx
@@ -49,9 +49,7 @@ export const Toggle = createFC<ToggleProps, { isFormElement: boolean }>(
         <input
           ref={inputRef}
           id={id}
-          name='checkbox'
           type='checkbox'
-          aria-describedby='toggle-desc'
           {...rprops}
           onChange={onChange}
         />

From 432a14767799519361945b9799bec27dca449200 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 11:41:23 +0900
Subject: [PATCH 154/245] (Input): rename ids more descriptive

---
 src/scripts/Input.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/scripts/Input.tsx b/src/scripts/Input.tsx
index e9fe17fa5..1d7e74d20 100644
--- a/src/scripts/Input.tsx
+++ b/src/scripts/Input.tsx
@@ -167,7 +167,9 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
 
     const labelId = `${prefix}-label-id`;
 
-    const labelFor = id ?? `${prefix}-label-for`;
+    const rawTextId = id ?? `${prefix}-raw-text-id`;
+    const inputId = id ?? `${prefix}-input-id`;
+    const labelForId = readOnly ? rawTextId : inputId;
 
     const preAddonId = addonLeft ? `${prefix}-pre-addon-id` : undefined;
 
@@ -186,7 +188,7 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
     );
     const inputElem = readOnly ? (
       <Text
-        id={labelFor}
+        id={rawTextId}
         type='regular'
         category='body'
         aria-labelledby={labelledBy}
@@ -197,7 +199,7 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
       <input
         ref={inputRef}
         className={inputClassNames}
-        id={labelFor}
+        id={inputId}
         type={type}
         value={value}
         defaultValue={defaultValue}
@@ -238,7 +240,7 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
     if (isFieldSetColumn || label || required || error || cols) {
       const formElemProps = {
         id: labelId,
-        controlId: labelFor,
+        controlId: labelForId,
         label,
         required,
         error,

From a86434e77b1d45993f3a49b2cc89b6b68e151a58 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 11:43:42 +0900
Subject: [PATCH 155/245] (Input): switch to specify `labelId` based on whether
 `label` exists

---
 src/scripts/Input.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/scripts/Input.tsx b/src/scripts/Input.tsx
index 1d7e74d20..db1ade017 100644
--- a/src/scripts/Input.tsx
+++ b/src/scripts/Input.tsx
@@ -165,16 +165,13 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
 
     const prefix = useId();
 
-    const labelId = `${prefix}-label-id`;
-
     const rawTextId = id ?? `${prefix}-raw-text-id`;
     const inputId = id ?? `${prefix}-input-id`;
     const labelForId = readOnly ? rawTextId : inputId;
 
+    const labelId = label ? `${prefix}-label-id` : undefined;
     const preAddonId = addonLeft ? `${prefix}-pre-addon-id` : undefined;
-
     const postAddonId = addonRight ? `${prefix}-post-addon-id` : undefined;
-
     const labelledBy = [labelId, preAddonId, postAddonId]
       .filter((id) => id !== undefined)
       .join(' ');

From 7c89da9037f354fa4f5ba35f3f421eea08809bc0 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 11:50:03 +0900
Subject: [PATCH 156/245] (Input): add a fallback for an empty string

---
 src/scripts/Input.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/scripts/Input.tsx b/src/scripts/Input.tsx
index db1ade017..027b1983a 100644
--- a/src/scripts/Input.tsx
+++ b/src/scripts/Input.tsx
@@ -172,9 +172,10 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
     const labelId = label ? `${prefix}-label-id` : undefined;
     const preAddonId = addonLeft ? `${prefix}-pre-addon-id` : undefined;
     const postAddonId = addonRight ? `${prefix}-post-addon-id` : undefined;
-    const labelledBy = [labelId, preAddonId, postAddonId]
-      .filter((id) => id !== undefined)
-      .join(' ');
+    const labelledBy =
+      [labelId, preAddonId, postAddonId]
+        .filter((id) => id !== undefined)
+        .join(' ') || undefined;
 
     const errorId = `${prefix}-error-id`;
 

From 1da593e8884d8bc7ca3c7f088fb6fce16c964f24 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 12:44:27 +0900
Subject: [PATCH 157/245] use `DropdownMenu` to delegate keyboard handlers

---
 src/scripts/Picklist.tsx | 305 +++++++--------------------------------
 1 file changed, 52 insertions(+), 253 deletions(-)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index c8e2c3ece..c8ed636e7 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -7,14 +7,15 @@ import React, {
   Ref,
   ReactNode,
   useId,
-  useState,
-  useEffect,
-  useCallback,
 } from 'react';
 import classnames from 'classnames';
 import { FormElement, FormElementProps } from './FormElement';
 import { Icon } from './Icon';
-import { DropdownMenuProps } from './DropdownMenu';
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuProps,
+} from './DropdownMenu';
 import { isElInChildren } from './util';
 import { ComponentSettingsContext } from './ComponentSettings';
 import { useControlledValue, useEventCallback, useMergeRefs } from './hooks';
@@ -155,124 +156,8 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       opened_,
       defaultOpened ?? false
     );
-    const [focusedValue, setFocusedValue] = useState<
-      PicklistValue | undefined
-    >();
-
     const { getActiveElement } = useContext(ComponentSettingsContext);
 
-    // Get option values from children
-    const getOptionValues = useCallback(() => {
-      const optionValues: PicklistValue[] = [];
-      React.Children.forEach(children, (child) => {
-        if (!React.isValidElement(child)) {
-          return;
-        }
-
-        const props: unknown = child.props;
-        const isPropsObject = typeof props === 'object' && props !== null;
-
-        if (
-          isPropsObject &&
-          'value' in props &&
-          (typeof props.value === 'string' || typeof props.value === 'number')
-        ) {
-          optionValues.push(props.value);
-        }
-      });
-      return optionValues;
-    }, [children]);
-
-    // Get next option value for keyboard navigation
-    const getNextValue = useCallback(
-      (currentValue?: PicklistValue) => {
-        const optionValues = getOptionValues();
-        if (optionValues.length === 0) return undefined;
-
-        if (!currentValue) return optionValues[0];
-
-        const currentIndex = optionValues.indexOf(currentValue);
-        return optionValues[
-          Math.min(currentIndex + 1, optionValues.length - 1)
-        ]; // not wrap around
-      },
-      [getOptionValues]
-    );
-
-    // Get previous option value for keyboard navigation
-    const getPrevValue = useCallback(
-      (currentValue?: PicklistValue) => {
-        const optionValues = getOptionValues();
-        if (optionValues.length === 0) return undefined;
-
-        if (!currentValue) return optionValues[optionValues.length - 1];
-
-        const currentIndex = optionValues.indexOf(currentValue);
-        return optionValues[Math.max(currentIndex - 1, 0)]; // not wrap around
-      },
-      [getOptionValues]
-    );
-
-    // Scroll focused element into view
-    const scrollFocusedElementIntoView = useEventCallback(
-      (nextFocusedValue: PicklistValue | undefined) => {
-        if (!nextFocusedValue || !dropdownElRef.current) {
-          return;
-        }
-
-        const dropdownContainer = dropdownElRef.current;
-        const targetElement = dropdownContainer.querySelector(
-          `#${CSS.escape(optionIdPrefix)}-${nextFocusedValue}`
-        );
-
-        if (!(targetElement instanceof HTMLElement)) {
-          return;
-        }
-
-        // Calculate element position within container
-        const elementTopPosition = targetElement.offsetTop;
-        const elementBottomPosition =
-          elementTopPosition + targetElement.offsetHeight;
-
-        // Calculate currently visible area
-        const currentScrollPosition = dropdownContainer.scrollTop;
-        const visibleAreaHeight = dropdownContainer.clientHeight;
-        const visibleAreaTop = currentScrollPosition;
-        const visibleAreaBottom = currentScrollPosition + visibleAreaHeight;
-
-        // Check if element is outside the visible area
-        const isAbove = elementTopPosition < visibleAreaTop;
-        const isBelow = elementBottomPosition > visibleAreaBottom;
-
-        // Scroll only if element is not currently visible
-        if (isAbove || isBelow) {
-          targetElement.scrollIntoView({
-            block: 'center',
-          });
-        }
-      }
-    );
-
-    // Set initial focus when dropdown opens
-    useEffect(() => {
-      if (opened && !focusedValue) {
-        // Focus on first selected value or first option
-        const initialFocus =
-          values.length > 0 ? values[0] : getOptionValues()[0];
-        setFocusedValue(initialFocus);
-        scrollFocusedElementIntoView(initialFocus);
-      } else if (!opened) {
-        // Reset focus when dropdown closes
-        setFocusedValue(undefined);
-      }
-    }, [
-      opened,
-      values,
-      getOptionValues,
-      focusedValue,
-      scrollFocusedElementIntoView,
-    ]);
-
     const elRef = useRef<HTMLDivElement | null>(null);
     const elementRef = useMergeRefs([elRef, elementRef_]);
     const comboboxElRef = useRef<HTMLDivElement | null>(null);
@@ -325,6 +210,20 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       );
     });
 
+    const focusToTargetItemEl = useEventCallback(() => {
+      const dropdownEl = dropdownElRef.current;
+      if (!dropdownEl) {
+        return;
+      }
+      const firstItemEl: HTMLAnchorElement | null =
+        dropdownEl.querySelector(
+          '.slds-is-selected > .react-slds-menuitem[tabIndex]'
+        ) || dropdownEl.querySelector('.react-slds-menuitem[tabIndex]');
+      if (firstItemEl) {
+        firstItemEl.focus();
+      }
+    });
+
     const onClick = useEventCallback(() => {
       if (!disabled) {
         setOpened((opened) => !opened);
@@ -346,64 +245,18 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       }, 10);
     });
 
-    const onKeyDown = useEventCallback((e: React.KeyboardEvent) => {
+    const onKeydown = useEventCallback((e: React.KeyboardEvent) => {
       if (e.keyCode === 40) {
         // down
         e.preventDefault();
         e.stopPropagation();
         if (!opened) {
           setOpened(true);
+          setTimeout(() => {
+            focusToTargetItemEl();
+          }, 10);
         } else {
-          // Navigate to next option
-          const nextValue = getNextValue(focusedValue);
-          setFocusedValue(nextValue);
-          scrollFocusedElementIntoView(nextValue);
-        }
-      } else if (e.keyCode === 38) {
-        // up
-        e.preventDefault();
-        e.stopPropagation();
-        if (!opened) {
-          setOpened(true);
-        } else {
-          // Navigate to previous option
-          const prevValue = getPrevValue(focusedValue);
-          setFocusedValue(prevValue);
-          scrollFocusedElementIntoView(prevValue);
-        }
-      } else if (e.keyCode === 9) {
-        // Tab or Shift+Tab
-        if (opened) {
-          e.preventDefault();
-          e.stopPropagation();
-          const optionValues = getOptionValues();
-          const currentIndex = focusedValue
-            ? optionValues.indexOf(focusedValue)
-            : -1;
-
-          if (e.shiftKey) {
-            // Shift+Tab - Navigate to previous option or close if at first
-            if (currentIndex <= 0) {
-              // At first option or no focus, close the picklist
-              setOpened(false);
-              onComplete?.();
-            } else {
-              const prevValue = getPrevValue(focusedValue);
-              setFocusedValue(prevValue);
-              scrollFocusedElementIntoView(prevValue);
-            }
-          } else {
-            // Tab - Navigate to next option or close if at last
-            if (currentIndex >= optionValues.length - 1) {
-              // At last option, close the picklist
-              setOpened(false);
-              onComplete?.();
-            } else {
-              const nextValue = getNextValue(focusedValue);
-              setFocusedValue(nextValue);
-              scrollFocusedElementIntoView(nextValue);
-            }
-          }
+          focusToTargetItemEl();
         }
       } else if (e.keyCode === 27) {
         // ESC
@@ -411,16 +264,6 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
         e.stopPropagation();
         setOpened(false);
         onComplete?.();
-      } else if (e.keyCode === 13 || e.keyCode === 32) {
-        // Enter or Space
-        e.preventDefault();
-        e.stopPropagation();
-        if (opened && focusedValue != null) {
-          // Select focused option
-          onPicklistItemSelect(focusedValue);
-        } else {
-          setOpened((opened) => !opened);
-        }
       }
       onKeyDown_?.(e);
     });
@@ -473,11 +316,6 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
         'slds-is-disabled': disabled,
       }
     );
-    const dropdownClassNames = classnames(
-      'slds-dropdown',
-      'slds-dropdown_length-5',
-      menuSize ? `slds-dropdown_${menuSize}` : 'slds-dropdown_fluid'
-    );
 
     const formElemProps = {
       id,
@@ -494,7 +332,6 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       values,
       multiSelect,
       onSelect: onPicklistItemSelect,
-      focusedValue,
       optionIdPrefix,
     };
 
@@ -516,11 +353,8 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
                 aria-expanded={opened}
                 aria-haspopup='listbox'
                 aria-disabled={disabled}
-                aria-activedescendant={
-                  focusedValue ? `${optionIdPrefix}-${focusedValue}` : undefined
-                }
                 onClick={onClick}
-                onKeyDown={onKeyDown}
+                onKeyDown={onKeydown}
                 onBlur={onBlur}
                 {...rprops}
               >
@@ -534,25 +368,22 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
               </span>
             </div>
             {opened && (
-              <div
-                id={listboxId}
-                className={dropdownClassNames}
-                role='listbox'
-                aria-label='Options'
-                tabIndex={0}
-                aria-busy={false}
-                ref={dropdownRef}
-                style={{ ...menuStyle, left: 0, transform: 'translate(0)' }}
+              <DropdownMenu
+                portalClassName={classnames(className, 'slds-picklist')}
+                elementRef={dropdownRef}
+                size={menuSize}
+                style={menuStyle}
+                onMenuSelect={onPicklistItemSelect}
+                onMenuClose={() => {
+                  setOpened(false);
+                  onComplete?.();
+                }}
+                onBlur={onBlur}
               >
-                <ul
-                  className='slds-listbox slds-listbox_vertical'
-                  role='presentation'
-                >
-                  <PicklistContext.Provider value={contextValue}>
-                    {children}
-                  </PicklistContext.Provider>
-                </ul>
-              </div>
+                <PicklistContext.Provider value={contextValue}>
+                  {children}
+                </PicklistContext.Provider>
+              </DropdownMenu>
             )}
           </div>
         </div>
@@ -582,54 +413,22 @@ export const PicklistItem: FC<PicklistItemProps> = ({
   value,
   disabled,
   children,
+  ...props
 }) => {
-  const { values, multiSelect, onSelect, focusedValue, optionIdPrefix } =
-    useContext(PicklistContext);
+  const { values } = useContext(PicklistContext);
   const selected =
     selected_ ?? (value != null ? values.indexOf(value) >= 0 : false);
-  const isFocused = focusedValue === value;
-
-  const onClick = useEventCallback(() => {
-    if (!disabled && value != null) {
-      onSelect(value);
-    }
-  });
-
-  const itemClassNames = classnames(
-    'slds-media',
-    'slds-listbox__option',
-    'slds-listbox__option_plain',
-    'slds-media_small',
-    {
-      'slds-is-selected': selected,
-      'slds-has-focus': isFocused,
-    }
-  );
 
   return (
-    <li role='presentation' className='slds-listbox__item'>
-      <div
-        id={value ? `${optionIdPrefix}-${value}` : undefined}
-        className={itemClassNames}
-        role='option'
-        aria-selected={selected}
-        aria-checked={multiSelect ? selected : undefined}
-        aria-disabled={disabled}
-        onClick={onClick}
-      >
-        <span className='slds-media__figure slds-listbox__option-icon'>
-          {selected && (
-            <span className='slds-icon_container slds-icon-utility-check slds-current-color'>
-              <Icon icon='check' className='slds-icon slds-icon_x-small' />
-            </span>
-          )}
-        </span>
-        <span className='slds-media__body'>
-          <span className='slds-truncate' title={String(label || children)}>
-            {label || children}
-          </span>
-        </span>
-      </div>
-    </li>
+    <DropdownMenuItem
+      icon={selected ? 'check' : 'none'}
+      role='option'
+      selected={selected}
+      disabled={disabled}
+      eventKey={value}
+      {...props}
+    >
+      {label || children}
+    </DropdownMenuItem>
   );
 };

From 2b8cfec70aef854c550f0319c6f57722e1b768bb Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 14:01:53 +0900
Subject: [PATCH 158/245] (Lookup): refactor to divide sub components

---
 src/scripts/Lookup.tsx | 1144 +++++++++++++++++++++++-----------------
 1 file changed, 666 insertions(+), 478 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 262717839..c6a41651c 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -10,6 +10,7 @@ import React, {
   ReactNode,
   useId,
   useCallback,
+  FC,
 } from 'react';
 import classnames from 'classnames';
 import { Button } from './Button';
@@ -44,6 +45,594 @@ export type LookupScope = {
   category?: IconCategory;
 };
 
+/**
+ * Key handler configuration for keyboard navigation
+ */
+type KeyHandlerConfig = {
+  type: 'search' | 'scope';
+  opened: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+  onNavigateDown: () => void;
+  onNavigateUp: () => void;
+  onSelect: () => void;
+  isIgnoreTabNavigation: () => boolean;
+  onTabNavigation: (direction: 'forward' | 'backward') => void;
+};
+
+/**
+ * Creates a keyboard event handler for lookup components
+ */
+const createKeyHandler = (config: KeyHandlerConfig) => {
+  return (e: KeyboardEvent) => {
+    const {
+      opened,
+      onOpen,
+      onClose,
+      onNavigateDown,
+      onNavigateUp,
+      onSelect,
+      isIgnoreTabNavigation,
+      onTabNavigation,
+    } = config;
+
+    switch (e.keyCode) {
+      case 40: // ArrowDown
+        e.preventDefault();
+        e.stopPropagation();
+        if (!opened) {
+          onOpen();
+        } else {
+          onNavigateDown();
+        }
+        break;
+      case 38: // ArrowUp
+        e.preventDefault();
+        e.stopPropagation();
+        if (opened) {
+          onNavigateUp();
+        }
+        break;
+      case 13: // Enter
+        e.preventDefault();
+        e.stopPropagation();
+        onSelect();
+        break;
+      case 27: // Escape
+        e.preventDefault();
+        e.stopPropagation();
+        if (opened) {
+          onClose();
+        }
+        break;
+      case 9: // Tab
+        if (!isIgnoreTabNavigation()) {
+          e.preventDefault();
+          e.stopPropagation();
+          onTabNavigation(e.shiftKey ? 'backward' : 'forward');
+        }
+        break;
+    }
+  };
+};
+
+/**
+ * Props for LookupSelectedState component
+ */
+type LookupSelectedStateProps = {
+  selected: LookupEntry;
+  disabled?: boolean;
+  labelId?: string;
+  listboxId: string;
+  onRemoveSelection: () => void;
+};
+
+/**
+ * Component for displaying selected state
+ */
+const LookupSelectedState: FC<LookupSelectedStateProps> = ({
+  selected,
+  disabled,
+  labelId,
+  listboxId,
+  onRemoveSelection,
+}) => {
+  const comboboxClassNames = classnames(
+    'slds-combobox',
+    'slds-dropdown-trigger',
+    'slds-dropdown-trigger_click'
+  );
+
+  return (
+    <div className={comboboxClassNames}>
+      <div
+        className='slds-combobox__form-element slds-input-has-icon slds-input-has-icon_left-right'
+        role='none'
+      >
+        {selected.icon && (
+          <Icon
+            container={true}
+            containerClassName='slds-combobox__input-entity-icon'
+            category={selected.category}
+            icon={selected.icon}
+            size='small'
+          />
+        )}
+        <div
+          role='combobox'
+          tabIndex={disabled ? -1 : 0}
+          className='slds-input_faux slds-combobox__input slds-combobox__input-value'
+          aria-labelledby={labelId}
+          aria-controls={listboxId}
+          aria-haspopup='listbox'
+          aria-expanded='false'
+        >
+          <span className='slds-truncate'>{selected.label}</span>
+        </div>
+        <Button
+          type='icon'
+          icon='close'
+          className='slds-input__icon slds-input__icon_right'
+          title='Remove selected option'
+          onClick={onRemoveSelection}
+        >
+          <span className='slds-assistive-text'>Remove selected option</span>
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Props for LookupScopeSelector component
+ */
+type LookupScopeSelectorProps = {
+  scopes: LookupScope[];
+  targetScope?: string;
+  scopeOpened: boolean;
+  scopeFocusedIndex: number;
+  disabled?: boolean;
+  scopeId: string;
+  scopeListboxId: string;
+  getScopeOptionId: (index: number) => string;
+  onScopeMenuClick: () => void;
+  onScopeBlur: () => void;
+  onScopeKeyDown: (e: KeyboardEvent) => void;
+  onScopeSelect: (scope: string) => void;
+};
+
+/**
+ * Component for scope selector in multi-entity lookup
+ */
+const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
+  scopes,
+  targetScope,
+  scopeOpened,
+  scopeFocusedIndex,
+  disabled,
+  scopeId,
+  scopeListboxId,
+  getScopeOptionId,
+  onScopeMenuClick,
+  onScopeBlur,
+  onScopeKeyDown,
+  onScopeSelect,
+}) => {
+  const currentScope = scopes.find((scope) => scope.label === targetScope);
+
+  return (
+    <div className='slds-combobox_object-switcher slds-combobox-addon_start'>
+      <div className='slds-form-element'>
+        <label
+          className='slds-form-element__label slds-assistive-text'
+          htmlFor={scopeId}
+        >
+          Filter Search by:
+        </label>
+        <div className='slds-form-element__control'>
+          <div className='slds-combobox_container slds-has-icon-only'>
+            <div
+              className={classnames(
+                'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click',
+                {
+                  'slds-is-open': scopeOpened,
+                }
+              )}
+            >
+              <div
+                className='slds-combobox__form-element slds-input-has-icon slds-input-has-icon_left-right'
+                role='none'
+              >
+                {currentScope?.icon && (
+                  <div
+                    className='slds-is-absolute'
+                    style={{
+                      top: '50%',
+                      transform: 'translateY(-50%)',
+                      left: '0.5rem',
+                      pointerEvents: 'none',
+                    }}
+                  >
+                    <Icon
+                      container={true}
+                      category={currentScope.category}
+                      icon={currentScope.icon}
+                      size='small'
+                    />
+                  </div>
+                )}
+                <input
+                  type='text'
+                  className='slds-input slds-combobox__input slds-combobox__input-value'
+                  style={{
+                    paddingLeft: '1.5rem',
+                    background: 'transparent',
+                    cursor: 'pointer',
+                  }}
+                  aria-controls='objectswitcher-listbox-id'
+                  aria-expanded={scopeOpened}
+                  aria-haspopup='listbox'
+                  autoComplete='off'
+                  role='combobox'
+                  placeholder=' '
+                  value={targetScope || ''}
+                  disabled={disabled}
+                  onClick={onScopeMenuClick}
+                  onBlur={onScopeBlur}
+                  onKeyDown={onScopeKeyDown}
+                  readOnly
+                />
+                <div
+                  className='slds-is-absolute'
+                  style={{
+                    bottom: '0.2rem',
+                    right: '0.55rem',
+                    pointerEvents: 'none',
+                  }}
+                >
+                  <Icon
+                    container={true}
+                    icon='down'
+                    size='x-small'
+                    style={{ width: '0.8rem', height: '0.8rem' }}
+                  />
+                </div>
+              </div>
+              {scopeOpened && (
+                <div
+                  id={scopeListboxId}
+                  className='slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid'
+                  role='listbox'
+                  aria-label='Scope Options'
+                  style={{ left: 0, transform: 'translateX(0)' }}
+                >
+                  <ul
+                    className='slds-listbox slds-listbox_vertical'
+                    role='presentation'
+                  >
+                    {scopes.map((scope, index) => (
+                      <li
+                        key={scope.label}
+                        role='presentation'
+                        className='slds-listbox__item'
+                      >
+                        <div
+                          id={getScopeOptionId(index)}
+                          className={classnames(
+                            'slds-media slds-media_center slds-listbox__option slds-listbox__option_entity',
+                            {
+                              'slds-has-focus': scopeFocusedIndex === index,
+                            }
+                          )}
+                          role='option'
+                          aria-selected={scope.label === targetScope}
+                          onClick={() => onScopeSelect(scope.label)}
+                        >
+                          <span className='slds-media__figure slds-listbox__option-icon'>
+                            {scope.icon && (
+                              <Icon
+                                container={true}
+                                category={scope.category}
+                                icon={scope.icon}
+                                size='small'
+                              />
+                            )}
+                          </span>
+                          <span className='slds-media__body'>
+                            <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
+                              {scope.label}
+                            </span>
+                          </span>
+                        </div>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Props for LookupSearchInput component
+ */
+type LookupSearchInputProps = {
+  searchText: string;
+  disabled?: boolean;
+  opened: boolean;
+  focusedValue?: string;
+  iconAlign: 'left' | 'right';
+  comboboxId?: string;
+  listboxId: string;
+  optionIdPrefix: string;
+  inputRef: Ref<HTMLInputElement>;
+  onInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onInputFocus: () => void;
+  onInputBlur: () => void;
+  onInputKeyDown: (e: KeyboardEvent) => void;
+} & Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'onChange' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'value'
+>;
+
+/**
+ * Component for search input
+ */
+const LookupSearchInput: FC<LookupSearchInputProps> = ({
+  searchText,
+  disabled,
+  opened,
+  focusedValue,
+  iconAlign,
+  comboboxId,
+  listboxId,
+  optionIdPrefix,
+  inputRef,
+  onInputChange,
+  onInputFocus,
+  onInputBlur,
+  onInputKeyDown,
+  ...rprops
+}) => {
+  const hasValue = searchText.length > 0;
+
+  const inputClassNames = classnames('slds-input', 'slds-combobox__input', {
+    'slds-has-focus': opened,
+    'slds-combobox__input-value': hasValue,
+  });
+
+  const inputIconClasses =
+    iconAlign === 'left'
+      ? 'slds-combobox__form-element slds-input-has-icon slds-input-has-icon_left'
+      : 'slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right';
+
+  return (
+    <div className={inputIconClasses} role='none'>
+      {iconAlign === 'left' && (
+        <Icon
+          container={true}
+          containerClassName={classnames(
+            'slds-input__icon',
+            `slds-input__icon_${iconAlign}`
+          )}
+          category='utility'
+          icon='search'
+          size='x-small'
+        />
+      )}
+      <input
+        {...rprops}
+        type='text'
+        className={inputClassNames}
+        id={comboboxId}
+        ref={inputRef}
+        value={searchText}
+        disabled={disabled}
+        aria-autocomplete='list'
+        aria-controls={listboxId}
+        aria-expanded={opened}
+        aria-haspopup='listbox'
+        aria-activedescendant={
+          focusedValue ? `${optionIdPrefix}-${focusedValue}` : undefined
+        }
+        autoComplete='off'
+        role='combobox'
+        onChange={onInputChange}
+        onFocus={onInputFocus}
+        onBlur={onInputBlur}
+        onKeyDown={onInputKeyDown}
+      />
+      {iconAlign === 'right' && (
+        <Icon
+          container={true}
+          containerClassName={classnames(
+            'slds-input__icon',
+            `slds-input__icon_${iconAlign}`
+          )}
+          category='utility'
+          icon='search'
+          size='x-small'
+        />
+      )}
+    </div>
+  );
+};
+
+/**
+ * Props for LookupOption component
+ */
+type LookupOptionProps = {
+  entry: LookupEntry;
+  isFocused: boolean;
+  getOptionId: (value: string) => string;
+  onOptionClick: (entry: LookupEntry) => void;
+};
+
+/**
+ * Component for individual lookup option
+ */
+const LookupOption: FC<LookupOptionProps> = ({
+  entry,
+  isFocused,
+  getOptionId,
+  onOptionClick,
+}) => {
+  const itemClassNames = classnames(
+    'slds-media',
+    'slds-media_center',
+    'slds-listbox__option',
+    'slds-listbox__option_entity',
+    {
+      'slds-listbox__option_has-meta': entry.meta,
+      'slds-has-focus': isFocused,
+    }
+  );
+
+  return (
+    <li key={entry.value} role='presentation' className='slds-listbox__item'>
+      <div
+        id={getOptionId(entry.value)}
+        className={itemClassNames}
+        role='option'
+        aria-selected={isFocused}
+        onClick={() => onOptionClick(entry)}
+      >
+        <span className='slds-media__figure slds-listbox__option-icon'>
+          {entry.icon && (
+            <Icon
+              container={true}
+              category={entry.category}
+              icon={entry.icon}
+              size='small'
+            />
+          )}
+        </span>
+        <span className='slds-media__body'>
+          <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
+            {entry.label}
+          </span>
+          {entry.meta && (
+            <span className='slds-listbox__option-meta slds-listbox__option-meta_entity'>
+              {entry.meta}
+            </span>
+          )}
+        </span>
+      </div>
+    </li>
+  );
+};
+
+/**
+ * Props for LookupDropdown component
+ */
+type LookupDropdownProps = {
+  opened: boolean;
+  loading?: boolean;
+  listboxId: string;
+  dropdownRef: Ref<HTMLDivElement>;
+  listHeader?: JSX.Element;
+  listFooter?: JSX.Element;
+  filteredData: LookupEntry[];
+  focusedValue?: string;
+  getOptionId: (value: string) => string;
+  onOptionClick: (entry: LookupEntry) => void;
+};
+
+/**
+ * Component for dropdown menu
+ */
+const LookupDropdown: FC<LookupDropdownProps> = ({
+  opened,
+  loading,
+  listboxId,
+  dropdownRef,
+  listHeader,
+  listFooter,
+  filteredData,
+  focusedValue,
+  getOptionId,
+  onOptionClick,
+}) => {
+  if (!opened) return null;
+
+  const dropdownClassNames = classnames(
+    'slds-dropdown',
+    'slds-dropdown_length-with-icon-7',
+    'slds-dropdown_fluid'
+  );
+
+  const renderListHeader = () => {
+    if (!listHeader) return null;
+    return (
+      <li role='presentation' className='slds-listbox__item'>
+        <div
+          className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity slds-listbox__option_term'
+          role='option'
+          aria-selected='true'
+        >
+          {listHeader}
+        </div>
+      </li>
+    );
+  };
+
+  const renderListFooter = () => {
+    if (!listFooter) return null;
+    return (
+      <li role='presentation' className='slds-listbox__item'>
+        <div
+          className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity'
+          role='option'
+        >
+          {listFooter}
+        </div>
+      </li>
+    );
+  };
+
+  const renderLoadingSpinner = () => {
+    if (!loading) return null;
+    return (
+      <li role='option' className='slds-listbox__item'>
+        <div className='slds-align_absolute-center slds-p-top_medium'>
+          <Spinner container={false} size='x-small' layout='inline' />
+        </div>
+      </li>
+    );
+  };
+
+  return (
+    <div
+      id={listboxId}
+      className={dropdownClassNames}
+      role='listbox'
+      aria-label='Search Results'
+      tabIndex={0}
+      aria-busy={loading}
+      ref={dropdownRef}
+    >
+      <ul className='slds-listbox slds-listbox_vertical' role='presentation'>
+        {renderListHeader()}
+        {filteredData.map((entry) => (
+          <LookupOption
+            key={entry.value}
+            entry={entry}
+            isFocused={focusedValue === entry.value}
+            getOptionId={getOptionId}
+            onOptionClick={onOptionClick}
+          />
+        ))}
+        {renderLoadingSpinner()}
+        {renderListFooter()}
+      </ul>
+    </div>
+  );
+};
+
 /**
  *
  */
@@ -363,68 +952,6 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       }, 10);
     });
 
-    // Common keyboard handler utility
-    const createKeyHandler = useCallback(
-      (config: {
-        type: 'search' | 'scope';
-        opened: boolean;
-        onOpen: () => void;
-        onClose: () => void;
-        onNavigateDown: () => void;
-        onNavigateUp: () => void;
-        onSelect: () => void;
-        isIgnoreTabNavigation?: () => boolean;
-        onTabNavigation?: (direction: 'forward' | 'backward') => void;
-      }) => {
-        return (e: KeyboardEvent<HTMLInputElement>) => {
-          if (e.keyCode === 40) {
-            // down
-            e.preventDefault();
-            e.stopPropagation();
-            if (!config.opened) {
-              config.onOpen();
-            } else {
-              config.onNavigateDown();
-            }
-          } else if (e.keyCode === 38) {
-            // up
-            e.preventDefault();
-            e.stopPropagation();
-            if (!config.opened) {
-              config.onOpen();
-            } else {
-              config.onNavigateUp();
-            }
-          } else if (e.keyCode === 9 && config.onTabNavigation) {
-            // Tab or Shift+Tab
-            if (config.opened) {
-              if (
-                config.isIgnoreTabNavigation &&
-                config.isIgnoreTabNavigation()
-              ) {
-                return;
-              }
-
-              e.preventDefault();
-              e.stopPropagation();
-              config.onTabNavigation(e.shiftKey ? 'backward' : 'forward');
-            }
-          } else if (e.keyCode === 27) {
-            // ESC
-            e.preventDefault();
-            e.stopPropagation();
-            config.onClose();
-          } else if (e.keyCode === 13 || e.keyCode === 32) {
-            // Enter or Space
-            e.preventDefault();
-            e.stopPropagation();
-            config.onSelect();
-          }
-        };
-      },
-      []
-    );
-
     const onInputKeyDown = useEventCallback(
       createKeyHandler({
         type: 'search',
@@ -598,7 +1125,6 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     });
 
     const hasSelection = selected != null;
-    const hasValue = searchText.length > 0;
 
     const containerClassNames = classnames(
       'slds-combobox_container',
@@ -617,17 +1143,6 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       }
     );
 
-    const inputClassNames = classnames('slds-input', 'slds-combobox__input', {
-      'slds-has-focus': opened,
-      'slds-combobox__input-value': hasValue,
-    });
-
-    const dropdownClassNames = classnames(
-      'slds-dropdown',
-      'slds-dropdown_length-with-icon-7',
-      'slds-dropdown_fluid'
-    );
-
     const formElemProps = {
       id: labelId,
       htmlFor: comboboxId,
@@ -644,142 +1159,18 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       ? data.filter((entry) => lookupFilter(entry, searchText, targetScope))
       : data;
 
-    const renderListHeader = () => {
-      if (!listHeader) return null;
-      return (
-        <li role='presentation' className='slds-listbox__item'>
-          <div
-            className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity slds-listbox__option_term'
-            role='option'
-            aria-selected='true'
-          >
-            {listHeader}
-          </div>
-        </li>
-      );
-    };
-
-    const renderListFooter = () => {
-      if (!listFooter) return null;
-      return (
-        <li role='presentation' className='slds-listbox__item'>
-          <div
-            className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity'
-            role='option'
-          >
-            {listFooter}
-          </div>
-        </li>
-      );
-    };
-
-    const renderDataItems = () => {
-      return filteredData.map((entry) => {
-        const isFocused = focusedValue === entry.value;
-        const itemClassNames = classnames(
-          'slds-media',
-          'slds-media_center',
-          'slds-listbox__option',
-          'slds-listbox__option_entity',
-          {
-            'slds-listbox__option_has-meta': entry.meta,
-            'slds-has-focus': isFocused,
-          }
-        );
-
-        return (
-          <li
-            key={entry.value}
-            role='presentation'
-            className='slds-listbox__item'
-          >
-            <div
-              id={getOptionId(entry.value)}
-              className={itemClassNames}
-              role='option'
-              aria-selected={isFocused}
-              onClick={() => onOptionClick(entry)}
-            >
-              <span className='slds-media__figure slds-listbox__option-icon'>
-                {entry.icon && (
-                  <Icon
-                    container={true}
-                    category={entry.category}
-                    icon={entry.icon}
-                    size='small'
-                  />
-                )}
-              </span>
-              <span className='slds-media__body'>
-                <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
-                  {entry.label}
-                </span>
-                {entry.meta && (
-                  <span className='slds-listbox__option-meta slds-listbox__option-meta_entity'>
-                    {entry.meta}
-                  </span>
-                )}
-              </span>
-            </div>
-          </li>
-        );
-      });
-    };
-
-    const renderLoadingSpinner = () => {
-      if (!loading) return null;
-      return (
-        <li role='option' className='slds-listbox__item'>
-          <div className='slds-align_absolute-center slds-p-top_medium'>
-            <Spinner container={false} size='x-small' layout='inline' />
-          </div>
-        </li>
-      );
-    };
-
     // Render selected state
     if (hasSelection && selected) {
       return (
         <FormElement {...formElemProps}>
           <div className={containerClassNames}>
-            <div className={comboboxClassNames} ref={elementRef}>
-              <div
-                className='slds-combobox__form-element slds-input-has-icon slds-input-has-icon_left-right'
-                role='none'
-              >
-                {selected.icon && (
-                  <Icon
-                    container={true}
-                    containerClassName='slds-combobox__input-entity-icon'
-                    category={selected.category}
-                    icon={selected.icon}
-                    size='small'
-                  />
-                )}
-                <div
-                  role='combobox'
-                  tabIndex={disabled ? -1 : 0}
-                  className='slds-input_faux slds-combobox__input slds-combobox__input-value'
-                  aria-labelledby={labelId}
-                  aria-controls={listboxId}
-                  aria-haspopup='listbox'
-                  aria-expanded='false'
-                >
-                  <span className='slds-truncate'>{selected.label}</span>
-                </div>
-                <Button
-                  type='icon'
-                  icon='close'
-                  className='slds-input__icon slds-input__icon_right'
-                  title='Remove selected option'
-                  onClick={onRemoveSelection}
-                >
-                  <span className='slds-assistive-text'>
-                    Remove selected option
-                  </span>
-                </Button>
-              </div>
-            </div>
+            <LookupSelectedState
+              selected={selected}
+              disabled={disabled}
+              labelId={labelId}
+              listboxId={listboxId}
+              onRemoveSelection={onRemoveSelection}
+            />
           </div>
         </FormElement>
       );
@@ -792,207 +1183,50 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
         <FormElement {...formElemProps}>
           <div className={containerClassNames}>
             <div className='slds-combobox-group'>
-              <div className='slds-combobox_object-switcher slds-combobox-addon_start'>
-                <div className='slds-form-element'>
-                  <label
-                    className='slds-form-element__label slds-assistive-text'
-                    htmlFor={scopeId}
-                  >
-                    Filter Search by:
-                  </label>
-                  <div className='slds-form-element__control'>
-                    <div className='slds-combobox_container slds-has-icon-only'>
-                      <div
-                        className={classnames(
-                          'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click',
-                          {
-                            'slds-is-open': scopeOpened,
-                          }
-                        )}
-                      >
-                        <div
-                          className='slds-combobox__form-element slds-input-has-icon slds-input-has-icon_left-right'
-                          role='none'
-                        >
-                          {(() => {
-                            const currentScope = scopes.find(
-                              (scope) => scope.label === targetScope
-                            );
-                            return currentScope?.icon ? (
-                              <div
-                                className='slds-is-absolute'
-                                style={{
-                                  top: '50%',
-                                  transform: 'translateY(-50%)',
-                                  left: '0.5rem',
-                                  pointerEvents: 'none',
-                                }}
-                              >
-                                <Icon
-                                  container={true}
-                                  category={currentScope.category}
-                                  icon={currentScope.icon}
-                                  size='small'
-                                />
-                              </div>
-                            ) : null;
-                          })()}
-                          <input
-                            type='text'
-                            className='slds-input slds-combobox__input slds-combobox__input-value'
-                            style={{
-                              paddingLeft: '1.5rem',
-                              background: 'transparent',
-                              cursor: 'pointer',
-                            }}
-                            aria-controls='objectswitcher-listbox-id'
-                            aria-expanded={scopeOpened}
-                            aria-haspopup='listbox'
-                            autoComplete='off'
-                            role='combobox'
-                            placeholder=' '
-                            value={targetScope || ''}
-                            disabled={disabled}
-                            onClick={onScopeMenuClick}
-                            onBlur={onScopeBlur}
-                            onKeyDown={onScopeKeyDown}
-                            readOnly
-                          />
-                          <div
-                            className='slds-is-absolute'
-                            style={{
-                              bottom: '0.2rem',
-                              right: '0.55rem',
-                              pointerEvents: 'none',
-                            }}
-                          >
-                            <Icon
-                              container={true}
-                              icon='down'
-                              size='x-small'
-                              style={{ width: '0.8rem', height: '0.8rem' }}
-                            />
-                          </div>
-                        </div>
-                        {scopeOpened && (
-                          <div
-                            id={scopeListboxId}
-                            className='slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid'
-                            role='listbox'
-                            aria-label='Scope Options'
-                            style={{ left: 0, transform: 'translateX(0)' }}
-                          >
-                            <ul
-                              className='slds-listbox slds-listbox_vertical'
-                              role='presentation'
-                            >
-                              {scopes.map((scope, index) => (
-                                <li
-                                  key={scope.label}
-                                  role='presentation'
-                                  className='slds-listbox__item'
-                                >
-                                  <div
-                                    id={getScopeOptionId(index)}
-                                    className={classnames(
-                                      'slds-media slds-media_center slds-listbox__option slds-listbox__option_entity',
-                                      {
-                                        'slds-has-focus':
-                                          scopeFocusedIndex === index,
-                                      }
-                                    )}
-                                    role='option'
-                                    aria-selected={scope.label === targetScope}
-                                    onClick={() => onScopeSelect(scope.label)}
-                                  >
-                                    <span className='slds-media__figure slds-listbox__option-icon'>
-                                      {scope.icon && (
-                                        <Icon
-                                          container={true}
-                                          category={scope.category}
-                                          icon={scope.icon}
-                                          size='small'
-                                        />
-                                      )}
-                                    </span>
-                                    <span className='slds-media__body'>
-                                      <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
-                                        {scope.label}
-                                      </span>
-                                    </span>
-                                  </div>
-                                </li>
-                              ))}
-                            </ul>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <LookupScopeSelector
+                scopes={scopes}
+                targetScope={targetScope}
+                scopeOpened={scopeOpened}
+                scopeFocusedIndex={scopeFocusedIndex}
+                disabled={disabled}
+                scopeId={scopeId}
+                scopeListboxId={scopeListboxId}
+                getScopeOptionId={getScopeOptionId}
+                onScopeMenuClick={onScopeMenuClick}
+                onScopeBlur={onScopeBlur}
+                onScopeKeyDown={onScopeKeyDown}
+                onScopeSelect={onScopeSelect}
+              />
               <div className='slds-combobox_container slds-combobox-addon_end'>
                 <div className={comboboxClassNames} ref={elementRef}>
-                  <div
-                    className='slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right'
-                    role='none'
-                  >
-                    <input
-                      {...rprops}
-                      type='text'
-                      className={inputClassNames}
-                      id={comboboxId}
-                      ref={inputRef}
-                      value={searchText}
-                      disabled={disabled}
-                      aria-autocomplete='list'
-                      aria-controls={listboxId}
-                      aria-expanded={opened}
-                      aria-haspopup='listbox'
-                      aria-activedescendant={
-                        focusedValue
-                          ? `${optionIdPrefix}-${focusedValue}`
-                          : undefined
-                      }
-                      autoComplete='off'
-                      role='combobox'
-                      onChange={onInputChange}
-                      onFocus={onInputFocus}
-                      onBlur={onInputBlur}
-                      onKeyDown={onInputKeyDown}
-                    />
-                    <Icon
-                      container={true}
-                      containerClassName={classnames(
-                        'slds-input__icon',
-                        'slds-input__icon_right'
-                      )}
-                      category='utility'
-                      icon='search'
-                      size='x-small'
-                    />
-                  </div>
-                  {opened && (
-                    <div
-                      id={listboxId}
-                      className={dropdownClassNames}
-                      role='listbox'
-                      aria-label='Search Results'
-                      tabIndex={0}
-                      aria-busy={loading}
-                      ref={dropdownRef}
-                    >
-                      <ul
-                        className='slds-listbox slds-listbox_vertical'
-                        role='presentation'
-                      >
-                        {renderListHeader()}
-                        {renderDataItems()}
-                        {renderLoadingSpinner()}
-                        {renderListFooter()}
-                      </ul>
-                    </div>
-                  )}
+                  <LookupSearchInput
+                    {...rprops}
+                    searchText={searchText}
+                    disabled={disabled}
+                    opened={opened}
+                    focusedValue={focusedValue}
+                    iconAlign={iconAlign}
+                    comboboxId={comboboxId}
+                    listboxId={listboxId}
+                    optionIdPrefix={optionIdPrefix}
+                    inputRef={inputRef}
+                    onInputChange={onInputChange}
+                    onInputFocus={onInputFocus}
+                    onInputBlur={onInputBlur}
+                    onInputKeyDown={onInputKeyDown}
+                  />
+                  <LookupDropdown
+                    opened={opened}
+                    loading={loading}
+                    listboxId={listboxId}
+                    dropdownRef={dropdownRef}
+                    listHeader={listHeader}
+                    listFooter={listFooter}
+                    filteredData={filteredData}
+                    focusedValue={focusedValue}
+                    getOptionId={getOptionId}
+                    onOptionClick={onOptionClick}
+                  />
                 </div>
               </div>
             </div>
@@ -1002,84 +1236,38 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     }
 
     // Render simple search state (no scopes)
-    const inputIconClasses =
-      iconAlign === 'left'
-        ? 'slds-combobox__form-element slds-input-has-icon slds-input-has-icon_left'
-        : 'slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right';
-
     return (
       <FormElement {...formElemProps}>
         <div className={containerClassNames}>
           <div className={comboboxClassNames} ref={elementRef}>
-            <div className={inputIconClasses} role='none'>
-              {iconAlign === 'left' && (
-                <Icon
-                  container={true}
-                  containerClassName={classnames(
-                    'slds-input__icon',
-                    `slds-input__icon_${iconAlign}`
-                  )}
-                  category='utility'
-                  icon='search'
-                  size='x-small'
-                />
-              )}
-              <input
-                {...rprops}
-                type='text'
-                className={inputClassNames}
-                id={comboboxId}
-                ref={inputRef}
-                value={searchText}
-                disabled={disabled}
-                aria-autocomplete='list'
-                aria-controls={listboxId}
-                aria-expanded={opened}
-                aria-haspopup='listbox'
-                aria-activedescendant={
-                  focusedValue ? `${optionIdPrefix}-${focusedValue}` : undefined
-                }
-                autoComplete='off'
-                role='combobox'
-                onChange={onInputChange}
-                onFocus={onInputFocus}
-                onBlur={onInputBlur}
-                onKeyDown={onInputKeyDown}
-              />
-              {iconAlign === 'right' && (
-                <Icon
-                  container={true}
-                  containerClassName={classnames(
-                    'slds-input__icon',
-                    `slds-input__icon_${iconAlign}`
-                  )}
-                  category='utility'
-                  icon='search'
-                  size='x-small'
-                />
-              )}
-            </div>
-            {opened && (
-              <div
-                id={listboxId}
-                className={dropdownClassNames}
-                role='listbox'
-                aria-label='Search Results'
-                tabIndex={0}
-                aria-busy={loading}
-                ref={dropdownRef}
-              >
-                <ul
-                  className='slds-listbox slds-listbox_vertical'
-                  role='presentation'
-                >
-                  {renderListHeader()}
-                  {renderDataItems()}
-                  {renderLoadingSpinner()}
-                  {renderListFooter()}
-                </ul>
-              </div>
-            )}
+            <LookupSearchInput
+              {...rprops}
+              searchText={searchText}
+              disabled={disabled}
+              opened={opened}
+              focusedValue={focusedValue}
+              iconAlign={iconAlign}
+              comboboxId={comboboxId}
+              listboxId={listboxId}
+              optionIdPrefix={optionIdPrefix}
+              inputRef={inputRef}
+              onInputChange={onInputChange}
+              onInputFocus={onInputFocus}
+              onInputBlur={onInputBlur}
+              onInputKeyDown={onInputKeyDown}
+            />
+            <LookupDropdown
+              opened={opened}
+              loading={loading}
+              listboxId={listboxId}
+              dropdownRef={dropdownRef}
+              listHeader={listHeader}
+              listFooter={listFooter}
+              filteredData={filteredData}
+              focusedValue={focusedValue}
+              getOptionId={getOptionId}
+              onOptionClick={onOptionClick}
+            />
           </div>
         </div>
       </FormElement>

From ecf43a5326d702c93e2e0b3ed2deda2116c56bd6 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 13:08:00 +0900
Subject: [PATCH 159/245] restore the existing implementation as much as
 possible

---
 src/scripts/Lookup.tsx   |  1 -
 src/scripts/Picklist.tsx | 80 ++++++++++++++++++++++++----------------
 2 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 13e339bc5..decda07d2 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -740,7 +740,6 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
         }, 10);
       }
     });
-
     const { getActiveElement } = useContext(ComponentSettingsContext);
     const isFocusedInComponent = useEventCallback(() => {
       const targetEl = getActiveElement();
diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index c8ed636e7..a4c949827 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -11,6 +11,7 @@ import React, {
 import classnames from 'classnames';
 import { FormElement, FormElementProps } from './FormElement';
 import { Icon } from './Icon';
+import { Button, ButtonProps } from './Button';
 import {
   DropdownMenu,
   DropdownMenuItem,
@@ -54,8 +55,6 @@ const PicklistContext = createContext<{
  *
  */
 export type PicklistProps<MultiSelect extends boolean | undefined> = {
-  id?: string;
-  className?: string;
   label?: string;
   required?: boolean;
   multiSelect?: MultiSelect;
@@ -85,8 +84,10 @@ export type PicklistProps<MultiSelect extends boolean | undefined> = {
   onKeyDown?: (e: React.KeyboardEvent) => void;
   onBlur?: () => void;
   onComplete?: () => void;
-  children?: React.ReactNode;
-};
+} & Omit<
+  ButtonProps,
+  'type' | 'value' | 'defaultValue' | 'onSelect' | 'onBlur' | 'onKeyDown'
+>;
 
 /**
  *
@@ -115,6 +116,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       tooltip,
       tooltipIcon,
       elementRef: elementRef_,
+      buttonRef: buttonRef_,
       dropdownRef: dropdownRef_,
       onSelect,
       onComplete,
@@ -160,7 +162,8 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
 
     const elRef = useRef<HTMLDivElement | null>(null);
     const elementRef = useMergeRefs([elRef, elementRef_]);
-    const comboboxElRef = useRef<HTMLDivElement | null>(null);
+    const buttonElRef = useRef<HTMLButtonElement | null>(null);
+    const buttonRef = useMergeRefs([buttonElRef, buttonRef_]);
     const dropdownElRef = useRef<HTMLDivElement | null>(null);
     const dropdownRef = useMergeRefs([dropdownElRef, dropdownRef_]);
 
@@ -194,11 +197,6 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       } else {
         // set only one value
         setPicklistValues([itemValue]);
-        setOpened(false);
-        setTimeout(() => {
-          comboboxElRef.current?.focus();
-          onComplete?.();
-        }, 10);
       }
     });
 
@@ -225,14 +223,29 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
     });
 
     const onClick = useEventCallback(() => {
-      if (!disabled) {
-        setOpened((opened) => !opened);
-      }
+      setOpened((opened) => !opened);
+      setTimeout(() => {
+        focusToTargetItemEl();
+      }, 10);
     });
 
     const onPicklistItemSelect = useEventCallback((value: PicklistValue) => {
       updateItemValue(value);
       onSelect?.(value);
+      if (!multiSelect) {
+        // close if only single select
+        setTimeout(() => {
+          setOpened(false);
+          onComplete?.();
+          buttonElRef.current?.focus();
+        }, 200);
+      }
+    });
+
+    const onPicklistClose = useEventCallback(() => {
+      buttonElRef.current?.focus();
+      setOpened(false);
+      onComplete?.();
     });
 
     const onBlur = useEventCallback(() => {
@@ -271,7 +284,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
     function getSelectedItemLabel() {
       // many items selected
       if (values.length > 1) {
-        return `${values.length} ${optionsSelectedText}`;
+        return optionsSelectedText;
       }
 
       // one item
@@ -343,29 +356,35 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
               className='slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right'
               role='none'
             >
-              <div
-                ref={comboboxElRef}
+              <Button
+                id={id}
+                buttonRef={buttonRef}
+                {...rprops}
+                className={inputClassNames}
+                style={{ justifyContent: 'normal' }}
+                type='neutral'
+                disabled={disabled}
+                onClick={disabled ? undefined : onClick}
+                onBlur={disabled ? undefined : onBlur}
+                onKeyDown={disabled ? undefined : onKeydown}
                 role='combobox'
                 tabIndex={disabled ? -1 : 0}
-                className={inputClassNames}
                 aria-labelledby={label ? id : undefined}
                 aria-controls={listboxId}
                 aria-expanded={opened}
                 aria-haspopup='listbox'
                 aria-disabled={disabled}
-                onClick={onClick}
-                onKeyDown={onKeydown}
-                onBlur={onBlur}
-                {...rprops}
               >
                 <span className='slds-truncate'>{getSelectedItemLabel()}</span>
-              </div>
-              <span className='slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right'>
-                <Icon
-                  icon='down'
-                  className='slds-icon slds-icon_x-small slds-icon-text-default'
-                />
-              </span>
+                <div>
+                  <Icon
+                    container={true}
+                    containerClassName='slds-icon-utility-down slds-input__icon slds-input__icon_right'
+                    icon='down'
+                    className='slds-icon slds-icon_x-small slds-icon-text-default'
+                  />
+                </div>
+              </Button>
             </div>
             {opened && (
               <DropdownMenu
@@ -374,10 +393,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
                 size={menuSize}
                 style={menuStyle}
                 onMenuSelect={onPicklistItemSelect}
-                onMenuClose={() => {
-                  setOpened(false);
-                  onComplete?.();
-                }}
+                onMenuClose={onPicklistClose}
                 onBlur={onBlur}
               >
                 <PicklistContext.Provider value={contextValue}>

From 9742d12facee70223e1b3247c4684943f71eafc7 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 14:21:42 +0900
Subject: [PATCH 160/245] (Input): remove `aria-labelledby` for consistency

---
 src/scripts/Input.tsx | 34 ++++------------------------------
 1 file changed, 4 insertions(+), 30 deletions(-)

diff --git a/src/scripts/Input.tsx b/src/scripts/Input.tsx
index 027b1983a..d57cbb585 100644
--- a/src/scripts/Input.tsx
+++ b/src/scripts/Input.tsx
@@ -38,19 +38,12 @@ function useInitComponentStyle() {
 /**
  *
  */
-const InputAddon = ({
-  content,
-  id,
-}: {
-  content: string;
-  id: string | undefined;
-}) => (
+const InputAddon = ({ content }: { content: string }) => (
   <Text
     tag='span'
     className='slds-form-element__addon'
     category='body'
     type='regular'
-    id={id}
   >
     {content}
   </Text>
@@ -169,14 +162,6 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
     const inputId = id ?? `${prefix}-input-id`;
     const labelForId = readOnly ? rawTextId : inputId;
 
-    const labelId = label ? `${prefix}-label-id` : undefined;
-    const preAddonId = addonLeft ? `${prefix}-pre-addon-id` : undefined;
-    const postAddonId = addonRight ? `${prefix}-post-addon-id` : undefined;
-    const labelledBy =
-      [labelId, preAddonId, postAddonId]
-        .filter((id) => id !== undefined)
-        .join(' ') || undefined;
-
     const errorId = `${prefix}-error-id`;
 
     const { isFieldSetColumn } = useContext(FieldSetColumnContext);
@@ -185,12 +170,7 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
       bare ? 'slds-input_bare' : 'slds-input'
     );
     const inputElem = readOnly ? (
-      <Text
-        id={rawTextId}
-        type='regular'
-        category='body'
-        aria-labelledby={labelledBy}
-      >
+      <Text id={rawTextId} type='regular' category='body'>
         {value}
       </Text>
     ) : (
@@ -205,7 +185,6 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
         {...rprops}
         onChange={onChange}
         onKeyDown={onKeyDown}
-        aria-labelledby={labelledBy}
         aria-describedby={error ? errorId : undefined}
         aria-invalid={error ? true : undefined}
       />
@@ -223,21 +202,16 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
       );
       contentElem = (
         <div className={wrapperClassName}>
-          {addonLeft ? (
-            <InputAddon content={addonLeft} id={preAddonId} />
-          ) : undefined}
+          {addonLeft ? <InputAddon content={addonLeft} /> : undefined}
           {iconLeft ? <InputIcon icon={iconLeft} align='left' /> : undefined}
           {inputElem}
           {iconRight ? <InputIcon icon={iconRight} align='right' /> : undefined}
-          {addonRight ? (
-            <InputAddon content={addonRight} id={postAddonId} />
-          ) : undefined}
+          {addonRight ? <InputAddon content={addonRight} /> : undefined}
         </div>
       );
     }
     if (isFieldSetColumn || label || required || error || cols) {
       const formElemProps = {
-        id: labelId,
         controlId: labelForId,
         label,
         required,

From 961c313d7869fcc68db731345cda54bfca78b8c3 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 14:29:18 +0900
Subject: [PATCH 161/245] (Tree): remove `aria-labelledby` for consistency

---
 src/scripts/Tree.tsx | 21 +++------------------
 1 file changed, 3 insertions(+), 18 deletions(-)

diff --git a/src/scripts/Tree.tsx b/src/scripts/Tree.tsx
index 5d05e5f6b..ed1c413f0 100644
--- a/src/scripts/Tree.tsx
+++ b/src/scripts/Tree.tsx
@@ -1,10 +1,4 @@
-import React, {
-  useId,
-  HTMLAttributes,
-  createContext,
-  FC,
-  useMemo,
-} from 'react';
+import React, { HTMLAttributes, createContext, FC, useMemo } from 'react';
 import classnames from 'classnames';
 import { TreeNodeProps } from './TreeNode';
 
@@ -53,19 +47,10 @@ export const Tree: FC<TreeProps> = (props) => {
     }),
     [toggleOnNodeClick, onNodeClick, onNodeLabelClick, onNodeToggle]
   );
-  const id = useId();
   return (
     <div className={treeClassNames} {...rprops}>
-      {label ? (
-        <h4 className='slds-tree__group-header' id={id}>
-          {label}
-        </h4>
-      ) : null}
-      <ul
-        aria-labelledby={label ? id : undefined}
-        className='slds-tree'
-        role='tree'
-      >
+      {label ? <h4 className='slds-tree__group-header'>{label}</h4> : null}
+      <ul className='slds-tree' role='tree'>
         <TreeContext.Provider value={ctx}>{children}</TreeContext.Provider>
       </ul>
     </div>

From 03633dd9df4c69a67d63d183d9ecc98c270c074b Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 14:30:49 +0900
Subject: [PATCH 162/245] (Tabs): remove `aria-labelledby` for consistency

---
 src/scripts/Tabs.tsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/scripts/Tabs.tsx b/src/scripts/Tabs.tsx
index 52d8bac10..5af46b578 100644
--- a/src/scripts/Tabs.tsx
+++ b/src/scripts/Tabs.tsx
@@ -47,18 +47,16 @@ const TabsContext = createContext<{
   type: TabType;
   activeTabRef?: Ref<HTMLAnchorElement>;
   tabIdPrefix?: string;
-  tabItemIdPrefix?: string;
 }>({ type: 'default' });
 
 /**
  * Custom hook to generate unique tab IDs
  */
 const useTabIds = (eventKey?: TabKey) => {
-  const { tabIdPrefix, tabItemIdPrefix } = useContext(TabsContext);
+  const { tabIdPrefix } = useContext(TabsContext);
   const tabIndex = eventKey ? String(eventKey) : '0';
   const tabId = `${tabIdPrefix}-${tabIndex}`;
-  const tabItemId = `${tabItemIdPrefix}-${tabIndex}`;
-  return { tabId, tabItemId };
+  return { tabId };
 };
 
 /**
@@ -158,7 +156,7 @@ const TabItem = <RendererProps extends TabItemRendererProps>(
   const { type, activeTabRef } = useContext(TabsContext);
   const activeKey = useContext(TabsActiveKeyContext);
   const { onTabClick, onTabKeyDown } = useContext(TabsHandlersContext);
-  const { tabId, tabItemId } = useTabIds(eventKey);
+  const { tabId } = useTabIds(eventKey);
   let { menuItems } = props;
   menuItems = menu
     ? React.Children.toArray(
@@ -197,7 +195,6 @@ const TabItem = <RendererProps extends TabItemRendererProps>(
           }`}
         >
           <a
-            id={tabItemId}
             className={tabLinkClassName}
             role='tab'
             ref={isActive ? activeTabRef : undefined}
@@ -262,13 +259,12 @@ export const Tab = <
 ) => {
   const { className, eventKey, children } = props;
   const activeKey = useContext(TabsActiveKeyContext);
-  const { tabId, tabItemId } = useTabIds(eventKey);
+  const { tabId } = useTabIds(eventKey);
   return (
     <TabContent
       id={tabId}
       className={className}
       active={eventKey != null && eventKey === activeKey}
-      aria-labelledby={tabItemId}
     >
       {children}
     </TabContent>

From 6e27a167edcd0f7696849dadcd1ad14d4e393e5e Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 14:36:49 +0900
Subject: [PATCH 163/245] (Datepicker): remove incorrect `aria-multiselectable`

---
 src/scripts/Datepicker.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/scripts/Datepicker.tsx b/src/scripts/Datepicker.tsx
index da7f85882..3ff6d820c 100644
--- a/src/scripts/Datepicker.tsx
+++ b/src/scripts/Datepicker.tsx
@@ -297,12 +297,7 @@ const DatepickerMonth = forwardRef(
       onDateKeyDown,
     } = props;
     return (
-      <table
-        ref={ref}
-        className='slds-datepicker__month'
-        role='grid'
-        aria-multiselectable='true'
-      >
+      <table ref={ref} className='slds-datepicker__month' role='grid'>
         <thead>
           <tr>
             {dayjs.weekdaysMin(true).map((wd, i) => (

From 13fe21daea92e3fd6a7855981a3b04b3437d757a Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 15:02:24 +0900
Subject: [PATCH 164/245] (Picklist): remove `aria-labelledby` for concistency

---
 src/scripts/Picklist.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index a4c949827..344ea2a62 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -369,7 +369,6 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
                 onKeyDown={disabled ? undefined : onKeydown}
                 role='combobox'
                 tabIndex={disabled ? -1 : 0}
-                aria-labelledby={label ? id : undefined}
                 aria-controls={listboxId}
                 aria-expanded={opened}
                 aria-haspopup='listbox'

From 5edc2d88d49da7b2105077f2b490e4b0adf8d113 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 15:04:52 +0900
Subject: [PATCH 165/245] (Lookup): remove `aria-labelledby` for consistency

---
 src/scripts/Lookup.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index c6a41651c..cd1df83b0 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -122,7 +122,6 @@ const createKeyHandler = (config: KeyHandlerConfig) => {
 type LookupSelectedStateProps = {
   selected: LookupEntry;
   disabled?: boolean;
-  labelId?: string;
   listboxId: string;
   onRemoveSelection: () => void;
 };
@@ -133,7 +132,6 @@ type LookupSelectedStateProps = {
 const LookupSelectedState: FC<LookupSelectedStateProps> = ({
   selected,
   disabled,
-  labelId,
   listboxId,
   onRemoveSelection,
 }) => {
@@ -162,7 +160,6 @@ const LookupSelectedState: FC<LookupSelectedStateProps> = ({
           role='combobox'
           tabIndex={disabled ? -1 : 0}
           className='slds-input_faux slds-combobox__input slds-combobox__input-value'
-          aria-labelledby={labelId}
           aria-controls={listboxId}
           aria-haspopup='listbox'
           aria-expanded='false'
@@ -742,7 +739,6 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     const comboboxId = id_ && `${fallbackId}-combobox`;
     const listboxId = `${fallbackId}-listbox`;
 
-    const labelId = label ? `${comboboxId}-label` : undefined;
     const scopeId = `${comboboxId}-scope`;
 
     const optionIdPrefix = `${comboboxId}-option`;
@@ -1144,7 +1140,6 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     );
 
     const formElemProps = {
-      id: labelId,
       htmlFor: comboboxId,
       label,
       required,
@@ -1167,7 +1162,6 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
             <LookupSelectedState
               selected={selected}
               disabled={disabled}
-              labelId={labelId}
               listboxId={listboxId}
               onRemoveSelection={onRemoveSelection}
             />

From 78a7f0f319a5613201dc24d01653e461bf351a60 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 15:07:08 +0900
Subject: [PATCH 166/245] (Lookup): remove `scopeId` that wouldn't be necessary

---
 src/scripts/Lookup.tsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index cd1df83b0..368158f58 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -189,7 +189,6 @@ type LookupScopeSelectorProps = {
   scopeOpened: boolean;
   scopeFocusedIndex: number;
   disabled?: boolean;
-  scopeId: string;
   scopeListboxId: string;
   getScopeOptionId: (index: number) => string;
   onScopeMenuClick: () => void;
@@ -207,7 +206,6 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
   scopeOpened,
   scopeFocusedIndex,
   disabled,
-  scopeId,
   scopeListboxId,
   getScopeOptionId,
   onScopeMenuClick,
@@ -220,10 +218,7 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
   return (
     <div className='slds-combobox_object-switcher slds-combobox-addon_start'>
       <div className='slds-form-element'>
-        <label
-          className='slds-form-element__label slds-assistive-text'
-          htmlFor={scopeId}
-        >
+        <label className='slds-form-element__label slds-assistive-text'>
           Filter Search by:
         </label>
         <div className='slds-form-element__control'>
@@ -739,8 +734,6 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     const comboboxId = id_ && `${fallbackId}-combobox`;
     const listboxId = `${fallbackId}-listbox`;
 
-    const scopeId = `${comboboxId}-scope`;
-
     const optionIdPrefix = `${comboboxId}-option`;
     const getOptionId = (value: string) => `${optionIdPrefix}-${value}`;
 
@@ -1183,7 +1176,6 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
                 scopeOpened={scopeOpened}
                 scopeFocusedIndex={scopeFocusedIndex}
                 disabled={disabled}
-                scopeId={scopeId}
                 scopeListboxId={scopeListboxId}
                 getScopeOptionId={getScopeOptionId}
                 onScopeMenuClick={onScopeMenuClick}

From 417ca6e958c28fa5eb0bee8869c4a11cd9d3e135 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 15:07:59 +0900
Subject: [PATCH 167/245] (Lookup): pass `comboboxId` as `controlId`

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

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 368158f58..a92798151 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -1133,7 +1133,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     );
 
     const formElemProps = {
-      htmlFor: comboboxId,
+      controlId: comboboxId,
       label,
       required,
       error,

From df4398d44055fbe0ba9f4c429cbc2fab8a8374e0 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 17:08:44 +0900
Subject: [PATCH 168/245] Revert "restore the existing implementation as much
 as possible"

This reverts commit ecf43a5326d702c93e2e0b3ed2deda2116c56bd6.
---
 src/scripts/Lookup.tsx   |  1 +
 src/scripts/Picklist.tsx | 80 ++++++++++++++++------------------------
 2 files changed, 33 insertions(+), 48 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index decda07d2..13e339bc5 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -740,6 +740,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
         }, 10);
       }
     });
+
     const { getActiveElement } = useContext(ComponentSettingsContext);
     const isFocusedInComponent = useEventCallback(() => {
       const targetEl = getActiveElement();
diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index 344ea2a62..e5a55e63b 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -11,7 +11,6 @@ import React, {
 import classnames from 'classnames';
 import { FormElement, FormElementProps } from './FormElement';
 import { Icon } from './Icon';
-import { Button, ButtonProps } from './Button';
 import {
   DropdownMenu,
   DropdownMenuItem,
@@ -55,6 +54,8 @@ const PicklistContext = createContext<{
  *
  */
 export type PicklistProps<MultiSelect extends boolean | undefined> = {
+  id?: string;
+  className?: string;
   label?: string;
   required?: boolean;
   multiSelect?: MultiSelect;
@@ -84,10 +85,8 @@ export type PicklistProps<MultiSelect extends boolean | undefined> = {
   onKeyDown?: (e: React.KeyboardEvent) => void;
   onBlur?: () => void;
   onComplete?: () => void;
-} & Omit<
-  ButtonProps,
-  'type' | 'value' | 'defaultValue' | 'onSelect' | 'onBlur' | 'onKeyDown'
->;
+  children?: React.ReactNode;
+};
 
 /**
  *
@@ -116,7 +115,6 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       tooltip,
       tooltipIcon,
       elementRef: elementRef_,
-      buttonRef: buttonRef_,
       dropdownRef: dropdownRef_,
       onSelect,
       onComplete,
@@ -162,8 +160,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
 
     const elRef = useRef<HTMLDivElement | null>(null);
     const elementRef = useMergeRefs([elRef, elementRef_]);
-    const buttonElRef = useRef<HTMLButtonElement | null>(null);
-    const buttonRef = useMergeRefs([buttonElRef, buttonRef_]);
+    const comboboxElRef = useRef<HTMLDivElement | null>(null);
     const dropdownElRef = useRef<HTMLDivElement | null>(null);
     const dropdownRef = useMergeRefs([dropdownElRef, dropdownRef_]);
 
@@ -197,6 +194,11 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       } else {
         // set only one value
         setPicklistValues([itemValue]);
+        setOpened(false);
+        setTimeout(() => {
+          comboboxElRef.current?.focus();
+          onComplete?.();
+        }, 10);
       }
     });
 
@@ -223,29 +225,14 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
     });
 
     const onClick = useEventCallback(() => {
-      setOpened((opened) => !opened);
-      setTimeout(() => {
-        focusToTargetItemEl();
-      }, 10);
+      if (!disabled) {
+        setOpened((opened) => !opened);
+      }
     });
 
     const onPicklistItemSelect = useEventCallback((value: PicklistValue) => {
       updateItemValue(value);
       onSelect?.(value);
-      if (!multiSelect) {
-        // close if only single select
-        setTimeout(() => {
-          setOpened(false);
-          onComplete?.();
-          buttonElRef.current?.focus();
-        }, 200);
-      }
-    });
-
-    const onPicklistClose = useEventCallback(() => {
-      buttonElRef.current?.focus();
-      setOpened(false);
-      onComplete?.();
     });
 
     const onBlur = useEventCallback(() => {
@@ -284,7 +271,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
     function getSelectedItemLabel() {
       // many items selected
       if (values.length > 1) {
-        return optionsSelectedText;
+        return `${values.length} ${optionsSelectedText}`;
       }
 
       // one item
@@ -356,34 +343,28 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
               className='slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right'
               role='none'
             >
-              <Button
-                id={id}
-                buttonRef={buttonRef}
-                {...rprops}
-                className={inputClassNames}
-                style={{ justifyContent: 'normal' }}
-                type='neutral'
-                disabled={disabled}
-                onClick={disabled ? undefined : onClick}
-                onBlur={disabled ? undefined : onBlur}
-                onKeyDown={disabled ? undefined : onKeydown}
+              <div
+                ref={comboboxElRef}
                 role='combobox'
                 tabIndex={disabled ? -1 : 0}
+                className={inputClassNames}
                 aria-controls={listboxId}
                 aria-expanded={opened}
                 aria-haspopup='listbox'
                 aria-disabled={disabled}
+                onClick={onClick}
+                onKeyDown={onKeydown}
+                onBlur={onBlur}
+                {...rprops}
               >
                 <span className='slds-truncate'>{getSelectedItemLabel()}</span>
-                <div>
-                  <Icon
-                    container={true}
-                    containerClassName='slds-icon-utility-down slds-input__icon slds-input__icon_right'
-                    icon='down'
-                    className='slds-icon slds-icon_x-small slds-icon-text-default'
-                  />
-                </div>
-              </Button>
+              </div>
+              <span className='slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right'>
+                <Icon
+                  icon='down'
+                  className='slds-icon slds-icon_x-small slds-icon-text-default'
+                />
+              </span>
             </div>
             {opened && (
               <DropdownMenu
@@ -392,7 +373,10 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
                 size={menuSize}
                 style={menuStyle}
                 onMenuSelect={onPicklistItemSelect}
-                onMenuClose={onPicklistClose}
+                onMenuClose={() => {
+                  setOpened(false);
+                  onComplete?.();
+                }}
                 onBlur={onBlur}
               >
                 <PicklistContext.Provider value={contextValue}>

From dfe1d79deda98ea51a10b2701d06735a9e0a8492 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 17:08:52 +0900
Subject: [PATCH 169/245] Revert "use `DropdownMenu` to delegate keyboard
 handlers"

This reverts commit 1da593e8884d8bc7ca3c7f088fb6fce16c964f24.
---
 src/scripts/Picklist.tsx | 305 ++++++++++++++++++++++++++++++++-------
 1 file changed, 253 insertions(+), 52 deletions(-)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index e5a55e63b..9a98217c0 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -7,15 +7,14 @@ import React, {
   Ref,
   ReactNode,
   useId,
+  useState,
+  useEffect,
+  useCallback,
 } from 'react';
 import classnames from 'classnames';
 import { FormElement, FormElementProps } from './FormElement';
 import { Icon } from './Icon';
-import {
-  DropdownMenu,
-  DropdownMenuItem,
-  DropdownMenuProps,
-} from './DropdownMenu';
+import { DropdownMenuProps } from './DropdownMenu';
 import { isElInChildren } from './util';
 import { ComponentSettingsContext } from './ComponentSettings';
 import { useControlledValue, useEventCallback, useMergeRefs } from './hooks';
@@ -156,8 +155,124 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       opened_,
       defaultOpened ?? false
     );
+    const [focusedValue, setFocusedValue] = useState<
+      PicklistValue | undefined
+    >();
+
     const { getActiveElement } = useContext(ComponentSettingsContext);
 
+    // Get option values from children
+    const getOptionValues = useCallback(() => {
+      const optionValues: PicklistValue[] = [];
+      React.Children.forEach(children, (child) => {
+        if (!React.isValidElement(child)) {
+          return;
+        }
+
+        const props: unknown = child.props;
+        const isPropsObject = typeof props === 'object' && props !== null;
+
+        if (
+          isPropsObject &&
+          'value' in props &&
+          (typeof props.value === 'string' || typeof props.value === 'number')
+        ) {
+          optionValues.push(props.value);
+        }
+      });
+      return optionValues;
+    }, [children]);
+
+    // Get next option value for keyboard navigation
+    const getNextValue = useCallback(
+      (currentValue?: PicklistValue) => {
+        const optionValues = getOptionValues();
+        if (optionValues.length === 0) return undefined;
+
+        if (!currentValue) return optionValues[0];
+
+        const currentIndex = optionValues.indexOf(currentValue);
+        return optionValues[
+          Math.min(currentIndex + 1, optionValues.length - 1)
+        ]; // not wrap around
+      },
+      [getOptionValues]
+    );
+
+    // Get previous option value for keyboard navigation
+    const getPrevValue = useCallback(
+      (currentValue?: PicklistValue) => {
+        const optionValues = getOptionValues();
+        if (optionValues.length === 0) return undefined;
+
+        if (!currentValue) return optionValues[optionValues.length - 1];
+
+        const currentIndex = optionValues.indexOf(currentValue);
+        return optionValues[Math.max(currentIndex - 1, 0)]; // not wrap around
+      },
+      [getOptionValues]
+    );
+
+    // Scroll focused element into view
+    const scrollFocusedElementIntoView = useEventCallback(
+      (nextFocusedValue: PicklistValue | undefined) => {
+        if (!nextFocusedValue || !dropdownElRef.current) {
+          return;
+        }
+
+        const dropdownContainer = dropdownElRef.current;
+        const targetElement = dropdownContainer.querySelector(
+          `#${CSS.escape(optionIdPrefix)}-${nextFocusedValue}`
+        );
+
+        if (!(targetElement instanceof HTMLElement)) {
+          return;
+        }
+
+        // Calculate element position within container
+        const elementTopPosition = targetElement.offsetTop;
+        const elementBottomPosition =
+          elementTopPosition + targetElement.offsetHeight;
+
+        // Calculate currently visible area
+        const currentScrollPosition = dropdownContainer.scrollTop;
+        const visibleAreaHeight = dropdownContainer.clientHeight;
+        const visibleAreaTop = currentScrollPosition;
+        const visibleAreaBottom = currentScrollPosition + visibleAreaHeight;
+
+        // Check if element is outside the visible area
+        const isAbove = elementTopPosition < visibleAreaTop;
+        const isBelow = elementBottomPosition > visibleAreaBottom;
+
+        // Scroll only if element is not currently visible
+        if (isAbove || isBelow) {
+          targetElement.scrollIntoView({
+            block: 'center',
+          });
+        }
+      }
+    );
+
+    // Set initial focus when dropdown opens
+    useEffect(() => {
+      if (opened && !focusedValue) {
+        // Focus on first selected value or first option
+        const initialFocus =
+          values.length > 0 ? values[0] : getOptionValues()[0];
+        setFocusedValue(initialFocus);
+        scrollFocusedElementIntoView(initialFocus);
+      } else if (!opened) {
+        // Reset focus when dropdown closes
+        setFocusedValue(undefined);
+      }
+    }, [
+      opened,
+      values,
+      getOptionValues,
+      focusedValue,
+      scrollFocusedElementIntoView,
+    ]);
+
     const elRef = useRef<HTMLDivElement | null>(null);
     const elementRef = useMergeRefs([elRef, elementRef_]);
     const comboboxElRef = useRef<HTMLDivElement | null>(null);
@@ -210,20 +325,6 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       );
     });
 
-    const focusToTargetItemEl = useEventCallback(() => {
-      const dropdownEl = dropdownElRef.current;
-      if (!dropdownEl) {
-        return;
-      }
-      const firstItemEl: HTMLAnchorElement | null =
-        dropdownEl.querySelector(
-          '.slds-is-selected > .react-slds-menuitem[tabIndex]'
-        ) || dropdownEl.querySelector('.react-slds-menuitem[tabIndex]');
-      if (firstItemEl) {
-        firstItemEl.focus();
-      }
-    });
-
     const onClick = useEventCallback(() => {
       if (!disabled) {
         setOpened((opened) => !opened);
@@ -245,18 +346,64 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       }, 10);
     });
 
-    const onKeydown = useEventCallback((e: React.KeyboardEvent) => {
+    const onKeyDown = useEventCallback((e: React.KeyboardEvent) => {
       if (e.keyCode === 40) {
         // down
         e.preventDefault();
         e.stopPropagation();
         if (!opened) {
           setOpened(true);
-          setTimeout(() => {
-            focusToTargetItemEl();
-          }, 10);
         } else {
-          focusToTargetItemEl();
+          // Navigate to next option
+          const nextValue = getNextValue(focusedValue);
+          setFocusedValue(nextValue);
+          scrollFocusedElementIntoView(nextValue);
+        }
+      } else if (e.keyCode === 38) {
+        // up
+        e.preventDefault();
+        e.stopPropagation();
+        if (!opened) {
+          setOpened(true);
+        } else {
+          // Navigate to previous option
+          const prevValue = getPrevValue(focusedValue);
+          setFocusedValue(prevValue);
+          scrollFocusedElementIntoView(prevValue);
+        }
+      } else if (e.keyCode === 9) {
+        // Tab or Shift+Tab
+        if (opened) {
+          e.preventDefault();
+          e.stopPropagation();
+          const optionValues = getOptionValues();
+          const currentIndex = focusedValue
+            ? optionValues.indexOf(focusedValue)
+            : -1;
+
+          if (e.shiftKey) {
+            // Shift+Tab - Navigate to previous option or close if at first
+            if (currentIndex <= 0) {
+              // At first option or no focus, close the picklist
+              setOpened(false);
+              onComplete?.();
+            } else {
+              const prevValue = getPrevValue(focusedValue);
+              setFocusedValue(prevValue);
+              scrollFocusedElementIntoView(prevValue);
+            }
+          } else {
+            // Tab - Navigate to next option or close if at last
+            if (currentIndex >= optionValues.length - 1) {
+              // At last option, close the picklist
+              setOpened(false);
+              onComplete?.();
+            } else {
+              const nextValue = getNextValue(focusedValue);
+              setFocusedValue(nextValue);
+              scrollFocusedElementIntoView(nextValue);
+            }
+          }
         }
       } else if (e.keyCode === 27) {
         // ESC
@@ -264,6 +411,16 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
         e.stopPropagation();
         setOpened(false);
         onComplete?.();
+      } else if (e.keyCode === 13 || e.keyCode === 32) {
+        // Enter or Space
+        e.preventDefault();
+        e.stopPropagation();
+        if (opened && focusedValue != null) {
+          // Select focused option
+          onPicklistItemSelect(focusedValue);
+        } else {
+          setOpened((opened) => !opened);
+        }
       }
       onKeyDown_?.(e);
     });
@@ -316,6 +473,11 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
         'slds-is-disabled': disabled,
       }
     );
+    const dropdownClassNames = classnames(
+      'slds-dropdown',
+      'slds-dropdown_length-5',
+      menuSize ? `slds-dropdown_${menuSize}` : 'slds-dropdown_fluid'
+    );
 
     const formElemProps = {
       id,
@@ -332,6 +494,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       values,
       multiSelect,
       onSelect: onPicklistItemSelect,
+      focusedValue,
       optionIdPrefix,
     };
 
@@ -352,8 +515,11 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
                 aria-expanded={opened}
                 aria-haspopup='listbox'
                 aria-disabled={disabled}
+                aria-activedescendant={
+                  focusedValue ? `${optionIdPrefix}-${focusedValue}` : undefined
+                }
                 onClick={onClick}
-                onKeyDown={onKeydown}
+                onKeyDown={onKeyDown}
                 onBlur={onBlur}
                 {...rprops}
               >
@@ -367,22 +533,25 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
               </span>
             </div>
             {opened && (
-              <DropdownMenu
-                portalClassName={classnames(className, 'slds-picklist')}
-                elementRef={dropdownRef}
-                size={menuSize}
-                style={menuStyle}
-                onMenuSelect={onPicklistItemSelect}
-                onMenuClose={() => {
-                  setOpened(false);
-                  onComplete?.();
-                }}
-                onBlur={onBlur}
+              <div
+                id={listboxId}
+                className={dropdownClassNames}
+                role='listbox'
+                aria-label='Options'
+                tabIndex={0}
+                aria-busy={false}
+                ref={dropdownRef}
+                style={{ ...menuStyle, left: 0, transform: 'translate(0)' }}
               >
-                <PicklistContext.Provider value={contextValue}>
-                  {children}
-                </PicklistContext.Provider>
-              </DropdownMenu>
+                <ul
+                  className='slds-listbox slds-listbox_vertical'
+                  role='presentation'
+                >
+                  <PicklistContext.Provider value={contextValue}>
+                    {children}
+                  </PicklistContext.Provider>
+                </ul>
+              </div>
             )}
           </div>
         </div>
@@ -412,22 +581,54 @@ export const PicklistItem: FC<PicklistItemProps> = ({
   value,
   disabled,
   children,
-  ...props
 }) => {
-  const { values } = useContext(PicklistContext);
+  const { values, multiSelect, onSelect, focusedValue, optionIdPrefix } =
+    useContext(PicklistContext);
   const selected =
     selected_ ?? (value != null ? values.indexOf(value) >= 0 : false);
+  const isFocused = focusedValue === value;
+
+  const onClick = useEventCallback(() => {
+    if (!disabled && value != null) {
+      onSelect(value);
+    }
+  });
+
+  const itemClassNames = classnames(
+    'slds-media',
+    'slds-listbox__option',
+    'slds-listbox__option_plain',
+    'slds-media_small',
+    {
+      'slds-is-selected': selected,
+      'slds-has-focus': isFocused,
+    }
+  );
 
   return (
-    <DropdownMenuItem
-      icon={selected ? 'check' : 'none'}
-      role='option'
-      selected={selected}
-      disabled={disabled}
-      eventKey={value}
-      {...props}
-    >
-      {label || children}
-    </DropdownMenuItem>
+    <li role='presentation' className='slds-listbox__item'>
+      <div
+        id={value ? `${optionIdPrefix}-${value}` : undefined}
+        className={itemClassNames}
+        role='option'
+        aria-selected={selected}
+        aria-checked={multiSelect ? selected : undefined}
+        aria-disabled={disabled}
+        onClick={onClick}
+      >
+        <span className='slds-media__figure slds-listbox__option-icon'>
+          {selected && (
+            <span className='slds-icon_container slds-icon-utility-check slds-current-color'>
+              <Icon icon='check' className='slds-icon slds-icon_x-small' />
+            </span>
+          )}
+        </span>
+        <span className='slds-media__body'>
+          <span className='slds-truncate' title={String(label || children)}>
+            {label || children}
+          </span>
+        </span>
+      </div>
+    </li>
   );
 };

From e1721e433cc2023e913892ed29fdf78b1e73186a Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 17:46:25 +0900
Subject: [PATCH 170/245] (Picklit): simplify scrolling logic

---
 src/scripts/Picklist.tsx | 27 ++++-----------------------
 1 file changed, 4 insertions(+), 23 deletions(-)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index 9a98217c0..f3bcee371 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -229,27 +229,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
           return;
         }
 
-        // Calculate element position within container
-        const elementTopPosition = targetElement.offsetTop;
-        const elementBottomPosition =
-          elementTopPosition + targetElement.offsetHeight;
-
-        // Calculate currently visible area
-        const currentScrollPosition = dropdownContainer.scrollTop;
-        const visibleAreaHeight = dropdownContainer.clientHeight;
-        const visibleAreaTop = currentScrollPosition;
-        const visibleAreaBottom = currentScrollPosition + visibleAreaHeight;
-
-        // Check if element is outside the visible area
-        const isAbove = elementTopPosition < visibleAreaTop;
-        const isBelow = elementBottomPosition > visibleAreaBottom;
-
-        // Scroll only if element is not currently visible
-        if (isAbove || isBelow) {
-          targetElement.scrollIntoView({
-            block: 'center',
-          });
-        }
+        targetElement.focus();
       }
     );
 
@@ -519,8 +499,6 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
                   focusedValue ? `${optionIdPrefix}-${focusedValue}` : undefined
                 }
                 onClick={onClick}
-                onKeyDown={onKeyDown}
-                onBlur={onBlur}
                 {...rprops}
               >
                 <span className='slds-truncate'>{getSelectedItemLabel()}</span>
@@ -546,6 +524,8 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
                 <ul
                   className='slds-listbox slds-listbox_vertical'
                   role='presentation'
+                  onKeyDown={onKeyDown}
+                  onBlur={onBlur}
                 >
                   <PicklistContext.Provider value={contextValue}>
                     {children}
@@ -614,6 +594,7 @@ export const PicklistItem: FC<PicklistItemProps> = ({
         aria-selected={selected}
         aria-checked={multiSelect ? selected : undefined}
         aria-disabled={disabled}
+        tabIndex={disabled ? undefined : 0}
         onClick={onClick}
       >
         <span className='slds-media__figure slds-listbox__option-icon'>

From de9433798f57ce62fd0deba2601066f6af271429 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 19 Jun 2025 19:03:30 +0900
Subject: [PATCH 171/245] (Picklist): enable to open a picklist with `Tab` key

---
 src/scripts/Picklist.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index f3bcee371..db36e2567 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -499,6 +499,8 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
                   focusedValue ? `${optionIdPrefix}-${focusedValue}` : undefined
                 }
                 onClick={onClick}
+                onKeyDown={onKeyDown}
+                onBlur={onBlur}
                 {...rprops}
               >
                 <span className='slds-truncate'>{getSelectedItemLabel()}</span>

From 4c586c03de1b21d7dcc13b2c6ee18b3ba50c51db Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 20 Jun 2025 09:12:33 +0900
Subject: [PATCH 172/245] (Lookup): tweak keyboeard logic

---
 src/scripts/Lookup.tsx | 223 ++++++++++++++++++++++++++++-------------
 1 file changed, 153 insertions(+), 70 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index a92798151..4236045f8 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -1,14 +1,15 @@
 import React, {
   InputHTMLAttributes,
   ChangeEvent,
+  FocusEvent,
   KeyboardEvent,
   Ref,
   useRef,
-  useContext,
   useState,
   useEffect,
   ReactNode,
   useId,
+  useMemo,
   useCallback,
   FC,
 } from 'react';
@@ -17,8 +18,6 @@ import { Button } from './Button';
 import { FormElement, FormElementProps } from './FormElement';
 import { Icon, IconCategory } from './Icon';
 import { Spinner } from './Spinner';
-import { isElInChildren } from './util';
-import { ComponentSettingsContext } from './ComponentSettings';
 import { useControlledValue, useEventCallback, useMergeRefs } from './hooks';
 import { createFC } from './common';
 import { Bivariant } from './typeUtils';
@@ -56,7 +55,7 @@ type KeyHandlerConfig = {
   onNavigateDown: () => void;
   onNavigateUp: () => void;
   onSelect: () => void;
-  isIgnoreTabNavigation: () => boolean;
+  isIgnoreTabNavigation: (direction: 'forward' | 'backward') => boolean;
   onTabNavigation: (direction: 'forward' | 'backward') => void;
 };
 
@@ -106,10 +105,12 @@ const createKeyHandler = (config: KeyHandlerConfig) => {
         }
         break;
       case 9: // Tab
-        if (!isIgnoreTabNavigation()) {
+        if (!isIgnoreTabNavigation(e.shiftKey ? 'backward' : 'forward')) {
           e.preventDefault();
           e.stopPropagation();
           onTabNavigation(e.shiftKey ? 'backward' : 'forward');
+        } else {
+          onClose();
         }
         break;
     }
@@ -192,7 +193,7 @@ type LookupScopeSelectorProps = {
   scopeListboxId: string;
   getScopeOptionId: (index: number) => string;
   onScopeMenuClick: () => void;
-  onScopeBlur: () => void;
+  onScopeBlur: (e: FocusEvent) => void;
   onScopeKeyDown: (e: KeyboardEvent) => void;
   onScopeSelect: (scope: string) => void;
 };
@@ -301,6 +302,8 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
                   <ul
                     className='slds-listbox slds-listbox_vertical'
                     role='presentation'
+                    onBlur={onScopeBlur}
+                    onKeyDown={onScopeKeyDown}
                   >
                     {scopes.map((scope, index) => (
                       <li
@@ -318,6 +321,7 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
                           )}
                           role='option'
                           aria-selected={scope.label === targetScope}
+                          tabIndex={0}
                           onClick={() => onScopeSelect(scope.label)}
                         >
                           <span className='slds-media__figure slds-listbox__option-icon'>
@@ -362,9 +366,10 @@ type LookupSearchInputProps = {
   listboxId: string;
   optionIdPrefix: string;
   inputRef: Ref<HTMLInputElement>;
+  onInputClick: () => void;
   onInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
   onInputFocus: () => void;
-  onInputBlur: () => void;
+  onInputBlur: (e: FocusEvent) => void;
   onInputKeyDown: (e: KeyboardEvent) => void;
 } & Omit<
   InputHTMLAttributes<HTMLInputElement>,
@@ -384,6 +389,7 @@ const LookupSearchInput: FC<LookupSearchInputProps> = ({
   listboxId,
   optionIdPrefix,
   inputRef,
+  onInputClick,
   onInputChange,
   onInputFocus,
   onInputBlur,
@@ -433,6 +439,7 @@ const LookupSearchInput: FC<LookupSearchInputProps> = ({
         }
         autoComplete='off'
         role='combobox'
+        onClick={onInputClick}
         onChange={onInputChange}
         onFocus={onInputFocus}
         onBlur={onInputBlur}
@@ -462,6 +469,7 @@ type LookupOptionProps = {
   isFocused: boolean;
   getOptionId: (value: string) => string;
   onOptionClick: (entry: LookupEntry) => void;
+  onOptionFocus: (value: string) => void;
 };
 
 /**
@@ -472,6 +480,7 @@ const LookupOption: FC<LookupOptionProps> = ({
   isFocused,
   getOptionId,
   onOptionClick,
+  onOptionFocus,
 }) => {
   const itemClassNames = classnames(
     'slds-media',
@@ -491,6 +500,8 @@ const LookupOption: FC<LookupOptionProps> = ({
         className={itemClassNames}
         role='option'
         aria-selected={isFocused}
+        tabIndex={0}
+        onFocus={() => onOptionFocus(entry.value)}
         onClick={() => onOptionClick(entry)}
       >
         <span className='slds-media__figure slds-listbox__option-icon'>
@@ -527,11 +538,16 @@ type LookupDropdownProps = {
   listboxId: string;
   dropdownRef: Ref<HTMLDivElement>;
   listHeader?: JSX.Element;
+  listHeaderIdSeed: string;
   listFooter?: JSX.Element;
+  listFooterIdSeed: string;
   filteredData: LookupEntry[];
   focusedValue?: string;
   getOptionId: (value: string) => string;
   onOptionClick: (entry: LookupEntry) => void;
+  onOptionFocus: (value: string) => void;
+  onBlur: (e: FocusEvent) => void;
+  onKeyDown: (e: KeyboardEvent) => void;
 };
 
 /**
@@ -543,11 +559,16 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
   listboxId,
   dropdownRef,
   listHeader,
+  listHeaderIdSeed,
   listFooter,
+  listFooterIdSeed,
   filteredData,
   focusedValue,
   getOptionId,
   onOptionClick,
+  onOptionFocus,
+  onBlur,
+  onKeyDown,
 }) => {
   if (!opened) return null;
 
@@ -559,12 +580,16 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
 
   const renderListHeader = () => {
     if (!listHeader) return null;
+
     return (
       <li role='presentation' className='slds-listbox__item'>
         <div
+          id={getOptionId(listHeaderIdSeed)}
           className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity slds-listbox__option_term'
           role='option'
           aria-selected='true'
+          tabIndex={0}
+          onFocus={() => onOptionFocus(listHeaderIdSeed)}
         >
           {listHeader}
         </div>
@@ -577,8 +602,11 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
     return (
       <li role='presentation' className='slds-listbox__item'>
         <div
+          id={getOptionId(listFooterIdSeed)}
           className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity'
           role='option'
+          tabIndex={0}
+          onFocus={() => onOptionFocus(listFooterIdSeed)}
         >
           {listFooter}
         </div>
@@ -607,7 +635,12 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
       aria-busy={loading}
       ref={dropdownRef}
     >
-      <ul className='slds-listbox slds-listbox_vertical' role='presentation'>
+      <ul
+        className='slds-listbox slds-listbox_vertical'
+        role='presentation'
+        onKeyDown={onKeyDown}
+        onBlur={onBlur}
+      >
         {renderListHeader()}
         {filteredData.map((entry) => (
           <LookupOption
@@ -616,6 +649,7 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
             isFocused={focusedValue === entry.value}
             getOptionId={getOptionId}
             onOptionClick={onOptionClick}
+            onOptionFocus={onOptionFocus}
           />
         ))}
         {renderLoadingSpinner()}
@@ -731,7 +765,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     } = props;
 
     const fallbackId = useId();
-    const comboboxId = id_ && `${fallbackId}-combobox`;
+    const comboboxId = id_ ?? `${fallbackId}-combobox`;
     const listboxId = `${fallbackId}-listbox`;
 
     const optionIdPrefix = `${comboboxId}-option`;
@@ -766,15 +800,35 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     const [scopeOpened, setScopeOpened] = useState(false);
     const [scopeFocusedIndex, setScopeFocusedIndex] = useState<number>(-1);
 
-    const { getActiveElement } = useContext(ComponentSettingsContext);
+    const listHeaderIdSeed = useMemo(
+      () => [...data.map((entry) => entry.value), 'header'].join('-'),
+      [data]
+    );
+    const listFooterIdSeed = useMemo(
+      () => [...data.map((entry) => entry.value), 'footer'].join('-'),
+      [data]
+    );
 
     // Get option values from data
     const getOptionValues = useCallback(() => {
       const filteredData = lookupFilter
         ? data.filter((entry) => lookupFilter(entry, searchText, targetScope))
         : data;
-      return filteredData.map((entry) => entry.value);
-    }, [data, lookupFilter, searchText, targetScope]);
+      return [
+        listHeader ? listHeaderIdSeed : undefined,
+        ...filteredData.map((entry) => entry.value),
+        listFooter ? listFooterIdSeed : undefined,
+      ].filter((value) => value !== undefined);
+    }, [
+      data,
+      lookupFilter,
+      searchText,
+      targetScope,
+      listHeader,
+      listHeaderIdSeed,
+      listFooter,
+      listFooterIdSeed,
+    ]);
 
     // Get next option value for keyboard navigation
     const getNextValue = useCallback(
@@ -806,37 +860,6 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       [getOptionValues]
     );
 
-    // Common scroll utility
-    const scrollElementIntoView = useEventCallback(
-      (container: Element, targetElement: Element) => {
-        if (!(targetElement instanceof HTMLElement)) {
-          return;
-        }
-
-        // Calculate element position within container
-        const elementTopPosition = targetElement.offsetTop;
-        const elementBottomPosition =
-          elementTopPosition + targetElement.offsetHeight;
-
-        // Calculate currently visible area
-        const currentScrollPosition = container.scrollTop;
-        const visibleAreaHeight = container.clientHeight;
-        const visibleAreaTop = currentScrollPosition;
-        const visibleAreaBottom = currentScrollPosition + visibleAreaHeight;
-
-        // Check if element is outside the visible area
-        const isAbove = elementTopPosition < visibleAreaTop;
-        const isBelow = elementBottomPosition > visibleAreaBottom;
-
-        // Scroll only if element is not currently visible
-        if (isAbove || isBelow) {
-          targetElement.scrollIntoView({
-            block: 'center',
-          });
-        }
-      }
-    );
-
     // Scroll focused element into view
     const scrollFocusedElementIntoView = useEventCallback(
       (nextFocusedValue: string | undefined) => {
@@ -849,9 +872,11 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
           `#${CSS.escape(getOptionId(nextFocusedValue))}`
         );
 
-        if (targetElement) {
-          scrollElementIntoView(dropdownContainer, targetElement);
+        if (!(targetElement instanceof HTMLElement)) {
+          return;
         }
+
+        targetElement.focus();
       }
     );
 
@@ -871,9 +896,11 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
           `#${CSS.escape(getScopeOptionId(nextFocusedIndex))}`
         );
 
-        if (targetElement) {
-          scrollElementIntoView(scopeDropdown, targetElement);
+        if (!(targetElement instanceof HTMLElement)) {
+          return;
         }
+
+        targetElement.focus();
       }
     );
 
@@ -891,14 +918,6 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     const dropdownElRef = useRef<HTMLDivElement | null>(null);
     const dropdownRef = useMergeRefs([dropdownElRef, dropdownRef_]);
 
-    const isFocusedInComponent = useEventCallback(() => {
-      const targetEl = getActiveElement();
-      return (
-        isElInChildren(elRef.current, targetEl) ||
-        isElInChildren(dropdownElRef.current, targetEl)
-      );
-    });
-
     const onSelect = useEventCallback((selectedEntry: LookupEntry | null) => {
       const currValue = selectedEntry?.value ?? null;
       setValue(currValue);
@@ -916,28 +935,42 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       }
     });
 
+    const onInputClick = useEventCallback(() => {
+      onFocus_?.();
+    });
+
     const onInputChange = useEventCallback(
       (e: ChangeEvent<HTMLInputElement>) => {
         const newSearchText = e.target.value;
         onSearchTextChange(newSearchText);
+
+        setOpened(true);
+        onLookupRequest_?.(newSearchText);
       }
     );
 
     const onInputFocus = useEventCallback(() => {
       onFocus_?.();
-      if (searchText && !opened) {
-        setOpened(true);
-        onLookupRequest_?.(searchText);
-      }
     });
 
-    const onInputBlur = useEventCallback(() => {
-      setTimeout(() => {
-        if (!isFocusedInComponent()) {
-          setOpened(false);
-          onBlur_?.();
-          onComplete?.(true);
+    const onInputBlur = useEventCallback((e: FocusEvent) => {
+      if (e.relatedTarget !== null) {
+        const prevValue = getPrevValue(focusedValue);
+        const nextValue = getNextValue(focusedValue);
+
+        if (
+          (prevValue && e.relatedTarget.id === getOptionId(prevValue)) ||
+          (nextValue && e.relatedTarget.id === getOptionId(nextValue))
+        ) {
+          // catch keyborad event
+          return;
         }
+      }
+
+      setTimeout(() => {
+        setOpened(false);
+        onBlur_?.();
+        onComplete?.(true);
       }, 10);
     });
 
@@ -978,8 +1011,17 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
             onLookupRequest_?.(searchText);
           }
         },
-        isIgnoreTabNavigation: () => {
-          return focusedValue === undefined;
+        isIgnoreTabNavigation: (direction) => {
+          const optionValues = getOptionValues();
+          const currentIndex = focusedValue
+            ? optionValues.indexOf(focusedValue)
+            : -1;
+
+          return (
+            currentIndex === -1 ||
+            (direction === 'backward' && currentIndex <= 0) ||
+            (direction === 'forward' && currentIndex >= optionValues.length - 1)
+          );
         },
         onTabNavigation: (direction) => {
           const optionValues = getOptionValues();
@@ -1019,6 +1061,10 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       }, 10);
     });
 
+    const onOptionFocus = useEventCallback((value: string) => {
+      setFocusedValue(value);
+    });
+
     const onRemoveSelection = useEventCallback(() => {
       onSelect(null);
       setSearchText('');
@@ -1076,8 +1122,16 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
             setScopeOpened(!scopeOpened);
           }
         },
-        isIgnoreTabNavigation: () => {
-          return scopeFocusedIndex === -1;
+        isIgnoreTabNavigation: (direction) => {
+          if (!scopes) {
+            return false;
+          }
+
+          return (
+            scopeFocusedIndex === -1 ||
+            (direction === 'backward' && scopeFocusedIndex <= 0) ||
+            (direction === 'forward' && scopeFocusedIndex >= scopes.length - 1)
+          );
         },
         onTabNavigation: (direction) => {
           if (!scopes) return;
@@ -1107,7 +1161,24 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       })
     );
 
-    const onScopeBlur = useEventCallback(() => {
+    const onScopeBlur = useEventCallback((e: FocusEvent) => {
+      if (e.relatedTarget !== null) {
+        if (!scopes) {
+          return;
+        }
+
+        const prevIndex = Math.max(scopeFocusedIndex - 1, 0);
+        const nextIndex = Math.min(scopeFocusedIndex + 1, scopes.length - 1);
+
+        if (
+          e.relatedTarget.id === getScopeOptionId(prevIndex) ||
+          e.relatedTarget.id === getScopeOptionId(nextIndex)
+        ) {
+          // catch keyborad event
+          return;
+        }
+      }
+
       setTimeout(() => {
         setScopeOpened(false);
       }, 10);
@@ -1196,6 +1267,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
                     listboxId={listboxId}
                     optionIdPrefix={optionIdPrefix}
                     inputRef={inputRef}
+                    onInputClick={onInputClick}
                     onInputChange={onInputChange}
                     onInputFocus={onInputFocus}
                     onInputBlur={onInputBlur}
@@ -1207,11 +1279,16 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
                     listboxId={listboxId}
                     dropdownRef={dropdownRef}
                     listHeader={listHeader}
+                    listHeaderIdSeed={listHeaderIdSeed}
                     listFooter={listFooter}
+                    listFooterIdSeed={listFooterIdSeed}
                     filteredData={filteredData}
                     focusedValue={focusedValue}
                     getOptionId={getOptionId}
                     onOptionClick={onOptionClick}
+                    onOptionFocus={onOptionFocus}
+                    onBlur={onInputBlur}
+                    onKeyDown={onInputKeyDown}
                   />
                 </div>
               </div>
@@ -1237,6 +1314,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
               listboxId={listboxId}
               optionIdPrefix={optionIdPrefix}
               inputRef={inputRef}
+              onInputClick={onInputClick}
               onInputChange={onInputChange}
               onInputFocus={onInputFocus}
               onInputBlur={onInputBlur}
@@ -1248,11 +1326,16 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
               listboxId={listboxId}
               dropdownRef={dropdownRef}
               listHeader={listHeader}
+              listHeaderIdSeed={listHeaderIdSeed}
               listFooter={listFooter}
+              listFooterIdSeed={listFooterIdSeed}
               filteredData={filteredData}
               focusedValue={focusedValue}
               getOptionId={getOptionId}
               onOptionClick={onOptionClick}
+              onOptionFocus={onOptionFocus}
+              onBlur={onInputBlur}
+              onKeyDown={onInputKeyDown}
             />
           </div>
         </div>

From bf62197d2143abc7490b90bf1b599d4a9fc62305 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 20 Jun 2025 09:17:58 +0900
Subject: [PATCH 173/245] (Lookup): put divided components directly

---
 src/scripts/Lookup.tsx | 84 +++++++++++++++++-------------------------
 1 file changed, 34 insertions(+), 50 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 4236045f8..1644d30a7 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -578,53 +578,6 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
     'slds-dropdown_fluid'
   );
 
-  const renderListHeader = () => {
-    if (!listHeader) return null;
-
-    return (
-      <li role='presentation' className='slds-listbox__item'>
-        <div
-          id={getOptionId(listHeaderIdSeed)}
-          className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity slds-listbox__option_term'
-          role='option'
-          aria-selected='true'
-          tabIndex={0}
-          onFocus={() => onOptionFocus(listHeaderIdSeed)}
-        >
-          {listHeader}
-        </div>
-      </li>
-    );
-  };
-
-  const renderListFooter = () => {
-    if (!listFooter) return null;
-    return (
-      <li role='presentation' className='slds-listbox__item'>
-        <div
-          id={getOptionId(listFooterIdSeed)}
-          className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity'
-          role='option'
-          tabIndex={0}
-          onFocus={() => onOptionFocus(listFooterIdSeed)}
-        >
-          {listFooter}
-        </div>
-      </li>
-    );
-  };
-
-  const renderLoadingSpinner = () => {
-    if (!loading) return null;
-    return (
-      <li role='option' className='slds-listbox__item'>
-        <div className='slds-align_absolute-center slds-p-top_medium'>
-          <Spinner container={false} size='x-small' layout='inline' />
-        </div>
-      </li>
-    );
-  };
-
   return (
     <div
       id={listboxId}
@@ -641,7 +594,20 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
         onKeyDown={onKeyDown}
         onBlur={onBlur}
       >
-        {renderListHeader()}
+        {listHeader ? (
+          <li role='presentation' className='slds-listbox__item'>
+            <div
+              id={getOptionId(listHeaderIdSeed)}
+              className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity slds-listbox__option_term'
+              role='option'
+              aria-selected='true'
+              tabIndex={0}
+              onFocus={() => onOptionFocus(listHeaderIdSeed)}
+            >
+              {listHeader}
+            </div>
+          </li>
+        ) : null}
         {filteredData.map((entry) => (
           <LookupOption
             key={entry.value}
@@ -652,8 +618,26 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
             onOptionFocus={onOptionFocus}
           />
         ))}
-        {renderLoadingSpinner()}
-        {renderListFooter()}
+        {loading ? (
+          <li role='option' className='slds-listbox__item'>
+            <div className='slds-align_absolute-center slds-p-top_medium'>
+              <Spinner container={false} size='x-small' layout='inline' />
+            </div>
+          </li>
+        ) : null}
+        {listFooter ? (
+          <li role='presentation' className='slds-listbox__item'>
+            <div
+              id={getOptionId(listFooterIdSeed)}
+              className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity'
+              role='option'
+              tabIndex={0}
+              onFocus={() => onOptionFocus(listFooterIdSeed)}
+            >
+              {listFooter}
+            </div>
+          </li>
+        ) : null}
       </ul>
     </div>
   );

From 2078825d7a6fc25e4384c46e13961b4c46327cab Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 20 Jun 2025 09:22:20 +0900
Subject: [PATCH 174/245] (Lookup): rename `isIgnoreTabNavigation` with
 `isTabNavigationIgnored`

---
 src/scripts/Lookup.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 1644d30a7..90038f678 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -55,7 +55,7 @@ type KeyHandlerConfig = {
   onNavigateDown: () => void;
   onNavigateUp: () => void;
   onSelect: () => void;
-  isIgnoreTabNavigation: (direction: 'forward' | 'backward') => boolean;
+  isTabNavigationIgnored: (direction: 'forward' | 'backward') => boolean;
   onTabNavigation: (direction: 'forward' | 'backward') => void;
 };
 
@@ -71,7 +71,7 @@ const createKeyHandler = (config: KeyHandlerConfig) => {
       onNavigateDown,
       onNavigateUp,
       onSelect,
-      isIgnoreTabNavigation,
+      isTabNavigationIgnored,
       onTabNavigation,
     } = config;
 
@@ -105,7 +105,7 @@ const createKeyHandler = (config: KeyHandlerConfig) => {
         }
         break;
       case 9: // Tab
-        if (!isIgnoreTabNavigation(e.shiftKey ? 'backward' : 'forward')) {
+        if (!isTabNavigationIgnored(e.shiftKey ? 'backward' : 'forward')) {
           e.preventDefault();
           e.stopPropagation();
           onTabNavigation(e.shiftKey ? 'backward' : 'forward');
@@ -995,7 +995,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
             onLookupRequest_?.(searchText);
           }
         },
-        isIgnoreTabNavigation: (direction) => {
+        isTabNavigationIgnored: (direction) => {
           const optionValues = getOptionValues();
           const currentIndex = focusedValue
             ? optionValues.indexOf(focusedValue)
@@ -1106,7 +1106,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
             setScopeOpened(!scopeOpened);
           }
         },
-        isIgnoreTabNavigation: (direction) => {
+        isTabNavigationIgnored: (direction) => {
           if (!scopes) {
             return false;
           }

From 4ef6024ef20438f175294f7dd4ea3ff9f7ad0746 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 20 Jun 2025 09:25:32 +0900
Subject: [PATCH 175/245] (Lookup): reimplement `createKeyHandler()` with a
 hook

---
 src/scripts/Lookup.tsx | 292 ++++++++++++++++++++---------------------
 1 file changed, 144 insertions(+), 148 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 90038f678..2d306f63b 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -60,10 +60,10 @@ type KeyHandlerConfig = {
 };
 
 /**
- * Creates a keyboard event handler for lookup components
+ * Custom hook for keyboard event handling in lookup components
  */
-const createKeyHandler = (config: KeyHandlerConfig) => {
-  return (e: KeyboardEvent) => {
+const useKeyHandler = (config: KeyHandlerConfig) => {
+  return useEventCallback((e: KeyboardEvent) => {
     const {
       opened,
       onOpen,
@@ -114,7 +114,7 @@ const createKeyHandler = (config: KeyHandlerConfig) => {
         }
         break;
     }
-  };
+  });
 };
 
 /**
@@ -958,83 +958,81 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       }, 10);
     });
 
-    const onInputKeyDown = useEventCallback(
-      createKeyHandler({
-        type: 'search',
-        opened,
-        onOpen: () => {
+    const onInputKeyDown = useKeyHandler({
+      type: 'search',
+      opened,
+      onOpen: () => {
+        setOpened(true);
+        onLookupRequest_?.(searchText);
+      },
+      onClose: () => {
+        setOpened(false);
+        onComplete?.(true);
+      },
+      onNavigateDown: () => {
+        const nextValue = getNextValue(focusedValue);
+        setFocusedValue(nextValue);
+        scrollFocusedElementIntoView(nextValue);
+      },
+      onNavigateUp: () => {
+        const prevValue = getPrevValue(focusedValue);
+        setFocusedValue(prevValue);
+        scrollFocusedElementIntoView(prevValue);
+      },
+      onSelect: () => {
+        if (opened && focusedValue) {
+          const selectedEntry = data.find(
+            (entry) => entry.value === focusedValue
+          );
+          if (selectedEntry) {
+            onSelect(selectedEntry);
+            setOpened(false);
+            onComplete?.();
+          }
+        } else if (searchText) {
           setOpened(true);
           onLookupRequest_?.(searchText);
-        },
-        onClose: () => {
-          setOpened(false);
-          onComplete?.(true);
-        },
-        onNavigateDown: () => {
-          const nextValue = getNextValue(focusedValue);
-          setFocusedValue(nextValue);
-          scrollFocusedElementIntoView(nextValue);
-        },
-        onNavigateUp: () => {
-          const prevValue = getPrevValue(focusedValue);
-          setFocusedValue(prevValue);
-          scrollFocusedElementIntoView(prevValue);
-        },
-        onSelect: () => {
-          if (opened && focusedValue) {
-            const selectedEntry = data.find(
-              (entry) => entry.value === focusedValue
-            );
-            if (selectedEntry) {
-              onSelect(selectedEntry);
-              setOpened(false);
-              onComplete?.();
-            }
-          } else if (searchText) {
-            setOpened(true);
-            onLookupRequest_?.(searchText);
+        }
+      },
+      isTabNavigationIgnored: (direction) => {
+        const optionValues = getOptionValues();
+        const currentIndex = focusedValue
+          ? optionValues.indexOf(focusedValue)
+          : -1;
+
+        return (
+          currentIndex === -1 ||
+          (direction === 'backward' && currentIndex <= 0) ||
+          (direction === 'forward' && currentIndex >= optionValues.length - 1)
+        );
+      },
+      onTabNavigation: (direction) => {
+        const optionValues = getOptionValues();
+        const currentIndex = focusedValue
+          ? optionValues.indexOf(focusedValue)
+          : -1;
+
+        if (direction === 'backward') {
+          if (currentIndex <= 0) {
+            setOpened(false);
+            onComplete?.();
+          } else {
+            const prevValue = getPrevValue(focusedValue);
+            setFocusedValue(prevValue);
+            scrollFocusedElementIntoView(prevValue);
           }
-        },
-        isTabNavigationIgnored: (direction) => {
-          const optionValues = getOptionValues();
-          const currentIndex = focusedValue
-            ? optionValues.indexOf(focusedValue)
-            : -1;
-
-          return (
-            currentIndex === -1 ||
-            (direction === 'backward' && currentIndex <= 0) ||
-            (direction === 'forward' && currentIndex >= optionValues.length - 1)
-          );
-        },
-        onTabNavigation: (direction) => {
-          const optionValues = getOptionValues();
-          const currentIndex = focusedValue
-            ? optionValues.indexOf(focusedValue)
-            : -1;
-
-          if (direction === 'backward') {
-            if (currentIndex <= 0) {
-              setOpened(false);
-              onComplete?.();
-            } else {
-              const prevValue = getPrevValue(focusedValue);
-              setFocusedValue(prevValue);
-              scrollFocusedElementIntoView(prevValue);
-            }
+        } else {
+          if (currentIndex >= optionValues.length - 1) {
+            setOpened(false);
+            onComplete?.();
           } else {
-            if (currentIndex >= optionValues.length - 1) {
-              setOpened(false);
-              onComplete?.();
-            } else {
-              const nextValue = getNextValue(focusedValue);
-              setFocusedValue(nextValue);
-              scrollFocusedElementIntoView(nextValue);
-            }
+            const nextValue = getNextValue(focusedValue);
+            setFocusedValue(nextValue);
+            scrollFocusedElementIntoView(nextValue);
           }
-        },
-      })
-    );
+        }
+      },
+    });
 
     const onOptionClick = useEventCallback((entry: LookupEntry) => {
       onSelect(entry);
@@ -1068,82 +1066,80 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       onScopeMenuClick_?.();
     });
 
-    const onScopeKeyDown = useEventCallback(
-      createKeyHandler({
-        type: 'scope',
-        opened: scopeOpened,
-        onOpen: () => {
-          if (!scopes) return;
-          setScopeOpened(true);
-          setScopeFocusedIndex(0);
-        },
-        onClose: () => {
-          setScopeOpened(false);
-          setScopeFocusedIndex(-1);
-        },
-        onNavigateDown: () => {
-          if (!scopes) return;
-          const nextIndex = Math.min(scopeFocusedIndex + 1, scopes.length - 1);
-          setScopeFocusedIndex(nextIndex);
-          scrollFocusedScopeIntoView(nextIndex);
-        },
-        onNavigateUp: () => {
-          if (!scopes) return;
-          const prevIndex = Math.max(scopeFocusedIndex - 1, 0);
-          setScopeFocusedIndex(prevIndex);
-          scrollFocusedScopeIntoView(prevIndex);
-        },
-        onSelect: () => {
-          if (!scopes) return;
-          if (scopeOpened && scopeFocusedIndex >= 0) {
-            const selectedScope = scopes[scopeFocusedIndex];
-            if (selectedScope) {
-              onScopeSelect(selectedScope.label);
-              setScopeOpened(false);
-              setScopeFocusedIndex(-1);
-            }
-          } else {
-            setScopeOpened(!scopeOpened);
-          }
-        },
-        isTabNavigationIgnored: (direction) => {
-          if (!scopes) {
-            return false;
+    const onScopeKeyDown = useKeyHandler({
+      type: 'scope',
+      opened: scopeOpened,
+      onOpen: () => {
+        if (!scopes) return;
+        setScopeOpened(true);
+        setScopeFocusedIndex(0);
+      },
+      onClose: () => {
+        setScopeOpened(false);
+        setScopeFocusedIndex(-1);
+      },
+      onNavigateDown: () => {
+        if (!scopes) return;
+        const nextIndex = Math.min(scopeFocusedIndex + 1, scopes.length - 1);
+        setScopeFocusedIndex(nextIndex);
+        scrollFocusedScopeIntoView(nextIndex);
+      },
+      onNavigateUp: () => {
+        if (!scopes) return;
+        const prevIndex = Math.max(scopeFocusedIndex - 1, 0);
+        setScopeFocusedIndex(prevIndex);
+        scrollFocusedScopeIntoView(prevIndex);
+      },
+      onSelect: () => {
+        if (!scopes) return;
+        if (scopeOpened && scopeFocusedIndex >= 0) {
+          const selectedScope = scopes[scopeFocusedIndex];
+          if (selectedScope) {
+            onScopeSelect(selectedScope.label);
+            setScopeOpened(false);
+            setScopeFocusedIndex(-1);
           }
+        } else {
+          setScopeOpened(!scopeOpened);
+        }
+      },
+      isTabNavigationIgnored: (direction) => {
+        if (!scopes) {
+          return false;
+        }
 
-          return (
-            scopeFocusedIndex === -1 ||
-            (direction === 'backward' && scopeFocusedIndex <= 0) ||
-            (direction === 'forward' && scopeFocusedIndex >= scopes.length - 1)
-          );
-        },
-        onTabNavigation: (direction) => {
-          if (!scopes) return;
-          if (direction === 'backward') {
-            if (scopeFocusedIndex <= 0) {
-              setScopeOpened(false);
-              setScopeFocusedIndex(-1);
-            } else {
-              const prevIndex = Math.max(scopeFocusedIndex - 1, 0);
-              setScopeFocusedIndex(prevIndex);
-              scrollFocusedScopeIntoView(prevIndex);
-            }
+        return (
+          scopeFocusedIndex === -1 ||
+          (direction === 'backward' && scopeFocusedIndex <= 0) ||
+          (direction === 'forward' && scopeFocusedIndex >= scopes.length - 1)
+        );
+      },
+      onTabNavigation: (direction) => {
+        if (!scopes) return;
+        if (direction === 'backward') {
+          if (scopeFocusedIndex <= 0) {
+            setScopeOpened(false);
+            setScopeFocusedIndex(-1);
           } else {
-            if (scopeFocusedIndex >= scopes.length - 1) {
-              setScopeOpened(false);
-              setScopeFocusedIndex(-1);
-            } else {
-              const nextIndex = Math.min(
-                scopeFocusedIndex + 1,
-                scopes.length - 1
-              );
-              setScopeFocusedIndex(nextIndex);
-              scrollFocusedScopeIntoView(nextIndex);
-            }
+            const prevIndex = Math.max(scopeFocusedIndex - 1, 0);
+            setScopeFocusedIndex(prevIndex);
+            scrollFocusedScopeIntoView(prevIndex);
           }
-        },
-      })
-    );
+        } else {
+          if (scopeFocusedIndex >= scopes.length - 1) {
+            setScopeOpened(false);
+            setScopeFocusedIndex(-1);
+          } else {
+            const nextIndex = Math.min(
+              scopeFocusedIndex + 1,
+              scopes.length - 1
+            );
+            setScopeFocusedIndex(nextIndex);
+            scrollFocusedScopeIntoView(nextIndex);
+          }
+        }
+      },
+    });
 
     const onScopeBlur = useEventCallback((e: FocusEvent) => {
       if (e.relatedTarget !== null) {

From 3664759912dff6d4409d4994aa9d6a860c9520ee Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 20 Jun 2025 10:38:24 +0900
Subject: [PATCH 176/245] (Lookup): (scope) mitigate re-rendering by
 capsulating state changes

---
 src/scripts/Lookup.tsx | 294 ++++++++++++++++++++---------------------
 1 file changed, 141 insertions(+), 153 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 2d306f63b..cd7aa3fb5 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -187,15 +187,11 @@ const LookupSelectedState: FC<LookupSelectedStateProps> = ({
 type LookupScopeSelectorProps = {
   scopes: LookupScope[];
   targetScope?: string;
-  scopeOpened: boolean;
-  scopeFocusedIndex: number;
   disabled?: boolean;
   scopeListboxId: string;
   getScopeOptionId: (index: number) => string;
-  onScopeMenuClick: () => void;
-  onScopeBlur: (e: FocusEvent) => void;
-  onScopeKeyDown: (e: KeyboardEvent) => void;
-  onScopeSelect: (scope: string) => void;
+  onScopeMenuClick?: () => void;
+  onScopeSelect?: (scope: string) => void;
 };
 
 /**
@@ -204,18 +200,146 @@ type LookupScopeSelectorProps = {
 const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
   scopes,
   targetScope,
-  scopeOpened,
-  scopeFocusedIndex,
   disabled,
   scopeListboxId,
   getScopeOptionId,
-  onScopeMenuClick,
-  onScopeBlur,
-  onScopeKeyDown,
-  onScopeSelect,
+  onScopeMenuClick: onScopeMenuClick_,
+  onScopeSelect: onScopeSelect_,
 }) => {
+  const [scopeOpened, setScopeOpened] = useState(false);
+  const [scopeFocusedIndex, setScopeFocusedIndex] = useState<number>(-1);
+
   const currentScope = scopes.find((scope) => scope.label === targetScope);
 
+  // Scroll focused scope element into view
+  const scrollFocusedScopeIntoView = useEventCallback(
+    (nextFocusedIndex: number) => {
+      if (nextFocusedIndex < 0 || !scopes) {
+        return;
+      }
+
+      const scopeDropdown = document.getElementById(scopeListboxId);
+      if (!scopeDropdown) {
+        return;
+      }
+
+      const targetElement = scopeDropdown.querySelector(
+        `#${CSS.escape(getScopeOptionId(nextFocusedIndex))}`
+      );
+
+      if (!(targetElement instanceof HTMLElement)) {
+        return;
+      }
+
+      targetElement.focus();
+    }
+  );
+
+  const onScopeSelect = useEventCallback((scope: string) => {
+    setScopeOpened(false);
+    onScopeSelect_?.(scope);
+  });
+
+  const onScopeMenuClick = useEventCallback(() => {
+    setScopeOpened(!scopeOpened);
+    onScopeMenuClick_?.();
+  });
+
+  const onScopeKeyDown = useKeyHandler({
+    type: 'scope',
+    opened: scopeOpened,
+    onOpen: () => {
+      if (!scopes) return;
+      setScopeOpened(true);
+      setScopeFocusedIndex(0);
+    },
+    onClose: () => {
+      setScopeOpened(false);
+      setScopeFocusedIndex(-1);
+    },
+    onNavigateDown: () => {
+      if (!scopes) return;
+      const nextIndex = Math.min(scopeFocusedIndex + 1, scopes.length - 1);
+      setScopeFocusedIndex(nextIndex);
+      scrollFocusedScopeIntoView(nextIndex);
+    },
+    onNavigateUp: () => {
+      if (!scopes) return;
+      const prevIndex = Math.max(scopeFocusedIndex - 1, 0);
+      setScopeFocusedIndex(prevIndex);
+      scrollFocusedScopeIntoView(prevIndex);
+    },
+    onSelect: () => {
+      if (!scopes) return;
+      if (scopeOpened && scopeFocusedIndex >= 0) {
+        const selectedScope = scopes[scopeFocusedIndex];
+        if (selectedScope) {
+          onScopeSelect(selectedScope.label);
+          setScopeOpened(false);
+          setScopeFocusedIndex(-1);
+        }
+      } else {
+        setScopeOpened(!scopeOpened);
+      }
+    },
+    isTabNavigationIgnored: (direction) => {
+      if (!scopes) {
+        return false;
+      }
+
+      return (
+        scopeFocusedIndex === -1 ||
+        (direction === 'backward' && scopeFocusedIndex <= 0) ||
+        (direction === 'forward' && scopeFocusedIndex >= scopes.length - 1)
+      );
+    },
+    onTabNavigation: (direction) => {
+      if (!scopes) return;
+      if (direction === 'backward') {
+        if (scopeFocusedIndex <= 0) {
+          setScopeOpened(false);
+          setScopeFocusedIndex(-1);
+        } else {
+          const prevIndex = Math.max(scopeFocusedIndex - 1, 0);
+          setScopeFocusedIndex(prevIndex);
+          scrollFocusedScopeIntoView(prevIndex);
+        }
+      } else {
+        if (scopeFocusedIndex >= scopes.length - 1) {
+          setScopeOpened(false);
+          setScopeFocusedIndex(-1);
+        } else {
+          const nextIndex = Math.min(scopeFocusedIndex + 1, scopes.length - 1);
+          setScopeFocusedIndex(nextIndex);
+          scrollFocusedScopeIntoView(nextIndex);
+        }
+      }
+    },
+  });
+
+  const onScopeBlur = useEventCallback((e: FocusEvent) => {
+    if (e.relatedTarget !== null) {
+      if (!scopes) {
+        return;
+      }
+
+      const prevIndex = Math.max(scopeFocusedIndex - 1, 0);
+      const nextIndex = Math.min(scopeFocusedIndex + 1, scopes.length - 1);
+
+      if (
+        e.relatedTarget.id === getScopeOptionId(prevIndex) ||
+        e.relatedTarget.id === getScopeOptionId(nextIndex)
+      ) {
+        // catch keyborad event
+        return;
+      }
+    }
+
+    setTimeout(() => {
+      setScopeOpened(false);
+    }, 10);
+  });
+
   return (
     <div className='slds-combobox_object-switcher slds-combobox-addon_start'>
       <div className='slds-form-element'>
@@ -781,8 +905,6 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
         (scopes && scopes.length > 0 ? scopes[0].label : undefined)
     );
     const [focusedValue, setFocusedValue] = useState<string | undefined>();
-    const [scopeOpened, setScopeOpened] = useState(false);
-    const [scopeFocusedIndex, setScopeFocusedIndex] = useState<number>(-1);
 
     const listHeaderIdSeed = useMemo(
       () => [...data.map((entry) => entry.value), 'header'].join('-'),
@@ -864,30 +986,6 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       }
     );
 
-    // Scroll focused scope element into view
-    const scrollFocusedScopeIntoView = useEventCallback(
-      (nextFocusedIndex: number) => {
-        if (nextFocusedIndex < 0 || !scopes) {
-          return;
-        }
-
-        const scopeDropdown = document.getElementById(scopeListboxId);
-        if (!scopeDropdown) {
-          return;
-        }
-
-        const targetElement = scopeDropdown.querySelector(
-          `#${CSS.escape(getScopeOptionId(nextFocusedIndex))}`
-        );
-
-        if (!(targetElement instanceof HTMLElement)) {
-          return;
-        }
-
-        targetElement.focus();
-      }
-    );
-
     // Set initial focus when dropdown opens
     useEffect(() => {
       if (!opened) {
@@ -1055,115 +1153,6 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       }, 10);
     });
 
-    const onScopeSelect = useEventCallback((scope: string) => {
-      setTargetScope(scope);
-      setScopeOpened(false);
-      onScopeSelect_?.(scope);
-    });
-
-    const onScopeMenuClick = useEventCallback(() => {
-      setScopeOpened(!scopeOpened);
-      onScopeMenuClick_?.();
-    });
-
-    const onScopeKeyDown = useKeyHandler({
-      type: 'scope',
-      opened: scopeOpened,
-      onOpen: () => {
-        if (!scopes) return;
-        setScopeOpened(true);
-        setScopeFocusedIndex(0);
-      },
-      onClose: () => {
-        setScopeOpened(false);
-        setScopeFocusedIndex(-1);
-      },
-      onNavigateDown: () => {
-        if (!scopes) return;
-        const nextIndex = Math.min(scopeFocusedIndex + 1, scopes.length - 1);
-        setScopeFocusedIndex(nextIndex);
-        scrollFocusedScopeIntoView(nextIndex);
-      },
-      onNavigateUp: () => {
-        if (!scopes) return;
-        const prevIndex = Math.max(scopeFocusedIndex - 1, 0);
-        setScopeFocusedIndex(prevIndex);
-        scrollFocusedScopeIntoView(prevIndex);
-      },
-      onSelect: () => {
-        if (!scopes) return;
-        if (scopeOpened && scopeFocusedIndex >= 0) {
-          const selectedScope = scopes[scopeFocusedIndex];
-          if (selectedScope) {
-            onScopeSelect(selectedScope.label);
-            setScopeOpened(false);
-            setScopeFocusedIndex(-1);
-          }
-        } else {
-          setScopeOpened(!scopeOpened);
-        }
-      },
-      isTabNavigationIgnored: (direction) => {
-        if (!scopes) {
-          return false;
-        }
-
-        return (
-          scopeFocusedIndex === -1 ||
-          (direction === 'backward' && scopeFocusedIndex <= 0) ||
-          (direction === 'forward' && scopeFocusedIndex >= scopes.length - 1)
-        );
-      },
-      onTabNavigation: (direction) => {
-        if (!scopes) return;
-        if (direction === 'backward') {
-          if (scopeFocusedIndex <= 0) {
-            setScopeOpened(false);
-            setScopeFocusedIndex(-1);
-          } else {
-            const prevIndex = Math.max(scopeFocusedIndex - 1, 0);
-            setScopeFocusedIndex(prevIndex);
-            scrollFocusedScopeIntoView(prevIndex);
-          }
-        } else {
-          if (scopeFocusedIndex >= scopes.length - 1) {
-            setScopeOpened(false);
-            setScopeFocusedIndex(-1);
-          } else {
-            const nextIndex = Math.min(
-              scopeFocusedIndex + 1,
-              scopes.length - 1
-            );
-            setScopeFocusedIndex(nextIndex);
-            scrollFocusedScopeIntoView(nextIndex);
-          }
-        }
-      },
-    });
-
-    const onScopeBlur = useEventCallback((e: FocusEvent) => {
-      if (e.relatedTarget !== null) {
-        if (!scopes) {
-          return;
-        }
-
-        const prevIndex = Math.max(scopeFocusedIndex - 1, 0);
-        const nextIndex = Math.min(scopeFocusedIndex + 1, scopes.length - 1);
-
-        if (
-          e.relatedTarget.id === getScopeOptionId(prevIndex) ||
-          e.relatedTarget.id === getScopeOptionId(nextIndex)
-        ) {
-          // catch keyborad event
-          return;
-        }
-      }
-
-      setTimeout(() => {
-        setScopeOpened(false);
-      }, 10);
-    });
-
     const hasSelection = selected != null;
 
     const containerClassNames = classnames(
@@ -1224,15 +1213,14 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
               <LookupScopeSelector
                 scopes={scopes}
                 targetScope={targetScope}
-                scopeOpened={scopeOpened}
-                scopeFocusedIndex={scopeFocusedIndex}
                 disabled={disabled}
                 scopeListboxId={scopeListboxId}
                 getScopeOptionId={getScopeOptionId}
-                onScopeMenuClick={onScopeMenuClick}
-                onScopeBlur={onScopeBlur}
-                onScopeKeyDown={onScopeKeyDown}
-                onScopeSelect={onScopeSelect}
+                onScopeMenuClick={onScopeMenuClick_}
+                onScopeSelect={(scope) => {
+                  setTargetScope(scope);
+                  onScopeSelect_?.(scope);
+                }}
               />
               <div className='slds-combobox_container slds-combobox-addon_end'>
                 <div className={comboboxClassNames} ref={elementRef}>

From 906c378ac964563eafa5eb97aee5647e84a95f50 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 26 Jun 2025 10:40:59 +0900
Subject: [PATCH 177/245] (Picklist): handle deeply nested children

---
 src/scripts/Picklist.tsx | 120 ++++++++++++++++++++++++++++++---------
 1 file changed, 92 insertions(+), 28 deletions(-)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index db36e2567..d772574a8 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -21,6 +21,95 @@ import { useControlledValue, useEventCallback, useMergeRefs } from './hooks';
 import { createFC } from './common';
 import { Bivariant } from './typeUtils';
 
+/**
+ * Recursively collect option values from PicklistItem components
+ */
+function collectOptionValues(children: unknown): PicklistValue[] {
+  return React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return [];
+    }
+
+    const props = child.props;
+    const isPropsObject = typeof props === 'object' && props !== null;
+
+    if (!isPropsObject) {
+      return [];
+    }
+
+    // Recursively check children for nested PicklistItems
+    if (child.type !== PicklistItem) {
+      return !('children' in props) ? [] : collectOptionValues(props.children);
+    }
+
+    // Check if this is specifically a PicklistItem component
+    if (
+      !('value' in props) ||
+      (typeof props.value !== 'string' && typeof props.value !== 'number')
+    ) {
+      return [];
+    }
+
+    return [props.value];
+  }).flat();
+}
+
+/**
+ * Recursively find selected item label from PicklistItem components
+ */
+function findSelectedItemLabel(
+  children: unknown,
+  selectedValue: PicklistValue
+): React.ReactNode | null {
+  return (
+    React.Children.map(children, (child) => {
+      if (!React.isValidElement(child)) {
+        return null;
+      }
+
+      const props = child.props;
+      const isPropsObject = typeof props === 'object' && props !== null;
+
+      if (!isPropsObject) {
+        return null;
+      }
+
+      // Recursively check children for nested PicklistItems
+      if (child.type !== PicklistItem) {
+        return !('children' in props)
+          ? null
+          : findSelectedItemLabel(props.children, selectedValue);
+      }
+
+      // Check if this is specifically a PicklistItem component
+      if (!('value' in props) || props.value !== selectedValue) {
+        return null;
+      }
+
+      // Safely access label and children properties with proper type checking
+      const label = 'label' in props ? props.label : undefined;
+      const itemChildren = 'children' in props ? props.children : undefined;
+
+      // Simple type check for React.ReactNode values
+      const labelValue =
+        typeof label === 'string' ||
+        typeof label === 'number' ||
+        React.isValidElement(label)
+          ? label
+          : undefined;
+      const childrenValue =
+        typeof itemChildren === 'string' ||
+        typeof itemChildren === 'number' ||
+        React.isValidElement(itemChildren) ||
+        Array.isArray(itemChildren)
+          ? itemChildren
+          : undefined;
+
+      return labelValue || childrenValue;
+    }).find((result) => result !== null) ?? null
+  );
+}
+
 /**
  *
  */
@@ -161,26 +250,9 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
 
     const { getActiveElement } = useContext(ComponentSettingsContext);
 
-    // Get option values from children
+    // Get option values from children (recursively)
     const getOptionValues = useCallback(() => {
-      const optionValues: PicklistValue[] = [];
-      React.Children.forEach(children, (child) => {
-        if (!React.isValidElement(child)) {
-          return;
-        }
-
-        const props: unknown = child.props;
-        const isPropsObject = typeof props === 'object' && props !== null;
-
-        if (
-          isPropsObject &&
-          'value' in props &&
-          (typeof props.value === 'string' || typeof props.value === 'number')
-        ) {
-          optionValues.push(props.value);
-        }
-      });
-      return optionValues;
+      return collectOptionValues(children);
     }, [children]);
 
     // Get next option value for keyboard navigation
@@ -414,15 +486,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       // one item
       if (values.length === 1) {
         const selectedValue = values[0];
-        let selected = null;
-        React.Children.forEach(children, (item) => {
-          if (React.isValidElement(item)) {
-            const { label, value, children } = item.props as PicklistItemProps;
-            if (value === selectedValue) {
-              selected = label || children;
-            }
-          }
-        });
+        const selected = findSelectedItemLabel(children, selectedValue);
         return selected || selectedValue;
       }
 

From 1d1e69126b6db3012fb8e50696fcdff905dae804 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 26 Jun 2025 11:00:02 +0900
Subject: [PATCH 178/245] (Picklist): consider `disabled`

---
 src/scripts/Picklist.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index d772574a8..cb8223e20 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -50,6 +50,11 @@ function collectOptionValues(children: unknown): PicklistValue[] {
       return [];
     }
 
+    // Skip disabled items
+    if ('disabled' in props && props.disabled === true) {
+      return [];
+    }
+
     return [props.value];
   }).flat();
 }
@@ -86,6 +91,11 @@ function findSelectedItemLabel(
         return null;
       }
 
+      // Skip disabled items
+      if ('disabled' in props && props.disabled === true) {
+        return null;
+      }
+
       // Safely access label and children properties with proper type checking
       const label = 'label' in props ? props.label : undefined;
       const itemChildren = 'children' in props ? props.children : undefined;

From f099a9a78a4a60096f3d6ed2087c45d52bdefff0 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 26 Jun 2025 11:10:28 +0900
Subject: [PATCH 179/245] (Picklist): reduce the number of unnecessary
 recalculation

---
 src/scripts/Picklist.tsx | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index cb8223e20..609caf826 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -10,6 +10,7 @@ import React, {
   useState,
   useEffect,
   useCallback,
+  useMemo,
 } from 'react';
 import classnames from 'classnames';
 import { FormElement, FormElementProps } from './FormElement';
@@ -260,15 +261,14 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
 
     const { getActiveElement } = useContext(ComponentSettingsContext);
 
-    // Get option values from children (recursively)
-    const getOptionValues = useCallback(() => {
+    // Memoized option values - recursively collected from PicklistItem components (excluding disabled items)
+    const optionValues = useMemo(() => {
       return collectOptionValues(children);
     }, [children]);
 
     // Get next option value for keyboard navigation
     const getNextValue = useCallback(
       (currentValue?: PicklistValue) => {
-        const optionValues = getOptionValues();
         if (optionValues.length === 0) return undefined;
 
         if (!currentValue) return optionValues[0];
@@ -278,13 +278,12 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
           Math.min(currentIndex + 1, optionValues.length - 1)
         ]; // not wrap around
       },
-      [getOptionValues]
+      [optionValues]
     );
 
     // Get previous option value for keyboard navigation
     const getPrevValue = useCallback(
       (currentValue?: PicklistValue) => {
-        const optionValues = getOptionValues();
         if (optionValues.length === 0) return undefined;
 
         if (!currentValue) return optionValues[optionValues.length - 1];
@@ -292,7 +291,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
         const currentIndex = optionValues.indexOf(currentValue);
         return optionValues[Math.max(currentIndex - 1, 0)]; // not wrap around
       },
-      [getOptionValues]
+      [optionValues]
     );
 
     // Scroll focused element into view
@@ -319,8 +318,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
     useEffect(() => {
       if (opened && !focusedValue) {
         // Focus on first selected value or first option
-        const initialFocus =
-          values.length > 0 ? values[0] : getOptionValues()[0];
+        const initialFocus = values.length > 0 ? values[0] : optionValues[0];
         setFocusedValue(initialFocus);
         scrollFocusedElementIntoView(initialFocus);
       } else if (!opened) {
@@ -330,7 +328,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
     }, [
       opened,
       values,
-      getOptionValues,
+      optionValues,
       focusedValue,
       scrollFocusedElementIntoView,
     ]);
@@ -438,7 +436,6 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
         if (opened) {
           e.preventDefault();
           e.stopPropagation();
-          const optionValues = getOptionValues();
           const currentIndex = focusedValue
             ? optionValues.indexOf(focusedValue)
             : -1;
@@ -487,7 +484,8 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       onKeyDown_?.(e);
     });
 
-    function getSelectedItemLabel() {
+    // Memoized selected item label - displays count for multiple selections, label for single selection, or placeholder text
+    const selectedItemLabel = useMemo(() => {
       // many items selected
       if (values.length > 1) {
         return `${values.length} ${optionsSelectedText}`;
@@ -502,7 +500,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
 
       // zero items
       return selectedText;
-    }
+    }, [values, optionsSelectedText, selectedText, children]);
 
     const hasValue = values.length > 0;
     const containerClassNames = classnames(
@@ -577,7 +575,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
                 onBlur={onBlur}
                 {...rprops}
               >
-                <span className='slds-truncate'>{getSelectedItemLabel()}</span>
+                <span className='slds-truncate'>{selectedItemLabel}</span>
               </div>
               <span className='slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right'>
                 <Icon

From 74368a5146a1b4f52d81914e65b0a7f22eeaec4e Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 26 Jun 2025 13:04:43 +0900
Subject: [PATCH 180/245] (Lookup): show `listHeader` and `listFooter`
 consistently

---
 src/scripts/Lookup.tsx | 47 ++++++++++++++++++++++++++++++------------
 1 file changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index cd7aa3fb5..df48fa00d 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -699,26 +699,28 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
   const dropdownClassNames = classnames(
     'slds-dropdown',
     'slds-dropdown_length-with-icon-7',
-    'slds-dropdown_fluid'
+    'slds-dropdown_fluid',
+    'slds-scrollable_none'
   );
 
   return (
     <div
       id={listboxId}
       className={dropdownClassNames}
+      style={{ maxHeight: RESET_MAX_HEIGHT }}
       role='listbox'
       aria-label='Search Results'
       tabIndex={0}
       aria-busy={loading}
       ref={dropdownRef}
     >
-      <ul
-        className='slds-listbox slds-listbox_vertical'
-        role='presentation'
-        onKeyDown={onKeyDown}
-        onBlur={onBlur}
-      >
-        {listHeader ? (
+      {listHeader ? (
+        <ul
+          className='slds-listbox slds-listbox_vertical'
+          role='presentation'
+          onKeyDown={onKeyDown}
+          onBlur={onBlur}
+        >
           <li role='presentation' className='slds-listbox__item'>
             <div
               id={getOptionId(listHeaderIdSeed)}
@@ -731,7 +733,15 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
               {listHeader}
             </div>
           </li>
-        ) : null}
+        </ul>
+      ) : null}
+      <ul
+        className='slds-listbox slds-listbox_vertical slds-scrollable_y'
+        style={{ maxHeight: MAIN_LIST_BOX_MAX_HEIGHT }}
+        role='presentation'
+        onKeyDown={onKeyDown}
+        onBlur={onBlur}
+      >
         {filteredData.map((entry) => (
           <LookupOption
             key={entry.value}
@@ -749,11 +759,18 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
             </div>
           </li>
         ) : null}
-        {listFooter ? (
+      </ul>
+      {listFooter ? (
+        <ul
+          className='slds-listbox slds-listbox_vertical'
+          role='presentation'
+          onKeyDown={onKeyDown}
+          onBlur={onBlur}
+        >
           <li role='presentation' className='slds-listbox__item'>
             <div
               id={getOptionId(listFooterIdSeed)}
-              className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity'
+              className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity slds-listbox__option_term'
               role='option'
               tabIndex={0}
               onFocus={() => onOptionFocus(listFooterIdSeed)}
@@ -761,12 +778,16 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
               {listFooter}
             </div>
           </li>
-        ) : null}
-      </ul>
+        </ul>
+      ) : null}
     </div>
   );
 };
 
+// manually replaces where `max-height` is specified
+const RESET_MAX_HEIGHT = 'unset';
+const MAIN_LIST_BOX_MAX_HEIGHT = 'calc((1.5rem + 1rem) * 7)'; // copied from `.slds-dropdown_length-with-icon-7`
+
 /**
  *
  */

From cbe1da7c18fc87de54060f6107b5c993f20ed360 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 26 Jun 2025 13:11:00 +0900
Subject: [PATCH 181/245] (Lookup): pass static classNames statically

---
 src/scripts/Lookup.tsx | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index df48fa00d..9950445ee 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -136,14 +136,8 @@ const LookupSelectedState: FC<LookupSelectedStateProps> = ({
   listboxId,
   onRemoveSelection,
 }) => {
-  const comboboxClassNames = classnames(
-    'slds-combobox',
-    'slds-dropdown-trigger',
-    'slds-dropdown-trigger_click'
-  );
-
   return (
-    <div className={comboboxClassNames}>
+    <div className='slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click'>
       <div
         className='slds-combobox__form-element slds-input-has-icon slds-input-has-icon_left-right'
         role='none'
@@ -696,17 +690,10 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
 }) => {
   if (!opened) return null;
 
-  const dropdownClassNames = classnames(
-    'slds-dropdown',
-    'slds-dropdown_length-with-icon-7',
-    'slds-dropdown_fluid',
-    'slds-scrollable_none'
-  );
-
   return (
     <div
       id={listboxId}
-      className={dropdownClassNames}
+      className='slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid slds-scrollable_none'
       style={{ maxHeight: RESET_MAX_HEIGHT }}
       role='listbox'
       aria-label='Search Results'

From 69dfbf02e391e330b5130b4174eef45a716d8ee3 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 26 Jun 2025 13:27:02 +0900
Subject: [PATCH 182/245] (Lookup): memorize `optionValues`

---
 src/scripts/Lookup.tsx | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 9950445ee..a32d032cd 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -923,8 +923,8 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       [data]
     );
 
-    // Get option values from data
-    const getOptionValues = useCallback(() => {
+    // Memoized option values - filtered data with optional header and footer
+    const optionValues = useMemo(() => {
       const filteredData = lookupFilter
         ? data.filter((entry) => lookupFilter(entry, searchText, targetScope))
         : data;
@@ -947,7 +947,6 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     // Get next option value for keyboard navigation
     const getNextValue = useCallback(
       (currentValue?: string) => {
-        const optionValues = getOptionValues();
         if (optionValues.length === 0) return undefined;
 
         if (!currentValue) return optionValues[0];
@@ -957,13 +956,12 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
           Math.min(currentIndex + 1, optionValues.length - 1)
         ]; // not wrap around
       },
-      [getOptionValues]
+      [optionValues]
     );
 
     // Get previous option value for keyboard navigation
     const getPrevValue = useCallback(
       (currentValue?: string) => {
-        const optionValues = getOptionValues();
         if (optionValues.length === 0) return undefined;
 
         if (!currentValue) return optionValues[optionValues.length - 1];
@@ -971,7 +969,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
         const currentIndex = optionValues.indexOf(currentValue);
         return optionValues[Math.max(currentIndex - 1, 0)]; // not wrap around
       },
-      [getOptionValues]
+      [optionValues]
     );
 
     // Scroll focused element into view
@@ -999,7 +997,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       if (!opened) {
         setFocusedValue(undefined);
       }
-    }, [opened, getOptionValues, focusedValue, scrollFocusedElementIntoView]);
+    }, [opened, optionValues, focusedValue, scrollFocusedElementIntoView]);
 
     const elRef = useRef<HTMLDivElement | null>(null);
     const elementRef = useMergeRefs([elRef, elementRef_]);
@@ -1101,7 +1099,6 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
         }
       },
       isTabNavigationIgnored: (direction) => {
-        const optionValues = getOptionValues();
         const currentIndex = focusedValue
           ? optionValues.indexOf(focusedValue)
           : -1;
@@ -1113,7 +1110,6 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
         );
       },
       onTabNavigation: (direction) => {
-        const optionValues = getOptionValues();
         const currentIndex = focusedValue
           ? optionValues.indexOf(focusedValue)
           : -1;

From 4fa28d9ce0903783267129652cf77ad6b87f8f93 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 26 Jun 2025 14:05:29 +0900
Subject: [PATCH 183/245] (Lookup): refactor variable names for clarity

---
 src/scripts/Lookup.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index a32d032cd..99c43a7e8 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -694,7 +694,7 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
     <div
       id={listboxId}
       className='slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid slds-scrollable_none'
-      style={{ maxHeight: RESET_MAX_HEIGHT }}
+      style={{ maxHeight: LIST_PARENT_MAX_HEIGHT }}
       role='listbox'
       aria-label='Search Results'
       tabIndex={0}
@@ -724,7 +724,7 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
       ) : null}
       <ul
         className='slds-listbox slds-listbox_vertical slds-scrollable_y'
-        style={{ maxHeight: MAIN_LIST_BOX_MAX_HEIGHT }}
+        style={{ maxHeight: LIST_CONTENT_MAX_HEIGHT }}
         role='presentation'
         onKeyDown={onKeyDown}
         onBlur={onBlur}
@@ -772,8 +772,8 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
 };
 
 // manually replaces where `max-height` is specified
-const RESET_MAX_HEIGHT = 'unset';
-const MAIN_LIST_BOX_MAX_HEIGHT = 'calc((1.5rem + 1rem) * 7)'; // copied from `.slds-dropdown_length-with-icon-7`
+const LIST_PARENT_MAX_HEIGHT = 'unset';
+const LIST_CONTENT_MAX_HEIGHT = 'calc((1.5rem + 1rem) * 7)'; // copied from `.slds-dropdown_length-with-icon-7`
 
 /**
  *

From d15c4ecde200719539814708cc1160941e30612a Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 1 Jul 2025 15:58:25 +0900
Subject: [PATCH 184/245] (Lookup): make disabled style for the scope select
 visible

---
 src/scripts/Lookup.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 99c43a7e8..911efe112 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -362,6 +362,7 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
                       transform: 'translateY(-50%)',
                       left: '0.5rem',
                       pointerEvents: 'none',
+                      zIndex: SCOPE_INPUT_ZINDEX + 1,
                     }}
                   >
                     <Icon
@@ -377,8 +378,8 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
                   className='slds-input slds-combobox__input slds-combobox__input-value'
                   style={{
                     paddingLeft: '1.5rem',
-                    background: 'transparent',
-                    cursor: 'pointer',
+                    cursor: !disabled ? 'pointer' : undefined,
+                    zIndex: SCOPE_INPUT_ZINDEX,
                   }}
                   aria-controls='objectswitcher-listbox-id'
                   aria-expanded={scopeOpened}
@@ -399,6 +400,7 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
                     bottom: '0.2rem',
                     right: '0.55rem',
                     pointerEvents: 'none',
+                    zIndex: SCOPE_INPUT_ZINDEX + 1,
                   }}
                 >
                   <Icon
@@ -471,6 +473,8 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
   );
 };
 
+const SCOPE_INPUT_ZINDEX = 1;
+
 /**
  * Props for LookupSearchInput component
  */

From fdc4e0d03fcc3abcfc706d04e193359cb2418d02 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 6 Jun 2025 09:55:08 +0900
Subject: [PATCH 185/245] (Icon): update icon types

---
 src/scripts/Icon.tsx | 212 +++++++++++++++++++++++++++++++------------
 1 file changed, 155 insertions(+), 57 deletions(-)

diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx
index d2c4a9a2a..88a555ad7 100644
--- a/src/scripts/Icon.tsx
+++ b/src/scripts/Icon.tsx
@@ -18,83 +18,181 @@ import { createFC } from './common';
 svg4everybody();
 
 /* eslint-disable max-len */
+// from: https://v1.lightningdesignsystem.com/icons/#standard
 const STANDARD_ICONS = `
-account,announcement,answer_best,answer_private,answer_public,approval,apps,apps_admin,
-article,avatar,avatar_loading,calibration,call,call_history,campaign,campaign_members,
-canvas,case,case_change_status,case_comment,case_email,case_log_a_call,case_transcript,
-client,coaching,connected_apps,contact,contract,custom,dashboard,default,document,
-drafts,email,email_IQ,email_chatter,empty,endorsement,environment_hub,event,feed,feedback,
-file,flow,folder,generic_loading,goals,group_loading,groups,hierarchy,home,household,insights,investment_account,
-lead,link,log_a_call,marketing_actions,metrics,news,note,opportunity,
-orders,people,performance,person_account,photo,poll,portal,post,pricebook,process,product,question_best,
-question_feed,quotes,recent,record,related_list,report,reward,scan_card,skill_entity,
-social,solution,sossession,task,task2,team_member,thanks,thanks_loading,today,topic,
-unmatched,user,work_order,work_order_item
+account_info,account_score,account,action_list_component,actions_and_buttons,activation_target,activations,
+ad_event_action,ad_event_cause,ad_event_effect,ad_event_factor,ad_event_info,ad_event_outcome,ad_event_party,
+address,adverse_event,agent_home,agent_session,aggregate,aggregation_policy,ai_accelerator_card,all,announcement,
+answer_best,answer_private,answer_public,apex_plugin,apex,app_form_participant,app_form_product_participant,app,
+approval,apps_admin,apps,article,asset_action_source,asset_action,asset_audit,asset_downtime_period,asset_hierarchy,
+asset_object,asset_relationship,asset_state_period,asset_warranty,assigned_resource,assignment,attach,
+attribute_based_pricing,avatar_loading,avatar,bill_of_materials,billing,bot_training,bot,branch_merge,brand,budget_allocation,
+budget_category_value,budget_period,budget,bundle_config,bundle_policy,bundles_pricing,business_hours,buyer_account,
+buyer_group_qualifier,buyer_group,calculated_dimension,calculated_insights,calculated_measure,calibration,call_coaching,
+call_history,call,campaign_members,campaign,cancel_checkout,canvas,capacity_plan,care_request_reviewer,carousel,
+case_change_status,case_comment,case_email,case_log_a_call,case_milestone,case_transcript,case_wrap_up,case,catalog,
+category,change_request,changes,channel_program_history,channel_program_levels,channel_program_members,channel_programs,
+chart,checkout,choice,client,cms,coaching,code_playground,code_set_bundle,code_set,collection_variable,collection,
+connect_wallet,connected_apps,constant,contact_list,contact_request,contact,contract_line_item,contract_line_outcome_data,
+contract_line_outcome,contract_payment,contract,cost_model,coupon_codes,crypto_category_wallet_group,crypto_product_category_wallet_role,
+crypto_product,crypto_transaction_envelope_change_snapshot,crypto_transaction_envelope_item,crypto_transaction_envelope,
+crypto_transaction,crypto_wallet_group_item,crypto_wallet_group,crypto_wallet,currency_input,currency,custody_chain_entry,
+custody_entry_verification,custody_override,custom_component_task,custom_notification,custom,customer_360,
+customer_lifecycle_analytics,customer_portal_users,customer_workspace,customer,customers,dashboard_component,dashboard_ea,
+dashboard,data_cloud,data_governance,data_graph,data_integration_hub,data_lake_objects,data_mapping,data_model,data_streams,
+data_transforms,datadotcom,dataset,datashare_target,datashares,date_input,date_time,decision,default,delegated_account,
+device,digital_verification_config_group,digital_verification_config,disclosure_and_compliance,discounts,
+disease_definition_criteria,disease_investigation,disease_outbreak,display_rich_text,display_text,document_preview,
+document_reference,document,drafts,duration_downscale,dynamic_highlights_panel,dynamic_record_choice,edit_form,education,
+einstein_replies,email_chatter,email,employee_asset,employee_contact,employee_job_position,employee_job,employee_organization,
+employee,empty,endorsement,enrollee_status,entitlement_policy,entitlement_process,entitlement_template,entitlement,
+entity_milestone,entity,environment_hub,eval_result,event_ext,event,events,expense_report_entry,expense_report,expense,
+facility_bed,feed,feedback,field_sales,file,filter_criteria_rule,filter_criteria,filter,first_non_empty,flow,folder,
+forecasts,form,formula,fulfillment_order,funding_award_adjustment,funding_requirement,generic_loading,global_constant,
+goals,group_loading,groups,guidance_center,header_discounts,hierarchy,high_velocity_sales,historical_adherence,holiday_operating_hours,
+home,household,identifier,immunization,impact_outcome,impact_strategy_assignment,impact_strategy,inbox,incident,indicator_assignment,
+indicator_definition,indicator_performance_period,indicator_result,individual,insights,instore_locations,investment_account,
+invocable_action,iot_context,iot_orchestrations,javascript_button,job_family,job_position,job_profile,kanban,key_dates,
+knowledge,labels,lead_insights,lead_list,lead,learner_program,letterhead,life_sciences,lightning_component,lightning_usage,
+link,linked,list_email,list_fee,list_rate,live_chat_visitor,live_chat,location_permit,location,log_a_call,logging,loop,macros,
+maintenance_asset,maintenance_plan,maintenance_work_rule,manual_discounts,map_line_item,market,marketing_actions,
+med_rec_recommendation,med_rec_statement_recommendation,medication_administration,medication_dispense,medication_ingredient,
+medication_reconciliation,medication_statement,medication,member_period,merge,messaging_conversation,messaging_session,messaging_user,
+metric_definition,metric,metrics,mulesoft,multi_picklist,multi_select_checkbox,network_contract,news,nft_settings,nft_studio,
+no_code_model,note,number_input,observation_component,omni_channel,omni_supervisor,operating_hours,operation_plan_execution,
+operation_plan_request,operation_plan_step_execution,operation_plan_step,operation_plan,opportunity_contact_role,
+opportunity_splits,opportunity,orchestrator,order_item,orders,outcome_activity,outcome,output,panel_detail,partner_fund_allocation,
+partner_fund_claim,partner_fund_request,partner_marketing_budget,partners,party_profile,password,past_chat,path_experiment,
+patient_medication_dosage,patient_service,payment_gateway,people_score,people,performance,person_account,person_language,
+person_name,photo,picklist_choice,picklist_type,planogram,policy,poll,portal_roles_and_subordinates,portal_roles,portal,
+post,practitioner_role,prep_flow,price_adjustment_matrix,price_adjustment_schedule,price_adjustment_tier,price_book_entries,
+price_books,price_sheet,pricebook,pricing_workspace,problem,procedure_detail,procedure_output_resolution,procedure,process_exception,
+process,product_consumed_state,product_consumed,product_item_transaction,product_item,product_quantity_rules,product_request_line_item,
+product_request,product_required,product_service_campaign_item,product_service_campaign,product_transfer_state,product_transfer,
+product_warranty_term,product_workspace,product,products,program_cohort_member,program_cohort,program_detail,program_site,program_status,
+promotion_segments,promotion_tiers,promotions_workspace,promotions,prompt_builder,prompt,propagation_policy,proposition,prospect,qualifications,
+query_editor,question_best,question_feed,queue,quick_text,quip_sheet,quip,quotes,radio_button,rate_adjustment,read_receipts,real_time,recent,
+recipe,record_consent,record_create,record_delete,record_lookup,record_signature_task,record_update,record,recycle_bin,registered_model,related_list,
+relationship,repeaters,replace,reply_text,report_type,report,reset_password,resource_absence,resource_capacity,resource_preference,resource_skill,
+restriction_policy,return_order_line_item,return_order,reward,robot,rtc_presence,sales_cadence_target,sales_cadence,sales_channel,sales_path,sales_value,
+salesforce_cms,scan_card,schedule_objective,scheduling_constraint,scheduling_policy,scheduling_workspace_territory,scheduling_workspace,screen,search,
+section,segments,selling_model,send_log,serialized_product_transaction,serialized_product,service_appointment_capacity_usage,service_appointment,
+service_contract,service_crew_member,service_crew,service_report,service_request_detail,service_request,service_resource,
+service_territory_location,service_territory_member,service_territory_policy,service_territory,settings,setup_modal,shift_pattern_entry,
+shift_pattern,shift_preference,shift_scheduling_operation,shift_template,shift_type,shift,shipment,skill_entity,skill_requirement,skill,
+slack_conversations,slack,slider,sms,snippet_alt,snippet,snippets,sobject_collection,sobject,social,solution,sort_policy,sort,sossession,
+stage_collection,stage,steps,store_group,store,story,strategy,study_candidate,study_related,study,sub_metric,survey,swarm_request,swarm_session,
+system_and_global_variable,table,tableau,task,task2,tax_policy,tax_rate,tax_treatment,taxonomy,team_member,template,text_template,text,textarea,
+textbox,thanks_loading,thanks,time_period,timesheet_entry,timesheet,timeslot,title_party,today,toggle,topic,topic2,tour_check,tour,trailhead_alt,trailhead,
+transaction_usage_entitlement,travel_mode,unified_health_score,unmatched,uploaded_model,usage_billing_period_item,usage_entitlement_account,
+usage_entitlement_bucket,usage_entitlement_entry,usage_ratable_summary,usage_summary,user_role,user,variable,variation_attribute_setup,
+variation_products,video,visit_templates,visits,visualforce_page,visualization,voice_call,volume_discounts,waits,walkthroughs,
+warranty_term,water,webcart,whatsapp,work_capacity_limit,work_capacity_usage,work_contract,work_forecast,work_order_item,
+work_order,work_plan_rule,work_plan_template_entry,work_plan_template,work_plan,work_queue,work_step_template,work_step,work_summary,
+work_type_group,work_type,workforce_engagement,workspace,your_account
 `
   .replace(/^\s+|\s+$/g, '')
   .split(/[\s,]+/);
 
-const CUSTOM_ICONS = new Array(101)
+// from: https://v1.lightningdesignsystem.com/icons/#custom
+const CUSTOM_ICONS = new Array(113 + 1)
   .join('_')
   .split('')
   .map((a, i) => `custom${i + 1}`);
 
+// from: https://v1.lightningdesignsystem.com/icons/#action
 const ACTION_ICONS = `
-add_contact,announcement,apex,approval,back,call,canvas,change_owner,change_record_type,
-check,clone,close,defer,delete,description,dial_in,download,edit,edit_groups,edit_relationship,
-email,fallback,filter,flow,follow,following,freeze_user,goal,google_news,info,join_group,
-lead_convert,leave_group,log_a_call,log_event,manage_perm_sets,map,more,new,new_account,
-new_campaign,new_case,new_child_case,new_contact,new_event,new_group,new_lead,new_note,
-new_notebook,new_opportunity,new_person_account,new_task,password_unlock,preview,priority,question_post_action,
-quote,record,refresh,reject,remove,reset_password,share,share_file,share_link,share_poll,
-share_post,share_thanks,sort,submit_for_approval,update,update_status,upload,user,user_activation,
-web_link,
-new_custom7,new_custom8,new_custom9,new_custom10,new_custom11,new_custom12,new_custom13,
-new_custom14,new_custom15,new_custom16,new_custom17,new_custom18,new_custom19,new_custom20,
-new_custom21,new_custom22,new_custom23,new_custom24,new_custom25,new_custom26,new_custom27,
-new_custom28,new_custom29,new_custom30,new_custom31,new_custom32,new_custom33,new_custom34,
-new_custom35,new_custom36,new_custom37,new_custom38,new_custom39,new_custom40,new_custom41,
-new_custom42,new_custom43,new_custom44,new_custom45,new_custom46,new_custom47,new_custom48,
-new_custom49,new_custom50,new_custom51,new_custom52,new_custom53,new_custom54,new_custom55,
-new_custom56,new_custom57,new_custom58,new_custom59,new_custom60,new_custom61,new_custom62,
-new_custom63,new_custom64,new_custom65,new_custom66,new_custom67,new_custom68,new_custom69,
-new_custom70,new_custom71,new_custom72,new_custom73,new_custom74,new_custom75,new_custom76,
-new_custom77,new_custom78,new_custom79,new_custom80,new_custom81,new_custom82,new_custom83,
-new_custom84,new_custom85,new_custom86,new_custom87,new_custom88,new_custom89,new_custom90,
-new_custom91,new_custom92,new_custom93,new_custom94,new_custom95,new_custom96,new_custom97,
-new_custom98,new_custom99,new_custom100
+add_contact,add_file,add_photo_video,add_relationship,adjust_value,announcement,apex,approval,back,bug,call,
+canvas,change_owner,change_record_type,check,clone,close,defer,delete,description,dial_in,download,edit_groups,
+edit_relationship,edit,email,fallback,filter,flow,follow,following,freeze_user,goal,google_news,info,join_group,
+lead_convert,leave_group,log_a_call,log_event,manage_perm_sets,map,more,new_account,new_campaign,new_case,
+new_child_case,new_contact,new_event,new_group,new_lead,new_note,new_notebook,new_opportunity,new_person_account,
+new_task,new,password_unlock,preview,priority,question_post_action,quote,recall,record,refresh,reject,remove_relationship,
+remove,reset_password,scan_disabled,scan_enabled,script,share_file,share_link,share_poll,share_post,share_thanks,
+share,sort,submit_for_approval,update_status,update,upload,user_activation,user,view_relationship,web_link
 `
   .replace(/^\s+|\s+$/g, '')
   .split(/[\s,]+/);
 
+// from: https://v1.lightningdesignsystem.com/icons/#doctype
 const DOCTYPE_ICONS = `
-ai,attachment,audio,box_notes,csv,eps,excel,exe,flash,gdoc,gdocs,gpres,gsheet,html,image,keynote,
-link,mp4,overlay,pack,pages,pdf,ppt,psd,rtf,slide,stypi,txt,unknown,video,visio,
-webex,word,xml,zip
+ai,attachment,audio,box_notes,csv,eps,excel,exe,flash,folder,gdoc,gdocs,gform,gpres,gsheet,html,image,keynote,
+library_folder,link,mp4,overlay,pack,pages,pdf,ppt,psd,quip_doc,quip_sheet,quip_slide,rtf,shared_folder,slide,
+stypi,txt,unknown,video,visio,webex,word,xml,zip
 `
   .replace(/^\s+|\s+$/g, '')
   .split(/[\s,]+/);
 
+// from: https://v1.lightningdesignsystem.com/icons/#utility
 const UTILITY_ICONS = `
-add,adduser,announcement,answer,apps,arrowdown,arrowup,attach,back,ban,bold,bookmark,brush,
-bucket,builder,call,capslock,cases,center_align_text,chart,chat,check,checkin,chevrondown,
-chevronleft,chevronright,chevronup,clear,clock,close,comments,company,connected_apps,
-contract,contract_alt,copy,crossfilter,custom_apps,cut,dash,datadotcom,dayview,delete,deprecate,
-description,desktop,down,download,edit,edit_form,email,end_call,erect_window,error,event,expand,
-expand_alt,favorite,feed,file,filter,filterList,forward,frozen,groups,help,home,identity,image,inbox,info,
-insert_tag_field,insert_template,italic,justify_text,kanban,knowledge_base,layers,layout,
-left,left_align_text,like,link,list,location,lock,log_a_call,logout,magicwand,matrix,metrics,minimize_window,
-moneybag,monthlyview,move,muted,new,new_window,news,note,notebook,notification,office365,offline,
-open,open_folder,opened_folder,overflow,package,package_org,package_org_beta,page,palette,paste,
-people,phone_landscape,phone_portrait,photo,picklist,power,preview,priority,process,push,puzzle,
-question,questions_and_answers,record,redo,refresh,relate,remove_formatting,remove_link,
-replace,reply,reset_password,retweet,richtextbulletedlist,richtextindent,richtextnumberedlist,
-richtextoutdent,right,right_align_text,rotate,rows,salesforce1,search,settings,setup,setup_assistant_guide,
-share,share_post,shield,side_list,signpost,sms,snippet,socialshare,sort,spinner,standard_objects,
-stop,strikethrough,success,summary,summarydetail,switch,table,tablet_landscape,tablet_portrait,
-tabset,task,text_background_color,text_color,threedots,tile_card_list,topic,touch_action,trail,undelete,undeprecate,
-underline,undo,unlock,unmuted,up,upload,user,user_role,volume_high,volume_low,volume_off,warning,
-weeklyview,world,zoomin,zoomout
+activity,ad_set,add_above,add_below,add_source,add,adduser,adjust_value,advanced_function,advertising,
+agent_astro,agent_home,agent_session,aggregate,aggregation_policy,alert,all,anchor,angle,animal_and_nature,
+announcement,answer,answered_twice,anywhere_alert,anywhere_chat,apex_alt,apex_plugin,apex,app_web_messaging,
+applied_amount,approval,apps,archive,array,arrow_bottom,arrow_left,arrow_right,arrow_top,arrowdown,arrowup,
+asset_audit,asset_object,asset_repossessed,asset_warranty,assignment,attach,automate,away,back,ban,billing,
+block_visitor,bold,bookmark_alt,bookmark_stroke,bookmark,border_all,border_bottom,border_left,border_right,border_top,
+bottom_align,bottom_group_alignment,breadcrumbs,broadcast,brush,bucket,budget_category_value,budget_period,bug,builder,
+bundle_config,bundle_policy,button_choice,buyer_group_qualifier,calculated_insights,call,campaign,cancel_file_request,
+cancel_transfer,cant_sync,capacity_plan,capslock,captions,card_details,cart,case,cases,center_align_text,center_align,
+center_group_alignment,change_owner,change_record_type,change_request,changes,chart,chat,check,checkin,checkout,
+chevrondown,chevronleft,chevronright,chevronup,choice,circle,classic_interface,clear,clock,close,cms,co_ins_infusion,
+co_insurance,collapse_all,collection_alt,collection_variable,collection,color_swatch,columns,comments,company,
+component_customization,connected_apps,constant,contact_request,contact,contactless_pay,contract_alt,contract_doc,
+contract_line_outcome_data,contract_line_outcome,contract_payment,contract,copay_infusion,copay,copy_to_clipboard,
+copy,coupon_codes,coverage_type,crossfilter,currency_input,currency,custom_apps,customer_workspace,customer,cut,dash,
+data_cloud,data_graph,data_mapping,data_model,data_transforms,database,datadotcom,date_input,date_time,dayview,
+deductible_met,deductible,delete,deny_access_field,deny_access_object,deny_access_row,deprecate,description,
+desktop_and_phone,desktop_console,desktop,detach,dialing,diamond,discounts,dislike,display_rich_text,display_text,
+dock_panel,document_preview,donut_chart,down,download,drag_and_drop,drag,duration_downscale,dynamic_record_choice,
+edit_form,edit_gpt,edit,education,einstein_alt,einstein,email_open,email,emoji_above_average,emoji_average,emoji_bad,
+emoji_below_average,emoji_excellent,emoji_good,emoji_outstanding,emoji_very_bad,emoji_very_good,emoji_worst,emoji,
+end_call,end_chat,end_messaging_session,engage,enter,entitlement,erect_window,error,event_ext,event,events,expand_all,
+expand_alt,expand,expense_report,expense,expired,fallback,favorite_alt,favorite,feed,field_currency_calc,field_date_calc,
+field_date_time_calc,field_dimension_calc,field_measure_calc,field_sales,file,filter_criteria_rule,filter_criteria,
+filter,filterList,flow_alt,flow,food_and_drink,form,format,formula,forward_up,forward,freeze_column,frozen,
+fulfillment_order,full_width_view,fully_synced,funding_award_adjustment,funding_requirement,global_constant,graph,
+groups,guidance,hazmat_equipment,heart,height,help_center,help_doc_ext,help,hide_mobile,hide,hierarchy,high_velocity_sales,
+highlight,holiday_operating_hours,home,hourglass,http,identity,image,in_app_assistant,inbox,incident,incoming_call,
+indicator_performance_period,info_alt,info,inner_join,insert_tag_field,insert_template,inspector_panel,integration,
+internal_share,italic,join,jump_to_bottom,jump_to_left,jump_to_right,jump_to_top,justify_text,kanban,key_dates,key,
+keyboard_dismiss,keypad,knowledge_base,knowledge_smart_link,label,labels,layers,layout_banner,layout_card,layout_overlap,
+layout_tile,layout,lead,leave_conference,left_align_text,left_align,left_join,left,level_down,level_up,light_bulb,
+lightning_extension,lightning_inspector,like,line_chart,link,linked,list_email,list,listen,live_message,location_permit,
+location,lock,locked_with_additions,locker_service_api_viewer,locker_service_console,log_a_call,logout,loop,lower_flag,lt_max,
+lt_remaining,macros,magicwand,maintenance_plan,mark_all_as_read,market,mask_field,matrix,meet_content_source,meet_focus_content,
+meet_focus_equal,meet_focus_presenter,meet_present_panel,merge_field,merge,messaging_conversation,metrics,middle_align,minimize_window,
+missed_call,mixed_sources_mapping,money,moneybag,monthlyview,more,move,mulesoft,multi_picklist,multi_select_checkbox,muted,new_direct_message,
+new_window,new,news,no_return,not_in_sync,not_saved,note,notebook,notification_off,notification_snoozed,notification,number_input,office365,
+offline_briefcase,offline_cached,offline,omni_channel,oop_annual,oop_applied,oop_max,oop_total,open_folder,open,
+opened_folder,opportunity,orchestrator,orders,org_chart,outbound_call,outcome,outer_join,output,overflow,package_org_beta,
+package_org,package,page_structure,page,palette,partner_fund_request,password,paste,path_experiment,pause_alt,pause,
+paused_call,payment_deferred,payment_gateway,pdf_ext,people_score,people,percent,phone_landscape,phone_portrait,photo,
+picklist_choice,picklist_type,picklist,pin,pinned,plane,planning_poker,play,podcast_webinar,policy,pop_in,power,pre_auth,
+preview,price_book_entries,price_books,pricing_workspace,print,priority,privately_shared,pro_network,problem,process,product_consumed_state,
+product_quantity_rules,product_service_campaign_item,product_service_campaign,product_transfer_state,product_transfer,product_warranty_term,
+product_workspace,product,products,profile_alt,profile,program_cohort_member,program_cohort,promotion_segments,promotion_tiers,promotions_workspace,
+promotions,prompt_builder,prompt_edit,prompt,propagation_policy,proposition,push,puzzle,qualifications,question_mark,question,
+questions_and_answers,queue,quick_text,quip,quotation_marks,quote,radio_button,rating,real_time,reassign,recipe,record_alt,
+record_collection,record_consent,record_create,record_delete,record_lookup,record_update,record,recurring_exception,
+recycle_bin_empty,recycle_bin_full,redo,refresh,regenerate,relate,reminder,remove_formatting,remove_link,replace,replay,
+reply_all,reply,report_issue,reset_password,resource_absence,resource_capacity,resource_territory,response_date,restriction_policy,
+retail_execution,retweet,ribbon,richtextbulletedlist,richtextindent,richtextnumberedlist,richtextoutdent,right_align_text,right_align,
+right_join,right,robot,rotate,routing_offline,rows,rules,sales_channel,salesforce_page,salesforce1,save,scan,screen,search,section,
+segments,send_log,send,sender_email,sentiment_negative,sentiment_neutral,serialized_product_transaction,serialized_product,
+service_appointment,service_contract,service_report,service_territory_policy,settings,setup_assistant_guide,setup_modal,
+setup,share_file,share_mobile,share_post,share,shield,shift_pattern_entry,shift_pattern,shift_scheduling_operation,
+shift_ui,shopping_bag,shortcuts,side_list,signature,signpost,skill,skip_back,skip_forward,skip,slack_conversations,
+slack,slider,smiley_and_people,sms,snippet,sobject_collection,sobject,socialshare,sort_ascending,sort_policy,sort,spacer,
+sparkle,sparkles,spinner,stage_collection,stage,standard_objects,status_code,steps,stop,store,strategy,strikethrough,success,
+suggested_for_you,summary,summarydetail,survey,swarm_request,swarm_session,switch,symbols,sync_in_progress,sync,system_and_global_variable,
+table_settings,table,tableau,tablet_landscape,tablet_portrait,tabset,talent_development,target_mode,target,task,tax_policy,tax_rate,
+tax_treatment,text_background_color,text_color,text_template,text,textarea,textbox,threedots_vertical,threedots,thunder,tile_card_list,toggle_off,
+toggle_on,toggle_panel_bottom,toggle_panel_left,toggle_panel_right,toggle_panel_top,toggle,tollways,top_align,top_group_alignment,topic,topic2,touch_action,
+tour_check,tour,tracker,trail,trailblazer_ext,trailhead_alt,trailhead_ext,trailhead,transparent,transport_bicycle,transport_heavy_truck,transport_light_truck,
+transport_walking,travel_and_places,trending,truck,turn_off_notifications,type_tool,type,undelete,undeprecate,underline,undo,unlinked,
+unlock,unmuted,up,upload,user_role,user,variable,variation_attribute_setup,variation_products,video_off,video,visibility_rule_assigned,
+voicemail_drop,volume_high,volume_low,volume_off,waits,walkthroughs,warning,warranty_term,watchlist,water,weeklyview,wellness,width,wifi,
+work_forecast,work_order_type,work_queue,workforce_engagement,world,your_account,yubi_key,zoomin,zoomout
 `
   .replace(/^\s+|\s+$/g, '')
   .split(/[\s,]+/);

From 189b0044ceb59e98afa1c53f252b47b2407bceb5 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 6 Jun 2025 09:57:22 +0900
Subject: [PATCH 186/245] (Icon): update markups and classnames

---
 src/scripts/Icon.tsx         | 138 ++++++++++++++++-------------------
 src/scripts/Lookup.tsx       |  13 +---
 src/scripts/Notification.tsx |   1 -
 src/scripts/Table.tsx        |   1 -
 stories/Lookup.stories.tsx   |  18 +----
 5 files changed, 69 insertions(+), 102 deletions(-)

diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx
index 88a555ad7..117b873de 100644
--- a/src/scripts/Icon.tsx
+++ b/src/scripts/Icon.tsx
@@ -4,7 +4,6 @@ import React, {
   SVGAttributes,
   useContext,
   useRef,
-  useState,
   useEffect,
   useCallback,
 } from 'react';
@@ -12,7 +11,6 @@ import classnames from 'classnames';
 import svg4everybody from 'svg4everybody';
 import { registerStyle, getAssetRoot } from './util';
 import { ComponentSettingsContext } from './ComponentSettings';
-import { useEventCallback } from './hooks';
 import { createFC } from './common';
 
 svg4everybody();
@@ -222,23 +220,19 @@ function useInitComponentStyle() {
 
 function getIconColor(
   fillColor: string | undefined,
-  category: string | undefined,
+  category: IconCategory,
   icon: string
 ) {
   /* eslint-disable no-unneeded-ternary */
-  return category === 'doctype'
-    ? null
-    : fillColor === 'none'
+  return fillColor === 'none'
     ? null
     : fillColor
     ? fillColor
     : category === 'utility'
     ? null
-    : category === 'custom'
-    ? icon.replace(/^custom/, 'custom-')
-    : category === 'action' && /^new_custom/.test(icon)
+    : category === 'action' && /^new_custom/.test(icon) // not needed for the current SLDS2 icons
     ? icon.replace(/^new_custom/, 'custom-')
-    : `${category ?? ''}-${(icon ?? '').replace(/_/g, '-')}`;
+    : `${category}-${icon.replace(/_/g, '-')}`;
   /* eslint-enable no-unneeded-ternary */
 }
 
@@ -252,13 +246,20 @@ export type IconCategory =
   | 'standard'
   | 'utility';
 export type IconSize = 'xx-small' | 'x-small' | 'small' | 'medium' | 'large';
-export type IconContainer = boolean | 'default' | 'circle';
-export type IconTextColor = 'default' | 'warning' | 'error' | null;
+export type IconContainer = 'circle';
+export type IconTextColor =
+  | 'default'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'light'
+  | null;
 
 /**
  *
  */
 export type IconProps = {
+  label?: string;
   containerClassName?: string;
   category?: IconCategory;
   icon: string;
@@ -290,7 +291,6 @@ const SvgIcon = forwardRef(
       iconColor,
       size = '',
       align,
-      container,
       textColor = 'default',
       style,
       ...rprops
@@ -304,8 +304,8 @@ const SvgIcon = forwardRef(
           size
         ),
         [`slds-icon-text-${textColor ?? 'default'}`]:
-          /^(default|warning|error)$/.test(textColor ?? '') && !iconColor,
-        [`slds-icon-${iconColor ?? ''}`]: !container && iconColor,
+          /^(default|success|warning|error|light)$/.test(textColor ?? '') &&
+          !iconColor,
         'slds-m-left_x-small': align === 'right',
         'slds-m-right_x-small': align === 'left',
       },
@@ -329,18 +329,43 @@ const SvgIcon = forwardRef(
   }
 );
 
+export const SvgButtonIcon = (
+  props: {
+    className?: string;
+    category?: IconCategory;
+    icon: string;
+  } & SVGAttributes<SVGElement>
+) => {
+  const {
+    className = '',
+    category: category_ = 'utility',
+    icon: icon_,
+    style,
+    ...rprops
+  } = props;
+  const { assetRoot = getAssetRoot() } = useContext(ComponentSettingsContext);
+
+  // icon and category prop should not include chars other than alphanumerics, underscore, and hyphen
+  const icon = (icon_ ?? '').replace(/[^\w-]/g, ''); // eslint-disable-line no-param-reassign
+  const category = (category_ ?? '').replace(/[^\w-]/g, ''); // eslint-disable-line no-param-reassign
+  const iconUrl = `${assetRoot}/icons/${category}-sprite/svg/symbols.svg#${icon}`;
+  return (
+    <svg className={className} aria-hidden style={style} {...rprops}>
+      <use xlinkHref={iconUrl} />
+    </svg>
+  );
+};
 /**
  *
  */
 export const Icon = createFC<IconProps, { ICONS: typeof ICONS }>(
   (props) => {
-    const { container, containerClassName, fillColor, ...rprops } = props;
+    const { label, container, containerClassName, fillColor, ...rprops } =
+      props;
     let { category = 'utility', icon } = props;
 
     useInitComponentStyle();
 
-    const iconContainerRef = useRef<HTMLSpanElement | null>(null);
-
     const svgIconRef = useRef<SVGSVGElement | null>(null);
 
     const svgIconRefCallback = useCallback(
@@ -353,72 +378,37 @@ export const Icon = createFC<IconProps, { ICONS: typeof ICONS }>(
       [props.tabIndex]
     );
 
-    const [iconColor, setIconColor] = useState<string | null>(null);
-
-    const checkIconColor = useEventCallback(() => {
-      if (
-        fillColor ||
-        category === 'doctype' ||
-        (!fillColor && category === 'utility') ||
-        iconColor === 'standard-default'
-      ) {
-        return;
-      }
-      const el = container ? iconContainerRef.current : svgIconRef.current;
-      if (!el) {
-        return;
-      }
-      const bgColorStyle = getComputedStyle(el).backgroundColor;
-      // if no background color set to the icon
-      if (
-        bgColorStyle &&
-        /^(transparent|rgba\(0,\s*0,\s*0,\s*0\))$/.test(bgColorStyle)
-      ) {
-        setIconColor('standard-default');
-      }
-    });
-
     useEffect(() => {
       svgIconRefCallback(svgIconRef.current);
     }, [svgIconRefCallback]);
 
-    useEffect(() => {
-      checkIconColor();
-    }, [checkIconColor]);
-
     if (icon.indexOf(':') > 0) {
       [category, icon] = icon.split(':') as [IconCategory, string];
     }
 
-    const fillIconColor =
-      iconColor || container ? getIconColor(fillColor, category, icon) : null;
+    const fillIconColor = getIconColor(fillColor, category, icon);
 
-    const svgIcon = (
-      <SvgIcon
-        ref={svgIconRefCallback}
-        {...rprops}
-        {...{
-          container,
-          category,
-          icon,
-          iconColor: fillIconColor,
-        }}
-      />
+    const ccontainerClassName = classnames(
+      containerClassName,
+      'slds-icon_container',
+      container === 'circle' ? 'slds-icon_container_circle' : null,
+      category === 'utility' ? `slds-icon-utility-${icon}` : null,
+      fillIconColor ? `slds-icon-${fillIconColor}` : null
+    );
+    return (
+      <span className={ccontainerClassName} title={label}>
+        <SvgIcon
+          ref={svgIconRefCallback}
+          {...rprops}
+          {...{
+            category,
+            icon,
+            iconColor: fillIconColor,
+          }}
+        />
+        {label ? <span className='slds-assistive-text'>{label}</span> : null}
+      </span>
     );
-    if (container) {
-      const ccontainerClassName = classnames(
-        containerClassName,
-        'slds-icon_container',
-        container === 'circle' ? 'slds-icon_container_circle' : null,
-        fillIconColor ? `slds-icon-${fillIconColor}` : null
-      );
-      return (
-        <span className={ccontainerClassName} ref={iconContainerRef}>
-          {svgIcon}
-        </span>
-      );
-    }
-    return svgIcon;
   },
   { ICONS }
 );
diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 911efe112..8434c5127 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -144,7 +144,6 @@ const LookupSelectedState: FC<LookupSelectedStateProps> = ({
       >
         {selected.icon && (
           <Icon
-            container={true}
             containerClassName='slds-combobox__input-entity-icon'
             category={selected.category}
             icon={selected.icon}
@@ -366,7 +365,6 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
                     }}
                   >
                     <Icon
-                      container={true}
                       category={currentScope.category}
                       icon={currentScope.icon}
                       size='small'
@@ -404,7 +402,6 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
                   }}
                 >
                   <Icon
-                    container={true}
                     icon='down'
                     size='x-small'
                     style={{ width: '0.8rem', height: '0.8rem' }}
@@ -447,7 +444,6 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
                           <span className='slds-media__figure slds-listbox__option-icon'>
                             {scope.icon && (
                               <Icon
-                                container={true}
                                 category={scope.category}
                                 icon={scope.icon}
                                 size='small'
@@ -534,7 +530,6 @@ const LookupSearchInput: FC<LookupSearchInputProps> = ({
     <div className={inputIconClasses} role='none'>
       {iconAlign === 'left' && (
         <Icon
-          container={true}
           containerClassName={classnames(
             'slds-input__icon',
             `slds-input__icon_${iconAlign}`
@@ -569,7 +564,6 @@ const LookupSearchInput: FC<LookupSearchInputProps> = ({
       />
       {iconAlign === 'right' && (
         <Icon
-          container={true}
           containerClassName={classnames(
             'slds-input__icon',
             `slds-input__icon_${iconAlign}`
@@ -628,12 +622,7 @@ const LookupOption: FC<LookupOptionProps> = ({
       >
         <span className='slds-media__figure slds-listbox__option-icon'>
           {entry.icon && (
-            <Icon
-              container={true}
-              category={entry.category}
-              icon={entry.icon}
-              size='small'
-            />
+            <Icon category={entry.category} icon={entry.icon} size='small' />
           )}
         </span>
         <span className='slds-media__body'>
diff --git a/src/scripts/Notification.tsx b/src/scripts/Notification.tsx
index 1bdfdc325..35cc573e5 100644
--- a/src/scripts/Notification.tsx
+++ b/src/scripts/Notification.tsx
@@ -51,7 +51,6 @@ export const Notification: FC<NotificationProps> = (props) => {
 
   const iconEl = icon ? (
     <Icon
-      container={true}
       containerClassName={classnames(
         type === 'toast' ? 'slds-m-right_small' : 'slds-m-right_x-small',
         type === 'alert' ? ['slds-no-flex', 'slds-align-top'] : null
diff --git a/src/scripts/Table.tsx b/src/scripts/Table.tsx
index 3f22b7bd0..746a242eb 100644
--- a/src/scripts/Table.tsx
+++ b/src/scripts/Table.tsx
@@ -186,7 +186,6 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
           <span className='slds-assistive-text'>Sort </span>
           {cellContent}
           <Icon
-            container
             className='slds-is-sortable__icon'
             textColor='default'
             size='x-small'
diff --git a/stories/Lookup.stories.tsx b/stories/Lookup.stories.tsx
index d3e07af27..11baf069e 100644
--- a/stories/Lookup.stories.tsx
+++ b/stories/Lookup.stories.tsx
@@ -376,12 +376,7 @@ export const OpenedWithListHeaderFooter: ComponentStoryObj<typeof Lookup> = {
     listHeader: (
       <>
         <span className='slds-media__figure slds-listbox__option-icon'>
-          <Icon
-            container={true}
-            category='utility'
-            icon='search'
-            size='x-small'
-          />
+          <Icon category='utility' icon='search' size='x-small' />
         </span>
         <span className='slds-media__body'>
           <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
@@ -393,7 +388,7 @@ export const OpenedWithListHeaderFooter: ComponentStoryObj<typeof Lookup> = {
     listFooter: (
       <>
         <span className='slds-media__figure slds-listbox__option-icon'>
-          <Icon container={true} category='utility' icon='add' size='x-small' />
+          <Icon category='utility' icon='add' size='x-small' />
         </span>
         <span className='slds-media__body'>
           <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
@@ -475,12 +470,7 @@ export const DefaultOpenedWithListHeaderFooter: ComponentStoryObj<
     listHeader: (
       <>
         <span className='slds-media__figure slds-listbox__option-icon'>
-          <Icon
-            container={true}
-            category='utility'
-            icon='search'
-            size='x-small'
-          />
+          <Icon category='utility' icon='search' size='x-small' />
         </span>
         <span className='slds-media__body'>
           <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
@@ -492,7 +482,7 @@ export const DefaultOpenedWithListHeaderFooter: ComponentStoryObj<
     listFooter: (
       <>
         <span className='slds-media__figure slds-listbox__option-icon'>
-          <Icon container={true} category='utility' icon='add' size='x-small' />
+          <Icon category='utility' icon='add' size='x-small' />
         </span>
         <span className='slds-media__body'>
           <span className='slds-listbox__option-text slds-listbox__option-text_entity'>

From b05c36df48c3f3bc818f820cfc195db73f06d6f5 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 6 Jun 2025 09:58:58 +0900
Subject: [PATCH 187/245] (Button): update markups and classnames

---
 src/scripts/Button.tsx | 61 ++++++++++++++++++++++--------------------
 1 file changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/scripts/Button.tsx b/src/scripts/Button.tsx
index 240ba0840..9639c0970 100644
--- a/src/scripts/Button.tsx
+++ b/src/scripts/Button.tsx
@@ -1,6 +1,6 @@
 import React, { FC, ReactNode, ButtonHTMLAttributes, Ref, useRef } from 'react';
 import classnames from 'classnames';
-import { Icon } from './Icon';
+import { SvgButtonIcon, IconCategory } from './Icon';
 import { Spinner } from './Spinner';
 import { useEventCallback, useMergeRefs } from './hooks';
 
@@ -31,6 +31,7 @@ export type ButtonIconMoreSize = 'x-small' | 'small' | 'medium' | 'large';
  */
 export type ButtonIconProps = {
   className?: string;
+  category?: IconCategory;
   icon: string;
   align?: ButtonIconAlign;
   size?: ButtonIconSize;
@@ -42,33 +43,32 @@ export type ButtonIconProps = {
  *
  */
 export const ButtonIcon: FC<ButtonIconProps> = ({
-  icon,
   align,
-  size,
-  inverse,
   className,
   style,
+  icon,
+  category = 'utility',
   ...props
 }) => {
   const alignClassName =
     align && ICON_ALIGNS.indexOf(align) >= 0
       ? `slds-button__icon_${align}`
       : null;
-  const sizeClassName =
-    size && ICON_SIZES.indexOf(size) >= 0 ? `slds-button__icon_${size}` : null;
-  const inverseClassName = inverse ? 'slds-button__icon_inverse' : null;
   const iconClassNames = classnames(
     'slds-button__icon',
     alignClassName,
-    sizeClassName,
-    inverseClassName,
     className
   );
+
+  if (icon.indexOf(':') > 0) {
+    [category, icon] = icon.split(':') as [IconCategory, string];
+  }
+
   return (
-    <Icon
+    <SvgButtonIcon
       className={iconClassNames}
       icon={icon}
-      textColor={null}
+      category={category}
       pointerEvents='none'
       style={style}
       {...props}
@@ -118,6 +118,7 @@ export const Button: FC<ButtonProps> = (props) => {
     buttonRef: buttonRef_,
     iconMoreSize: iconMoreSize_,
     onClick: onClick_,
+    tabIndex,
     ...rprops
   } = props;
 
@@ -135,19 +136,33 @@ export const Button: FC<ButtonProps> = (props) => {
     onClick_?.(e);
   });
 
-  const typeClassName = type ? `slds-button_${type}` : null;
+  const content = children || label;
+  const isIconOnly = type && /^icon-/.test(type) && icon && !content;
+
+  const typeClassName = classnames(
+    {
+      'slds-button_icon': isIconOnly,
+    },
+    type ? `slds-button_${type}` : null,
+    isIconOnly && iconSize && ICON_SIZES.indexOf(iconSize) >= 0
+      ? `slds-button_icon-${iconSize}`
+      : null
+  );
   const btnClassNames = classnames(className, 'slds-button', typeClassName, {
     'slds-is-selected': selected,
+    ['slds-button_icon']: /^icon-/.test(type ?? ''),
     [`slds-button_icon-${size ?? ''}`]:
       /^(x-small|small)$/.test(size ?? '') && /^icon-/.test(type ?? ''),
   });
 
-  const buttonContent = (
+  return (
     // eslint-disable-next-line react/button-has-type
     <button
       ref={buttonRef}
       className={btnClassNames}
       type={htmlType}
+      title={isIconOnly || alt ? alt ?? icon : undefined}
+      tabIndex={tabIndex ?? -1}
       {...rprops}
       onClick={onClick}
     >
@@ -159,7 +174,7 @@ export const Button: FC<ButtonProps> = (props) => {
           inverse={inverse}
         />
       ) : undefined}
-      {children || label}
+      {content}
       {icon && iconAlign === 'right' ? (
         <ButtonIcon
           icon={icon}
@@ -171,22 +186,10 @@ export const Button: FC<ButtonProps> = (props) => {
       {iconMore ? (
         <ButtonIcon icon={iconMore} align='right' size={iconMoreSize} />
       ) : undefined}
-      {alt ? <span className='slds-assistive-text'>{alt}</span> : undefined}
+      {isIconOnly || alt ? (
+        <span className='slds-assistive-text'>{alt ?? icon}</span>
+      ) : undefined}
       {loading ? <Spinner /> : undefined}
     </button>
   );
-
-  if (props.tabIndex != null) {
-    return (
-      <span
-        className='react-slds-button-focus-wrapper'
-        style={{ outline: 0 }}
-        tabIndex={-1}
-      >
-        {buttonContent}
-      </span>
-    );
-  }
-
-  return buttonContent;
 };

From df1c7129a73a81dabda806d76ad4d918822d9dae Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 13 Jun 2025 15:21:06 +0900
Subject: [PATCH 188/245] (Button): add new button types

---
 src/scripts/Button.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/scripts/Button.tsx b/src/scripts/Button.tsx
index 9639c0970..956ffb407 100644
--- a/src/scripts/Button.tsx
+++ b/src/scripts/Button.tsx
@@ -7,7 +7,10 @@ import { useEventCallback, useMergeRefs } from './hooks';
 export type ButtonType =
   | 'neutral'
   | 'brand'
+  | 'outline-brand'
   | 'destructive'
+  | 'text-destructive'
+  | 'success'
   | 'inverse'
   | 'icon'
   | 'icon-bare'

From 4e275799114c7d3b56f03e3d6f02b676926449d0 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 13 Jun 2025 15:21:36 +0900
Subject: [PATCH 189/245] (Button): reflect `iconSize` to `ButtonIcon`

---
 src/scripts/Button.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/scripts/Button.tsx b/src/scripts/Button.tsx
index 956ffb407..8375c561f 100644
--- a/src/scripts/Button.tsx
+++ b/src/scripts/Button.tsx
@@ -51,15 +51,19 @@ export const ButtonIcon: FC<ButtonIconProps> = ({
   style,
   icon,
   category = 'utility',
+  size,
   ...props
 }) => {
   const alignClassName =
     align && ICON_ALIGNS.indexOf(align) >= 0
       ? `slds-button__icon_${align}`
       : null;
+  const sizeClassName =
+    size && ICON_SIZES.indexOf(size) >= 0 ? `slds-button__icon_${size}` : null;
   const iconClassNames = classnames(
     'slds-button__icon',
     alignClassName,
+    sizeClassName,
     className
   );
 

From 096208e7582146cd8fd9e4185bfc00f214ee2a4d Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 13 Jun 2025 15:22:12 +0900
Subject: [PATCH 190/245] (Button): remove unused classnames

---
 src/scripts/Button.tsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/scripts/Button.tsx b/src/scripts/Button.tsx
index 8375c561f..5bb3ce504 100644
--- a/src/scripts/Button.tsx
+++ b/src/scripts/Button.tsx
@@ -146,15 +146,7 @@ export const Button: FC<ButtonProps> = (props) => {
   const content = children || label;
   const isIconOnly = type && /^icon-/.test(type) && icon && !content;
 
-  const typeClassName = classnames(
-    {
-      'slds-button_icon': isIconOnly,
-    },
-    type ? `slds-button_${type}` : null,
-    isIconOnly && iconSize && ICON_SIZES.indexOf(iconSize) >= 0
-      ? `slds-button_icon-${iconSize}`
-      : null
-  );
+  const typeClassName = type ? `slds-button_${type}` : null;
   const btnClassNames = classnames(className, 'slds-button', typeClassName, {
     'slds-is-selected': selected,
     ['slds-button_icon']: /^icon-/.test(type ?? ''),

From 90902c820791338d07e874cbb6bb5ac06c895eb0 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 13 Jun 2025 15:25:54 +0900
Subject: [PATCH 191/245] (Icon): update an interface about `container`

---
 src/scripts/Icon.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx
index 117b873de..bcc9c26ff 100644
--- a/src/scripts/Icon.tsx
+++ b/src/scripts/Icon.tsx
@@ -246,7 +246,6 @@ export type IconCategory =
   | 'standard'
   | 'utility';
 export type IconSize = 'xx-small' | 'x-small' | 'small' | 'medium' | 'large';
-export type IconContainer = 'circle';
 export type IconTextColor =
   | 'default'
   | 'success'
@@ -265,7 +264,7 @@ export type IconProps = {
   icon: string;
   size?: IconSize;
   align?: 'left' | 'right';
-  container?: IconContainer;
+  circleContainer?: boolean;
   color?: string;
   textColor?: IconTextColor;
   tabIndex?: number;
@@ -360,7 +359,7 @@ export const SvgButtonIcon = (
  */
 export const Icon = createFC<IconProps, { ICONS: typeof ICONS }>(
   (props) => {
-    const { label, container, containerClassName, fillColor, ...rprops } =
+    const { label, circleContainer, containerClassName, fillColor, ...rprops } =
       props;
     let { category = 'utility', icon } = props;
 
@@ -391,7 +390,7 @@ export const Icon = createFC<IconProps, { ICONS: typeof ICONS }>(
     const ccontainerClassName = classnames(
       containerClassName,
       'slds-icon_container',
-      container === 'circle' ? 'slds-icon_container_circle' : null,
+      circleContainer ? 'slds-icon_container_circle' : null,
       category === 'utility' ? `slds-icon-utility-${icon}` : null,
       fillIconColor ? `slds-icon-${fillIconColor}` : null
     );

From b78c6a6daffb4aca9d5f0113c3268a496c6cf7ec Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 13 Jun 2025 15:28:04 +0900
Subject: [PATCH 192/245] (Icon): improve a category icon classname

---
 src/scripts/Icon.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx
index bcc9c26ff..5e39af93c 100644
--- a/src/scripts/Icon.tsx
+++ b/src/scripts/Icon.tsx
@@ -391,7 +391,9 @@ export const Icon = createFC<IconProps, { ICONS: typeof ICONS }>(
       containerClassName,
       'slds-icon_container',
       circleContainer ? 'slds-icon_container_circle' : null,
-      category === 'utility' ? `slds-icon-utility-${icon}` : null,
+      category === 'utility'
+        ? `slds-icon-utility-${icon.replace(/_/g, '-')}`
+        : null,
       fillIconColor ? `slds-icon-${fillIconColor}` : null
     );
     return (

From 73109a9f73f37709bba702a873eedbedae8f9b28 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 13 Jun 2025 15:29:56 +0900
Subject: [PATCH 193/245] (Icon): add `title`, `currentColor`, and `flip` props

---
 src/scripts/Icon.tsx | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx
index 5e39af93c..007f23675 100644
--- a/src/scripts/Icon.tsx
+++ b/src/scripts/Icon.tsx
@@ -269,6 +269,9 @@ export type IconProps = {
   textColor?: IconTextColor;
   tabIndex?: number;
   fillColor?: string;
+  title?: string;
+  currentColor?: boolean;
+  flip?: boolean;
 } & SVGAttributes<SVGElement>;
 
 /**
@@ -359,8 +362,16 @@ export const SvgButtonIcon = (
  */
 export const Icon = createFC<IconProps, { ICONS: typeof ICONS }>(
   (props) => {
-    const { label, circleContainer, containerClassName, fillColor, ...rprops } =
-      props;
+    const {
+      label,
+      circleContainer,
+      containerClassName,
+      fillColor,
+      title,
+      currentColor,
+      flip,
+      ...rprops
+    } = props;
     let { category = 'utility', icon } = props;
 
     useInitComponentStyle();
@@ -394,10 +405,17 @@ export const Icon = createFC<IconProps, { ICONS: typeof ICONS }>(
       category === 'utility'
         ? `slds-icon-utility-${icon.replace(/_/g, '-')}`
         : null,
-      fillIconColor ? `slds-icon-${fillIconColor}` : null
+      fillIconColor ? `slds-icon-${fillIconColor}` : null,
+      {
+        'slds-current-color': currentColor,
+        'slds-icon_flip': flip,
+      }
     );
+
+    const iconTitle = title || label;
+
     return (
-      <span className={ccontainerClassName} title={label}>
+      <span className={ccontainerClassName} title={iconTitle}>
         <SvgIcon
           ref={svgIconRefCallback}
           {...rprops}

From 1d538cc052338319f3b58faa28d98732ddae0c0d Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 2 Jul 2025 16:11:59 +0900
Subject: [PATCH 194/245] (Icon, Button): remove unnecessary `eslint-disable-`
 comments

---
 src/scripts/Button.tsx | 1 -
 src/scripts/Icon.tsx   | 8 ++++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/scripts/Button.tsx b/src/scripts/Button.tsx
index 5bb3ce504..1214988a8 100644
--- a/src/scripts/Button.tsx
+++ b/src/scripts/Button.tsx
@@ -155,7 +155,6 @@ export const Button: FC<ButtonProps> = (props) => {
   });
 
   return (
-    // eslint-disable-next-line react/button-has-type
     <button
       ref={buttonRef}
       className={btnClassNames}
diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx
index 007f23675..90df5afd3 100644
--- a/src/scripts/Icon.tsx
+++ b/src/scripts/Icon.tsx
@@ -314,8 +314,8 @@ const SvgIcon = forwardRef(
       className
     );
     // icon and category prop should not include chars other than alphanumerics, underscore, and hyphen
-    const icon = (icon_ ?? '').replace(/[^\w-]/g, ''); // eslint-disable-line no-param-reassign
-    const category = (category_ ?? '').replace(/[^\w-]/g, ''); // eslint-disable-line no-param-reassign
+    const icon = (icon_ ?? '').replace(/[^\w-]/g, '');
+    const category = (category_ ?? '').replace(/[^\w-]/g, '');
     const iconUrl = `${assetRoot}/icons/${category}-sprite/svg/symbols.svg#${icon}`;
     return (
       <svg
@@ -348,8 +348,8 @@ export const SvgButtonIcon = (
   const { assetRoot = getAssetRoot() } = useContext(ComponentSettingsContext);
 
   // icon and category prop should not include chars other than alphanumerics, underscore, and hyphen
-  const icon = (icon_ ?? '').replace(/[^\w-]/g, ''); // eslint-disable-line no-param-reassign
-  const category = (category_ ?? '').replace(/[^\w-]/g, ''); // eslint-disable-line no-param-reassign
+  const icon = (icon_ ?? '').replace(/[^\w-]/g, '');
+  const category = (category_ ?? '').replace(/[^\w-]/g, '');
   const iconUrl = `${assetRoot}/icons/${category}-sprite/svg/symbols.svg#${icon}`;
   return (
     <svg className={className} aria-hidden style={style} {...rprops}>

From 9ea3e18770e0a29c93f3c2a0b99d16b9322e3d2c Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 2 Jul 2025 16:14:05 +0900
Subject: [PATCH 195/245] (Icon): update a naming convention

---
 src/scripts/Icon.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx
index 90df5afd3..c759f9c66 100644
--- a/src/scripts/Icon.tsx
+++ b/src/scripts/Icon.tsx
@@ -365,7 +365,7 @@ export const Icon = createFC<IconProps, { ICONS: typeof ICONS }>(
     const {
       label,
       circleContainer,
-      containerClassName,
+      containerClassName: containerClassName_,
       fillColor,
       title,
       currentColor,
@@ -398,8 +398,8 @@ export const Icon = createFC<IconProps, { ICONS: typeof ICONS }>(
 
     const fillIconColor = getIconColor(fillColor, category, icon);
 
-    const ccontainerClassName = classnames(
-      containerClassName,
+    const containerClassName = classnames(
+      containerClassName_,
       'slds-icon_container',
       circleContainer ? 'slds-icon_container_circle' : null,
       category === 'utility'
@@ -415,7 +415,7 @@ export const Icon = createFC<IconProps, { ICONS: typeof ICONS }>(
     const iconTitle = title || label;
 
     return (
-      <span className={ccontainerClassName} title={iconTitle}>
+      <span className={containerClassName} title={iconTitle}>
         <SvgIcon
           ref={svgIconRefCallback}
           {...rprops}

From dd31946327b8b67109c1c92ee307af478dbfe83d Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 2 Jul 2025 16:17:29 +0900
Subject: [PATCH 196/245] (Datepicker): remove unnecessary `eslint-disable-`
 comments

---
 src/scripts/Datepicker.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/scripts/Datepicker.tsx b/src/scripts/Datepicker.tsx
index 3ff6d820c..fc8dbbae3 100644
--- a/src/scripts/Datepicker.tsx
+++ b/src/scripts/Datepicker.tsx
@@ -261,7 +261,6 @@ const DatepickerDate: FC<DatepickerDateProps> = (props) => {
     >
       <span
         className='slds-day'
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
         tabIndex={selectable ? 0 : -1}
         onClick={selectable ? onDateClick : undefined}
         onKeyDown={selectable ? onDateKeyDown : undefined}
@@ -301,7 +300,6 @@ const DatepickerMonth = forwardRef(
         <thead>
           <tr>
             {dayjs.weekdaysMin(true).map((wd, i) => (
-              // eslint-disable-next-line react/no-array-index-key
               <th key={i}>
                 <abbr title={dayjs().weekday(i).format('ddd')}>{wd}</abbr>
               </th>
@@ -310,7 +308,6 @@ const DatepickerMonth = forwardRef(
         </thead>
         <tbody>
           {cal.weeks.map((days, i) => (
-            // eslint-disable-next-line react/no-array-index-key
             <tr key={i}>
               {days.map((date, dayIndex) => (
                 <DatepickerDate

From 2938aa7caf6e49e17d53986abc19ff8436ffcf27 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 2 Jul 2025 16:17:54 +0900
Subject: [PATCH 197/245] (Modal): remove an unnecessary `eslint-disable-`
 comment

---
 stories/Modal.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stories/Modal.stories.tsx b/stories/Modal.stories.tsx
index ff9adb3bb..a60d7f41c 100644
--- a/stories/Modal.stories.tsx
+++ b/stories/Modal.stories.tsx
@@ -293,7 +293,7 @@ export const FormElements: StoryObj<StoryProps> = {
                   .map((a, i) => (
                     <PicklistItem
                       value={i + 1}
-                      label={`Item #${i + 1}`} // eslint-disable-next-line react/no-array-index-key
+                      label={`Item #${i + 1}`}
                       key={i}
                     />
                   ))}

From 87ab6e1dedaf80426389fc6b272400c7847c6e02 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 3 Jul 2025 09:25:00 +0900
Subject: [PATCH 198/245] Revert "(Icon): update icon types"

This reverts commit fdc4e0d03fcc3abcfc706d04e193359cb2418d02.
---
 src/scripts/Icon.tsx | 212 ++++++++++++-------------------------------
 1 file changed, 57 insertions(+), 155 deletions(-)

diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx
index c759f9c66..872af48d3 100644
--- a/src/scripts/Icon.tsx
+++ b/src/scripts/Icon.tsx
@@ -16,181 +16,83 @@ import { createFC } from './common';
 svg4everybody();
 
 /* eslint-disable max-len */
-// from: https://v1.lightningdesignsystem.com/icons/#standard
 const STANDARD_ICONS = `
-account_info,account_score,account,action_list_component,actions_and_buttons,activation_target,activations,
-ad_event_action,ad_event_cause,ad_event_effect,ad_event_factor,ad_event_info,ad_event_outcome,ad_event_party,
-address,adverse_event,agent_home,agent_session,aggregate,aggregation_policy,ai_accelerator_card,all,announcement,
-answer_best,answer_private,answer_public,apex_plugin,apex,app_form_participant,app_form_product_participant,app,
-approval,apps_admin,apps,article,asset_action_source,asset_action,asset_audit,asset_downtime_period,asset_hierarchy,
-asset_object,asset_relationship,asset_state_period,asset_warranty,assigned_resource,assignment,attach,
-attribute_based_pricing,avatar_loading,avatar,bill_of_materials,billing,bot_training,bot,branch_merge,brand,budget_allocation,
-budget_category_value,budget_period,budget,bundle_config,bundle_policy,bundles_pricing,business_hours,buyer_account,
-buyer_group_qualifier,buyer_group,calculated_dimension,calculated_insights,calculated_measure,calibration,call_coaching,
-call_history,call,campaign_members,campaign,cancel_checkout,canvas,capacity_plan,care_request_reviewer,carousel,
-case_change_status,case_comment,case_email,case_log_a_call,case_milestone,case_transcript,case_wrap_up,case,catalog,
-category,change_request,changes,channel_program_history,channel_program_levels,channel_program_members,channel_programs,
-chart,checkout,choice,client,cms,coaching,code_playground,code_set_bundle,code_set,collection_variable,collection,
-connect_wallet,connected_apps,constant,contact_list,contact_request,contact,contract_line_item,contract_line_outcome_data,
-contract_line_outcome,contract_payment,contract,cost_model,coupon_codes,crypto_category_wallet_group,crypto_product_category_wallet_role,
-crypto_product,crypto_transaction_envelope_change_snapshot,crypto_transaction_envelope_item,crypto_transaction_envelope,
-crypto_transaction,crypto_wallet_group_item,crypto_wallet_group,crypto_wallet,currency_input,currency,custody_chain_entry,
-custody_entry_verification,custody_override,custom_component_task,custom_notification,custom,customer_360,
-customer_lifecycle_analytics,customer_portal_users,customer_workspace,customer,customers,dashboard_component,dashboard_ea,
-dashboard,data_cloud,data_governance,data_graph,data_integration_hub,data_lake_objects,data_mapping,data_model,data_streams,
-data_transforms,datadotcom,dataset,datashare_target,datashares,date_input,date_time,decision,default,delegated_account,
-device,digital_verification_config_group,digital_verification_config,disclosure_and_compliance,discounts,
-disease_definition_criteria,disease_investigation,disease_outbreak,display_rich_text,display_text,document_preview,
-document_reference,document,drafts,duration_downscale,dynamic_highlights_panel,dynamic_record_choice,edit_form,education,
-einstein_replies,email_chatter,email,employee_asset,employee_contact,employee_job_position,employee_job,employee_organization,
-employee,empty,endorsement,enrollee_status,entitlement_policy,entitlement_process,entitlement_template,entitlement,
-entity_milestone,entity,environment_hub,eval_result,event_ext,event,events,expense_report_entry,expense_report,expense,
-facility_bed,feed,feedback,field_sales,file,filter_criteria_rule,filter_criteria,filter,first_non_empty,flow,folder,
-forecasts,form,formula,fulfillment_order,funding_award_adjustment,funding_requirement,generic_loading,global_constant,
-goals,group_loading,groups,guidance_center,header_discounts,hierarchy,high_velocity_sales,historical_adherence,holiday_operating_hours,
-home,household,identifier,immunization,impact_outcome,impact_strategy_assignment,impact_strategy,inbox,incident,indicator_assignment,
-indicator_definition,indicator_performance_period,indicator_result,individual,insights,instore_locations,investment_account,
-invocable_action,iot_context,iot_orchestrations,javascript_button,job_family,job_position,job_profile,kanban,key_dates,
-knowledge,labels,lead_insights,lead_list,lead,learner_program,letterhead,life_sciences,lightning_component,lightning_usage,
-link,linked,list_email,list_fee,list_rate,live_chat_visitor,live_chat,location_permit,location,log_a_call,logging,loop,macros,
-maintenance_asset,maintenance_plan,maintenance_work_rule,manual_discounts,map_line_item,market,marketing_actions,
-med_rec_recommendation,med_rec_statement_recommendation,medication_administration,medication_dispense,medication_ingredient,
-medication_reconciliation,medication_statement,medication,member_period,merge,messaging_conversation,messaging_session,messaging_user,
-metric_definition,metric,metrics,mulesoft,multi_picklist,multi_select_checkbox,network_contract,news,nft_settings,nft_studio,
-no_code_model,note,number_input,observation_component,omni_channel,omni_supervisor,operating_hours,operation_plan_execution,
-operation_plan_request,operation_plan_step_execution,operation_plan_step,operation_plan,opportunity_contact_role,
-opportunity_splits,opportunity,orchestrator,order_item,orders,outcome_activity,outcome,output,panel_detail,partner_fund_allocation,
-partner_fund_claim,partner_fund_request,partner_marketing_budget,partners,party_profile,password,past_chat,path_experiment,
-patient_medication_dosage,patient_service,payment_gateway,people_score,people,performance,person_account,person_language,
-person_name,photo,picklist_choice,picklist_type,planogram,policy,poll,portal_roles_and_subordinates,portal_roles,portal,
-post,practitioner_role,prep_flow,price_adjustment_matrix,price_adjustment_schedule,price_adjustment_tier,price_book_entries,
-price_books,price_sheet,pricebook,pricing_workspace,problem,procedure_detail,procedure_output_resolution,procedure,process_exception,
-process,product_consumed_state,product_consumed,product_item_transaction,product_item,product_quantity_rules,product_request_line_item,
-product_request,product_required,product_service_campaign_item,product_service_campaign,product_transfer_state,product_transfer,
-product_warranty_term,product_workspace,product,products,program_cohort_member,program_cohort,program_detail,program_site,program_status,
-promotion_segments,promotion_tiers,promotions_workspace,promotions,prompt_builder,prompt,propagation_policy,proposition,prospect,qualifications,
-query_editor,question_best,question_feed,queue,quick_text,quip_sheet,quip,quotes,radio_button,rate_adjustment,read_receipts,real_time,recent,
-recipe,record_consent,record_create,record_delete,record_lookup,record_signature_task,record_update,record,recycle_bin,registered_model,related_list,
-relationship,repeaters,replace,reply_text,report_type,report,reset_password,resource_absence,resource_capacity,resource_preference,resource_skill,
-restriction_policy,return_order_line_item,return_order,reward,robot,rtc_presence,sales_cadence_target,sales_cadence,sales_channel,sales_path,sales_value,
-salesforce_cms,scan_card,schedule_objective,scheduling_constraint,scheduling_policy,scheduling_workspace_territory,scheduling_workspace,screen,search,
-section,segments,selling_model,send_log,serialized_product_transaction,serialized_product,service_appointment_capacity_usage,service_appointment,
-service_contract,service_crew_member,service_crew,service_report,service_request_detail,service_request,service_resource,
-service_territory_location,service_territory_member,service_territory_policy,service_territory,settings,setup_modal,shift_pattern_entry,
-shift_pattern,shift_preference,shift_scheduling_operation,shift_template,shift_type,shift,shipment,skill_entity,skill_requirement,skill,
-slack_conversations,slack,slider,sms,snippet_alt,snippet,snippets,sobject_collection,sobject,social,solution,sort_policy,sort,sossession,
-stage_collection,stage,steps,store_group,store,story,strategy,study_candidate,study_related,study,sub_metric,survey,swarm_request,swarm_session,
-system_and_global_variable,table,tableau,task,task2,tax_policy,tax_rate,tax_treatment,taxonomy,team_member,template,text_template,text,textarea,
-textbox,thanks_loading,thanks,time_period,timesheet_entry,timesheet,timeslot,title_party,today,toggle,topic,topic2,tour_check,tour,trailhead_alt,trailhead,
-transaction_usage_entitlement,travel_mode,unified_health_score,unmatched,uploaded_model,usage_billing_period_item,usage_entitlement_account,
-usage_entitlement_bucket,usage_entitlement_entry,usage_ratable_summary,usage_summary,user_role,user,variable,variation_attribute_setup,
-variation_products,video,visit_templates,visits,visualforce_page,visualization,voice_call,volume_discounts,waits,walkthroughs,
-warranty_term,water,webcart,whatsapp,work_capacity_limit,work_capacity_usage,work_contract,work_forecast,work_order_item,
-work_order,work_plan_rule,work_plan_template_entry,work_plan_template,work_plan,work_queue,work_step_template,work_step,work_summary,
-work_type_group,work_type,workforce_engagement,workspace,your_account
+account,announcement,answer_best,answer_private,answer_public,approval,apps,apps_admin,
+article,avatar,avatar_loading,calibration,call,call_history,campaign,campaign_members,
+canvas,case,case_change_status,case_comment,case_email,case_log_a_call,case_transcript,
+client,coaching,connected_apps,contact,contract,custom,dashboard,default,document,
+drafts,email,email_IQ,email_chatter,empty,endorsement,environment_hub,event,feed,feedback,
+file,flow,folder,generic_loading,goals,group_loading,groups,hierarchy,home,household,insights,investment_account,
+lead,link,log_a_call,marketing_actions,metrics,news,note,opportunity,
+orders,people,performance,person_account,photo,poll,portal,post,pricebook,process,product,question_best,
+question_feed,quotes,recent,record,related_list,report,reward,scan_card,skill_entity,
+social,solution,sossession,task,task2,team_member,thanks,thanks_loading,today,topic,
+unmatched,user,work_order,work_order_item
 `
   .replace(/^\s+|\s+$/g, '')
   .split(/[\s,]+/);
 
-// from: https://v1.lightningdesignsystem.com/icons/#custom
-const CUSTOM_ICONS = new Array(113 + 1)
+const CUSTOM_ICONS = new Array(101)
   .join('_')
   .split('')
   .map((a, i) => `custom${i + 1}`);
 
-// from: https://v1.lightningdesignsystem.com/icons/#action
 const ACTION_ICONS = `
-add_contact,add_file,add_photo_video,add_relationship,adjust_value,announcement,apex,approval,back,bug,call,
-canvas,change_owner,change_record_type,check,clone,close,defer,delete,description,dial_in,download,edit_groups,
-edit_relationship,edit,email,fallback,filter,flow,follow,following,freeze_user,goal,google_news,info,join_group,
-lead_convert,leave_group,log_a_call,log_event,manage_perm_sets,map,more,new_account,new_campaign,new_case,
-new_child_case,new_contact,new_event,new_group,new_lead,new_note,new_notebook,new_opportunity,new_person_account,
-new_task,new,password_unlock,preview,priority,question_post_action,quote,recall,record,refresh,reject,remove_relationship,
-remove,reset_password,scan_disabled,scan_enabled,script,share_file,share_link,share_poll,share_post,share_thanks,
-share,sort,submit_for_approval,update_status,update,upload,user_activation,user,view_relationship,web_link
+add_contact,announcement,apex,approval,back,call,canvas,change_owner,change_record_type,
+check,clone,close,defer,delete,description,dial_in,download,edit,edit_groups,edit_relationship,
+email,fallback,filter,flow,follow,following,freeze_user,goal,google_news,info,join_group,
+lead_convert,leave_group,log_a_call,log_event,manage_perm_sets,map,more,new,new_account,
+new_campaign,new_case,new_child_case,new_contact,new_event,new_group,new_lead,new_note,
+new_notebook,new_opportunity,new_person_account,new_task,password_unlock,preview,priority,question_post_action,
+quote,record,refresh,reject,remove,reset_password,share,share_file,share_link,share_poll,
+share_post,share_thanks,sort,submit_for_approval,update,update_status,upload,user,user_activation,
+web_link,
+new_custom7,new_custom8,new_custom9,new_custom10,new_custom11,new_custom12,new_custom13,
+new_custom14,new_custom15,new_custom16,new_custom17,new_custom18,new_custom19,new_custom20,
+new_custom21,new_custom22,new_custom23,new_custom24,new_custom25,new_custom26,new_custom27,
+new_custom28,new_custom29,new_custom30,new_custom31,new_custom32,new_custom33,new_custom34,
+new_custom35,new_custom36,new_custom37,new_custom38,new_custom39,new_custom40,new_custom41,
+new_custom42,new_custom43,new_custom44,new_custom45,new_custom46,new_custom47,new_custom48,
+new_custom49,new_custom50,new_custom51,new_custom52,new_custom53,new_custom54,new_custom55,
+new_custom56,new_custom57,new_custom58,new_custom59,new_custom60,new_custom61,new_custom62,
+new_custom63,new_custom64,new_custom65,new_custom66,new_custom67,new_custom68,new_custom69,
+new_custom70,new_custom71,new_custom72,new_custom73,new_custom74,new_custom75,new_custom76,
+new_custom77,new_custom78,new_custom79,new_custom80,new_custom81,new_custom82,new_custom83,
+new_custom84,new_custom85,new_custom86,new_custom87,new_custom88,new_custom89,new_custom90,
+new_custom91,new_custom92,new_custom93,new_custom94,new_custom95,new_custom96,new_custom97,
+new_custom98,new_custom99,new_custom100
 `
   .replace(/^\s+|\s+$/g, '')
   .split(/[\s,]+/);
 
-// from: https://v1.lightningdesignsystem.com/icons/#doctype
 const DOCTYPE_ICONS = `
-ai,attachment,audio,box_notes,csv,eps,excel,exe,flash,folder,gdoc,gdocs,gform,gpres,gsheet,html,image,keynote,
-library_folder,link,mp4,overlay,pack,pages,pdf,ppt,psd,quip_doc,quip_sheet,quip_slide,rtf,shared_folder,slide,
-stypi,txt,unknown,video,visio,webex,word,xml,zip
+ai,attachment,audio,box_notes,csv,eps,excel,exe,flash,gdoc,gdocs,gpres,gsheet,html,image,keynote,
+link,mp4,overlay,pack,pages,pdf,ppt,psd,rtf,slide,stypi,txt,unknown,video,visio,
+webex,word,xml,zip
 `
   .replace(/^\s+|\s+$/g, '')
   .split(/[\s,]+/);
 
-// from: https://v1.lightningdesignsystem.com/icons/#utility
 const UTILITY_ICONS = `
-activity,ad_set,add_above,add_below,add_source,add,adduser,adjust_value,advanced_function,advertising,
-agent_astro,agent_home,agent_session,aggregate,aggregation_policy,alert,all,anchor,angle,animal_and_nature,
-announcement,answer,answered_twice,anywhere_alert,anywhere_chat,apex_alt,apex_plugin,apex,app_web_messaging,
-applied_amount,approval,apps,archive,array,arrow_bottom,arrow_left,arrow_right,arrow_top,arrowdown,arrowup,
-asset_audit,asset_object,asset_repossessed,asset_warranty,assignment,attach,automate,away,back,ban,billing,
-block_visitor,bold,bookmark_alt,bookmark_stroke,bookmark,border_all,border_bottom,border_left,border_right,border_top,
-bottom_align,bottom_group_alignment,breadcrumbs,broadcast,brush,bucket,budget_category_value,budget_period,bug,builder,
-bundle_config,bundle_policy,button_choice,buyer_group_qualifier,calculated_insights,call,campaign,cancel_file_request,
-cancel_transfer,cant_sync,capacity_plan,capslock,captions,card_details,cart,case,cases,center_align_text,center_align,
-center_group_alignment,change_owner,change_record_type,change_request,changes,chart,chat,check,checkin,checkout,
-chevrondown,chevronleft,chevronright,chevronup,choice,circle,classic_interface,clear,clock,close,cms,co_ins_infusion,
-co_insurance,collapse_all,collection_alt,collection_variable,collection,color_swatch,columns,comments,company,
-component_customization,connected_apps,constant,contact_request,contact,contactless_pay,contract_alt,contract_doc,
-contract_line_outcome_data,contract_line_outcome,contract_payment,contract,copay_infusion,copay,copy_to_clipboard,
-copy,coupon_codes,coverage_type,crossfilter,currency_input,currency,custom_apps,customer_workspace,customer,cut,dash,
-data_cloud,data_graph,data_mapping,data_model,data_transforms,database,datadotcom,date_input,date_time,dayview,
-deductible_met,deductible,delete,deny_access_field,deny_access_object,deny_access_row,deprecate,description,
-desktop_and_phone,desktop_console,desktop,detach,dialing,diamond,discounts,dislike,display_rich_text,display_text,
-dock_panel,document_preview,donut_chart,down,download,drag_and_drop,drag,duration_downscale,dynamic_record_choice,
-edit_form,edit_gpt,edit,education,einstein_alt,einstein,email_open,email,emoji_above_average,emoji_average,emoji_bad,
-emoji_below_average,emoji_excellent,emoji_good,emoji_outstanding,emoji_very_bad,emoji_very_good,emoji_worst,emoji,
-end_call,end_chat,end_messaging_session,engage,enter,entitlement,erect_window,error,event_ext,event,events,expand_all,
-expand_alt,expand,expense_report,expense,expired,fallback,favorite_alt,favorite,feed,field_currency_calc,field_date_calc,
-field_date_time_calc,field_dimension_calc,field_measure_calc,field_sales,file,filter_criteria_rule,filter_criteria,
-filter,filterList,flow_alt,flow,food_and_drink,form,format,formula,forward_up,forward,freeze_column,frozen,
-fulfillment_order,full_width_view,fully_synced,funding_award_adjustment,funding_requirement,global_constant,graph,
-groups,guidance,hazmat_equipment,heart,height,help_center,help_doc_ext,help,hide_mobile,hide,hierarchy,high_velocity_sales,
-highlight,holiday_operating_hours,home,hourglass,http,identity,image,in_app_assistant,inbox,incident,incoming_call,
-indicator_performance_period,info_alt,info,inner_join,insert_tag_field,insert_template,inspector_panel,integration,
-internal_share,italic,join,jump_to_bottom,jump_to_left,jump_to_right,jump_to_top,justify_text,kanban,key_dates,key,
-keyboard_dismiss,keypad,knowledge_base,knowledge_smart_link,label,labels,layers,layout_banner,layout_card,layout_overlap,
-layout_tile,layout,lead,leave_conference,left_align_text,left_align,left_join,left,level_down,level_up,light_bulb,
-lightning_extension,lightning_inspector,like,line_chart,link,linked,list_email,list,listen,live_message,location_permit,
-location,lock,locked_with_additions,locker_service_api_viewer,locker_service_console,log_a_call,logout,loop,lower_flag,lt_max,
-lt_remaining,macros,magicwand,maintenance_plan,mark_all_as_read,market,mask_field,matrix,meet_content_source,meet_focus_content,
-meet_focus_equal,meet_focus_presenter,meet_present_panel,merge_field,merge,messaging_conversation,metrics,middle_align,minimize_window,
-missed_call,mixed_sources_mapping,money,moneybag,monthlyview,more,move,mulesoft,multi_picklist,multi_select_checkbox,muted,new_direct_message,
-new_window,new,news,no_return,not_in_sync,not_saved,note,notebook,notification_off,notification_snoozed,notification,number_input,office365,
-offline_briefcase,offline_cached,offline,omni_channel,oop_annual,oop_applied,oop_max,oop_total,open_folder,open,
-opened_folder,opportunity,orchestrator,orders,org_chart,outbound_call,outcome,outer_join,output,overflow,package_org_beta,
-package_org,package,page_structure,page,palette,partner_fund_request,password,paste,path_experiment,pause_alt,pause,
-paused_call,payment_deferred,payment_gateway,pdf_ext,people_score,people,percent,phone_landscape,phone_portrait,photo,
-picklist_choice,picklist_type,picklist,pin,pinned,plane,planning_poker,play,podcast_webinar,policy,pop_in,power,pre_auth,
-preview,price_book_entries,price_books,pricing_workspace,print,priority,privately_shared,pro_network,problem,process,product_consumed_state,
-product_quantity_rules,product_service_campaign_item,product_service_campaign,product_transfer_state,product_transfer,product_warranty_term,
-product_workspace,product,products,profile_alt,profile,program_cohort_member,program_cohort,promotion_segments,promotion_tiers,promotions_workspace,
-promotions,prompt_builder,prompt_edit,prompt,propagation_policy,proposition,push,puzzle,qualifications,question_mark,question,
-questions_and_answers,queue,quick_text,quip,quotation_marks,quote,radio_button,rating,real_time,reassign,recipe,record_alt,
-record_collection,record_consent,record_create,record_delete,record_lookup,record_update,record,recurring_exception,
-recycle_bin_empty,recycle_bin_full,redo,refresh,regenerate,relate,reminder,remove_formatting,remove_link,replace,replay,
-reply_all,reply,report_issue,reset_password,resource_absence,resource_capacity,resource_territory,response_date,restriction_policy,
-retail_execution,retweet,ribbon,richtextbulletedlist,richtextindent,richtextnumberedlist,richtextoutdent,right_align_text,right_align,
-right_join,right,robot,rotate,routing_offline,rows,rules,sales_channel,salesforce_page,salesforce1,save,scan,screen,search,section,
-segments,send_log,send,sender_email,sentiment_negative,sentiment_neutral,serialized_product_transaction,serialized_product,
-service_appointment,service_contract,service_report,service_territory_policy,settings,setup_assistant_guide,setup_modal,
-setup,share_file,share_mobile,share_post,share,shield,shift_pattern_entry,shift_pattern,shift_scheduling_operation,
-shift_ui,shopping_bag,shortcuts,side_list,signature,signpost,skill,skip_back,skip_forward,skip,slack_conversations,
-slack,slider,smiley_and_people,sms,snippet,sobject_collection,sobject,socialshare,sort_ascending,sort_policy,sort,spacer,
-sparkle,sparkles,spinner,stage_collection,stage,standard_objects,status_code,steps,stop,store,strategy,strikethrough,success,
-suggested_for_you,summary,summarydetail,survey,swarm_request,swarm_session,switch,symbols,sync_in_progress,sync,system_and_global_variable,
-table_settings,table,tableau,tablet_landscape,tablet_portrait,tabset,talent_development,target_mode,target,task,tax_policy,tax_rate,
-tax_treatment,text_background_color,text_color,text_template,text,textarea,textbox,threedots_vertical,threedots,thunder,tile_card_list,toggle_off,
-toggle_on,toggle_panel_bottom,toggle_panel_left,toggle_panel_right,toggle_panel_top,toggle,tollways,top_align,top_group_alignment,topic,topic2,touch_action,
-tour_check,tour,tracker,trail,trailblazer_ext,trailhead_alt,trailhead_ext,trailhead,transparent,transport_bicycle,transport_heavy_truck,transport_light_truck,
-transport_walking,travel_and_places,trending,truck,turn_off_notifications,type_tool,type,undelete,undeprecate,underline,undo,unlinked,
-unlock,unmuted,up,upload,user_role,user,variable,variation_attribute_setup,variation_products,video_off,video,visibility_rule_assigned,
-voicemail_drop,volume_high,volume_low,volume_off,waits,walkthroughs,warning,warranty_term,watchlist,water,weeklyview,wellness,width,wifi,
-work_forecast,work_order_type,work_queue,workforce_engagement,world,your_account,yubi_key,zoomin,zoomout
+add,adduser,announcement,answer,apps,arrowdown,arrowup,attach,back,ban,bold,bookmark,brush,
+bucket,builder,call,capslock,cases,center_align_text,chart,chat,check,checkin,chevrondown,
+chevronleft,chevronright,chevronup,clear,clock,close,comments,company,connected_apps,
+contract,contract_alt,copy,crossfilter,custom_apps,cut,dash,datadotcom,dayview,delete,deprecate,
+description,desktop,down,download,edit,edit_form,email,end_call,erect_window,error,event,expand,
+expand_alt,favorite,feed,file,filter,filterList,forward,frozen,groups,help,home,identity,image,inbox,info,
+insert_tag_field,insert_template,italic,justify_text,kanban,knowledge_base,layers,layout,
+left,left_align_text,like,link,list,location,lock,log_a_call,logout,magicwand,matrix,metrics,minimize_window,
+moneybag,monthlyview,move,muted,new,new_window,news,note,notebook,notification,office365,offline,
+open,open_folder,opened_folder,overflow,package,package_org,package_org_beta,page,palette,paste,
+people,phone_landscape,phone_portrait,photo,picklist,power,preview,priority,process,push,puzzle,
+question,questions_and_answers,record,redo,refresh,relate,remove_formatting,remove_link,
+replace,reply,reset_password,retweet,richtextbulletedlist,richtextindent,richtextnumberedlist,
+richtextoutdent,right,right_align_text,rotate,rows,salesforce1,search,settings,setup,setup_assistant_guide,
+share,share_post,shield,side_list,signpost,sms,snippet,socialshare,sort,spinner,standard_objects,
+stop,strikethrough,success,summary,summarydetail,switch,table,tablet_landscape,tablet_portrait,
+tabset,task,text_background_color,text_color,threedots,tile_card_list,topic,touch_action,trail,undelete,undeprecate,
+underline,undo,unlock,unmuted,up,upload,user,user_role,volume_high,volume_low,volume_off,warning,
+weeklyview,world,zoomin,zoomout
 `
   .replace(/^\s+|\s+$/g, '')
   .split(/[\s,]+/);

From 288d9559bdbbdf52b61d1b9b2446272b303527e2 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 3 Jul 2025 11:00:59 +0900
Subject: [PATCH 199/245] (Icon, Button): unify `SvgButtonIcon` with `SvgIcon`

---
 src/scripts/Button.tsx |  4 +--
 src/scripts/Icon.tsx   | 64 +++++++++++++-----------------------------
 2 files changed, 22 insertions(+), 46 deletions(-)

diff --git a/src/scripts/Button.tsx b/src/scripts/Button.tsx
index 1214988a8..a006a3f93 100644
--- a/src/scripts/Button.tsx
+++ b/src/scripts/Button.tsx
@@ -1,6 +1,6 @@
 import React, { FC, ReactNode, ButtonHTMLAttributes, Ref, useRef } from 'react';
 import classnames from 'classnames';
-import { SvgButtonIcon, IconCategory } from './Icon';
+import { SvgIcon, IconCategory } from './Icon';
 import { Spinner } from './Spinner';
 import { useEventCallback, useMergeRefs } from './hooks';
 
@@ -72,7 +72,7 @@ export const ButtonIcon: FC<ButtonIconProps> = ({
   }
 
   return (
-    <SvgButtonIcon
+    <SvgIcon
       className={iconClassNames}
       icon={icon}
       category={category}
diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx
index 872af48d3..fb0882d54 100644
--- a/src/scripts/Icon.tsx
+++ b/src/scripts/Icon.tsx
@@ -180,19 +180,19 @@ export type IconProps = {
  *
  */
 type SvgIconProps = IconProps & {
-  iconColor: string | null;
+  iconColor?: string | null;
 };
 
 /**
  *
  */
-const SvgIcon = forwardRef(
+export const SvgIcon = forwardRef(
   (props: SvgIconProps, ref: ForwardedRef<SVGSVGElement | null>) => {
     const {
       className = '',
       category: category_ = 'utility',
       icon: icon_,
-      iconColor,
+      iconColor = null,
       size = '',
       align,
       textColor = 'default',
@@ -200,21 +200,23 @@ const SvgIcon = forwardRef(
       ...rprops
     } = props;
     const { assetRoot = getAssetRoot() } = useContext(ComponentSettingsContext);
-    const iconClassNames = classnames(
-      'react-slds-icon',
-      {
-        'slds-icon': !/slds-button__icon/.test(className),
-        [`slds-icon_${size}`]: /^(xx-small|x-small|small|medium|large)$/.test(
-          size
-        ),
-        [`slds-icon-text-${textColor ?? 'default'}`]:
-          /^(default|success|warning|error|light)$/.test(textColor ?? '') &&
-          !iconColor,
-        'slds-m-left_x-small': align === 'right',
-        'slds-m-right_x-small': align === 'left',
-      },
-      className
-    );
+
+    const inIcon = !/slds-button__icon/.test(className);
+    const iconOnlyClassNames = classnames('react-slds-icon', 'slds-icon', {
+      [`slds-icon_${size}`]: /^(xx-small|x-small|small|medium|large)$/.test(
+        size
+      ),
+      [`slds-icon-text-${textColor ?? 'default'}`]:
+        /^(default|success|warning|error|light)$/.test(textColor ?? '') &&
+        !iconColor,
+      'slds-m-left_x-small': align === 'right',
+      'slds-m-right_x-small': align === 'left',
+    });
+
+    const iconClassNames = classnames(className, {
+      [iconOnlyClassNames]: inIcon,
+    });
+
     // icon and category prop should not include chars other than alphanumerics, underscore, and hyphen
     const icon = (icon_ ?? '').replace(/[^\w-]/g, '');
     const category = (category_ ?? '').replace(/[^\w-]/g, '');
@@ -233,32 +235,6 @@ const SvgIcon = forwardRef(
   }
 );
 
-export const SvgButtonIcon = (
-  props: {
-    className?: string;
-    category?: IconCategory;
-    icon: string;
-  } & SVGAttributes<SVGElement>
-) => {
-  const {
-    className = '',
-    category: category_ = 'utility',
-    icon: icon_,
-    style,
-    ...rprops
-  } = props;
-  const { assetRoot = getAssetRoot() } = useContext(ComponentSettingsContext);
-
-  // icon and category prop should not include chars other than alphanumerics, underscore, and hyphen
-  const icon = (icon_ ?? '').replace(/[^\w-]/g, '');
-  const category = (category_ ?? '').replace(/[^\w-]/g, '');
-  const iconUrl = `${assetRoot}/icons/${category}-sprite/svg/symbols.svg#${icon}`;
-  return (
-    <svg className={className} aria-hidden style={style} {...rprops}>
-      <use xlinkHref={iconUrl} />
-    </svg>
-  );
-};
 /**
  *
  */

From ef9997599abd8d56e0b512a86264bdffcc013ffa Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 3 Jul 2025 12:51:38 +0900
Subject: [PATCH 200/245] (Icon): reflect interface update to stories

---
 stories/Icon.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stories/Icon.stories.tsx b/stories/Icon.stories.tsx
index 6d43164e3..8779c7c7c 100644
--- a/stories/Icon.stories.tsx
+++ b/stories/Icon.stories.tsx
@@ -155,7 +155,7 @@ export const ActionIcons: StoryObj<StoryProps> = {
     icons: Icon.ICONS.ACTION_ICONS.map((icon) => ({
       icon,
       category: 'action',
-      container: 'circle',
+      circleContainer: true,
       size: 'small',
     })),
   },

From 49a06284872c73ba82a317546a7f011c29c6a806 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Mon, 7 Jul 2025 10:21:10 +0900
Subject: [PATCH 201/245] (Button): change the order of properties

---
 src/scripts/Button.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/scripts/Button.tsx b/src/scripts/Button.tsx
index a006a3f93..37e663982 100644
--- a/src/scripts/Button.tsx
+++ b/src/scripts/Button.tsx
@@ -46,12 +46,12 @@ export type ButtonIconProps = {
  *
  */
 export const ButtonIcon: FC<ButtonIconProps> = ({
-  align,
-  className,
-  style,
   icon,
   category = 'utility',
+  align,
   size,
+  className,
+  style,
   ...props
 }) => {
   const alignClassName =

From da113a24332a6d281ec4f0e7eba6b7ffc2d792a5 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Mon, 7 Jul 2025 10:46:23 +0900
Subject: [PATCH 202/245] (Icon): replace `circleContainer` with `container`

---
 src/scripts/Icon.tsx     | 7 ++++---
 stories/Icon.stories.tsx | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx
index fb0882d54..29514ba72 100644
--- a/src/scripts/Icon.tsx
+++ b/src/scripts/Icon.tsx
@@ -148,6 +148,7 @@ export type IconCategory =
   | 'standard'
   | 'utility';
 export type IconSize = 'xx-small' | 'x-small' | 'small' | 'medium' | 'large';
+export type IconContainer = 'circle';
 export type IconTextColor =
   | 'default'
   | 'success'
@@ -166,7 +167,7 @@ export type IconProps = {
   icon: string;
   size?: IconSize;
   align?: 'left' | 'right';
-  circleContainer?: boolean;
+  container?: IconContainer;
   color?: string;
   textColor?: IconTextColor;
   tabIndex?: number;
@@ -241,8 +242,8 @@ export const SvgIcon = forwardRef(
 export const Icon = createFC<IconProps, { ICONS: typeof ICONS }>(
   (props) => {
     const {
+      container,
       label,
-      circleContainer,
       containerClassName: containerClassName_,
       fillColor,
       title,
@@ -279,7 +280,7 @@ export const Icon = createFC<IconProps, { ICONS: typeof ICONS }>(
     const containerClassName = classnames(
       containerClassName_,
       'slds-icon_container',
-      circleContainer ? 'slds-icon_container_circle' : null,
+      container === 'circle' ? 'slds-icon_container_circle' : null,
       category === 'utility'
         ? `slds-icon-utility-${icon.replace(/_/g, '-')}`
         : null,
diff --git a/stories/Icon.stories.tsx b/stories/Icon.stories.tsx
index 8779c7c7c..6d43164e3 100644
--- a/stories/Icon.stories.tsx
+++ b/stories/Icon.stories.tsx
@@ -155,7 +155,7 @@ export const ActionIcons: StoryObj<StoryProps> = {
     icons: Icon.ICONS.ACTION_ICONS.map((icon) => ({
       icon,
       category: 'action',
-      circleContainer: true,
+      container: 'circle',
       size: 'small',
     })),
   },

From 8235e6f4e6b54ff9413275c69a085287b9b8bb02 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Mon, 7 Jul 2025 11:02:03 +0900
Subject: [PATCH 203/245] (Icon): make `textColor` and `currentColor` mutually
 exclusive

---
 src/scripts/Icon.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx
index 29514ba72..3314af22d 100644
--- a/src/scripts/Icon.tsx
+++ b/src/scripts/Icon.tsx
@@ -151,6 +151,7 @@ export type IconSize = 'xx-small' | 'x-small' | 'small' | 'medium' | 'large';
 export type IconContainer = 'circle';
 export type IconTextColor =
   | 'default'
+  | 'currentColor'
   | 'success'
   | 'warning'
   | 'error'
@@ -173,7 +174,6 @@ export type IconProps = {
   tabIndex?: number;
   fillColor?: string;
   title?: string;
-  currentColor?: boolean;
   flip?: boolean;
 } & SVGAttributes<SVGElement>;
 
@@ -246,8 +246,8 @@ export const Icon = createFC<IconProps, { ICONS: typeof ICONS }>(
       label,
       containerClassName: containerClassName_,
       fillColor,
+      textColor = 'default',
       title,
-      currentColor,
       flip,
       ...rprops
     } = props;
@@ -286,7 +286,7 @@ export const Icon = createFC<IconProps, { ICONS: typeof ICONS }>(
         : null,
       fillIconColor ? `slds-icon-${fillIconColor}` : null,
       {
-        'slds-current-color': currentColor,
+        'slds-current-color': textColor === 'currentColor',
         'slds-icon_flip': flip,
       }
     );

From 9bef3e38bb988b60b9b7eb44442fc20028f8b6df Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Mon, 7 Jul 2025 11:39:37 +0900
Subject: [PATCH 204/245] (Icon): add the `Current Color` story

---
 stories/Icon.stories.tsx | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/stories/Icon.stories.tsx b/stories/Icon.stories.tsx
index 6d43164e3..81ea0f09c 100644
--- a/stories/Icon.stories.tsx
+++ b/stories/Icon.stories.tsx
@@ -64,6 +64,29 @@ export const ControlledWithKnobs: StoryObj<ComponentProps<typeof Icon>> = {
   },
 };
 
+/**
+ *
+ */
+export const CurrentColor: StoryObj<ComponentProps<typeof Icon>> = {
+  render: ({ color, ...args }) => (
+    <div style={{ color }}>
+      <Icon {...args} />
+    </div>
+  ),
+  args: {
+    category: 'utility',
+    icon: 'announcement',
+    textColor: 'currentColor',
+    color: 'purple',
+  },
+  parameters: {
+    docs: {
+      storyDescription:
+        'Icon that inherits color from parent element using currentColor',
+    },
+  },
+};
+
 /**
  *
  */

From f57f21bff64f723edfc55fc55ac09eca36078197 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Mon, 7 Jul 2025 11:30:01 +0900
Subject: [PATCH 205/245] (Icon): unify the `label` into the `title`

---
 src/scripts/Icon.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx
index 3314af22d..f0ad286de 100644
--- a/src/scripts/Icon.tsx
+++ b/src/scripts/Icon.tsx
@@ -162,7 +162,6 @@ export type IconTextColor =
  *
  */
 export type IconProps = {
-  label?: string;
   containerClassName?: string;
   category?: IconCategory;
   icon: string;
@@ -243,7 +242,6 @@ export const Icon = createFC<IconProps, { ICONS: typeof ICONS }>(
   (props) => {
     const {
       container,
-      label,
       containerClassName: containerClassName_,
       fillColor,
       textColor = 'default',
@@ -291,10 +289,8 @@ export const Icon = createFC<IconProps, { ICONS: typeof ICONS }>(
       }
     );
 
-    const iconTitle = title || label;
-
     return (
-      <span className={containerClassName} title={iconTitle}>
+      <span className={containerClassName} title={title}>
         <SvgIcon
           ref={svgIconRefCallback}
           {...rprops}
@@ -304,7 +300,7 @@ export const Icon = createFC<IconProps, { ICONS: typeof ICONS }>(
             iconColor: fillIconColor,
           }}
         />
-        {label ? <span className='slds-assistive-text'>{label}</span> : null}
+        {title ? <span className='slds-assistive-text'>{title}</span> : null}
       </span>
     );
   },

From 893d6319ee52deb9a20ff588411d62f6beb447a6 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 9 Jul 2025 15:35:07 +0900
Subject: [PATCH 206/245] remove duplicated type definitions

---
 src/scripts/Icon.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx
index f0ad286de..03dc71e7a 100644
--- a/src/scripts/Icon.tsx
+++ b/src/scripts/Icon.tsx
@@ -168,9 +168,7 @@ export type IconProps = {
   size?: IconSize;
   align?: 'left' | 'right';
   container?: IconContainer;
-  color?: string;
   textColor?: IconTextColor;
-  tabIndex?: number;
   fillColor?: string;
   title?: string;
   flip?: boolean;

From 6f748225d4677f1f26af55e9935ed481e28a649c Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 10 Jul 2025 11:30:24 +0900
Subject: [PATCH 207/245] (Icon): avoid deprecated classnames

---
 src/scripts/Icon.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx
index 03dc71e7a..4367e4f7e 100644
--- a/src/scripts/Icon.tsx
+++ b/src/scripts/Icon.tsx
@@ -98,6 +98,12 @@ weeklyview,world,zoomin,zoomout
   .split(/[\s,]+/);
 /* eslint-enable max-len */
 
+const UTILITY_ICONS_DEPRECATED_FOR_CONTAINER_CLASSNAME = [
+  'close',
+  'error',
+  'warning',
+];
+
 /**
  *
  */
@@ -277,7 +283,8 @@ export const Icon = createFC<IconProps, { ICONS: typeof ICONS }>(
       containerClassName_,
       'slds-icon_container',
       container === 'circle' ? 'slds-icon_container_circle' : null,
-      category === 'utility'
+      category === 'utility' &&
+        !UTILITY_ICONS_DEPRECATED_FOR_CONTAINER_CLASSNAME.includes(icon)
         ? `slds-icon-utility-${icon.replace(/_/g, '-')}`
         : null,
       fillIconColor ? `slds-icon-${fillIconColor}` : null,

From 3477d9c6e651dfb3ee0750825eb800a4e99c531e Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 10 Jul 2025 18:32:42 +0900
Subject: [PATCH 208/245] (Picklist): restore the `buttonRef` prop

---
 src/scripts/Picklist.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index 609caf826..0828032f6 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -173,6 +173,7 @@ export type PicklistProps<MultiSelect extends boolean | undefined> = {
   tooltip?: ReactNode;
   tooltipIcon?: string;
   elementRef?: Ref<HTMLDivElement>;
+  buttonRef?: Ref<HTMLDivElement>;
   dropdownRef?: Ref<HTMLDivElement>;
   onValueChange?: Bivariant<
     (
@@ -214,6 +215,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       tooltip,
       tooltipIcon,
       elementRef: elementRef_,
+      buttonRef: buttonRef_,
       dropdownRef: dropdownRef_,
       onSelect,
       onComplete,
@@ -336,6 +338,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
     const elRef = useRef<HTMLDivElement | null>(null);
     const elementRef = useMergeRefs([elRef, elementRef_]);
     const comboboxElRef = useRef<HTMLDivElement | null>(null);
+    const buttonRef = useMergeRefs([comboboxElRef, buttonRef_]);
     const dropdownElRef = useRef<HTMLDivElement | null>(null);
     const dropdownRef = useMergeRefs([dropdownElRef, dropdownRef_]);
 
@@ -559,7 +562,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
               role='none'
             >
               <div
-                ref={comboboxElRef}
+                ref={buttonRef}
                 role='combobox'
                 tabIndex={disabled ? -1 : 0}
                 className={inputClassNames}

From 43d6fecc1432abea840c3282b0de4a0a0f1a8c94 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 10 Jul 2025 12:43:58 +0900
Subject: [PATCH 209/245] (Button): remove unnecessary `icon-bare` type

see also: https://v1.lightningdesignsystem.com/release-notes/
> .slds-button_icon-bare is no longer needed. Please use .slds-button_icon instead.
---
 src/scripts/Button.tsx             | 1 -
 src/scripts/Pill.tsx               | 2 +-
 src/scripts/Tabs.tsx               | 2 +-
 src/scripts/TreeNode.tsx           | 2 +-
 stories/DropdownButton.stories.tsx | 2 +-
 stories/PageHeader.stories.tsx     | 4 ++--
 6 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/scripts/Button.tsx b/src/scripts/Button.tsx
index 37e663982..0fe154c74 100644
--- a/src/scripts/Button.tsx
+++ b/src/scripts/Button.tsx
@@ -13,7 +13,6 @@ export type ButtonType =
   | 'success'
   | 'inverse'
   | 'icon'
-  | 'icon-bare'
   | 'icon-container'
   | 'icon-inverse'
   | 'icon-more'
diff --git a/src/scripts/Pill.tsx b/src/scripts/Pill.tsx
index 2281346f2..433dc7f17 100644
--- a/src/scripts/Pill.tsx
+++ b/src/scripts/Pill.tsx
@@ -86,7 +86,7 @@ export const Pill: FC<PillProps> = (props) => {
       <Button
         disabled={disabled}
         className='slds-pill__remove'
-        type='icon-bare'
+        type='icon'
         icon='close'
         alt='Remove'
         tabIndex={-1}
diff --git a/src/scripts/Tabs.tsx b/src/scripts/Tabs.tsx
index 5af46b578..5c8ac800b 100644
--- a/src/scripts/Tabs.tsx
+++ b/src/scripts/Tabs.tsx
@@ -99,7 +99,7 @@ const TabMenu: FC<TabMenuProps> = (props) => {
       {...rprops}
       className='react-slds-tab-menu'
       icon={icon}
-      type='icon-bare'
+      type='icon'
       iconSize='small'
       tabIndex={-1}
       nubbinTop
diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index 30f6d272a..f151e9035 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -86,7 +86,7 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
         <Button
           className='slds-m-right_x-small'
           aria-controls=''
-          type='icon-bare'
+          type='icon'
           icon={icon}
           iconSize='small'
           onClick={onToggle}
diff --git a/stories/DropdownButton.stories.tsx b/stories/DropdownButton.stories.tsx
index bb8695a95..240757a27 100644
--- a/stories/DropdownButton.stories.tsx
+++ b/stories/DropdownButton.stories.tsx
@@ -130,7 +130,7 @@ export const IconBare: StoryObj<StoryProps> = {
   args: {
     ...Default.args,
     label: undefined,
-    type: 'icon-bare',
+    type: 'icon',
     icon: 'settings',
   },
   parameters: {
diff --git a/stories/PageHeader.stories.tsx b/stories/PageHeader.stories.tsx
index 3617d7b68..0773ae325 100644
--- a/stories/PageHeader.stories.tsx
+++ b/stories/PageHeader.stories.tsx
@@ -88,7 +88,7 @@ export const RecordHome: ComponentStoryObj<typeof PageHeader> = {
         <PageHeaderDetailItem>
           <PageHeaderDetailLabel>
             Field 2 (3)
-            <DropdownButton type='icon-bare' iconSize='small' icon='down'>
+            <DropdownButton type='icon' iconSize='small' icon='down'>
               <MenuItem>Menu Item #1</MenuItem>
               <MenuItem>Menu Item #2</MenuItem>
               <MenuItem>Menu Item #3</MenuItem>
@@ -124,7 +124,7 @@ export const ObjectHome: ComponentStoryObj<typeof PageHeader> = {
         legend='Leads'
         title='Recently Viewed'
         leftActions={
-          <DropdownButton type='icon-bare' icon='down'>
+          <DropdownButton type='icon' icon='down'>
             <MenuItem>Menu Item #1</MenuItem>
             <MenuItem>Menu Item #2</MenuItem>
             <MenuItem>Menu Item #3</MenuItem>

From 8cd9535e8e0cdda57c81c13372edb67c4abc3d27 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 10 Jul 2025 12:56:54 +0900
Subject: [PATCH 210/245] (Utility): replace deprecated margin and padding
 utilities

---
 src/scripts/CheckboxGroup.tsx  |  2 +-
 src/scripts/DropdownButton.tsx |  2 +-
 src/scripts/Icon.tsx           |  4 ++--
 src/scripts/Lookup.tsx         |  2 +-
 src/scripts/Modal.tsx          |  2 +-
 src/scripts/Notification.tsx   |  4 +++-
 src/scripts/Popover.tsx        |  2 +-
 src/scripts/RadioGroup.tsx     |  2 +-
 src/scripts/TreeNode.tsx       |  4 ++--
 stories/Icon.stories.tsx       | 10 +++++-----
 stories/Modal.stories.tsx      | 12 ++++++------
 stories/Tabs.stories.tsx       |  2 +-
 12 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/scripts/CheckboxGroup.tsx b/src/scripts/CheckboxGroup.tsx
index af6ef30d8..4ca381281 100644
--- a/src/scripts/CheckboxGroup.tsx
+++ b/src/scripts/CheckboxGroup.tsx
@@ -136,7 +136,7 @@ export const CheckboxGroup = createFC<
           ) : undefined}
           {label}
           {tooltip ? (
-            <span className='slds-m-left_x-small'>
+            <span className='slds-var-m-left_x-small'>
               <TooltipContent icon={tooltipIcon}>{tooltip}</TooltipContent>
             </span>
           ) : null}
diff --git a/src/scripts/DropdownButton.tsx b/src/scripts/DropdownButton.tsx
index 7d3b6987e..a2d30dd76 100644
--- a/src/scripts/DropdownButton.tsx
+++ b/src/scripts/DropdownButton.tsx
@@ -213,7 +213,7 @@ export const DropdownButton = (props: DropdownButtonProps) => {
     'slds-dropdown-trigger',
     'slds-dropdown-trigger_click',
     {
-      'slds-m-left_xx-small': !grouped,
+      'slds-var-m-left_xx-small': !grouped,
       'slds-is-open': opened,
       'react-slds-dropdown-opened': opened,
     }
diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx
index 4367e4f7e..cbb5636a7 100644
--- a/src/scripts/Icon.tsx
+++ b/src/scripts/Icon.tsx
@@ -213,8 +213,8 @@ export const SvgIcon = forwardRef(
       [`slds-icon-text-${textColor ?? 'default'}`]:
         /^(default|success|warning|error|light)$/.test(textColor ?? '') &&
         !iconColor,
-      'slds-m-left_x-small': align === 'right',
-      'slds-m-right_x-small': align === 'left',
+      'slds-var-m-left_x-small': align === 'right',
+      'slds-var-m-right_x-small': align === 'left',
     });
 
     const iconClassNames = classnames(className, {
diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 8434c5127..c7b34627c 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -734,7 +734,7 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
         ))}
         {loading ? (
           <li role='option' className='slds-listbox__item'>
-            <div className='slds-align_absolute-center slds-p-top_medium'>
+            <div className='slds-align_absolute-center slds-var-p-top_medium'>
               <Spinner container={false} size='x-small' layout='inline' />
             </div>
           </li>
diff --git a/src/scripts/Modal.tsx b/src/scripts/Modal.tsx
index 1588124ba..74fbe857e 100644
--- a/src/scripts/Modal.tsx
+++ b/src/scripts/Modal.tsx
@@ -24,7 +24,7 @@ export const ModalHeader: FC<ModalHeaderProps> = (props) => {
       <Text tag='h2' category='heading' type='medium' tabIndex={-1}>
         {title}
       </Text>
-      {tagline ? <p className='slds-m-top_x-small'>{tagline}</p> : null}
+      {tagline ? <p className='slds-var-m-top_x-small'>{tagline}</p> : null}
     </div>
   );
 };
diff --git a/src/scripts/Notification.tsx b/src/scripts/Notification.tsx
index 35cc573e5..99affe223 100644
--- a/src/scripts/Notification.tsx
+++ b/src/scripts/Notification.tsx
@@ -52,7 +52,9 @@ export const Notification: FC<NotificationProps> = (props) => {
   const iconEl = icon ? (
     <Icon
       containerClassName={classnames(
-        type === 'toast' ? 'slds-m-right_small' : 'slds-m-right_x-small',
+        type === 'toast'
+          ? 'slds-var-m-right_small'
+          : 'slds-var-m-right_x-small',
         type === 'alert' ? ['slds-no-flex', 'slds-align-top'] : null
       )}
       icon={icon}
diff --git a/src/scripts/Popover.tsx b/src/scripts/Popover.tsx
index 8d6eb30c7..d12114ecc 100644
--- a/src/scripts/Popover.tsx
+++ b/src/scripts/Popover.tsx
@@ -100,7 +100,7 @@ export const PopoverInner = forwardRef<
       'slds-popover_tooltip': tooltip,
     },
     `slds-nubbin_${nubbinPosition}`,
-    `slds-m-${firstAlign}_small`,
+    `slds-var-m-${firstAlign}_small`,
     theme ? `slds-theme_${theme}` : undefined
   );
   const rootStyle: typeof style = {
diff --git a/src/scripts/RadioGroup.tsx b/src/scripts/RadioGroup.tsx
index 6712f22b7..79856f1df 100644
--- a/src/scripts/RadioGroup.tsx
+++ b/src/scripts/RadioGroup.tsx
@@ -111,7 +111,7 @@ export const RadioGroup = createFC<RadioGroupProps, { isFormElement: boolean }>(
           ) : undefined}
           {label}
           {tooltip ? (
-            <span className='slds-m-left_x-small'>
+            <span className='slds-var-m-left_x-small'>
               <TooltipContent icon={tooltipIcon}>{tooltip}</TooltipContent>
             </span>
           ) : null}
diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index f151e9035..c8a93586f 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -62,7 +62,7 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
   });
   const spinnerClassNames = classnames(
     'react-slds-spinner',
-    'slds-m-right_x-small'
+    'slds-var-m-right_x-small'
   );
   const loadingPositionStyle = {
     left: `${level}rem`,
@@ -84,7 +84,7 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
       )}
       {!leaf ? (
         <Button
-          className='slds-m-right_x-small'
+          className='slds-var-m-right_x-small'
           aria-controls=''
           type='icon'
           icon={icon}
diff --git a/stories/Icon.stories.tsx b/stories/Icon.stories.tsx
index 81ea0f09c..e3ee73bb5 100644
--- a/stories/Icon.stories.tsx
+++ b/stories/Icon.stories.tsx
@@ -10,7 +10,7 @@ const ListEntry: FC<{ title: string; children?: ReactNode }> = ({
   title,
 }) => (
   <li
-    className='slds-p-around_small'
+    className='slds-var-p-around_small'
     style={{
       float: 'left',
       padding: '1.5rem',
@@ -100,13 +100,13 @@ export const Sizes: StoryObj<StoryProps> = {
   }) => (
     <div>
       <Icon icon='standard:case' size='xx-small' onClick={xxsmall_onClick} />
-      <span className='slds-p-right_small' />
+      <span className='slds-var-p-right_small' />
       <Icon icon='standard:case' size='x-small' onClick={xsmall_onClick} />
-      <span className='slds-p-right_small' />
+      <span className='slds-var-p-right_small' />
       <Icon icon='standard:case' size='small' onClick={small_onClick} />
-      <span className='slds-p-right_small' />
+      <span className='slds-var-p-right_small' />
       <Icon icon='standard:case' size='medium' onClick={medium_onClick} />
-      <span className='slds-p-right_small' />
+      <span className='slds-var-p-right_small' />
       <Icon icon='standard:case' size='large' onClick={large_onClick} />
     </div>
   ),
diff --git a/stories/Modal.stories.tsx b/stories/Modal.stories.tsx
index a60d7f41c..35fb6c0bd 100644
--- a/stories/Modal.stories.tsx
+++ b/stories/Modal.stories.tsx
@@ -116,7 +116,7 @@ export const ControlledWithKnobs: StoryObj<StoryProps> = {
     childProps: {
       header: {},
       content: {
-        className: 'slds-p-around_small',
+        className: 'slds-var-p-around_small',
         children: modalContent,
       },
       footer: {
@@ -148,7 +148,7 @@ export const Default: StoryObj<StoryProps> = {
         title: 'Default Modal',
       },
       content: {
-        className: 'slds-p-around_small',
+        className: 'slds-var-p-around_small',
         children: modalContent,
       },
       footer: {
@@ -178,7 +178,7 @@ export const Large: StoryObj<StoryProps> = {
         title: 'Large Size Modal',
       },
       content: {
-        className: 'slds-p-around_small',
+        className: 'slds-var-p-around_small',
         children: modalContent,
       },
       footer: {
@@ -208,7 +208,7 @@ export const WithTagline: StoryObj<StoryProps> = {
         tagline: 'This is a tagline',
       },
       content: {
-        className: 'slds-p-around_small',
+        className: 'slds-var-p-around_small',
         children: modalContent,
       },
       footer: {
@@ -237,7 +237,7 @@ export const FooterDirectional: StoryObj<StoryProps> = {
         title: 'Modal with directional footer',
       },
       content: {
-        className: 'slds-p-around_small',
+        className: 'slds-var-p-around_small',
         children: modalContent,
       },
       footer: {
@@ -267,7 +267,7 @@ export const FormElements: StoryObj<StoryProps> = {
         title: 'Modal Form',
       },
       content: {
-        className: 'slds-p-around_small',
+        className: 'slds-var-p-around_small',
         children: (
           <Form type='compound'>
             <FieldSet label='Name'>
diff --git a/stories/Tabs.stories.tsx b/stories/Tabs.stories.tsx
index c560da72c..1c59b6224 100644
--- a/stories/Tabs.stories.tsx
+++ b/stories/Tabs.stories.tsx
@@ -45,7 +45,7 @@ function CustomTabItemContent(props: TabItemRendererProps & { icon: string }) {
       }
     >
       <Icon icon={icon} size='small' />
-      <span className='slds-p-horizontal_x-small'>{title}</span>
+      <span className='slds-var-p-horizontal_x-small'>{title}</span>
     </a>
   );
 }

From 6fa01be0a315450b0c12569ca12f160431076e1e Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 10 Jul 2025 13:59:46 +0900
Subject: [PATCH 211/245] (Datepicker): replace deprecated `slds-disabled-text`
 with `slds-color__text_gray-6`

see also: https://v1.lightningdesignsystem.com/components/datepickers/#CSS-Class-Overview
---
 src/scripts/Datepicker.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scripts/Datepicker.tsx b/src/scripts/Datepicker.tsx
index fc8dbbae3..f7c09e8f9 100644
--- a/src/scripts/Datepicker.tsx
+++ b/src/scripts/Datepicker.tsx
@@ -246,7 +246,7 @@ const DatepickerDate: FC<DatepickerDateProps> = (props) => {
   const isToday = date.value === today;
   const isAdjacentMonth = date.month !== cal.month;
   const dateClassName = classnames({
-    'slds-disabled-text': !enabled,
+    'slds-color__text_gray-6': !enabled && !isAdjacentMonth,
     'slds-is-selected': selected,
     'slds-is-today': isToday,
     'slds-day_adjacent-month': isAdjacentMonth,

From e47e58124d945c018419f577d7f47ae75092645c Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 10 Jul 2025 14:25:06 +0900
Subject: [PATCH 212/245] (Icon): avoid applying unused classname
 `slds-icon_medium`

---
 src/scripts/Icon.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx
index cbb5636a7..e0adcf5e9 100644
--- a/src/scripts/Icon.tsx
+++ b/src/scripts/Icon.tsx
@@ -207,9 +207,7 @@ export const SvgIcon = forwardRef(
 
     const inIcon = !/slds-button__icon/.test(className);
     const iconOnlyClassNames = classnames('react-slds-icon', 'slds-icon', {
-      [`slds-icon_${size}`]: /^(xx-small|x-small|small|medium|large)$/.test(
-        size
-      ),
+      [`slds-icon_${size}`]: /^(xx-small|x-small|small|large)$/.test(size),
       [`slds-icon-text-${textColor ?? 'default'}`]:
         /^(default|success|warning|error|light)$/.test(textColor ?? '') &&
         !iconColor,

From bb7a2876451681774c2831e1ff606e4f635c8340 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 10 Jul 2025 14:32:43 +0900
Subject: [PATCH 213/245] (Lookup): remove unused classnames

---
 src/scripts/Lookup.tsx     | 8 +++-----
 stories/Lookup.stories.tsx | 8 ++++----
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index c7b34627c..f23c2e0c0 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -451,7 +451,7 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
                             )}
                           </span>
                           <span className='slds-media__body'>
-                            <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
+                            <span className='slds-listbox__option-text_entity'>
                               {scope.label}
                             </span>
                           </span>
@@ -626,13 +626,11 @@ const LookupOption: FC<LookupOptionProps> = ({
           )}
         </span>
         <span className='slds-media__body'>
-          <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
+          <span className='slds-listbox__option-text_entity'>
             {entry.label}
           </span>
           {entry.meta && (
-            <span className='slds-listbox__option-meta slds-listbox__option-meta_entity'>
-              {entry.meta}
-            </span>
+            <span className='slds-listbox__option-meta'>{entry.meta}</span>
           )}
         </span>
       </div>
diff --git a/stories/Lookup.stories.tsx b/stories/Lookup.stories.tsx
index 11baf069e..a06235150 100644
--- a/stories/Lookup.stories.tsx
+++ b/stories/Lookup.stories.tsx
@@ -379,7 +379,7 @@ export const OpenedWithListHeaderFooter: ComponentStoryObj<typeof Lookup> = {
           <Icon category='utility' icon='search' size='x-small' />
         </span>
         <span className='slds-media__body'>
-          <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
+          <span className='slds-listbox__option-text_entity'>
             &quot;A&quot; in Account
           </span>
         </span>
@@ -391,7 +391,7 @@ export const OpenedWithListHeaderFooter: ComponentStoryObj<typeof Lookup> = {
           <Icon category='utility' icon='add' size='x-small' />
         </span>
         <span className='slds-media__body'>
-          <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
+          <span className='slds-listbox__option-text_entity'>
             Add new Account
           </span>
         </span>
@@ -473,7 +473,7 @@ export const DefaultOpenedWithListHeaderFooter: ComponentStoryObj<
           <Icon category='utility' icon='search' size='x-small' />
         </span>
         <span className='slds-media__body'>
-          <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
+          <span className='slds-listbox__option-text_entity'>
             &quot;A&quot; in Account
           </span>
         </span>
@@ -485,7 +485,7 @@ export const DefaultOpenedWithListHeaderFooter: ComponentStoryObj<
           <Icon category='utility' icon='add' size='x-small' />
         </span>
         <span className='slds-media__body'>
-          <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
+          <span className='slds-listbox__option-text_entity'>
             Add new Account
           </span>
         </span>

From 11b4bdb2117ca27d7a7a7a6fe7588ed6bb59623e Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 10 Jul 2025 18:23:22 +0900
Subject: [PATCH 214/245] Revert "(Lookup): remove unused classnames"

This reverts commit 276c09a779840baf5669e1d7551477217701c06b.
---
 src/scripts/Lookup.tsx     | 8 +++++---
 stories/Lookup.stories.tsx | 8 ++++----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index f23c2e0c0..c7b34627c 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -451,7 +451,7 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
                             )}
                           </span>
                           <span className='slds-media__body'>
-                            <span className='slds-listbox__option-text_entity'>
+                            <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
                               {scope.label}
                             </span>
                           </span>
@@ -626,11 +626,13 @@ const LookupOption: FC<LookupOptionProps> = ({
           )}
         </span>
         <span className='slds-media__body'>
-          <span className='slds-listbox__option-text_entity'>
+          <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
             {entry.label}
           </span>
           {entry.meta && (
-            <span className='slds-listbox__option-meta'>{entry.meta}</span>
+            <span className='slds-listbox__option-meta slds-listbox__option-meta_entity'>
+              {entry.meta}
+            </span>
           )}
         </span>
       </div>
diff --git a/stories/Lookup.stories.tsx b/stories/Lookup.stories.tsx
index a06235150..11baf069e 100644
--- a/stories/Lookup.stories.tsx
+++ b/stories/Lookup.stories.tsx
@@ -379,7 +379,7 @@ export const OpenedWithListHeaderFooter: ComponentStoryObj<typeof Lookup> = {
           <Icon category='utility' icon='search' size='x-small' />
         </span>
         <span className='slds-media__body'>
-          <span className='slds-listbox__option-text_entity'>
+          <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
             &quot;A&quot; in Account
           </span>
         </span>
@@ -391,7 +391,7 @@ export const OpenedWithListHeaderFooter: ComponentStoryObj<typeof Lookup> = {
           <Icon category='utility' icon='add' size='x-small' />
         </span>
         <span className='slds-media__body'>
-          <span className='slds-listbox__option-text_entity'>
+          <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
             Add new Account
           </span>
         </span>
@@ -473,7 +473,7 @@ export const DefaultOpenedWithListHeaderFooter: ComponentStoryObj<
           <Icon category='utility' icon='search' size='x-small' />
         </span>
         <span className='slds-media__body'>
-          <span className='slds-listbox__option-text_entity'>
+          <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
             &quot;A&quot; in Account
           </span>
         </span>
@@ -485,7 +485,7 @@ export const DefaultOpenedWithListHeaderFooter: ComponentStoryObj<
           <Icon category='utility' icon='add' size='x-small' />
         </span>
         <span className='slds-media__body'>
-          <span className='slds-listbox__option-text_entity'>
+          <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
             Add new Account
           </span>
         </span>

From 9a84e053a6e0fb1e0407098012dd2752eb993beb Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 10 Jul 2025 18:41:42 +0900
Subject: [PATCH 215/245] (Picklist): normalize markups around `Icon`

---
 src/scripts/Picklist.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index 0828032f6..0b3e5141c 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -580,12 +580,13 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
               >
                 <span className='slds-truncate'>{selectedItemLabel}</span>
               </div>
-              <span className='slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right'>
-                <Icon
-                  icon='down'
-                  className='slds-icon slds-icon_x-small slds-icon-text-default'
-                />
-              </span>
+              <Icon
+                containerClassName='slds-input__icon slds-input__icon_right'
+                category='utility'
+                icon='down'
+                size='x-small'
+                textColor='default'
+              />
             </div>
             {opened && (
               <div
@@ -676,9 +677,12 @@ export const PicklistItem: FC<PicklistItemProps> = ({
       >
         <span className='slds-media__figure slds-listbox__option-icon'>
           {selected && (
-            <span className='slds-icon_container slds-icon-utility-check slds-current-color'>
-              <Icon icon='check' className='slds-icon slds-icon_x-small' />
-            </span>
+            <Icon
+              category='utility'
+              icon='check'
+              size='x-small'
+              textColor='currentColor'
+            />
           )}
         </span>
         <span className='slds-media__body'>

From 3d1e26c682b96739fe65bbacb05586a534020e4b Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 11 Jul 2025 10:38:32 +0900
Subject: [PATCH 216/245] (Picklist): restore the `icon` prop

---
 src/scripts/Picklist.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index 0b3e5141c..b16e89998 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -627,6 +627,7 @@ export type PicklistItemProps = {
   value?: string | number;
   selected?: boolean;
   disabled?: boolean;
+  icon?: string;
   children?: React.ReactNode;
 };
 
@@ -638,6 +639,7 @@ export const PicklistItem: FC<PicklistItemProps> = ({
   selected: selected_,
   value,
   disabled,
+  icon,
   children,
 }) => {
   const { values, multiSelect, onSelect, focusedValue, optionIdPrefix } =
@@ -676,14 +678,21 @@ export const PicklistItem: FC<PicklistItemProps> = ({
         onClick={onClick}
       >
         <span className='slds-media__figure slds-listbox__option-icon'>
-          {selected && (
+          {icon ? (
+            <Icon
+              category='utility'
+              icon={icon}
+              size='x-small'
+              textColor='currentColor'
+            />
+          ) : selected ? (
             <Icon
               category='utility'
               icon='check'
               size='x-small'
               textColor='currentColor'
             />
-          )}
+          ) : null}
         </span>
         <span className='slds-media__body'>
           <span className='slds-truncate' title={String(label || children)}>

From 8309f9e994bbb04a62268d005c48da790379f517 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 11 Jul 2025 10:40:40 +0900
Subject: [PATCH 217/245] (Picklist): restore the `divider` prop

---
 src/scripts/Picklist.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index b16e89998..36623d28e 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -628,6 +628,7 @@ export type PicklistItemProps = {
   selected?: boolean;
   disabled?: boolean;
   icon?: string;
+  divider?: 'top' | 'bottom';
   children?: React.ReactNode;
 };
 
@@ -640,6 +641,7 @@ export const PicklistItem: FC<PicklistItemProps> = ({
   value,
   disabled,
   icon,
+  divider,
   children,
 }) => {
   const { values, multiSelect, onSelect, focusedValue, optionIdPrefix } =
@@ -665,8 +667,12 @@ export const PicklistItem: FC<PicklistItemProps> = ({
     }
   );
 
-  return (
-    <li role='presentation' className='slds-listbox__item'>
+  const listItemClassNames = classnames(
+    'slds-listbox__item',
+    divider ? `slds-has-divider_${divider}-space` : undefined
+  );
+  const mainListItem = (
+    <li role='presentation' className={listItemClassNames}>
       <div
         id={value ? `${optionIdPrefix}-${value}` : undefined}
         className={itemClassNames}
@@ -702,4 +708,16 @@ export const PicklistItem: FC<PicklistItemProps> = ({
       </div>
     </li>
   );
+
+  return (
+    <>
+      {divider === 'top' && (
+        <li className={`slds-has-divider_${divider}-space`} role='separator' />
+      )}
+      {mainListItem}
+      {divider === 'bottom' && (
+        <li className={`slds-has-divider_${divider}-space`} role='separator' />
+      )}
+    </>
+  );
 };

From 9d8c62079f0b45291a89631b37b34b43a49b6c28 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 18 Jul 2025 09:30:08 +0900
Subject: [PATCH 218/245] (Picklist): rename `buttonRef` with `inputRef`

---
 src/scripts/Picklist.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index 36623d28e..9f36409e2 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -173,7 +173,7 @@ export type PicklistProps<MultiSelect extends boolean | undefined> = {
   tooltip?: ReactNode;
   tooltipIcon?: string;
   elementRef?: Ref<HTMLDivElement>;
-  buttonRef?: Ref<HTMLDivElement>;
+  inputRef?: Ref<HTMLDivElement>;
   dropdownRef?: Ref<HTMLDivElement>;
   onValueChange?: Bivariant<
     (
@@ -215,7 +215,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       tooltip,
       tooltipIcon,
       elementRef: elementRef_,
-      buttonRef: buttonRef_,
+      inputRef: inputRef_,
       dropdownRef: dropdownRef_,
       onSelect,
       onComplete,
@@ -338,7 +338,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
     const elRef = useRef<HTMLDivElement | null>(null);
     const elementRef = useMergeRefs([elRef, elementRef_]);
     const comboboxElRef = useRef<HTMLDivElement | null>(null);
-    const buttonRef = useMergeRefs([comboboxElRef, buttonRef_]);
+    const inputRef = useMergeRefs([comboboxElRef, inputRef_]);
     const dropdownElRef = useRef<HTMLDivElement | null>(null);
     const dropdownRef = useMergeRefs([dropdownElRef, dropdownRef_]);
 
@@ -562,7 +562,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
               role='none'
             >
               <div
-                ref={buttonRef}
+                ref={inputRef}
                 role='combobox'
                 tabIndex={disabled ? -1 : 0}
                 className={inputClassNames}

From 38195da793409453604752958cfc425ccd4d7b6e Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Mon, 14 Jul 2025 10:52:54 +0900
Subject: [PATCH 219/245] (Picklist): restore the `onClick` prop

---
 src/scripts/Picklist.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index 9f36409e2..d5b0438ec 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -629,6 +629,7 @@ export type PicklistItemProps = {
   disabled?: boolean;
   icon?: string;
   divider?: 'top' | 'bottom';
+  onClick?: (e: React.SyntheticEvent) => void;
   children?: React.ReactNode;
 };
 
@@ -642,6 +643,7 @@ export const PicklistItem: FC<PicklistItemProps> = ({
   disabled,
   icon,
   divider,
+  onClick: onClick_,
   children,
 }) => {
   const { values, multiSelect, onSelect, focusedValue, optionIdPrefix } =
@@ -650,9 +652,10 @@ export const PicklistItem: FC<PicklistItemProps> = ({
     selected_ ?? (value != null ? values.indexOf(value) >= 0 : false);
   const isFocused = focusedValue === value;
 
-  const onClick = useEventCallback(() => {
+  const onClick = useEventCallback((e: React.SyntheticEvent) => {
     if (!disabled && value != null) {
       onSelect(value);
+      onClick_?.(e);
     }
   });
 

From 35a62a5702331e553be6aa498625cc4eb2b3896c Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 15 Jul 2025 10:21:36 +0900
Subject: [PATCH 220/245] (Picklist): restore the `iconRight` prop

---
 src/scripts/Picklist.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index d5b0438ec..09de07b23 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -628,6 +628,7 @@ export type PicklistItemProps = {
   selected?: boolean;
   disabled?: boolean;
   icon?: string;
+  iconRight?: string;
   divider?: 'top' | 'bottom';
   onClick?: (e: React.SyntheticEvent) => void;
   children?: React.ReactNode;
@@ -642,6 +643,7 @@ export const PicklistItem: FC<PicklistItemProps> = ({
   value,
   disabled,
   icon,
+  iconRight,
   divider,
   onClick: onClick_,
   children,
@@ -708,6 +710,16 @@ export const PicklistItem: FC<PicklistItemProps> = ({
             {label || children}
           </span>
         </span>
+        {iconRight && (
+          <span className='slds-media__figure slds-media__figure_reverse'>
+            <Icon
+              category='utility'
+              icon={iconRight}
+              size='x-small'
+              textColor='currentColor'
+            />
+          </span>
+        )}
       </div>
     </li>
   );

From 5fd7aff8003ad60e80b78d183d847916020eb72d Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Mon, 14 Jul 2025 11:17:20 +0900
Subject: [PATCH 221/245] (Button): pass `alt` prop only as `title`

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

diff --git a/src/scripts/Button.tsx b/src/scripts/Button.tsx
index 37e663982..65d1359dd 100644
--- a/src/scripts/Button.tsx
+++ b/src/scripts/Button.tsx
@@ -159,7 +159,7 @@ export const Button: FC<ButtonProps> = (props) => {
       ref={buttonRef}
       className={btnClassNames}
       type={htmlType}
-      title={isIconOnly || alt ? alt ?? icon : undefined}
+      title={alt}
       tabIndex={tabIndex ?? -1}
       {...rprops}
       onClick={onClick}

From aa76ab800781f6574d6e8627d89ef61d209b02d3 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 15 Jul 2025 17:27:00 +0900
Subject: [PATCH 222/245] (Tabs): add the `alt` prop instead of the `title`

---
 src/scripts/Tabs.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/scripts/Tabs.tsx b/src/scripts/Tabs.tsx
index 5af46b578..904080f76 100644
--- a/src/scripts/Tabs.tsx
+++ b/src/scripts/Tabs.tsx
@@ -115,6 +115,7 @@ const TabMenu: FC<TabMenuProps> = (props) => {
 export type TabItemRendererProps = {
   type?: TabType;
   title?: string;
+  alt?: string;
   menu?: ReactElement;
   menuItems?: ReactElement[];
   menuIcon?: string;
@@ -152,7 +153,7 @@ export type TabItemProps<RendererProps extends TabItemRendererProps> = {
 const TabItem = <RendererProps extends TabItemRendererProps>(
   props: TabItemProps<RendererProps>
 ) => {
-  const { title, eventKey, menu, menuIcon, tooltip, tooltipIcon } = props;
+  const { title, alt, eventKey, menu, menuIcon, tooltip, tooltipIcon } = props;
   const { type, activeTabRef } = useContext(TabsContext);
   const activeKey = useContext(TabsActiveKeyContext);
   const { onTabClick, onTabKeyDown } = useContext(TabsHandlersContext);
@@ -187,7 +188,7 @@ const TabItem = <RendererProps extends TabItemRendererProps>(
     onTabKeyDown,
   } as RendererProps;
   return (
-    <li className={tabItemClassName} title={title} role='presentation'>
+    <li className={tabItemClassName} title={alt} role='presentation'>
       <TabItemRenderer {...itemRendererProps}>
         <span
           className={`react-slds-tab-item-content ${

From 55a4b06c47de67c9ebe1565cbd53299074806050 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 15 Jul 2025 10:14:08 +0900
Subject: [PATCH 223/245] (Notificaion): apply `currentColor`

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

diff --git a/src/scripts/Notification.tsx b/src/scripts/Notification.tsx
index 35cc573e5..02ebf8231 100644
--- a/src/scripts/Notification.tsx
+++ b/src/scripts/Notification.tsx
@@ -57,7 +57,7 @@ export const Notification: FC<NotificationProps> = (props) => {
       )}
       icon={icon}
       size={iconSize ?? (type === 'toast' ? 'small' : 'x-small')}
-      fillColor='none'
+      fillColor='currentColor'
       textColor={level === 'warning' ? 'default' : null}
     />
   ) : undefined;

From 6190e699069886e2668478e3aa9aabfd7a4286d4 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Mon, 14 Jul 2025 11:08:41 +0900
Subject: [PATCH 224/245] (Picklist): introduce `AutoAlign`

---
 src/scripts/Picklist.tsx | 56 +++++++++++++++++++++++-----------------
 1 file changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index 609caf826..78d368096 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -15,6 +15,7 @@ import React, {
 import classnames from 'classnames';
 import { FormElement, FormElementProps } from './FormElement';
 import { Icon } from './Icon';
+import { AutoAlign } from './AutoAlign';
 import { DropdownMenuProps } from './DropdownMenu';
 import { isElInChildren } from './util';
 import { ComponentSettingsContext } from './ComponentSettings';
@@ -584,30 +585,39 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
                 />
               </span>
             </div>
-            {opened && (
-              <div
-                id={listboxId}
-                className={dropdownClassNames}
-                role='listbox'
-                aria-label='Options'
-                tabIndex={0}
-                aria-busy={false}
-                ref={dropdownRef}
-                style={{ ...menuStyle, left: 0, transform: 'translate(0)' }}
-              >
-                <ul
-                  className='slds-listbox slds-listbox_vertical'
-                  role='presentation'
-                  onKeyDown={onKeyDown}
-                  onBlur={onBlur}
-                >
-                  <PicklistContext.Provider value={contextValue}>
-                    {children}
-                  </PicklistContext.Provider>
-                </ul>
-              </div>
-            )}
           </div>
+          {opened && (
+            <AutoAlign
+              triggerSelector='.react-slds-picklist'
+              alignmentStyle='menu'
+              portalClassName={classnames(className, 'slds-picklist')}
+              portalStyle={menuStyle}
+              size={menuSize}
+            >
+              {({ autoAlignContentRef }) => (
+                <div
+                  id={listboxId}
+                  className={dropdownClassNames}
+                  role='listbox'
+                  aria-label='Options'
+                  tabIndex={0}
+                  aria-busy={false}
+                  ref={useMergeRefs([dropdownRef, autoAlignContentRef])}
+                >
+                  <ul
+                    className='slds-listbox slds-listbox_vertical'
+                    role='presentation'
+                    onKeyDown={onKeyDown}
+                    onBlur={onBlur}
+                  >
+                    <PicklistContext.Provider value={contextValue}>
+                      {children}
+                    </PicklistContext.Provider>
+                  </ul>
+                </div>
+              )}
+            </AutoAlign>
+          )}
         </div>
       </FormElement>
     );

From 7182b283a8e817a3ed6010681c5903d7b735959e Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 16 Jul 2025 10:21:12 +0900
Subject: [PATCH 225/245] (Picklist): remove the number of selected values from
 the label

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

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index 78d368096..bf3cc0e37 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -489,7 +489,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
     const selectedItemLabel = useMemo(() => {
       // many items selected
       if (values.length > 1) {
-        return `${values.length} ${optionsSelectedText}`;
+        return optionsSelectedText;
       }
 
       // one item

From 93fc5c29b5b05adbe57cf52bea7c282ee3f21608 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 16 Jul 2025 10:22:16 +0900
Subject: [PATCH 226/245] (Picklist): escape all the selector string

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

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index bf3cc0e37..503b21fc5 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -304,7 +304,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
 
         const dropdownContainer = dropdownElRef.current;
         const targetElement = dropdownContainer.querySelector(
-          `#${CSS.escape(optionIdPrefix)}-${nextFocusedValue}`
+          `#${CSS.escape(`${optionIdPrefix}-${nextFocusedValue}`)}`
         );
 
         if (!(targetElement instanceof HTMLElement)) {

From 9bef1d05b77d970194b7874517b558013c09167a Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 15 Jul 2025 10:07:48 +0900
Subject: [PATCH 227/245] (Picklist): add `.react-slds-picklist`

---
 src/scripts/Picklist.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index 503b21fc5..409a1ecea 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -506,6 +506,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
     const hasValue = values.length > 0;
     const containerClassNames = classnames(
       className,
+      'react-slds-picklist',
       'slds-combobox_container',
       'slds-size_small'
     );

From 7c8508db7b75c72ac677d973013e5556d4e0b6be Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 18 Jul 2025 09:59:48 +0900
Subject: [PATCH 228/245] (Picklist): add `useInitComponentStyle()`

---
 src/scripts/Picklist.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index 409a1ecea..5d8b8774f 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -17,7 +17,7 @@ import { FormElement, FormElementProps } from './FormElement';
 import { Icon } from './Icon';
 import { AutoAlign } from './AutoAlign';
 import { DropdownMenuProps } from './DropdownMenu';
-import { isElInChildren } from './util';
+import { registerStyle, isElInChildren } from './util';
 import { ComponentSettingsContext } from './ComponentSettings';
 import { useControlledValue, useEventCallback, useMergeRefs } from './hooks';
 import { createFC } from './common';
@@ -150,6 +150,20 @@ const PicklistContext = createContext<{
   optionIdPrefix: '',
 });
 
+/**
+ *
+ */
+function useInitComponentStyle() {
+  useEffect(() => {
+    registerStyle('picklist', [
+      [
+        '.react-slds-picklist-dropdown',
+        '{ left: 0; transform: translateX(0); }',
+      ],
+    ]);
+  }, []);
+}
+
 /**
  *
  */
@@ -225,6 +239,8 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       ...rprops
     } = props;
 
+    useInitComponentStyle();
+
     const fallbackId = useId();
     const id = id_ ?? fallbackId;
     const listboxId = `${id}-listbox`;
@@ -528,6 +544,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       }
     );
     const dropdownClassNames = classnames(
+      'react-slds-picklist-dropdown',
       'slds-dropdown',
       'slds-dropdown_length-5',
       menuSize ? `slds-dropdown_${menuSize}` : 'slds-dropdown_fluid'

From 54a688ea9623043f7ecbded73af0ea72a294f94b Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 15 Jul 2025 11:04:32 +0900
Subject: [PATCH 229/245] (Lookup): introduce `AutoAlign`

---
 src/scripts/Lookup.tsx | 388 +++++++++++++++++++++++++----------------
 1 file changed, 233 insertions(+), 155 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 8434c5127..80a605ba2 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -14,6 +14,7 @@ import React, {
   FC,
 } from 'react';
 import classnames from 'classnames';
+import { AutoAlign } from './AutoAlign';
 import { Button } from './Button';
 import { FormElement, FormElementProps } from './FormElement';
 import { Icon, IconCategory } from './Icon';
@@ -174,6 +175,37 @@ const LookupSelectedState: FC<LookupSelectedStateProps> = ({
   );
 };
 
+/**
+ * Props for LookupScopeSelectorContainer component
+ */
+type LookupScopeSelectorContainerProps = {
+  scopeListboxId: string;
+  autoAlignContentRef: Ref<HTMLElement | null>;
+  children: React.ReactNode;
+};
+
+/**
+ * Container component for scope selector dropdown with AutoAlign
+ */
+const LookupScopeSelectorContainer: FC<LookupScopeSelectorContainerProps> = ({
+  scopeListboxId,
+  autoAlignContentRef,
+  children,
+}) => {
+  return (
+    <div
+      id={scopeListboxId}
+      className='slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid'
+      role='listbox'
+      aria-label='Scope Options'
+      style={{ left: 0, transform: 'translateX(0)' }}
+      ref={useMergeRefs([autoAlignContentRef])}
+    >
+      {children}
+    </div>
+  );
+};
+
 /**
  * Props for LookupScopeSelector component
  */
@@ -409,57 +441,62 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
                 </div>
               </div>
               {scopeOpened && (
-                <div
-                  id={scopeListboxId}
-                  className='slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid'
-                  role='listbox'
-                  aria-label='Scope Options'
-                  style={{ left: 0, transform: 'translateX(0)' }}
+                <AutoAlign
+                  triggerSelector='.react-slds-lookup'
+                  alignmentStyle='menu'
+                  portalClassName='slds-lookup-scope'
                 >
-                  <ul
-                    className='slds-listbox slds-listbox_vertical'
-                    role='presentation'
-                    onBlur={onScopeBlur}
-                    onKeyDown={onScopeKeyDown}
-                  >
-                    {scopes.map((scope, index) => (
-                      <li
-                        key={scope.label}
+                  {({ autoAlignContentRef }) => (
+                    <LookupScopeSelectorContainer
+                      scopeListboxId={scopeListboxId}
+                      autoAlignContentRef={autoAlignContentRef}
+                    >
+                      <ul
+                        className='slds-listbox slds-listbox_vertical'
                         role='presentation'
-                        className='slds-listbox__item'
+                        onBlur={onScopeBlur}
+                        onKeyDown={onScopeKeyDown}
                       >
-                        <div
-                          id={getScopeOptionId(index)}
-                          className={classnames(
-                            'slds-media slds-media_center slds-listbox__option slds-listbox__option_entity',
-                            {
-                              'slds-has-focus': scopeFocusedIndex === index,
-                            }
-                          )}
-                          role='option'
-                          aria-selected={scope.label === targetScope}
-                          tabIndex={0}
-                          onClick={() => onScopeSelect(scope.label)}
-                        >
-                          <span className='slds-media__figure slds-listbox__option-icon'>
-                            {scope.icon && (
-                              <Icon
-                                category={scope.category}
-                                icon={scope.icon}
-                                size='small'
-                              />
-                            )}
-                          </span>
-                          <span className='slds-media__body'>
-                            <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
-                              {scope.label}
-                            </span>
-                          </span>
-                        </div>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
+                        {scopes.map((scope, index) => (
+                          <li
+                            key={scope.label}
+                            role='presentation'
+                            className='slds-listbox__item'
+                          >
+                            <div
+                              id={getScopeOptionId(index)}
+                              className={classnames(
+                                'slds-media slds-media_center slds-listbox__option slds-listbox__option_entity',
+                                {
+                                  'slds-has-focus': scopeFocusedIndex === index,
+                                }
+                              )}
+                              role='option'
+                              aria-selected={scope.label === targetScope}
+                              tabIndex={0}
+                              onClick={() => onScopeSelect(scope.label)}
+                            >
+                              <span className='slds-media__figure slds-listbox__option-icon'>
+                                {scope.icon && (
+                                  <Icon
+                                    category={scope.category}
+                                    icon={scope.icon}
+                                    size='small'
+                                  />
+                                )}
+                              </span>
+                              <span className='slds-media__body'>
+                                <span className='slds-listbox__option-text slds-listbox__option-text_entity'>
+                                  {scope.label}
+                                </span>
+                              </span>
+                            </div>
+                          </li>
+                        ))}
+                      </ul>
+                    </LookupScopeSelectorContainer>
+                  )}
+                </AutoAlign>
               )}
             </div>
           </div>
@@ -640,6 +677,43 @@ const LookupOption: FC<LookupOptionProps> = ({
   );
 };
 
+/**
+ * Props for LookupDropdownContainer component
+ */
+type LookupDropdownContainerProps = {
+  listboxId: string;
+  loading?: boolean;
+  dropdownRef: Ref<HTMLDivElement>;
+  autoAlignContentRef: Ref<HTMLElement | null>;
+  children: React.ReactNode;
+};
+
+/**
+ * Container component for dropdown with merged refs
+ */
+const LookupDropdownContainer: FC<LookupDropdownContainerProps> = ({
+  listboxId,
+  loading,
+  dropdownRef,
+  autoAlignContentRef,
+  children,
+}) => {
+  return (
+    <div
+      id={listboxId}
+      className='slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid slds-scrollable_none'
+      style={{ maxHeight: LIST_PARENT_MAX_HEIGHT }}
+      role='listbox'
+      aria-label='Search Results'
+      tabIndex={0}
+      aria-busy={loading}
+      ref={useMergeRefs([dropdownRef, autoAlignContentRef])}
+    >
+      {children}
+    </div>
+  );
+};
+
 /**
  * Props for LookupDropdown component
  */
@@ -684,83 +758,87 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
   if (!opened) return null;
 
   return (
-    <div
-      id={listboxId}
-      className='slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid slds-scrollable_none'
-      style={{ maxHeight: LIST_PARENT_MAX_HEIGHT }}
-      role='listbox'
-      aria-label='Search Results'
-      tabIndex={0}
-      aria-busy={loading}
-      ref={dropdownRef}
+    <AutoAlign
+      triggerSelector='.react-slds-lookup'
+      alignmentStyle='menu'
+      portalClassName='slds-lookup'
     >
-      {listHeader ? (
-        <ul
-          className='slds-listbox slds-listbox_vertical'
-          role='presentation'
-          onKeyDown={onKeyDown}
-          onBlur={onBlur}
+      {({ autoAlignContentRef }) => (
+        <LookupDropdownContainer
+          listboxId={listboxId}
+          loading={loading}
+          dropdownRef={dropdownRef}
+          autoAlignContentRef={autoAlignContentRef}
         >
-          <li role='presentation' className='slds-listbox__item'>
-            <div
-              id={getOptionId(listHeaderIdSeed)}
-              className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity slds-listbox__option_term'
-              role='option'
-              aria-selected='true'
-              tabIndex={0}
-              onFocus={() => onOptionFocus(listHeaderIdSeed)}
+          {listHeader ? (
+            <ul
+              className='slds-listbox slds-listbox_vertical'
+              role='presentation'
+              onKeyDown={onKeyDown}
+              onBlur={onBlur}
             >
-              {listHeader}
-            </div>
-          </li>
-        </ul>
-      ) : null}
-      <ul
-        className='slds-listbox slds-listbox_vertical slds-scrollable_y'
-        style={{ maxHeight: LIST_CONTENT_MAX_HEIGHT }}
-        role='presentation'
-        onKeyDown={onKeyDown}
-        onBlur={onBlur}
-      >
-        {filteredData.map((entry) => (
-          <LookupOption
-            key={entry.value}
-            entry={entry}
-            isFocused={focusedValue === entry.value}
-            getOptionId={getOptionId}
-            onOptionClick={onOptionClick}
-            onOptionFocus={onOptionFocus}
-          />
-        ))}
-        {loading ? (
-          <li role='option' className='slds-listbox__item'>
-            <div className='slds-align_absolute-center slds-p-top_medium'>
-              <Spinner container={false} size='x-small' layout='inline' />
-            </div>
-          </li>
-        ) : null}
-      </ul>
-      {listFooter ? (
-        <ul
-          className='slds-listbox slds-listbox_vertical'
-          role='presentation'
-          onKeyDown={onKeyDown}
-          onBlur={onBlur}
-        >
-          <li role='presentation' className='slds-listbox__item'>
-            <div
-              id={getOptionId(listFooterIdSeed)}
-              className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity slds-listbox__option_term'
-              role='option'
-              tabIndex={0}
-              onFocus={() => onOptionFocus(listFooterIdSeed)}
+              <li role='presentation' className='slds-listbox__item'>
+                <div
+                  id={getOptionId(listHeaderIdSeed)}
+                  className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity slds-listbox__option_term'
+                  role='option'
+                  aria-selected='true'
+                  tabIndex={0}
+                  onFocus={() => onOptionFocus(listHeaderIdSeed)}
+                >
+                  {listHeader}
+                </div>
+              </li>
+            </ul>
+          ) : null}
+          <ul
+            className='slds-listbox slds-listbox_vertical slds-scrollable_y'
+            style={{ maxHeight: LIST_CONTENT_MAX_HEIGHT }}
+            role='presentation'
+            onKeyDown={onKeyDown}
+            onBlur={onBlur}
+          >
+            {filteredData.map((entry) => (
+              <LookupOption
+                key={entry.value}
+                entry={entry}
+                isFocused={focusedValue === entry.value}
+                getOptionId={getOptionId}
+                onOptionClick={onOptionClick}
+                onOptionFocus={onOptionFocus}
+              />
+            ))}
+            {loading ? (
+              <li role='option' className='slds-listbox__item'>
+                <div className='slds-align_absolute-center slds-p-top_medium'>
+                  <Spinner container={false} size='x-small' layout='inline' />
+                </div>
+              </li>
+            ) : null}
+          </ul>
+          {listFooter ? (
+            <ul
+              className='slds-listbox slds-listbox_vertical'
+              role='presentation'
+              onKeyDown={onKeyDown}
+              onBlur={onBlur}
             >
-              {listFooter}
-            </div>
-          </li>
-        </ul>
-      ) : null}
-    </div>
+              <li role='presentation' className='slds-listbox__item'>
+                <div
+                  id={getOptionId(listFooterIdSeed)}
+                  className='slds-media slds-media_center slds-listbox__option slds-listbox__option_entity slds-listbox__option_term'
+                  role='option'
+                  tabIndex={0}
+                  onFocus={() => onOptionFocus(listFooterIdSeed)}
+                >
+                  {listFooter}
+                </div>
+              </li>
+            </ul>
+          ) : null}
+        </LookupDropdownContainer>
+      )}
+    </AutoAlign>
   );
 };
 
@@ -1238,26 +1316,26 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
                     onInputBlur={onInputBlur}
                     onInputKeyDown={onInputKeyDown}
                   />
-                  <LookupDropdown
-                    opened={opened}
-                    loading={loading}
-                    listboxId={listboxId}
-                    dropdownRef={dropdownRef}
-                    listHeader={listHeader}
-                    listHeaderIdSeed={listHeaderIdSeed}
-                    listFooter={listFooter}
-                    listFooterIdSeed={listFooterIdSeed}
-                    filteredData={filteredData}
-                    focusedValue={focusedValue}
-                    getOptionId={getOptionId}
-                    onOptionClick={onOptionClick}
-                    onOptionFocus={onOptionFocus}
-                    onBlur={onInputBlur}
-                    onKeyDown={onInputKeyDown}
-                  />
                 </div>
               </div>
             </div>
+            <LookupDropdown
+              opened={opened}
+              loading={loading}
+              listboxId={listboxId}
+              dropdownRef={dropdownRef}
+              listHeader={listHeader}
+              listHeaderIdSeed={listHeaderIdSeed}
+              listFooter={listFooter}
+              listFooterIdSeed={listFooterIdSeed}
+              filteredData={filteredData}
+              focusedValue={focusedValue}
+              getOptionId={getOptionId}
+              onOptionClick={onOptionClick}
+              onOptionFocus={onOptionFocus}
+              onBlur={onInputBlur}
+              onKeyDown={onInputKeyDown}
+            />
           </div>
         </FormElement>
       );
@@ -1285,24 +1363,24 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
               onInputBlur={onInputBlur}
               onInputKeyDown={onInputKeyDown}
             />
-            <LookupDropdown
-              opened={opened}
-              loading={loading}
-              listboxId={listboxId}
-              dropdownRef={dropdownRef}
-              listHeader={listHeader}
-              listHeaderIdSeed={listHeaderIdSeed}
-              listFooter={listFooter}
-              listFooterIdSeed={listFooterIdSeed}
-              filteredData={filteredData}
-              focusedValue={focusedValue}
-              getOptionId={getOptionId}
-              onOptionClick={onOptionClick}
-              onOptionFocus={onOptionFocus}
-              onBlur={onInputBlur}
-              onKeyDown={onInputKeyDown}
-            />
           </div>
+          <LookupDropdown
+            opened={opened}
+            loading={loading}
+            listboxId={listboxId}
+            dropdownRef={dropdownRef}
+            listHeader={listHeader}
+            listHeaderIdSeed={listHeaderIdSeed}
+            listFooter={listFooter}
+            listFooterIdSeed={listFooterIdSeed}
+            filteredData={filteredData}
+            focusedValue={focusedValue}
+            getOptionId={getOptionId}
+            onOptionClick={onOptionClick}
+            onOptionFocus={onOptionFocus}
+            onBlur={onInputBlur}
+            onKeyDown={onInputKeyDown}
+          />
         </div>
       </FormElement>
     );

From 6900cfe83fd60c97b0fa013b4610c960d88b6526 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 16 Jul 2025 10:28:09 +0900
Subject: [PATCH 230/245] (Lookup): execute `onLookupRequest()` as the `master`
 branch

---
 src/scripts/Lookup.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 80a605ba2..1215dba96 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -1223,6 +1223,8 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     const onRemoveSelection = useEventCallback(() => {
       onSelect(null);
       setSearchText('');
+      setOpened(true);
+      onLookupRequest_?.('');
       setTimeout(() => {
         inputElRef.current?.focus();
       }, 10);

From 1c78f20a1f9bd1b108b563845083438e83a24bdc Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 18 Jul 2025 10:04:50 +0900
Subject: [PATCH 231/245] (Lookup): set the initial scope

---
 src/scripts/Lookup.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 1215dba96..039a1655e 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -234,7 +234,8 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
   const [scopeOpened, setScopeOpened] = useState(false);
   const [scopeFocusedIndex, setScopeFocusedIndex] = useState<number>(-1);
 
-  const currentScope = scopes.find((scope) => scope.label === targetScope);
+  const currentScope =
+    scopes.find((scope) => scope.label === targetScope) ?? scopes[0];
 
   // Scroll focused scope element into view
   const scrollFocusedScopeIntoView = useEventCallback(

From 44a10e39c9834648e40c91778f60c4d3429cf00d Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 18 Jul 2025 10:11:20 +0900
Subject: [PATCH 232/245] (Lookup): use scope value instead of its label

---
 src/scripts/Lookup.tsx | 50 ++++++++++++++++++++----------------------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 039a1655e..559951830 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -40,8 +40,8 @@ export type LookupEntry = {
  */
 export type LookupScope = {
   label: string;
-  value?: string;
-  icon?: string;
+  value: string;
+  icon: string;
   category?: IconCategory;
 };
 
@@ -235,7 +235,7 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
   const [scopeFocusedIndex, setScopeFocusedIndex] = useState<number>(-1);
 
   const currentScope =
-    scopes.find((scope) => scope.label === targetScope) ?? scopes[0];
+    scopes.find((scope) => scope.value === targetScope) ?? scopes[0];
 
   // Scroll focused scope element into view
   const scrollFocusedScopeIntoView = useEventCallback(
@@ -300,7 +300,7 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
       if (scopeOpened && scopeFocusedIndex >= 0) {
         const selectedScope = scopes[scopeFocusedIndex];
         if (selectedScope) {
-          onScopeSelect(selectedScope.label);
+          onScopeSelect(selectedScope.value);
           setScopeOpened(false);
           setScopeFocusedIndex(-1);
         }
@@ -386,24 +386,22 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
                 className='slds-combobox__form-element slds-input-has-icon slds-input-has-icon_left-right'
                 role='none'
               >
-                {currentScope?.icon && (
-                  <div
-                    className='slds-is-absolute'
-                    style={{
-                      top: '50%',
-                      transform: 'translateY(-50%)',
-                      left: '0.5rem',
-                      pointerEvents: 'none',
-                      zIndex: SCOPE_INPUT_ZINDEX + 1,
-                    }}
-                  >
-                    <Icon
-                      category={currentScope.category}
-                      icon={currentScope.icon}
-                      size='small'
-                    />
-                  </div>
-                )}
+                <div
+                  className='slds-is-absolute'
+                  style={{
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                    left: '0.5rem',
+                    pointerEvents: 'none',
+                    zIndex: SCOPE_INPUT_ZINDEX + 1,
+                  }}
+                >
+                  <Icon
+                    category={currentScope.category}
+                    icon={currentScope.icon}
+                    size='small'
+                  />
+                </div>
                 <input
                   type='text'
                   className='slds-input slds-combobox__input slds-combobox__input-value'
@@ -460,7 +458,7 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
                       >
                         {scopes.map((scope, index) => (
                           <li
-                            key={scope.label}
+                            key={scope.value}
                             role='presentation'
                             className='slds-listbox__item'
                           >
@@ -473,9 +471,9 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
                                 }
                               )}
                               role='option'
-                              aria-selected={scope.label === targetScope}
+                              aria-selected={scope.value === targetScope}
                               tabIndex={0}
-                              onClick={() => onScopeSelect(scope.label)}
+                              onClick={() => onScopeSelect(scope.value)}
                             >
                               <span className='slds-media__figure slds-listbox__option-icon'>
                                 {scope.icon && (
@@ -982,7 +980,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     const [targetScope, setTargetScope] = useControlledValue(
       targetScope_,
       defaultTargetScope ??
-        (scopes && scopes.length > 0 ? scopes[0].label : undefined)
+        (scopes && scopes.length > 0 ? scopes[0].value : undefined)
     );
     const [focusedValue, setFocusedValue] = useState<string | undefined>();
 

From 7ddfb0f3bc5732687326d9a427db76ab825755e0 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 18 Jul 2025 10:13:31 +0900
Subject: [PATCH 233/245] (Lookup): introduce `onSearchIconClick`

---
 src/scripts/Lookup.tsx | 35 +++++++++++++++++++++++++----------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 559951830..6133b0eae 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -525,6 +525,7 @@ type LookupSearchInputProps = {
   onInputFocus: () => void;
   onInputBlur: (e: FocusEvent) => void;
   onInputKeyDown: (e: KeyboardEvent) => void;
+  onSearchIconClick: () => void;
 } & Omit<
   InputHTMLAttributes<HTMLInputElement>,
   'onChange' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'value'
@@ -548,6 +549,7 @@ const LookupSearchInput: FC<LookupSearchInputProps> = ({
   onInputFocus,
   onInputBlur,
   onInputKeyDown,
+  onSearchIconClick,
   ...rprops
 }) => {
   const hasValue = searchText.length > 0;
@@ -565,14 +567,16 @@ const LookupSearchInput: FC<LookupSearchInputProps> = ({
   return (
     <div className={inputIconClasses} role='none'>
       {iconAlign === 'left' && (
-        <Icon
-          containerClassName={classnames(
+        <Button
+          type='icon'
+          icon='search'
+          disabled={disabled}
+          className={classnames(
             'slds-input__icon',
             `slds-input__icon_${iconAlign}`
           )}
-          category='utility'
-          icon='search'
-          size='x-small'
+          tabIndex={-1}
+          onClick={disabled ? undefined : onSearchIconClick}
         />
       )}
       <input
@@ -599,14 +603,16 @@ const LookupSearchInput: FC<LookupSearchInputProps> = ({
         onKeyDown={onInputKeyDown}
       />
       {iconAlign === 'right' && (
-        <Icon
-          containerClassName={classnames(
+        <Button
+          type='icon'
+          icon='search'
+          disabled={disabled}
+          className={classnames(
             'slds-input__icon',
             `slds-input__icon_${iconAlign}`
           )}
-          category='utility'
-          icon='search'
-          size='x-small'
+          tabIndex={-1}
+          onClick={disabled ? undefined : onSearchIconClick}
         />
       )}
     </div>
@@ -1219,6 +1225,13 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       setFocusedValue(value);
     });
 
+    const onSearchIconClick = useEventCallback(() => {
+      inputElRef.current?.focus();
+
+      setOpened(true);
+      onLookupRequest_?.(searchText);
+    });
+
     const onRemoveSelection = useEventCallback(() => {
       onSelect(null);
       setSearchText('');
@@ -1316,6 +1329,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
                     onInputFocus={onInputFocus}
                     onInputBlur={onInputBlur}
                     onInputKeyDown={onInputKeyDown}
+                    onSearchIconClick={onSearchIconClick}
                   />
                 </div>
               </div>
@@ -1363,6 +1377,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
               onInputFocus={onInputFocus}
               onInputBlur={onInputBlur}
               onInputKeyDown={onInputKeyDown}
+              onSearchIconClick={onSearchIconClick}
             />
           </div>
           <LookupDropdown

From 41aaf78e0da417c0399152c03ede96f36cb9cbfc Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 18 Jul 2025 10:15:34 +0900
Subject: [PATCH 234/245] (Lookup): manage when to run `onComplete()`

---
 src/scripts/Lookup.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 6133b0eae..056f822e4 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -1131,10 +1131,15 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
         }
       }
 
+      const isComplete = !containerRef.current?.contains(e.relatedTarget);
+
       setTimeout(() => {
         setOpened(false);
         onBlur_?.();
-        onComplete?.(true);
+
+        if (isComplete) {
+          onComplete?.(true);
+        }
       }, 10);
     });
 
@@ -1244,6 +1249,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
 
     const hasSelection = selected != null;
 
+    const containerRef = useRef<HTMLDivElement | null>(null);
     const containerClassNames = classnames(
       'slds-combobox_container',
       {
@@ -1280,7 +1286,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     if (hasSelection && selected) {
       return (
         <FormElement {...formElemProps}>
-          <div className={containerClassNames}>
+          <div ref={containerRef} className={containerClassNames}>
             <LookupSelectedState
               selected={selected}
               disabled={disabled}
@@ -1297,7 +1303,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       // Multi Entity Lookup with scope selector
       return (
         <FormElement {...formElemProps}>
-          <div className={containerClassNames}>
+          <div ref={containerRef} className={containerClassNames}>
             <div className='slds-combobox-group'>
               <LookupScopeSelector
                 scopes={scopes}
@@ -1359,7 +1365,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     // Render simple search state (no scopes)
     return (
       <FormElement {...formElemProps}>
-        <div className={containerClassNames}>
+        <div ref={containerRef} className={containerClassNames}>
           <div className={comboboxClassNames} ref={elementRef}>
             <LookupSearchInput
               {...rprops}

From 39a307db5cfedccfcb7b62d60d79528d66cf035a Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 15 Jul 2025 11:09:34 +0900
Subject: [PATCH 235/245] (Lookup): add `.react-slds-lookup`

---
 src/scripts/Lookup.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 056f822e4..e6ba504a9 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -1251,6 +1251,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
 
     const containerRef = useRef<HTMLDivElement | null>(null);
     const containerClassNames = classnames(
+      'react-slds-lookup',
       'slds-combobox_container',
       {
         'slds-has-selection': hasSelection,

From 6b0c318a91cb446b05dd12f02c6110d710d6e2f9 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 18 Jul 2025 10:16:56 +0900
Subject: [PATCH 236/245] (Lookup): add `useInitComponentStyle()`

---
 src/scripts/Lookup.tsx | 108 ++++++++++++++++++++++++-----------------
 1 file changed, 63 insertions(+), 45 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index e6ba504a9..bec782929 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -22,6 +22,7 @@ import { Spinner } from './Spinner';
 import { useControlledValue, useEventCallback, useMergeRefs } from './hooks';
 import { createFC } from './common';
 import { Bivariant } from './typeUtils';
+import { registerStyle } from './util';
 
 /**
  *
@@ -195,10 +196,9 @@ const LookupScopeSelectorContainer: FC<LookupScopeSelectorContainerProps> = ({
   return (
     <div
       id={scopeListboxId}
-      className='slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid'
+      className='react-slds-lookup-dropdown slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid'
       role='listbox'
       aria-label='Scope Options'
-      style={{ left: 0, transform: 'translateX(0)' }}
       ref={useMergeRefs([autoAlignContentRef])}
     >
       {children}
@@ -373,7 +373,7 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
           Filter Search by:
         </label>
         <div className='slds-form-element__control'>
-          <div className='slds-combobox_container slds-has-icon-only'>
+          <div className='react-slds-lookup-scope-combobox-container slds-combobox_container slds-has-icon-only'>
             <div
               className={classnames(
                 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click',
@@ -386,30 +386,16 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
                 className='slds-combobox__form-element slds-input-has-icon slds-input-has-icon_left-right'
                 role='none'
               >
-                <div
-                  className='slds-is-absolute'
-                  style={{
-                    top: '50%',
-                    transform: 'translateY(-50%)',
-                    left: '0.5rem',
-                    pointerEvents: 'none',
-                    zIndex: SCOPE_INPUT_ZINDEX + 1,
-                  }}
-                >
-                  <Icon
-                    category={currentScope.category}
-                    icon={currentScope.icon}
-                    size='small'
-                  />
-                </div>
+                <Icon
+                  containerClassName='react-slds-lookup-current-scope-icon-container slds-is-absolute'
+                  className='react-slds-lookup-current-scope-icon'
+                  category={currentScope.category}
+                  icon={currentScope.icon}
+                  size='small'
+                />
                 <input
                   type='text'
-                  className='slds-input slds-combobox__input slds-combobox__input-value'
-                  style={{
-                    paddingLeft: '1.5rem',
-                    cursor: !disabled ? 'pointer' : undefined,
-                    zIndex: SCOPE_INPUT_ZINDEX,
-                  }}
+                  className='react-slds-lookup-scope-input slds-input slds-combobox__input slds-combobox__input-value'
                   aria-controls='objectswitcher-listbox-id'
                   aria-expanded={scopeOpened}
                   aria-haspopup='listbox'
@@ -423,21 +409,12 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
                   onKeyDown={onScopeKeyDown}
                   readOnly
                 />
-                <div
-                  className='slds-is-absolute'
-                  style={{
-                    bottom: '0.2rem',
-                    right: '0.55rem',
-                    pointerEvents: 'none',
-                    zIndex: SCOPE_INPUT_ZINDEX + 1,
-                  }}
-                >
-                  <Icon
-                    icon='down'
-                    size='x-small'
-                    style={{ width: '0.8rem', height: '0.8rem' }}
-                  />
-                </div>
+                <Icon
+                  containerClassName='react-slds-lookup-scope-down-icon-container slds-is-absolute'
+                  className='react-slds-lookup-scope-down-icon'
+                  icon='down'
+                  size='x-small'
+                />
               </div>
               {scopeOpened && (
                 <AutoAlign
@@ -706,8 +683,7 @@ const LookupDropdownContainer: FC<LookupDropdownContainerProps> = ({
   return (
     <div
       id={listboxId}
-      className='slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid slds-scrollable_none'
-      style={{ maxHeight: LIST_PARENT_MAX_HEIGHT }}
+      className='react-slds-lookup-dropdown react-slds-lookup-dropdown-main slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid slds-scrollable_none'
       role='listbox'
       aria-label='Search Results'
       tabIndex={0}
@@ -797,8 +773,7 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
             </ul>
           ) : null}
           <ul
-            className='slds-listbox slds-listbox_vertical slds-scrollable_y'
-            style={{ maxHeight: LIST_CONTENT_MAX_HEIGHT }}
+            className='react-slds-lookup-list slds-listbox slds-listbox_vertical slds-scrollable_y'
             role='presentation'
             onKeyDown={onKeyDown}
             onBlur={onBlur}
@@ -851,6 +826,46 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
 const LIST_PARENT_MAX_HEIGHT = 'unset';
 const LIST_CONTENT_MAX_HEIGHT = 'calc((1.5rem + 1rem) * 7)'; // copied from `.slds-dropdown_length-with-icon-7`
 
+/**
+ *
+ */
+function useInitComponentStyle() {
+  useEffect(() => {
+    registerStyle('lookup-search', [
+      [
+        '.react-slds-lookup-current-scope-icon-container',
+        `{ top: 50%; transform: translateY(-50%); left: 14.2%; pointer-events: none; z-index: ${
+          SCOPE_INPUT_ZINDEX + 1
+        }; }`,
+      ],
+      ['.react-slds-lookup-scope-input:not(:disabled)', '{ cursor: pointer; }'],
+      [
+        '.react-slds-lookup-scope-input.react-slds-lookup-scope-input.react-slds-lookup-scope-input',
+        `{ padding-left: 1.5rem; z-index: ${SCOPE_INPUT_ZINDEX}; }`,
+      ],
+      [
+        '.react-slds-lookup-scope-down-icon-container',
+        `{ line-height: 0; bottom: 17%; right: 15.7%; pointer-events: none; z-index: ${
+          SCOPE_INPUT_ZINDEX + 1
+        }; }`,
+      ],
+      [
+        '.react-slds-lookup-scope-down-icon-container .react-slds-lookup-scope-down-icon',
+        '{ width: 0.8rem; height: 0.8rem; }',
+      ],
+      ['.react-slds-lookup-dropdown', '{ left: 0; transform: translateX(0); }'],
+      [
+        '.react-slds-lookup-dropdown-main',
+        `{ max-height: ${LIST_PARENT_MAX_HEIGHT}; min-width: 15rem; }`,
+      ],
+      [
+        '.react-slds-lookup-list',
+        `{ max-height: ${LIST_CONTENT_MAX_HEIGHT}; }`,
+      ],
+    ]);
+  }, []);
+}
+
 /**
  *
  */
@@ -956,6 +971,8 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       ...rprops
     } = props;
 
+    useInitComponentStyle();
+
     const fallbackId = useId();
     const comboboxId = id_ ?? `${fallbackId}-combobox`;
     const listboxId = `${fallbackId}-listbox`;
@@ -1252,6 +1269,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     const containerRef = useRef<HTMLDivElement | null>(null);
     const containerClassNames = classnames(
       'react-slds-lookup',
+      `react-slds-lookup-scope-${scopes ? 'multi' : 'single'}`,
       'slds-combobox_container',
       {
         'slds-has-selection': hasSelection,
@@ -1305,7 +1323,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
       return (
         <FormElement {...formElemProps}>
           <div ref={containerRef} className={containerClassNames}>
-            <div className='slds-combobox-group'>
+            <div className='react-slds-combobox-group slds-combobox-group'>
               <LookupScopeSelector
                 scopes={scopes}
                 targetScope={targetScope}

From 152092484cab268d43ebd27e0ad2d3e50d7413c4 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 18 Jul 2025 10:43:59 +0900
Subject: [PATCH 237/245] (Button): restrict when to show `title` attribute

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

diff --git a/src/scripts/Button.tsx b/src/scripts/Button.tsx
index 65d1359dd..003e72705 100644
--- a/src/scripts/Button.tsx
+++ b/src/scripts/Button.tsx
@@ -159,7 +159,7 @@ export const Button: FC<ButtonProps> = (props) => {
       ref={buttonRef}
       className={btnClassNames}
       type={htmlType}
-      title={alt}
+      title={isIconOnly || alt ? alt : undefined}
       tabIndex={tabIndex ?? -1}
       {...rprops}
       onClick={onClick}

From 0cd2296419c3d0433c084c3ab0ca7a91d7000491 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 18 Jul 2025 14:54:27 +0900
Subject: [PATCH 238/245] Revert "(Utility): replace deprecated margin and
 padding utilities"

This reverts commit 8cd9535e8e0cdda57c81c13372edb67c4abc3d27.
---
 src/scripts/CheckboxGroup.tsx  |  2 +-
 src/scripts/DropdownButton.tsx |  2 +-
 src/scripts/Icon.tsx           |  4 ++--
 src/scripts/Lookup.tsx         |  2 +-
 src/scripts/Modal.tsx          |  2 +-
 src/scripts/Notification.tsx   |  4 +---
 src/scripts/Popover.tsx        |  2 +-
 src/scripts/RadioGroup.tsx     |  2 +-
 src/scripts/TreeNode.tsx       |  4 ++--
 stories/Icon.stories.tsx       | 10 +++++-----
 stories/Modal.stories.tsx      | 12 ++++++------
 stories/Tabs.stories.tsx       |  2 +-
 12 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/scripts/CheckboxGroup.tsx b/src/scripts/CheckboxGroup.tsx
index 4ca381281..af6ef30d8 100644
--- a/src/scripts/CheckboxGroup.tsx
+++ b/src/scripts/CheckboxGroup.tsx
@@ -136,7 +136,7 @@ export const CheckboxGroup = createFC<
           ) : undefined}
           {label}
           {tooltip ? (
-            <span className='slds-var-m-left_x-small'>
+            <span className='slds-m-left_x-small'>
               <TooltipContent icon={tooltipIcon}>{tooltip}</TooltipContent>
             </span>
           ) : null}
diff --git a/src/scripts/DropdownButton.tsx b/src/scripts/DropdownButton.tsx
index a2d30dd76..7d3b6987e 100644
--- a/src/scripts/DropdownButton.tsx
+++ b/src/scripts/DropdownButton.tsx
@@ -213,7 +213,7 @@ export const DropdownButton = (props: DropdownButtonProps) => {
     'slds-dropdown-trigger',
     'slds-dropdown-trigger_click',
     {
-      'slds-var-m-left_xx-small': !grouped,
+      'slds-m-left_xx-small': !grouped,
       'slds-is-open': opened,
       'react-slds-dropdown-opened': opened,
     }
diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx
index e0adcf5e9..64f6ea48a 100644
--- a/src/scripts/Icon.tsx
+++ b/src/scripts/Icon.tsx
@@ -211,8 +211,8 @@ export const SvgIcon = forwardRef(
       [`slds-icon-text-${textColor ?? 'default'}`]:
         /^(default|success|warning|error|light)$/.test(textColor ?? '') &&
         !iconColor,
-      'slds-var-m-left_x-small': align === 'right',
-      'slds-var-m-right_x-small': align === 'left',
+      'slds-m-left_x-small': align === 'right',
+      'slds-m-right_x-small': align === 'left',
     });
 
     const iconClassNames = classnames(className, {
diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index c7b34627c..8434c5127 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -734,7 +734,7 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
         ))}
         {loading ? (
           <li role='option' className='slds-listbox__item'>
-            <div className='slds-align_absolute-center slds-var-p-top_medium'>
+            <div className='slds-align_absolute-center slds-p-top_medium'>
               <Spinner container={false} size='x-small' layout='inline' />
             </div>
           </li>
diff --git a/src/scripts/Modal.tsx b/src/scripts/Modal.tsx
index 74fbe857e..1588124ba 100644
--- a/src/scripts/Modal.tsx
+++ b/src/scripts/Modal.tsx
@@ -24,7 +24,7 @@ export const ModalHeader: FC<ModalHeaderProps> = (props) => {
       <Text tag='h2' category='heading' type='medium' tabIndex={-1}>
         {title}
       </Text>
-      {tagline ? <p className='slds-var-m-top_x-small'>{tagline}</p> : null}
+      {tagline ? <p className='slds-m-top_x-small'>{tagline}</p> : null}
     </div>
   );
 };
diff --git a/src/scripts/Notification.tsx b/src/scripts/Notification.tsx
index 99affe223..35cc573e5 100644
--- a/src/scripts/Notification.tsx
+++ b/src/scripts/Notification.tsx
@@ -52,9 +52,7 @@ export const Notification: FC<NotificationProps> = (props) => {
   const iconEl = icon ? (
     <Icon
       containerClassName={classnames(
-        type === 'toast'
-          ? 'slds-var-m-right_small'
-          : 'slds-var-m-right_x-small',
+        type === 'toast' ? 'slds-m-right_small' : 'slds-m-right_x-small',
         type === 'alert' ? ['slds-no-flex', 'slds-align-top'] : null
       )}
       icon={icon}
diff --git a/src/scripts/Popover.tsx b/src/scripts/Popover.tsx
index d12114ecc..8d6eb30c7 100644
--- a/src/scripts/Popover.tsx
+++ b/src/scripts/Popover.tsx
@@ -100,7 +100,7 @@ export const PopoverInner = forwardRef<
       'slds-popover_tooltip': tooltip,
     },
     `slds-nubbin_${nubbinPosition}`,
-    `slds-var-m-${firstAlign}_small`,
+    `slds-m-${firstAlign}_small`,
     theme ? `slds-theme_${theme}` : undefined
   );
   const rootStyle: typeof style = {
diff --git a/src/scripts/RadioGroup.tsx b/src/scripts/RadioGroup.tsx
index 79856f1df..6712f22b7 100644
--- a/src/scripts/RadioGroup.tsx
+++ b/src/scripts/RadioGroup.tsx
@@ -111,7 +111,7 @@ export const RadioGroup = createFC<RadioGroupProps, { isFormElement: boolean }>(
           ) : undefined}
           {label}
           {tooltip ? (
-            <span className='slds-var-m-left_x-small'>
+            <span className='slds-m-left_x-small'>
               <TooltipContent icon={tooltipIcon}>{tooltip}</TooltipContent>
             </span>
           ) : null}
diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index c8a93586f..f151e9035 100644
--- a/src/scripts/TreeNode.tsx
+++ b/src/scripts/TreeNode.tsx
@@ -62,7 +62,7 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
   });
   const spinnerClassNames = classnames(
     'react-slds-spinner',
-    'slds-var-m-right_x-small'
+    'slds-m-right_x-small'
   );
   const loadingPositionStyle = {
     left: `${level}rem`,
@@ -84,7 +84,7 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
       )}
       {!leaf ? (
         <Button
-          className='slds-var-m-right_x-small'
+          className='slds-m-right_x-small'
           aria-controls=''
           type='icon'
           icon={icon}
diff --git a/stories/Icon.stories.tsx b/stories/Icon.stories.tsx
index e3ee73bb5..81ea0f09c 100644
--- a/stories/Icon.stories.tsx
+++ b/stories/Icon.stories.tsx
@@ -10,7 +10,7 @@ const ListEntry: FC<{ title: string; children?: ReactNode }> = ({
   title,
 }) => (
   <li
-    className='slds-var-p-around_small'
+    className='slds-p-around_small'
     style={{
       float: 'left',
       padding: '1.5rem',
@@ -100,13 +100,13 @@ export const Sizes: StoryObj<StoryProps> = {
   }) => (
     <div>
       <Icon icon='standard:case' size='xx-small' onClick={xxsmall_onClick} />
-      <span className='slds-var-p-right_small' />
+      <span className='slds-p-right_small' />
       <Icon icon='standard:case' size='x-small' onClick={xsmall_onClick} />
-      <span className='slds-var-p-right_small' />
+      <span className='slds-p-right_small' />
       <Icon icon='standard:case' size='small' onClick={small_onClick} />
-      <span className='slds-var-p-right_small' />
+      <span className='slds-p-right_small' />
       <Icon icon='standard:case' size='medium' onClick={medium_onClick} />
-      <span className='slds-var-p-right_small' />
+      <span className='slds-p-right_small' />
       <Icon icon='standard:case' size='large' onClick={large_onClick} />
     </div>
   ),
diff --git a/stories/Modal.stories.tsx b/stories/Modal.stories.tsx
index 35fb6c0bd..a60d7f41c 100644
--- a/stories/Modal.stories.tsx
+++ b/stories/Modal.stories.tsx
@@ -116,7 +116,7 @@ export const ControlledWithKnobs: StoryObj<StoryProps> = {
     childProps: {
       header: {},
       content: {
-        className: 'slds-var-p-around_small',
+        className: 'slds-p-around_small',
         children: modalContent,
       },
       footer: {
@@ -148,7 +148,7 @@ export const Default: StoryObj<StoryProps> = {
         title: 'Default Modal',
       },
       content: {
-        className: 'slds-var-p-around_small',
+        className: 'slds-p-around_small',
         children: modalContent,
       },
       footer: {
@@ -178,7 +178,7 @@ export const Large: StoryObj<StoryProps> = {
         title: 'Large Size Modal',
       },
       content: {
-        className: 'slds-var-p-around_small',
+        className: 'slds-p-around_small',
         children: modalContent,
       },
       footer: {
@@ -208,7 +208,7 @@ export const WithTagline: StoryObj<StoryProps> = {
         tagline: 'This is a tagline',
       },
       content: {
-        className: 'slds-var-p-around_small',
+        className: 'slds-p-around_small',
         children: modalContent,
       },
       footer: {
@@ -237,7 +237,7 @@ export const FooterDirectional: StoryObj<StoryProps> = {
         title: 'Modal with directional footer',
       },
       content: {
-        className: 'slds-var-p-around_small',
+        className: 'slds-p-around_small',
         children: modalContent,
       },
       footer: {
@@ -267,7 +267,7 @@ export const FormElements: StoryObj<StoryProps> = {
         title: 'Modal Form',
       },
       content: {
-        className: 'slds-var-p-around_small',
+        className: 'slds-p-around_small',
         children: (
           <Form type='compound'>
             <FieldSet label='Name'>
diff --git a/stories/Tabs.stories.tsx b/stories/Tabs.stories.tsx
index 1c59b6224..c560da72c 100644
--- a/stories/Tabs.stories.tsx
+++ b/stories/Tabs.stories.tsx
@@ -45,7 +45,7 @@ function CustomTabItemContent(props: TabItemRendererProps & { icon: string }) {
       }
     >
       <Icon icon={icon} size='small' />
-      <span className='slds-var-p-horizontal_x-small'>{title}</span>
+      <span className='slds-p-horizontal_x-small'>{title}</span>
     </a>
   );
 }

From c2ef2c8bad339882db3dbb1170f3ce2868326f12 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 18 Jul 2025 15:41:09 +0900
Subject: [PATCH 239/245] (Picklist): reconfigure props around `AutoAlign`

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

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index 74db29b8e..f93fd56ae 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -612,7 +612,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
             <AutoAlign
               triggerSelector='.react-slds-picklist'
               alignmentStyle='menu'
-              portalClassName={classnames(className, 'slds-picklist')}
+              portalClassName={containerClassNames}
               portalStyle={menuStyle}
               size={menuSize}
             >

From b3ceb0ceb30d6df9d132aeb96b81fd98fec2d1dd Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Fri, 18 Jul 2025 15:41:48 +0900
Subject: [PATCH 240/245] (Lookup): reconfigure props around `AutoAlign`

---
 src/scripts/Lookup.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index bec782929..b7085d699 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -210,6 +210,7 @@ const LookupScopeSelectorContainer: FC<LookupScopeSelectorContainerProps> = ({
  * Props for LookupScopeSelector component
  */
 type LookupScopeSelectorProps = {
+  portalClassName: string;
   scopes: LookupScope[];
   targetScope?: string;
   disabled?: boolean;
@@ -223,6 +224,7 @@ type LookupScopeSelectorProps = {
  * Component for scope selector in multi-entity lookup
  */
 const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
+  portalClassName,
   scopes,
   targetScope,
   disabled,
@@ -367,7 +369,7 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
   });
 
   return (
-    <div className='slds-combobox_object-switcher slds-combobox-addon_start'>
+    <div className='react-slds-lookup-scope-selector slds-combobox_object-switcher slds-combobox-addon_start'>
       <div className='slds-form-element'>
         <label className='slds-form-element__label slds-assistive-text'>
           Filter Search by:
@@ -418,9 +420,9 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
               </div>
               {scopeOpened && (
                 <AutoAlign
-                  triggerSelector='.react-slds-lookup'
+                  triggerSelector='.react-slds-lookup-scope-selector'
                   alignmentStyle='menu'
-                  portalClassName='slds-lookup-scope'
+                  portalClassName={portalClassName}
                 >
                   {({ autoAlignContentRef }) => (
                     <LookupScopeSelectorContainer
@@ -699,6 +701,7 @@ const LookupDropdownContainer: FC<LookupDropdownContainerProps> = ({
  * Props for LookupDropdown component
  */
 type LookupDropdownProps = {
+  portalClassName: string;
   opened: boolean;
   loading?: boolean;
   listboxId: string;
@@ -720,6 +723,7 @@ type LookupDropdownProps = {
  * Component for dropdown menu
  */
 const LookupDropdown: FC<LookupDropdownProps> = ({
+  portalClassName,
   opened,
   loading,
   listboxId,
@@ -742,7 +746,7 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
     <AutoAlign
       triggerSelector='.react-slds-lookup'
       alignmentStyle='menu'
-      portalClassName='slds-lookup'
+      portalClassName={portalClassName}
     >
       {({ autoAlignContentRef }) => (
         <LookupDropdownContainer
@@ -1325,6 +1329,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
           <div ref={containerRef} className={containerClassNames}>
             <div className='react-slds-combobox-group slds-combobox-group'>
               <LookupScopeSelector
+                portalClassName={containerClassNames}
                 scopes={scopes}
                 targetScope={targetScope}
                 disabled={disabled}
@@ -1360,6 +1365,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
               </div>
             </div>
             <LookupDropdown
+              portalClassName={containerClassNames}
               opened={opened}
               loading={loading}
               listboxId={listboxId}
@@ -1406,6 +1412,7 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
             />
           </div>
           <LookupDropdown
+            portalClassName={containerClassNames}
             opened={opened}
             loading={loading}
             listboxId={listboxId}

From a498becf192b0f7beb41b22d3ad70c200ee8f168 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Tue, 22 Jul 2025 08:56:21 +0900
Subject: [PATCH 241/245] (Picklist, Lookup): resolve VRT issues

---
 src/scripts/Lookup.tsx   | 76 +++++++++++++++++++++-------------------
 src/scripts/Picklist.tsx | 64 ++++++++++++++++-----------------
 2 files changed, 72 insertions(+), 68 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index b7085d699..b9aa69880 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -1364,24 +1364,28 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
                 </div>
               </div>
             </div>
-            <LookupDropdown
-              portalClassName={containerClassNames}
-              opened={opened}
-              loading={loading}
-              listboxId={listboxId}
-              dropdownRef={dropdownRef}
-              listHeader={listHeader}
-              listHeaderIdSeed={listHeaderIdSeed}
-              listFooter={listFooter}
-              listFooterIdSeed={listFooterIdSeed}
-              filteredData={filteredData}
-              focusedValue={focusedValue}
-              getOptionId={getOptionId}
-              onOptionClick={onOptionClick}
-              onOptionFocus={onOptionFocus}
-              onBlur={onInputBlur}
-              onKeyDown={onInputKeyDown}
-            />
+            <div className='slds-combobox_container'>
+              <div className={comboboxClassNames}>
+                <LookupDropdown
+                  portalClassName={containerClassNames}
+                  opened={opened}
+                  loading={loading}
+                  listboxId={listboxId}
+                  dropdownRef={dropdownRef}
+                  listHeader={listHeader}
+                  listHeaderIdSeed={listHeaderIdSeed}
+                  listFooter={listFooter}
+                  listFooterIdSeed={listFooterIdSeed}
+                  filteredData={filteredData}
+                  focusedValue={focusedValue}
+                  getOptionId={getOptionId}
+                  onOptionClick={onOptionClick}
+                  onOptionFocus={onOptionFocus}
+                  onBlur={onInputBlur}
+                  onKeyDown={onInputKeyDown}
+                />
+              </div>
+            </div>
           </div>
         </FormElement>
       );
@@ -1410,25 +1414,25 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
               onInputKeyDown={onInputKeyDown}
               onSearchIconClick={onSearchIconClick}
             />
+            <LookupDropdown
+              portalClassName={containerClassNames}
+              opened={opened}
+              loading={loading}
+              listboxId={listboxId}
+              dropdownRef={dropdownRef}
+              listHeader={listHeader}
+              listHeaderIdSeed={listHeaderIdSeed}
+              listFooter={listFooter}
+              listFooterIdSeed={listFooterIdSeed}
+              filteredData={filteredData}
+              focusedValue={focusedValue}
+              getOptionId={getOptionId}
+              onOptionClick={onOptionClick}
+              onOptionFocus={onOptionFocus}
+              onBlur={onInputBlur}
+              onKeyDown={onInputKeyDown}
+            />
           </div>
-          <LookupDropdown
-            portalClassName={containerClassNames}
-            opened={opened}
-            loading={loading}
-            listboxId={listboxId}
-            dropdownRef={dropdownRef}
-            listHeader={listHeader}
-            listHeaderIdSeed={listHeaderIdSeed}
-            listFooter={listFooter}
-            listFooterIdSeed={listFooterIdSeed}
-            filteredData={filteredData}
-            focusedValue={focusedValue}
-            getOptionId={getOptionId}
-            onOptionClick={onOptionClick}
-            onOptionFocus={onOptionFocus}
-            onBlur={onInputBlur}
-            onKeyDown={onInputKeyDown}
-          />
         </div>
       </FormElement>
     );
diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index f93fd56ae..26b879ef1 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -607,39 +607,39 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
                 textColor='default'
               />
             </div>
-          </div>
-          {opened && (
-            <AutoAlign
-              triggerSelector='.react-slds-picklist'
-              alignmentStyle='menu'
-              portalClassName={containerClassNames}
-              portalStyle={menuStyle}
-              size={menuSize}
-            >
-              {({ autoAlignContentRef }) => (
-                <div
-                  id={listboxId}
-                  className={dropdownClassNames}
-                  role='listbox'
-                  aria-label='Options'
-                  tabIndex={0}
-                  aria-busy={false}
-                  ref={useMergeRefs([dropdownRef, autoAlignContentRef])}
-                >
-                  <ul
-                    className='slds-listbox slds-listbox_vertical'
-                    role='presentation'
-                    onKeyDown={onKeyDown}
-                    onBlur={onBlur}
+            {opened && (
+              <AutoAlign
+                triggerSelector='.react-slds-picklist'
+                alignmentStyle='menu'
+                portalClassName={containerClassNames}
+                size={menuSize}
+              >
+                {({ autoAlignContentRef }) => (
+                  <div
+                    id={listboxId}
+                    className={dropdownClassNames}
+                    role='listbox'
+                    aria-label='Options'
+                    tabIndex={0}
+                    aria-busy={false}
+                    ref={useMergeRefs([dropdownRef, autoAlignContentRef])}
+                    style={menuStyle}
                   >
-                    <PicklistContext.Provider value={contextValue}>
-                      {children}
-                    </PicklistContext.Provider>
-                  </ul>
-                </div>
-              )}
-            </AutoAlign>
-          )}
+                    <ul
+                      className='slds-listbox slds-listbox_vertical'
+                      role='presentation'
+                      onKeyDown={onKeyDown}
+                      onBlur={onBlur}
+                    >
+                      <PicklistContext.Provider value={contextValue}>
+                        {children}
+                      </PicklistContext.Provider>
+                    </ul>
+                  </div>
+                )}
+              </AutoAlign>
+            )}
+          </div>
         </div>
       </FormElement>
     );

From 55fa1e93a0434050702692c120e026542357fe8a Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 23 Jul 2025 12:00:23 +0900
Subject: [PATCH 242/245] Revert "(Icon): avoid deprecated classnames"

This reverts commit 6f748225d4677f1f26af55e9935ed481e28a649c.
---
 src/scripts/Icon.tsx | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx
index 64f6ea48a..99f164c4e 100644
--- a/src/scripts/Icon.tsx
+++ b/src/scripts/Icon.tsx
@@ -98,12 +98,6 @@ weeklyview,world,zoomin,zoomout
   .split(/[\s,]+/);
 /* eslint-enable max-len */
 
-const UTILITY_ICONS_DEPRECATED_FOR_CONTAINER_CLASSNAME = [
-  'close',
-  'error',
-  'warning',
-];
-
 /**
  *
  */
@@ -281,8 +275,7 @@ export const Icon = createFC<IconProps, { ICONS: typeof ICONS }>(
       containerClassName_,
       'slds-icon_container',
       container === 'circle' ? 'slds-icon_container_circle' : null,
-      category === 'utility' &&
-        !UTILITY_ICONS_DEPRECATED_FOR_CONTAINER_CLASSNAME.includes(icon)
+      category === 'utility'
         ? `slds-icon-utility-${icon.replace(/_/g, '-')}`
         : null,
       fillIconColor ? `slds-icon-${fillIconColor}` : null,

From 28744b8951f929eade1e1e16a4dbecf40156b40b Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Wed, 23 Jul 2025 12:03:17 +0900
Subject: [PATCH 243/245] (Datepicker): apply `slds-day_adjacent-month` to
 disabled dates as well

---
 src/scripts/Datepicker.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/scripts/Datepicker.tsx b/src/scripts/Datepicker.tsx
index f7c09e8f9..79c91247d 100644
--- a/src/scripts/Datepicker.tsx
+++ b/src/scripts/Datepicker.tsx
@@ -246,10 +246,9 @@ const DatepickerDate: FC<DatepickerDateProps> = (props) => {
   const isToday = date.value === today;
   const isAdjacentMonth = date.month !== cal.month;
   const dateClassName = classnames({
-    'slds-color__text_gray-6': !enabled && !isAdjacentMonth,
     'slds-is-selected': selected,
     'slds-is-today': isToday,
-    'slds-day_adjacent-month': isAdjacentMonth,
+    'slds-day_adjacent-month': isAdjacentMonth || !enabled, // Considering the meaning, applying this class to disabled dates isn't necesarrily correct.
   });
   return (
     <td

From 792a25651f01beb042252e398386ffadf0bad6bb Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 24 Jul 2025 11:04:36 +0900
Subject: [PATCH 244/245] Revert "(Picklist): add `useInitComponentStyle()`"

This reverts commit 7c8508db7b75c72ac677d973013e5556d4e0b6be.
---
 src/scripts/Picklist.tsx | 19 +------------------
 1 file changed, 1 insertion(+), 18 deletions(-)

diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index 26b879ef1..5621c6ed5 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -17,7 +17,7 @@ import { FormElement, FormElementProps } from './FormElement';
 import { Icon } from './Icon';
 import { AutoAlign } from './AutoAlign';
 import { DropdownMenuProps } from './DropdownMenu';
-import { registerStyle, isElInChildren } from './util';
+import { isElInChildren } from './util';
 import { ComponentSettingsContext } from './ComponentSettings';
 import { useControlledValue, useEventCallback, useMergeRefs } from './hooks';
 import { createFC } from './common';
@@ -150,20 +150,6 @@ const PicklistContext = createContext<{
   optionIdPrefix: '',
 });
 
-/**
- *
- */
-function useInitComponentStyle() {
-  useEffect(() => {
-    registerStyle('picklist', [
-      [
-        '.react-slds-picklist-dropdown',
-        '{ left: 0; transform: translateX(0); }',
-      ],
-    ]);
-  }, []);
-}
-
 /**
  *
  */
@@ -241,8 +227,6 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       ...rprops
     } = props;
 
-    useInitComponentStyle();
-
     const fallbackId = useId();
     const id = id_ ?? fallbackId;
     const listboxId = `${id}-listbox`;
@@ -547,7 +531,6 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       }
     );
     const dropdownClassNames = classnames(
-      'react-slds-picklist-dropdown',
       'slds-dropdown',
       'slds-dropdown_length-5',
       menuSize ? `slds-dropdown_${menuSize}` : 'slds-dropdown_fluid'

From a14a2d66f9b011cc7f5a0c168839d26d61da3993 Mon Sep 17 00:00:00 2001
From: msmx-mnakagawa <mnakagawa@mashmatrix.com>
Date: Thu, 24 Jul 2025 11:24:05 +0900
Subject: [PATCH 245/245] (Picklist, Lookup): reflect `alignment`

---
 src/scripts/Lookup.tsx   | 47 ++++++++++++++++++++++++++++------------
 src/scripts/Picklist.tsx | 23 ++++++++++++++------
 2 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index b9aa69880..1aa9059ff 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -14,7 +14,7 @@ import React, {
   FC,
 } from 'react';
 import classnames from 'classnames';
-import { AutoAlign } from './AutoAlign';
+import { AutoAlign, AutoAlignInjectedProps } from './AutoAlign';
 import { Button } from './Button';
 import { FormElement, FormElementProps } from './FormElement';
 import { Icon, IconCategory } from './Icon';
@@ -181,22 +181,31 @@ const LookupSelectedState: FC<LookupSelectedStateProps> = ({
  */
 type LookupScopeSelectorContainerProps = {
   scopeListboxId: string;
-  autoAlignContentRef: Ref<HTMLElement | null>;
   children: React.ReactNode;
-};
+} & AutoAlignInjectedProps;
 
 /**
  * Container component for scope selector dropdown with AutoAlign
  */
 const LookupScopeSelectorContainer: FC<LookupScopeSelectorContainerProps> = ({
   scopeListboxId,
-  autoAlignContentRef,
   children,
+  alignment,
+  autoAlignContentRef,
 }) => {
+  const [vertAlign, align] = alignment;
+  const dropdownClassNames = classnames(
+    'slds-dropdown',
+    vertAlign ? `slds-dropdown_${vertAlign}` : undefined,
+    align ? `slds-dropdown_${align}` : undefined,
+    'slds-dropdown_length-with-icon-7',
+    'slds-dropdown_fluid'
+  );
+
   return (
     <div
       id={scopeListboxId}
-      className='react-slds-lookup-dropdown slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid'
+      className={dropdownClassNames}
       role='listbox'
       aria-label='Scope Options'
       ref={useMergeRefs([autoAlignContentRef])}
@@ -424,10 +433,10 @@ const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
                   alignmentStyle='menu'
                   portalClassName={portalClassName}
                 >
-                  {({ autoAlignContentRef }) => (
+                  {(injectedProps) => (
                     <LookupScopeSelectorContainer
                       scopeListboxId={scopeListboxId}
-                      autoAlignContentRef={autoAlignContentRef}
+                      {...injectedProps}
                     >
                       <ul
                         className='slds-listbox slds-listbox_vertical'
@@ -668,9 +677,8 @@ type LookupDropdownContainerProps = {
   listboxId: string;
   loading?: boolean;
   dropdownRef: Ref<HTMLDivElement>;
-  autoAlignContentRef: Ref<HTMLElement | null>;
   children: React.ReactNode;
-};
+} & AutoAlignInjectedProps;
 
 /**
  * Container component for dropdown with merged refs
@@ -679,13 +687,25 @@ const LookupDropdownContainer: FC<LookupDropdownContainerProps> = ({
   listboxId,
   loading,
   dropdownRef,
-  autoAlignContentRef,
   children,
+  alignment,
+  autoAlignContentRef,
 }) => {
+  const [vertAlign, align] = alignment;
+  const dropdownClassNames = classnames(
+    'react-slds-lookup-dropdown-main',
+    'slds-dropdown',
+    vertAlign ? `slds-dropdown_${vertAlign}` : undefined,
+    align ? `slds-dropdown_${align}` : undefined,
+    'slds-dropdown_length-with-icon-7',
+    'slds-dropdown_fluid',
+    'slds-scrollable_none'
+  );
+
   return (
     <div
       id={listboxId}
-      className='react-slds-lookup-dropdown react-slds-lookup-dropdown-main slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid slds-scrollable_none'
+      className={dropdownClassNames}
       role='listbox'
       aria-label='Search Results'
       tabIndex={0}
@@ -748,12 +768,12 @@ const LookupDropdown: FC<LookupDropdownProps> = ({
       alignmentStyle='menu'
       portalClassName={portalClassName}
     >
-      {({ autoAlignContentRef }) => (
+      {(injectedProps) => (
         <LookupDropdownContainer
           listboxId={listboxId}
           loading={loading}
           dropdownRef={dropdownRef}
-          autoAlignContentRef={autoAlignContentRef}
+          {...injectedProps}
         >
           {listHeader ? (
             <ul
@@ -857,7 +877,6 @@ function useInitComponentStyle() {
         '.react-slds-lookup-scope-down-icon-container .react-slds-lookup-scope-down-icon',
         '{ width: 0.8rem; height: 0.8rem; }',
       ],
-      ['.react-slds-lookup-dropdown', '{ left: 0; transform: translateX(0); }'],
       [
         '.react-slds-lookup-dropdown-main',
         `{ max-height: ${LIST_PARENT_MAX_HEIGHT}; min-width: 15rem; }`,
diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index 5621c6ed5..380104921 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -15,7 +15,7 @@ import React, {
 import classnames from 'classnames';
 import { FormElement, FormElementProps } from './FormElement';
 import { Icon } from './Icon';
-import { AutoAlign } from './AutoAlign';
+import { AutoAlign, RectangleAlignment } from './AutoAlign';
 import { DropdownMenuProps } from './DropdownMenu';
 import { isElInChildren } from './util';
 import { ComponentSettingsContext } from './ComponentSettings';
@@ -530,10 +530,19 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
         'slds-is-disabled': disabled,
       }
     );
-    const dropdownClassNames = classnames(
-      'slds-dropdown',
-      'slds-dropdown_length-5',
-      menuSize ? `slds-dropdown_${menuSize}` : 'slds-dropdown_fluid'
+    const createDropdownClassNames = useCallback(
+      (alignment: RectangleAlignment) => {
+        const [vertAlign, align] = alignment;
+
+        return classnames(
+          'slds-dropdown',
+          vertAlign ? `slds-dropdown_${vertAlign}` : undefined,
+          align ? `slds-dropdown_${align}` : undefined,
+          'slds-dropdown_length-5',
+          menuSize ? `slds-dropdown_${menuSize}` : 'slds-dropdown_fluid'
+        );
+      },
+      [menuSize]
     );
 
     const formElemProps = {
@@ -597,10 +606,10 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
                 portalClassName={containerClassNames}
                 size={menuSize}
               >
-                {({ autoAlignContentRef }) => (
+                {({ alignment, autoAlignContentRef }) => (
                   <div
                     id={listboxId}
-                    className={dropdownClassNames}
+                    className={createDropdownClassNames(alignment)}
                     role='listbox'
                     aria-label='Options'
                     tabIndex={0}