diff --git a/src/scripts/Badge.tsx b/src/scripts/Badge.tsx
index 18cc375ca..38320a692 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?: '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-theme_${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/src/scripts/BreadCrumbs.tsx b/src/scripts/BreadCrumbs.tsx
index 5c34600eb..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}>
@@ -33,34 +30,26 @@ 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
 }) => {
   const oClassName = classnames(
-    'slds-breadcrumb slds-list_horizontal',
+    'slds-breadcrumb',
+    'slds-list_horizontal',
+    'slds-wrap',
     className
   );
 
   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>
+    <nav {...props} role='navigation' aria-label='Breadcrumbs'>
+      <ol className={oClassName}>{children}</ol>
     </nav>
   );
 };
diff --git a/src/scripts/Button.tsx b/src/scripts/Button.tsx
index 240ba0840..37e663982 100644
--- a/src/scripts/Button.tsx
+++ b/src/scripts/Button.tsx
@@ -1,13 +1,16 @@
 import React, { FC, ReactNode, ButtonHTMLAttributes, Ref, useRef } from 'react';
 import classnames from 'classnames';
-import { Icon } from './Icon';
+import { SvgIcon, IconCategory } from './Icon';
 import { Spinner } from './Spinner';
 import { useEventCallback, useMergeRefs } from './hooks';
 
 export type ButtonType =
   | 'neutral'
   | 'brand'
+  | 'outline-brand'
   | 'destructive'
+  | 'text-destructive'
+  | 'success'
   | 'inverse'
   | 'icon'
   | 'icon-bare'
@@ -31,6 +34,7 @@ export type ButtonIconMoreSize = 'x-small' | 'small' | 'medium' | 'large';
  */
 export type ButtonIconProps = {
   className?: string;
+  category?: IconCategory;
   icon: string;
   align?: ButtonIconAlign;
   size?: ButtonIconSize;
@@ -43,9 +47,9 @@ export type ButtonIconProps = {
  */
 export const ButtonIcon: FC<ButtonIconProps> = ({
   icon,
+  category = 'utility',
   align,
   size,
-  inverse,
   className,
   style,
   ...props
@@ -56,19 +60,22 @@ export const ButtonIcon: FC<ButtonIconProps> = ({
       : 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
+    <SvgIcon
       className={iconClassNames}
       icon={icon}
-      textColor={null}
+      category={category}
       pointerEvents='none'
       style={style}
       {...props}
@@ -118,6 +125,7 @@ export const Button: FC<ButtonProps> = (props) => {
     buttonRef: buttonRef_,
     iconMoreSize: iconMoreSize_,
     onClick: onClick_,
+    tabIndex,
     ...rprops
   } = props;
 
@@ -135,19 +143,24 @@ export const Button: FC<ButtonProps> = (props) => {
     onClick_?.(e);
   });
 
+  const content = children || label;
+  const isIconOnly = type && /^icon-/.test(type) && icon && !content;
+
   const typeClassName = type ? `slds-button_${type}` : 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 = (
-    // eslint-disable-next-line react/button-has-type
+  return (
     <button
       ref={buttonRef}
       className={btnClassNames}
       type={htmlType}
+      title={isIconOnly || alt ? alt ?? icon : undefined}
+      tabIndex={tabIndex ?? -1}
       {...rprops}
       onClick={onClick}
     >
@@ -159,7 +172,7 @@ export const Button: FC<ButtonProps> = (props) => {
           inverse={inverse}
         />
       ) : undefined}
-      {children || label}
+      {content}
       {icon && iconAlign === 'right' ? (
         <ButtonIcon
           icon={icon}
@@ -171,22 +184,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;
 };
diff --git a/src/scripts/Checkbox.tsx b/src/scripts/Checkbox.tsx
index 80f3f0d91..3f9bc7f74 100644
--- a/src/scripts/Checkbox.tsx
+++ b/src/scripts/Checkbox.tsx
@@ -2,11 +2,12 @@ import React, {
   FC,
   InputHTMLAttributes,
   Ref,
+  useId,
   useContext,
   ReactNode,
 } from 'react';
 import classnames from 'classnames';
-import { FormElement, FormElementProps } from './FormElement';
+import { FormElement } from './FormElement';
 import { CheckboxGroupContext, CheckboxValueType } from './CheckboxGroup';
 
 /**
@@ -15,7 +16,6 @@ import { CheckboxGroupContext, CheckboxValueType } from './CheckboxGroup';
 export type CheckboxProps = {
   label?: string;
   required?: boolean;
-  error?: FormElementProps['error'];
   cols?: number;
   name?: string;
   value?: CheckboxValueType;
@@ -33,10 +33,10 @@ export type CheckboxProps = {
 export const Checkbox: FC<CheckboxProps> = (props) => {
   const {
     type, // eslint-disable-line @typescript-eslint/no-unused-vars
+    id: id_,
     className,
     label,
     required,
-    error,
     cols,
     tooltip,
     tooltipIcon,
@@ -45,10 +45,15 @@ export const Checkbox: FC<CheckboxProps> = (props) => {
     children,
     ...rprops
   } = props;
-  const { grouped } = useContext(CheckboxGroupContext);
+
+  const prefix = useId();
+  const id = id_ ?? `${prefix}-id`;
+
+  const { grouped, error, errorId } = useContext(CheckboxGroupContext);
   const formElemProps = {
     required,
     error,
+    errorId,
     cols,
     tooltip,
     tooltipIcon,
@@ -56,11 +61,19 @@ export const Checkbox: FC<CheckboxProps> = (props) => {
   };
   const checkClassNames = classnames(className, 'slds-checkbox');
   const check = (
-    <label className={checkClassNames}>
-      <input ref={inputRef} type='checkbox' {...rprops} />
-      <span className='slds-checkbox_faux' />
-      <span className='slds-form-element__label'>{label || children}</span>
-    </label>
+    <div className={checkClassNames}>
+      <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>
+    </div>
   );
   return grouped ? (
     check
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>
diff --git a/src/scripts/DateInput.tsx b/src/scripts/DateInput.tsx
index 743a8134f..cf418b60a 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,
@@ -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}
diff --git a/src/scripts/Datepicker.tsx b/src/scripts/Datepicker.tsx
index fc54c8944..fc8dbbae3 100644
--- a/src/scripts/Datepicker.tsx
+++ b/src/scripts/Datepicker.tsx
@@ -141,39 +141,44 @@ 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}
           />
         </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
-            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>
   );
@@ -196,7 +201,6 @@ type DatepickerDateProps = {
   selectedDate: string | undefined;
   today: string;
   date: CalendarDate;
-  dayIndex: number;
 } & DatepickerHandlers;
 
 /**
@@ -208,7 +212,6 @@ const DatepickerDate: FC<DatepickerDateProps> = (props) => {
     selectedDate,
     today,
     date,
-    dayIndex,
     onDateKeyDown: onDateKeyDown_,
     onDateClick: onDateClick_,
     onDateFocus: onDateFocus_,
@@ -241,22 +244,23 @@ 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
       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'
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
         tabIndex={selectable ? 0 : -1}
         onClick={selectable ? onDateClick : undefined}
         onKeyDown={selectable ? onDateKeyDown : undefined}
@@ -292,16 +296,10 @@ 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) => (
-              // 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
@@ -489,6 +486,7 @@ export const Datepicker: FC<DatepickerProps> = (props) => {
       className={datepickerClassNames}
       ref={elementRef}
       tabIndex={-1}
+      role='dialog'
       aria-hidden={false}
       onBlur={onBlur}
       onKeyDown={onKeyDown}
diff --git a/src/scripts/DropdownButton.tsx b/src/scripts/DropdownButton.tsx
index ab744d771..7d3b6987e 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}
@@ -207,10 +208,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-m-left_xx-small': !grouped,
+      'slds-is-open': opened,
+      'react-slds-dropdown-opened': opened,
+    }
+  );
   const noneStyle = { display: 'none' };
 
   return (
diff --git a/src/scripts/DropdownMenu.tsx b/src/scripts/DropdownMenu.tsx
index cc524e969..6dafb0d11 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} role='presentation'>
+      <span>{children}</span>
+    </li>
   );
 };
 
@@ -221,35 +222,45 @@ 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} role='presentation'>
+        <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'
+            title={typeof label === 'string' ? label : undefined}
+          >
+            {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 +400,8 @@ const DropdownMenuInner: FC<DropdownMenuProps & AutoAlignInjectedProps> = (
       onBlur={onBlur}
       {...rprops}
     >
-      {header ? <MenuHeader>{header}</MenuHeader> : null}
-      <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
             value={{ openSubmenuKeys, handleSubmenuOpen }}
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>
     );
   },
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>
   );
 };
diff --git a/src/scripts/FormElement.tsx b/src/scripts/FormElement.tsx
index 9294d22a9..cae09a906 100644
--- a/src/scripts/FormElement.tsx
+++ b/src/scripts/FormElement.tsx
@@ -18,9 +18,11 @@ import { TooltipContent } from './TooltipContent';
 export type FormElementProps = {
   id?: string;
   className?: string;
+  controlId?: string;
   label?: string;
   required?: boolean;
   error?: boolean | string | { message: string };
+  errorId?: string;
   readOnly?: boolean;
   cols?: number;
   dropdown?: JSX.Element;
@@ -42,11 +44,13 @@ export const FormElement = createFC<
     const {
       id,
       className,
+      controlId,
       cols = 1,
       elementRef,
       label,
       required,
       error,
+      errorId,
       dropdown,
       children,
       readOnly,
@@ -66,13 +70,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}`
@@ -91,31 +91,47 @@ 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
+              id={id}
               className='slds-form-element__label'
-              htmlFor={id}
+              {...(LabelTag === 'label' ? { htmlFor: controlId } : {})}
               onClick={id ? undefined : onClickLabel}
             >
               {required ? (
-                <abbr className='slds-required' title='required'>
+                <abbr
+                  className='slds-required'
+                  title='required'
+                  aria-hidden='true'
+                >
                   *
                 </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 className='slds-form-element__help'>{errorMessage}</span>
+              <span
+                className='slds-form-element__help'
+                id={error ? errorId : undefined}
+              >
+                {errorMessage}
+              </span>
             ) : undefined}
           </div>
         </div>
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;
diff --git a/src/scripts/Icon.tsx b/src/scripts/Icon.tsx
index 4f1f7dd0d..03dc71e7a 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();
@@ -124,23 +122,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 */
 }
 
@@ -153,9 +147,16 @@ export type IconCategory =
   | 'doctype'
   | 'standard'
   | 'utility';
-export type IconSize = 'x-small' | 'small' | 'medium' | 'large';
-export type IconContainer = boolean | 'default' | 'circle';
-export type IconTextColor = 'default' | 'warning' | 'error' | null;
+export type IconSize = 'xx-small' | 'x-small' | 'small' | 'medium' | 'large';
+export type IconContainer = 'circle';
+export type IconTextColor =
+  | 'default'
+  | 'currentColor'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'light'
+  | null;
 
 /**
  *
@@ -167,53 +168,56 @@ export type IconProps = {
   size?: IconSize;
   align?: 'left' | 'right';
   container?: IconContainer;
-  color?: string;
   textColor?: IconTextColor;
-  tabIndex?: number;
   fillColor?: string;
+  title?: string;
+  flip?: boolean;
 } & SVGAttributes<SVGElement>;
 
 /**
  *
  */
 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,
-      container,
       textColor = 'default',
       style,
       ...rprops
     } = props;
     const { assetRoot = getAssetRoot() } = useContext(ComponentSettingsContext);
-    const iconClassNames = classnames(
-      'react-slds-icon',
-      {
-        'slds-icon': !/slds-button__icon/.test(className),
-        [`slds-icon_${size}`]: /^(x-small|small|medium|large)$/.test(size),
-        [`slds-icon-text-${textColor ?? 'default'}`]:
-          /^(default|warning|error)$/.test(textColor ?? '') && !iconColor,
-        [`slds-icon-${iconColor ?? ''}`]: !container && 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, ''); // 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
@@ -234,13 +238,19 @@ const SvgIcon = forwardRef(
  */
 export const Icon = createFC<IconProps, { ICONS: typeof ICONS }>(
   (props) => {
-    const { container, containerClassName, fillColor, ...rprops } = props;
+    const {
+      container,
+      containerClassName: containerClassName_,
+      fillColor,
+      textColor = 'default',
+      title,
+      flip,
+      ...rprops
+    } = props;
     let { category = 'utility', icon } = props;
 
     useInitComponentStyle();
 
-    const iconContainerRef = useRef<HTMLSpanElement | null>(null);
-
     const svgIconRef = useRef<SVGSVGElement | null>(null);
 
     const svgIconRefCallback = useCallback(
@@ -253,72 +263,44 @@ 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 containerClassName = classnames(
+      containerClassName_,
+      'slds-icon_container',
+      container === 'circle' ? 'slds-icon_container_circle' : null,
+      category === 'utility'
+        ? `slds-icon-utility-${icon.replace(/_/g, '-')}`
+        : null,
+      fillIconColor ? `slds-icon-${fillIconColor}` : null,
+      {
+        'slds-current-color': textColor === 'currentColor',
+        'slds-icon_flip': flip,
+      }
+    );
+
+    return (
+      <span className={containerClassName} title={title}>
+        <SvgIcon
+          ref={svgIconRefCallback}
+          {...rprops}
+          {...{
+            category,
+            icon,
+            iconColor: fillIconColor,
+          }}
+        />
+        {title ? <span className='slds-assistive-text'>{title}</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/Input.tsx b/src/scripts/Input.tsx
index b7fcc7bdc..d57cbb585 100644
--- a/src/scripts/Input.tsx
+++ b/src/scripts/Input.tsx
@@ -1,4 +1,5 @@
 import React, {
+  useId,
   ReactElement,
   InputHTMLAttributes,
   KeyboardEvent,
@@ -155,25 +156,28 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
       prevValueRef.current = e.target.value;
     });
 
+    const prefix = useId();
+
+    const rawTextId = id ?? `${prefix}-raw-text-id`;
+    const inputId = id ?? `${prefix}-input-id`;
+    const labelForId = readOnly ? rawTextId : inputId;
+
+    const errorId = `${prefix}-error-id`;
+
     const { isFieldSetColumn } = useContext(FieldSetColumnContext);
     const inputClassNames = classnames(
       className,
       bare ? 'slds-input_bare' : 'slds-input'
     );
     const inputElem = readOnly ? (
-      <Text
-        id={id}
-        type='regular'
-        category='body'
-        className='slds-form-element__static'
-      >
+      <Text id={rawTextId} type='regular' category='body'>
         {value}
       </Text>
     ) : (
       <input
         ref={inputRef}
         className={inputClassNames}
-        id={id}
+        id={inputId}
         type={type}
         value={value}
         defaultValue={defaultValue}
@@ -181,6 +185,8 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
         {...rprops}
         onChange={onChange}
         onKeyDown={onKeyDown}
+        aria-describedby={error ? errorId : undefined}
+        aria-invalid={error ? true : undefined}
       />
     );
 
@@ -206,10 +212,11 @@ export const Input = createFC<InputProps, { isFormElement: boolean }>(
     }
     if (isFieldSetColumn || label || required || error || cols) {
       const formElemProps = {
-        id,
+        controlId: labelForId,
         label,
         required,
         error,
+        errorId,
         readOnly,
         cols,
         tooltip,
diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
index 13e339bc5..8434c5127 100644
--- a/src/scripts/Lookup.tsx
+++ b/src/scripts/Lookup.tsx
@@ -1,30 +1,23 @@
 import React, {
   InputHTMLAttributes,
   ChangeEvent,
+  FocusEvent,
   KeyboardEvent,
-  SyntheticEvent,
-  MouseEvent,
-  FC,
   Ref,
   useRef,
-  useContext,
   useState,
   useEffect,
-  EventHandler,
   ReactNode,
+  useId,
+  useMemo,
+  useCallback,
+  FC,
 } 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 { ComponentSettingsContext } from './ComponentSettings';
 import { useControlledValue, useEventCallback, useMergeRefs } from './hooks';
 import { createFC } from './common';
 import { Bivariant } from './typeUtils';
@@ -41,503 +34,739 @@ export type LookupEntry = {
   meta?: string;
 };
 
-export type LookupSelectionProps = {
-  id?: string;
-  selected?: LookupEntry;
-  hidden?: boolean;
-  onResetSelection?: () => void;
-  lookupSelectionRef?: Ref<HTMLDivElement>;
+/**
+ *
+ */
+export type LookupScope = {
+  label: string;
+  value?: string;
+  icon?: string;
+  category?: IconCategory;
 };
 
 /**
- *
+ * Key handler configuration for keyboard navigation
  */
-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?.();
+type KeyHandlerConfig = {
+  type: 'search' | 'scope';
+  opened: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+  onNavigateDown: () => void;
+  onNavigateUp: () => void;
+  onSelect: () => void;
+  isTabNavigationIgnored: (direction: 'forward' | 'backward') => boolean;
+  onTabNavigation: (direction: 'forward' | 'backward') => void;
+};
+
+/**
+ * Custom hook for keyboard event handling in lookup components
+ */
+const useKeyHandler = (config: KeyHandlerConfig) => {
+  return useEventCallback((e: KeyboardEvent) => {
+    const {
+      opened,
+      onOpen,
+      onClose,
+      onNavigateDown,
+      onNavigateUp,
+      onSelect,
+      isTabNavigationIgnored,
+      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 (!isTabNavigationIgnored(e.shiftKey ? 'backward' : 'forward')) {
+          e.preventDefault();
+          e.stopPropagation();
+          onTabNavigation(e.shiftKey ? 'backward' : 'forward');
+        } else {
+          onClose();
+        }
+        break;
     }
   });
+};
 
-  const onPillClick = useEventCallback((e: MouseEvent<HTMLSpanElement>) => {
-    e.currentTarget.focus();
-    e.preventDefault();
-    e.stopPropagation();
-  });
+/**
+ * Props for LookupSelectedState component
+ */
+type LookupSelectedStateProps = {
+  selected: LookupEntry;
+  disabled?: boolean;
+  listboxId: string;
+  onRemoveSelection: () => void;
+};
 
-  const lookupClassNames = classnames({ 'slds-hide': hidden });
+/**
+ * Component for displaying selected state
+ */
+const LookupSelectedState: FC<LookupSelectedStateProps> = ({
+  selected,
+  disabled,
+  listboxId,
+  onRemoveSelection,
+}) => {
   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}
+    <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'
+      >
+        {selected.icon && (
+          <Icon
+            containerClassName='slds-combobox__input-entity-icon'
+            category={selected.category}
+            icon={selected.icon}
+            size='small'
           />
-        ) : undefined}
+        )}
+        <div
+          role='combobox'
+          tabIndex={disabled ? -1 : 0}
+          className='slds-input_faux slds-combobox__input slds-combobox__input-value'
+          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
  */
-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[];
+type LookupScopeSelectorProps = {
+  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;
+  scopeListboxId: string;
+  getScopeOptionId: (index: number) => string;
+  onScopeMenuClick?: () => void;
+  onScopeSelect?: (scope: string) => void;
 };
 
 /**
- *
+ * Component for scope selector in multi-entity lookup
  */
-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%; }',
-      ],
-    ]);
-  }, []);
-}
+const LookupScopeSelector: FC<LookupScopeSelectorProps> = ({
+  scopes,
+  targetScope,
+  disabled,
+  scopeListboxId,
+  getScopeOptionId,
+  onScopeMenuClick: onScopeMenuClick_,
+  onScopeSelect: onScopeSelect_,
+}) => {
+  const [scopeOpened, setScopeOpened] = useState(false);
+  const [scopeFocusedIndex, setScopeFocusedIndex] = useState<number>(-1);
 
-/**
- *
- */
-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 currentScope = scopes.find((scope) => scope.label === targetScope);
 
-  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);
+  // 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;
       }
-      onKeyDown?.(e);
+
+      targetElement.focus();
     }
   );
 
-  const onInputChange = useEventCallback((e: ChangeEvent<HTMLInputElement>) => {
-    const searchText = e.target.value;
-    onSearchTextChange?.(searchText);
+  const onScopeSelect = useEventCallback((scope: string) => {
+    setScopeOpened(false);
+    onScopeSelect_?.(scope);
   });
 
-  const onInputBlur = useEventCallback(() => {
-    setTimeout(() => {
-      if (!isFocusedInComponent()) {
-        onBlur?.();
+  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);
       }
-    }, 10);
+    },
+    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 { getActiveElement } = useContext(ComponentSettingsContext);
+  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);
 
-  const isFocusedInComponent = useEventCallback(() => {
-    const targetEl = getActiveElement();
-    return isElInChildren(elRef.current, targetEl);
+      if (
+        e.relatedTarget.id === getScopeOptionId(prevIndex) ||
+        e.relatedTarget.id === getScopeOptionId(nextIndex)
+      ) {
+        // catch keyborad event
+        return;
+      }
+    }
+
+    setTimeout(() => {
+      setScopeOpened(false);
+    }, 10);
   });
 
-  const searchInputClassNames = classnames(
-    'slds-grid',
-    'slds-input-has-icon',
-    `slds-input-has-icon_${iconAlign}`,
-    { 'slds-hide': hidden },
-    scopes != null ? 'slds-col' : undefined,
-    className
+  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'>
+          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',
+                      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'
+                  style={{
+                    paddingLeft: '1.5rem',
+                    cursor: !disabled ? 'pointer' : undefined,
+                    zIndex: SCOPE_INPUT_ZINDEX,
+                  }}
+                  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',
+                    zIndex: SCOPE_INPUT_ZINDEX + 1,
+                  }}
+                >
+                  <Icon
+                    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'
+                    onBlur={onScopeBlur}
+                    onKeyDown={onScopeKeyDown}
+                  >
+                    {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>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   );
-  const searchInput = (
-    <div
-      ref={scopes != null ? undefined : elRef}
-      className={searchInputClassNames}
-    >
-      <Input
+};
+
+const SCOPE_INPUT_ZINDEX = 1;
+
+/**
+ * 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>;
+  onInputClick: () => void;
+  onInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onInputFocus: () => void;
+  onInputBlur: (e: FocusEvent) => 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,
+  onInputClick,
+  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
+          containerClassName={classnames(
+            'slds-input__icon',
+            `slds-input__icon_${iconAlign}`
+          )}
+          category='utility'
+          icon='search'
+          size='x-small'
+        />
+      )}
+      <input
         {...rprops}
-        disabled={disabled}
-        bare={scopes != null}
-        inputRef={inputRef}
+        type='text'
+        className={inputClassNames}
+        id={comboboxId}
+        ref={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}
+        aria-autocomplete='list'
+        aria-controls={listboxId}
+        aria-expanded={opened}
+        aria-haspopup='listbox'
+        aria-activedescendant={
+          focusedValue ? `${optionIdPrefix}-${focusedValue}` : undefined
+        }
+        autoComplete='off'
+        role='combobox'
+        onClick={onInputClick}
+        onChange={onInputChange}
+        onFocus={onInputFocus}
         onBlur={onInputBlur}
+        onKeyDown={onInputKeyDown}
       />
+      {iconAlign === 'right' && (
+        <Icon
+          containerClassName={classnames(
+            'slds-input__icon',
+            `slds-input__icon_${iconAlign}`
+          )}
+          category='utility'
+          icon='search'
+          size='x-small'
+        />
+      )}
     </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;
 };
 
 /**
- *
+ * Props for LookupOption component
  */
-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;
+type LookupOptionProps = {
+  entry: LookupEntry;
+  isFocused: boolean;
+  getOptionId: (value: string) => string;
+  onOptionClick: (entry: LookupEntry) => void;
+  onOptionFocus: (value: string) => void;
 };
 
-function trueFilter() {
-  return true;
-}
-
 /**
- *
+ * Component for individual lookup option
  */
-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 LookupOption: FC<LookupOptionProps> = ({
+  entry,
+  isFocused,
+  getOptionId,
+  onOptionClick,
+  onOptionFocus,
+}) => {
+  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,
     }
-    const anchors = el.querySelectorAll<HTMLAnchorElement>(
-      '.react-slds-candidate[tabIndex]'
-    );
-    if (anchors[index]) {
-      anchors[index].focus();
-    }
-  });
+  );
 
-  useEffect(() => {
-    if (focus) {
-      setTimeout(() => {
-        focusToTargetItemEl(0);
-      }, 10);
-    }
-  }, [focus, focusToTargetItemEl]);
+  return (
+    <li key={entry.value} role='presentation' className='slds-listbox__item'>
+      <div
+        id={getOptionId(entry.value)}
+        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'>
+          {entry.icon && (
+            <Icon 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 onSelect = useEventCallback((entry: LookupEntry | null) => {
-    onSelect_?.(entry);
-  });
+/**
+ * Props for LookupDropdown component
+ */
+type LookupDropdownProps = {
+  opened: boolean;
+  loading?: boolean;
+  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;
+};
 
-  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);
-    }
-  });
+/**
+ * Component for dropdown menu
+ */
+const LookupDropdown: FC<LookupDropdownProps> = ({
+  opened,
+  loading,
+  listboxId,
+  dropdownRef,
+  listHeader,
+  listHeaderIdSeed,
+  listFooter,
+  listFooterIdSeed,
+  filteredData,
+  focusedValue,
+  getOptionId,
+  onOptionClick,
+  onOptionFocus,
+  onBlur,
+  onKeyDown,
+}) => {
+  if (!opened) return 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}
+      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'
-      tabIndex={-1}
-      onKeyDown={onKeyDown}
+      aria-label='Search Results'
+      tabIndex={0}
+      aria-busy={loading}
+      ref={dropdownRef}
     >
-      {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>
-          );
-        })}
+      {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)}
+              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
-            className='slds-lookup__item'
-            key='loading'
-            style={{ height: 20 }}
-          >
-            <Spinner
-              container={false}
-              size='small'
-              style={{ margin: '0 auto' }}
-            />
+          <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>
-        ) : undefined}
+        ) : null}
       </ul>
-      {footer ? <div className='slds-lookup__item'>{footer}</div> : undefined}
+      {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)}
+            >
+              {listFooter}
+            </div>
+          </li>
+        </ul>
+      ) : null}
     </div>
   );
 };
 
-/**
- *
- */
-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>
-);
+// manually replaces where `max-height` is specified
+const LIST_PARENT_MAX_HEIGHT = 'unset';
+const LIST_CONTENT_MAX_HEIGHT = 'calc((1.5rem + 1rem) * 7)'; // copied from `.slds-dropdown_length-with-icon-7`
 
 /**
  *
@@ -564,25 +793,26 @@ 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;
+  tooltip?: ReactNode;
+  tooltipIcon?: string;
+
+  // Multi Entity Lookup (scope) props
   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;
+  onScopeMenuClick?: () => void;
+  onScopeSelect?: (scope: string) => void;
   onLookupRequest?: (searchText: string) => void;
   onBlur?: () => void;
   onFocus?: () => void;
@@ -591,7 +821,7 @@ export type LookupProps = {
   onComplete?: (cancel?: boolean) => void;
 } & Omit<
   InputHTMLAttributes<HTMLInputElement>,
-  'onChange' | 'onBlur' | 'onFocus' | 'onSelect'
+  'onChange' | 'onBlur' | 'onFocus' | 'onSelect' | 'value' | 'defaultValue'
 >;
 
 /**
@@ -600,7 +830,7 @@ export type LookupProps = {
 export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
   (props) => {
     const {
-      id,
+      id: id_,
       value: value_,
       defaultValue,
       selected: selected_,
@@ -609,36 +839,51 @@ 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_,
+      // Multi Entity Lookup props
+      scopes,
+      targetScope: targetScope_,
+      defaultTargetScope,
       onScopeMenuClick: onScopeMenuClick_,
       onScopeSelect: onScopeSelect_,
+      // Icon alignment
+      iconAlign = 'right',
+      onSelect: onSelect_,
       onSearchTextChange: onSearchTextChange_,
       onLookupRequest: onLookupRequest_,
       onBlur: onBlur_,
+      onFocus: onFocus_,
       onValueChange,
       onComplete,
       elementRef: elementRef_,
       inputRef: inputRef_,
-      selectionRef: selectionRef_,
       dropdownRef: dropdownRef_,
       ...rprops
     } = props;
 
+    const fallbackId = useId();
+    const comboboxId = id_ ?? `${fallbackId}-combobox`;
+    const listboxId = `${fallbackId}-listbox`;
+
+    const optionIdPrefix = `${comboboxId}-option`;
+    const getOptionId = (value: string) => `${optionIdPrefix}-${value}`;
+
+    const scopeListboxId = `${comboboxId}-scope-listbox`;
+    const getScopeOptionId = (index: number) =>
+      `${scopeListboxId}-option-${index}`;
+
     const [value, setValue] = useControlledValue<string | null>(
       value_,
       defaultValue ?? null
@@ -657,178 +902,407 @@ export const Lookup = createFC<LookupProps, { isFormElement: boolean }>(
     );
     const [targetScope, setTargetScope] = useControlledValue(
       targetScope_,
-      defaultTargetScope ?? ''
+      defaultTargetScope ??
+        (scopes && scopes.length > 0 ? scopes[0].label : undefined)
+    );
+    const [focusedValue, setFocusedValue] = useState<string | undefined>();
+
+    const listHeaderIdSeed = useMemo(
+      () => [...data.map((entry) => entry.value), 'header'].join('-'),
+      [data]
+    );
+    const listFooterIdSeed = useMemo(
+      () => [...data.map((entry) => entry.value), 'footer'].join('-'),
+      [data]
+    );
+
+    // Memoized option values - filtered data with optional header and footer
+    const optionValues = useMemo(() => {
+      const filteredData = lookupFilter
+        ? data.filter((entry) => lookupFilter(entry, searchText, targetScope))
+        : data;
+      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(
+      (currentValue?: string) => {
+        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
+      },
+      [optionValues]
+    );
+
+    // Get previous option value for keyboard navigation
+    const getPrevValue = useCallback(
+      (currentValue?: string) => {
+        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
+      },
+      [optionValues]
     );
-    const [focusFirstCandidate, setFocusFirstCandidate] = useState(false);
+
+    // Scroll focused element into view
+    const scrollFocusedElementIntoView = useEventCallback(
+      (nextFocusedValue: string | undefined) => {
+        if (!nextFocusedValue || !dropdownElRef.current) {
+          return;
+        }
+
+        const dropdownContainer = dropdownElRef.current;
+        const targetElement = dropdownContainer.querySelector(
+          `#${CSS.escape(getOptionId(nextFocusedValue))}`
+        );
+
+        if (!(targetElement instanceof HTMLElement)) {
+          return;
+        }
+
+        targetElement.focus();
+      }
+    );
+
+    // Set initial focus when dropdown opens
+    useEffect(() => {
+      if (!opened) {
+        setFocusedValue(undefined);
+      }
+    }, [opened, optionValues, focusedValue, scrollFocusedElementIntoView]);
 
     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 onSelect = useEventCallback((selectedEntry: LookupEntry | null) => {
+      const currValue = selectedEntry?.value ?? null;
+      setValue(currValue);
+      setSelected(selectedEntry);
+      onValueChange?.(currValue, value);
+      onSelect_?.(selectedEntry);
     });
 
-    const onSearchTextChange = useEventCallback((searchText: string) => {
-      setSearchText(searchText);
-      onSearchTextChange_?.(searchText);
+    const onSearchTextChange = useEventCallback((newSearchText: string) => {
+      setSearchText(newSearchText);
+      onSearchTextChange_?.(newSearchText);
+      if (newSearchText && !opened) {
+        setOpened(true);
+        onLookupRequest_?.(newSearchText);
+      }
     });
 
-    const onLookupRequest = useEventCallback((searchText: string) => {
-      setOpened(true);
-      onLookupRequest_?.(searchText);
+    const onInputClick = useEventCallback(() => {
+      onFocus_?.();
     });
 
-    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);
+
+        setOpened(true);
+        onLookupRequest_?.(newSearchText);
+      }
+    );
+
+    const onInputFocus = useEventCallback(() => {
+      onFocus_?.();
     });
 
-    const onResetSelection = useEventCallback(() => {
-      onSelect(null);
-      onSearchTextChange('');
-      onLookupRequest('');
+    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(() => {
-        const inputEl = inputElRef.current;
-        inputEl?.focus();
+        setOpened(false);
+        onBlur_?.();
+        onComplete?.(true);
       }, 10);
     });
 
-    const onLookupItemSelect = useEventCallback(
-      (selected: LookupEntry | null) => {
-        if (selected) {
-          onSelect(selected);
-          setOpened(false);
-          setTimeout(() => {
-            const pillElem = selectionElRef.current?.querySelector('a');
-            pillElem?.focus();
-          }, 10);
-        } else {
-          setOpened(false);
-          setTimeout(() => {
-            const inputEl = inputElRef.current;
-            inputEl?.focus();
-          }, 10);
+    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);
         }
-        onComplete?.();
-      }
-    );
+      },
+      isTabNavigationIgnored: (direction) => {
+        const currentIndex = focusedValue
+          ? optionValues.indexOf(focusedValue)
+          : -1;
 
-    const onFocusFirstCandidate = useEventCallback(() => {
-      if (!opened) {
-        onLookupRequest(searchText);
-      } else {
-        setFocusFirstCandidate(true);
-        setTimeout(() => {
-          setFocusFirstCandidate(false);
-        }, 10);
-      }
+        return (
+          currentIndex === -1 ||
+          (direction === 'backward' && currentIndex <= 0) ||
+          (direction === 'forward' && currentIndex >= optionValues.length - 1)
+        );
+      },
+      onTabNavigation: (direction) => {
+        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 { getActiveElement } = useContext(ComponentSettingsContext);
-    const isFocusedInComponent = useEventCallback(() => {
-      const targetEl = getActiveElement();
-      return (
-        isElInChildren(elRef.current, targetEl) ||
-        isElInChildren(dropdownElRef.current, targetEl)
-      );
+    const onOptionClick = useEventCallback((entry: LookupEntry) => {
+      onSelect(entry);
+      setOpened(false);
+      setTimeout(() => {
+        inputElRef.current?.focus();
+        onComplete?.();
+      }, 10);
     });
 
-    const onSearch = useEventCallback(() => onLookupRequest(searchText || ''));
+    const onOptionFocus = useEventCallback((value: string) => {
+      setFocusedValue(value);
+    });
 
-    const onBlur = useEventCallback(() => {
+    const onRemoveSelection = useEventCallback(() => {
+      onSelect(null);
+      setSearchText('');
       setTimeout(() => {
-        if (!isFocusedInComponent()) {
-          setOpened(false);
-          onBlur_?.();
-          onComplete?.(true); // quit lookup (cancel)
-        }
-      }, 500);
+        inputElRef.current?.focus();
+      }, 10);
     });
 
-    const lookupClassNames = classnames(
-      'slds-lookup',
-      'react-slds-lookup',
-      { 'slds-has-selection': selected },
+    const hasSelection = selected != null;
+
+    const containerClassNames = classnames(
+      'slds-combobox_container',
+      {
+        'slds-has-selection': hasSelection,
+      },
       className
     );
+
+    const comboboxClassNames = classnames(
+      'slds-combobox',
+      'slds-dropdown-trigger',
+      'slds-dropdown-trigger_click',
+      {
+        'slds-is-open': opened,
+      }
+    );
+
     const formElemProps = {
-      id,
-      cols,
+      controlId: comboboxId,
       label,
       required,
       error,
+      cols,
       tooltip,
       tooltipIcon,
+      elementRef,
     };
-    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}
+
+    const filteredData = lookupFilter
+      ? data.filter((entry) => lookupFilter(entry, searchText, targetScope))
+      : data;
+
+    // Render selected state
+    if (hasSelection && selected) {
+      return (
+        <FormElement {...formElemProps}>
+          <div className={containerClassNames}>
+            <LookupSelectedState
               selected={selected}
-              onResetSelection={onResetSelection}
+              disabled={disabled}
+              listboxId={listboxId}
+              onRemoveSelection={onRemoveSelection}
             />
-          ) : (
-            <LookupSearch
+          </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'>
+              <LookupScopeSelector
+                scopes={scopes}
+                targetScope={targetScope}
+                disabled={disabled}
+                scopeListboxId={scopeListboxId}
+                getScopeOptionId={getScopeOptionId}
+                onScopeMenuClick={onScopeMenuClick_}
+                onScopeSelect={(scope) => {
+                  setTargetScope(scope);
+                  onScopeSelect_?.(scope);
+                }}
+              />
+              <div className='slds-combobox_container slds-combobox-addon_end'>
+                <div className={comboboxClassNames} ref={elementRef}>
+                  <LookupSearchInput
+                    {...rprops}
+                    searchText={searchText}
+                    disabled={disabled}
+                    opened={opened}
+                    focusedValue={focusedValue}
+                    iconAlign={iconAlign}
+                    comboboxId={comboboxId}
+                    listboxId={listboxId}
+                    optionIdPrefix={optionIdPrefix}
+                    inputRef={inputRef}
+                    onInputClick={onInputClick}
+                    onInputChange={onInputChange}
+                    onInputFocus={onInputFocus}
+                    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>
+          </div>
+        </FormElement>
+      );
+    }
+
+    // Render simple search state (no scopes)
+    return (
+      <FormElement {...formElemProps}>
+        <div className={containerClassNames}>
+          <div className={comboboxClassNames} ref={elementRef}>
+            <LookupSearchInput
               {...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}
+              disabled={disabled}
+              opened={opened}
+              focusedValue={focusedValue}
+              iconAlign={iconAlign}
+              comboboxId={comboboxId}
+              listboxId={listboxId}
+              optionIdPrefix={optionIdPrefix}
+              inputRef={inputRef}
+              onInputClick={onInputClick}
+              onInputChange={onInputChange}
+              onInputFocus={onInputFocus}
+              onInputBlur={onInputBlur}
+              onInputKeyDown={onInputKeyDown}
             />
-          )}
-          {opened ? (
-            <LookupCandidateList
-              portalClassName={lookupClassNames}
-              elementRef={dropdownRef}
-              data={data}
-              focus={focusFirstCandidate}
+            <LookupDropdown
+              opened={opened}
               loading={loading}
-              filter={
-                lookupFilter
-                  ? (entry: LookupEntry) =>
-                      lookupFilter(entry, searchText, targetScope)
-                  : undefined
-              }
-              header={listHeader}
-              footer={listFooter}
-              onSelect={onLookupItemSelect}
-              onBlur={onBlur}
+              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}
             />
-          ) : undefined}
+          </div>
         </div>
       </FormElement>
     );
diff --git a/src/scripts/MediaObject.tsx b/src/scripts/MediaObject.tsx
index 25f9234e3..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;
-  figureCenter?: ReactNode;
+  centered?: boolean;
   children?: ReactNode;
 } & HTMLAttributes<HTMLDivElement>;
 
@@ -15,20 +15,15 @@ export type MediaObjectProps = {
  *
  */
 export const MediaObject: FC<MediaObjectProps> = (props) => {
-  const {
-    className,
-    figureLeft,
-    figureRight,
-    figureCenter,
-    children,
-    ...rprops
-  } = props;
-  const mediaClassNames = classnames('slds-media', className);
+  const { className, figureLeft, figureRight, centered, children, ...rprops } =
+    props;
+  const mediaClassNames = classnames(
+    'slds-media',
+    { 'slds-media_center': centered },
+    className
+  );
   return (
     <div className={mediaClassNames} {...rprops}>
-      {figureCenter ? (
-        <div className='slds-media__figure'>{figureCenter}</div>
-      ) : undefined}
       {figureLeft ? (
         <div className='slds-media__figure'>{figureLeft}</div>
       ) : undefined}
diff --git a/src/scripts/Modal.tsx b/src/scripts/Modal.tsx
index 1324a79d2..1588124ba 100644
--- a/src/scripts/Modal.tsx
+++ b/src/scripts/Modal.tsx
@@ -1,23 +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;
-}>({});
-
 /**
  *
  */
@@ -25,43 +11,20 @@ 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}>
-      <h2 className='slds-text-heading_medium'>{title}</h2>
+      <Text tag='h2' category='heading' type='medium' tabIndex={-1}>
+        {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>
   );
 };
@@ -128,6 +91,8 @@ export type ModalProps = {
   opened?: boolean;
   containerStyle?: CSSProperties;
   onHide?: () => void;
+  closeButton?: boolean;
+  onClose?: () => void;
 } & HTMLAttributes<HTMLDivElement>;
 
 /**
@@ -141,6 +106,8 @@ const Modal_: FC<ModalProps> = (props) => {
     size,
     containerStyle,
     onHide,
+    closeButton,
+    onClose: onClose_,
     ...rprops
   } = props;
   const modalClassNames = classnames(className, 'slds-modal', {
@@ -150,21 +117,37 @@ 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}>
-      <div
+    <>
+      <section
         className={modalClassNames}
         aria-hidden={!opened}
         role='dialog'
+        tabIndex={-1}
+        aria-modal='true'
         {...rprops}
       >
         <div className='slds-modal__container' style={containerStyle}>
+          {closeButton ? (
+            <Button
+              type='icon'
+              className='slds-modal__close'
+              icon='close'
+              iconSize='large'
+              alt='Close'
+              inverse
+              onClick={onClose}
+            />
+          ) : null}
           {children}
         </div>
-      </div>
-      <div className={backdropClassNames} />
-    </ModalHandlersContext.Provider>
+      </section>
+      <div className={backdropClassNames} role='presentation' />
+    </>
   );
 };
 
diff --git a/src/scripts/Notification.tsx b/src/scripts/Notification.tsx
index 0908fc580..35cc573e5 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,19 @@ 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'
-      }
+      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 +66,23 @@ 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'
+            size={type === 'toast' ? undefined : 'small'}
+            alt='Close'
+            onClick={onClose}
+          />
+        </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/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/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
index af241172e..09de07b23 100644
--- a/src/scripts/Picklist.tsx
+++ b/src/scripts/Picklist.tsx
@@ -6,23 +6,121 @@ import React, {
   useRef,
   Ref,
   ReactNode,
+  useId,
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
 } 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';
 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 [];
+    }
+
+    // Skip disabled items
+    if ('disabled' in props && props.disabled === true) {
+      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;
+      }
+
+      // 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;
+
+      // 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
+  );
+}
+
 /**
  *
  */
@@ -37,12 +135,26 @@ 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;
+  optionIdPrefix: string;
+}>({
+  values: [],
+  onSelect: () => {
+    // noop
+  },
+  optionIdPrefix: '',
+});
 
 /**
  *
  */
 export type PicklistProps<MultiSelect extends boolean | undefined> = {
+  id?: string;
+  className?: string;
   label?: string;
   required?: boolean;
   multiSelect?: MultiSelect;
@@ -61,6 +173,7 @@ export type PicklistProps<MultiSelect extends boolean | undefined> = {
   tooltip?: ReactNode;
   tooltipIcon?: string;
   elementRef?: Ref<HTMLDivElement>;
+  inputRef?: Ref<HTMLDivElement>;
   dropdownRef?: Ref<HTMLDivElement>;
   onValueChange?: Bivariant<
     (
@@ -72,10 +185,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 +196,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 +215,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       tooltip,
       tooltipIcon,
       elementRef: elementRef_,
-      buttonRef: buttonRef_,
+      inputRef: inputRef_,
       dropdownRef: dropdownRef_,
       onSelect,
       onComplete,
@@ -115,6 +226,12 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       ...rprops
     } = props;
 
+    const fallbackId = useId();
+    const id = id_ ?? fallbackId;
+    const listboxId = `${id}-listbox`;
+
+    const optionIdPrefix = `${useId()}-option`;
+
     const values_: PicklistValue[] | undefined =
       typeof value_ === 'undefined'
         ? undefined
@@ -140,13 +257,88 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       opened_,
       defaultOpened ?? false
     );
+    const [focusedValue, setFocusedValue] = useState<
+      PicklistValue | undefined
+    >();
 
     const { getActiveElement } = useContext(ComponentSettingsContext);
 
+    // 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) => {
+        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
+      },
+      [optionValues]
+    );
+
+    // Get previous option value for keyboard navigation
+    const getPrevValue = useCallback(
+      (currentValue?: PicklistValue) => {
+        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
+      },
+      [optionValues]
+    );
+
+    // 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;
+        }
+
+        targetElement.focus();
+      }
+    );
+
+    // 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] : optionValues[0];
+        setFocusedValue(initialFocus);
+        scrollFocusedElementIntoView(initialFocus);
+      } else if (!opened) {
+        // Reset focus when dropdown closes
+        setFocusedValue(undefined);
+      }
+    }, [
+      opened,
+      values,
+      optionValues,
+      focusedValue,
+      scrollFocusedElementIntoView,
+    ]);
+
     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 inputRef = useMergeRefs([comboboxElRef, inputRef_]);
     const dropdownElRef = useRef<HTMLDivElement | null>(null);
     const dropdownRef = useMergeRefs([dropdownElRef, dropdownRef_]);
 
@@ -180,6 +372,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 +388,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 +409,63 @@ 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 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
@@ -259,40 +473,67 @@ 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);
     });
 
-    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 optionsSelectedText;
+        return `${values.length} ${optionsSelectedText}`;
       }
 
       // 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;
       }
 
       // zero items
       return selectedText;
-    }
+    }, [values, optionsSelectedText, selectedText, children]);
 
-    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 && !disabled,
+        'slds-combobox__input-value': hasValue,
+        'slds-is-disabled': disabled,
+      }
+    );
+    const dropdownClassNames = classnames(
+      'slds-dropdown',
+      'slds-dropdown_length-5',
+      menuSize ? `slds-dropdown_${menuSize}` : 'slds-dropdown_fluid'
+    );
+
     const formElemProps = {
       id,
       label,
@@ -303,43 +544,74 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       tooltipIcon,
       elementRef,
     };
+
+    const contextValue = {
+      values,
+      multiSelect,
+      onSelect: onPicklistItemSelect,
+      focusedValue,
+      optionIdPrefix,
+    };
+
     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={inputRef}
+                role='combobox'
+                tabIndex={disabled ? -1 : 0}
+                className={inputClassNames}
+                aria-controls={listboxId}
+                aria-expanded={opened}
+                aria-haspopup='listbox'
+                aria-disabled={disabled}
+                aria-activedescendant={
+                  focusedValue ? `${optionIdPrefix}-${focusedValue}` : undefined
+                }
+                onClick={onClick}
+                onKeyDown={onKeyDown}
+                onBlur={onBlur}
+                {...rprops}
+              >
+                <span className='slds-truncate'>{selectedItemLabel}</span>
+              </div>
+              <Icon
+                containerClassName='slds-input__icon slds-input__icon_right'
+                category='utility'
+                icon='down'
+                size='x-small'
+                textColor='default'
+              />
+            </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>
         </div>
       </FormElement>
     );
@@ -350,8 +622,16 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
 /**
  *
  */
-export type PicklistItemProps = DropdownMenuItemProps & {
+export type PicklistItemProps = {
+  label?: React.ReactNode;
   value?: string | number;
+  selected?: boolean;
+  disabled?: boolean;
+  icon?: string;
+  iconRight?: string;
+  divider?: 'top' | 'bottom';
+  onClick?: (e: React.SyntheticEvent) => void;
+  children?: React.ReactNode;
 };
 
 /**
@@ -361,21 +641,98 @@ export const PicklistItem: FC<PicklistItemProps> = ({
   label,
   selected: selected_,
   value,
+  disabled,
+  icon,
+  iconRight,
+  divider,
+  onClick: onClick_,
   children,
-  ...props
 }) => {
-  const values = useContext(PicklistValuesContext);
+  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((e: React.SyntheticEvent) => {
+    if (!disabled && value != null) {
+      onSelect(value);
+      onClick_?.(e);
+    }
+  });
+
+  const itemClassNames = classnames(
+    'slds-media',
+    'slds-listbox__option',
+    'slds-listbox__option_plain',
+    'slds-media_small',
+    {
+      'slds-is-selected': selected,
+      'slds-has-focus': isFocused,
+    }
+  );
+
+  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}
+        role='option'
+        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'>
+          {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)}>
+            {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>
+  );
+
   return (
-    <DropdownMenuItem
-      icon={selected ? 'check' : 'none'}
-      role='menuitemradio'
-      selected={selected}
-      eventKey={value}
-      {...props}
-    >
-      {label || children}
-    </DropdownMenuItem>
+    <>
+      {divider === 'top' && (
+        <li className={`slds-has-divider_${divider}-space`} role='separator' />
+      )}
+      {mainListItem}
+      {divider === 'bottom' && (
+        <li className={`slds-has-divider_${divider}-space`} role='separator' />
+      )}
+    </>
   );
 };
diff --git a/src/scripts/Pill.tsx b/src/scripts/Pill.tsx
index 62d902482..2281346f2 100644
--- a/src/scripts/Pill.tsx
+++ b/src/scripts/Pill.tsx
@@ -1,5 +1,4 @@
 import React, {
-  ReactHTML,
   HTMLAttributes,
   MouseEvent,
   KeyboardEvent,
@@ -16,9 +15,9 @@ import { useEventCallback } from './hooks';
  */
 export type PillProps = {
   label?: string;
+  title?: string;
   truncate?: boolean;
   disabled?: boolean;
-  tag?: keyof ReactHTML;
   icon?: {
     category?: IconCategory;
     icon?: string;
@@ -35,7 +34,7 @@ export const Pill: FC<PillProps> = (props) => {
     icon,
     disabled,
     label,
-    tag,
+    title,
     truncate,
     className,
     pillRef,
@@ -57,28 +56,33 @@ 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-pill_link': !disabled },
     { 'slds-truncate': truncate },
     className
   );
   return (
-    <Tag
+    <span
       ref={pillRef}
       className={pillClassNames}
       onKeyDown={onKeyDown}
       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}
-      <span className='slds-pill__label'>{label}</span>
+      {disabled ? (
+        <span className='slds-pill__label' title={title}>
+          {label}
+        </span>
+      ) : (
+        <a className='slds-pill__action' title={title}>
+          <span className='slds-pill__label'>{label}</span>
+        </a>
+      )}
       <Button
         disabled={disabled}
         className='slds-pill__remove'
@@ -88,6 +92,6 @@ export const Pill: FC<PillProps> = (props) => {
         tabIndex={-1}
         onClick={onPillRemove}
       />
-    </Tag>
+    </span>
   );
 };
diff --git a/src/scripts/Popover.tsx b/src/scripts/Popover.tsx
index d5aa83a72..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';
@@ -70,13 +71,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 {
@@ -117,16 +118,20 @@ export const PopoverInner = forwardRef<
           : undefined
         : undefined,
   };
+  const bodyId = useId();
   return (
-    <div
+    <section
       ref={ref}
       className={popoverClassNames}
       role={tooltip ? 'tooltip' : 'dialog'}
       style={rootStyle}
+      aria-describedby={bodyId}
       {...rprops}
     >
-      <PopoverBody style={bodyStyle}>{children}</PopoverBody>
-    </div>
+      <PopoverBody id={bodyId} style={bodyStyle}>
+        {children}
+      </PopoverBody>
+    </section>
   );
 });
 
diff --git a/src/scripts/Radio.tsx b/src/scripts/Radio.tsx
index 2c4686785..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,6 +17,7 @@ export type RadioProps = {
  *
  */
 export const Radio: FC<RadioProps> = ({
+  id: id_,
   className,
   label,
   name,
@@ -26,7 +27,16 @@ export const Radio: FC<RadioProps> = ({
   children,
   ...props
 }) => {
-  const { name: grpName, onValueChange } = useContext(RadioGroupContext);
+  const {
+    name: grpName,
+    error,
+    errorId,
+    onValueChange,
+  } = useContext(RadioGroupContext);
+
+  const prefix = useId();
+  const id = id_ ?? `${prefix}-id`;
+
   const onChange = useEventCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       onChange_?.(e);
@@ -37,7 +47,7 @@ export const Radio: FC<RadioProps> = ({
   );
   const radioClassNames = classnames(className, 'slds-radio');
   return (
-    <label className={radioClassNames}>
+    <span className={radioClassNames}>
       <input
         ref={inputRef}
         type='radio'
@@ -45,9 +55,13 @@ export const Radio: FC<RadioProps> = ({
         value={value}
         onChange={onChange}
         {...props}
+        id={id}
+        aria-describedby={error ? errorId : undefined}
       />
-      <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>
   );
 };
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>
diff --git a/src/scripts/SalesPath.tsx b/src/scripts/SalesPath.tsx
index 10f3c20b3..9f4f235ad 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,32 +54,43 @@ 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
   );
 
-  const tabIndex = type === 'current' ? 0 : -1;
+  const tabIndex = isActive ? 0 : -1;
   const completedText = completedTitle || 'Stage Complete';
 
   return (
     <li className={pathItemClassName} role='presentation'>
       <a
-        className='slds-tabs_path__link'
-        aria-selected='false'
+        className='slds-path__link'
+        aria-selected={isActive}
         tabIndex={tabIndex}
-        role='tab'
-        aria-live='assertive'
+        role='option'
         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}
+          {isCurrent ? (
+            <span className='slds-assistive-text'>Current Stage:</span>
+          ) : null}
         </span>
-        <span className='slds-tabs_path__title'>{title}</span>
+        <span className='slds-path__title'>{title}</span>
       </a>
     </li>
   );
@@ -114,7 +126,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,27 +145,41 @@ 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}>
-            {React.Children.map(children, (child, idx) => {
-              const evaluatedType =
-                idx === activeIdx
-                  ? 'current'
-                  : idx < activeIdx
-                  ? 'complete'
-                  : 'incomplete';
-              return (
-                <SalesPathTypeContext.Provider value={evaluatedType}>
-                  {child}
-                </SalesPathTypeContext.Provider>
-              );
-            })}
-          </SalesPathHandlersContext.Provider>
-        </ul>
+      <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='listbox'
+                  aria-orientation='horizontal'
+                >
+                  <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>
     );
   },
diff --git a/src/scripts/Select.tsx b/src/scripts/Select.tsx
index df04c0d52..9f2f3b802 100644
--- a/src/scripts/Select.tsx
+++ b/src/scripts/Select.tsx
@@ -69,9 +69,14 @@ 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 = {
-        id,
+        controlId: id,
         label,
         required,
         error,
@@ -80,9 +85,11 @@ export const Select = createFC<SelectProps, { isFormElement: boolean }>(
         tooltipIcon,
         elementRef,
       };
-      return <FormElement {...formElemProps}>{selectElem}</FormElement>;
+      return (
+        <FormElement {...formElemProps}>{selectElemWithContainer}</FormElement>
+      );
     }
-    return selectElem;
+    return selectElemWithContainer;
   },
   { isFormElement: true }
 );
diff --git a/src/scripts/Spinner.tsx b/src/scripts/Spinner.tsx
index 7953ee1ae..421475e65 100644
--- a/src/scripts/Spinner.tsx
+++ b/src/scripts/Spinner.tsx
@@ -4,12 +4,14 @@ 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 SpinnerLayout = 'inline';
 export type SpinnerProps = {
   container?: boolean;
   size?: SpinnerSize;
   type?: SpinnerType;
+  layout?: SpinnerLayout;
 } & HTMLAttributes<HTMLDivElement>;
 
 /**
@@ -21,21 +23,19 @@ 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}
-      aria-hidden='false'
-      role='alert'
-      {...rprops}
-    >
+    <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>
diff --git a/src/scripts/Table.tsx b/src/scripts/Table.tsx
index 913988d25..746a242eb 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
     ? {
@@ -130,7 +130,7 @@ export type TableHeaderColumnProps = {
   sorted?: boolean;
   align?: 'left' | 'center' | 'right';
   onSort?: () => void;
-} & ThHTMLAttributes<HTMLTableHeaderCellElement>;
+} & ThHTMLAttributes<HTMLTableCellElement>;
 
 /**
  *
@@ -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,8 +164,15 @@ 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}>
+    <th {...pprops} className={oClassNames} style={style}>
       {sortable ? (
         <a
           onClick={(e) => {
@@ -178,24 +184,17 @@ 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}
-            style={{ position: 'absolute' }}
-          />
-          <span
-            className='slds-assistive-text'
-            aria-live='assertive'
-            aria-atomic='true'
           />
         </a>
       ) : (
-        children
+        cellContent
       )}
     </th>
   );
@@ -207,23 +206,35 @@ export const TableHeaderColumn: FC<TableHeaderColumnProps> = (props) => {
 export type TableRowColumnProps = {
   width?: string | number;
   truncate?: boolean;
-} & TdHTMLAttributes<HTMLTableDataCellElement>;
+} & TdHTMLAttributes<HTMLTableCellElement>;
 
 /**
  *
  */
 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';
 
-  return (
-    <td role='gridcell' style={style} className={oClassNames} {...pprops}>
+  const content = typeof children === 'string' ? children : undefined;
+  const cellContent = truncate ? (
+    <div className='slds-truncate' title={content}>
       {children}
+    </div>
+  ) : (
+    children
+  );
+
+  return (
+    <td style={style} className={oClassNames} {...pprops}>
+      {cellContent}
     </td>
   );
 };
@@ -274,17 +285,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) {
diff --git a/src/scripts/Tabs.tsx b/src/scripts/Tabs.tsx
index b948d2a56..5af46b578 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,8 +46,19 @@ const TabsActiveKeyContext = createContext<TabKey | undefined>(undefined);
 const TabsContext = createContext<{
   type: TabType;
   activeTabRef?: Ref<HTMLAnchorElement>;
+  tabIdPrefix?: string;
 }>({ type: 'default' });
 
+/**
+ * Custom hook to generate unique tab IDs
+ */
+const useTabIds = (eventKey?: TabKey) => {
+  const { tabIdPrefix } = useContext(TabsContext);
+  const tabIndex = eventKey ? String(eventKey) : '0';
+  const tabId = `${tabIdPrefix}-${tabIndex}`;
+  return { tabId };
+};
+
 /**
  *
  */
@@ -59,9 +71,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 (
@@ -143,6 +156,7 @@ const TabItem = <RendererProps extends TabItemRendererProps>(
   const { type, activeTabRef } = useContext(TabsContext);
   const activeKey = useContext(TabsActiveKeyContext);
   const { onTabClick, onTabKeyDown } = useContext(TabsHandlersContext);
+  const { tabId } = useTabIds(eventKey);
   let { menuItems } = props;
   menuItems = menu
     ? React.Children.toArray(
@@ -152,9 +166,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`;
@@ -173,7 +187,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 ${
@@ -186,6 +200,7 @@ const TabItem = <RendererProps extends TabItemRendererProps>(
             ref={isActive ? activeTabRef : undefined}
             tabIndex={isActive ? 0 : -1}
             aria-selected={isActive}
+            aria-controls={tabId}
             onClick={
               eventKey != null ? () => onTabClick?.(eventKey) : undefined
             }
@@ -244,8 +259,10 @@ export const Tab = <
 ) => {
   const { className, eventKey, children } = props;
   const activeKey = useContext(TabsActiveKeyContext);
+  const { tabId } = useTabIds(eventKey);
   return (
     <TabContent
+      id={tabId}
       className={className}
       active={eventKey != null && eventKey === activeKey}
     >
@@ -273,24 +290,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 +315,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 }',
       ],
     ]);
@@ -369,7 +386,13 @@ export const Tabs: FC<TabsProps> = (props) => {
     }
   }, [focusTab]);
 
-  const tabCtx = useMemo(() => ({ type, activeTabRef }), [type]);
+  const tabIdPrefix = useId();
+  const tabItemIdPrefix = useId();
+  const tabCtx = useMemo(
+    () => ({ type, activeTabRef, tabIdPrefix, tabItemIdPrefix }),
+    [type, tabIdPrefix, tabItemIdPrefix]
+  );
+
   const handlers = useMemo(
     () => ({ onTabClick, onTabKeyDown }),
     [onTabClick, onTabKeyDown]
diff --git a/src/scripts/Text.tsx b/src/scripts/Text.tsx
index 01231c6ee..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;
@@ -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,
diff --git a/src/scripts/Textarea.tsx b/src/scripts/Textarea.tsx
index 4222a34a5..9d2694789 100644
--- a/src/scripts/Textarea.tsx
+++ b/src/scripts/Textarea.tsx
@@ -1,4 +1,5 @@
 import React, {
+  useId,
   ChangeEvent,
   ReactNode,
   Ref,
@@ -7,6 +8,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';
@@ -25,6 +27,8 @@ export type TextareaProps = {
   elementRef?: Ref<HTMLDivElement>;
   textareaRef?: Ref<HTMLTextAreaElement>;
   onValueChange?: (value: string, prevValue?: string) => void;
+  readOnly?: boolean;
+  htmlReadOnly?: boolean;
 } & TextareaHTMLAttributes<HTMLTextAreaElement>;
 
 /**
@@ -45,6 +49,8 @@ export const Textarea = createFC<TextareaProps, { isFormElement: boolean }>(
       textareaRef,
       onChange: onChange_,
       onValueChange,
+      readOnly,
+      htmlReadOnly,
       ...rprops
     } = props;
     const prevValueRef = useRef<string>();
@@ -54,26 +60,40 @@ export const Textarea = createFC<TextareaProps, { isFormElement: boolean }>(
       prevValueRef.current = e.target.value;
     });
     const { isFieldSetColumn } = useContext(FieldSetColumnContext);
-    const taClassNames = classnames(className, 'slds-input');
-    const textareaElem = (
+    const errorId = useId();
+    const taClassNames = classnames(className, 'slds-textarea');
+    const textareaElem = readOnly ? (
+      <Text
+        id={id}
+        type='regular'
+        category='body'
+        className='slds-form-element__static'
+      >
+        {rprops.value}
+      </Text>
+    ) : (
       <textarea
         id={id}
         ref={textareaRef}
         className={taClassNames}
+        readOnly={htmlReadOnly}
         {...rprops}
         onChange={onChange}
+        aria-describedby={error ? errorId : undefined}
       />
     );
     if (isFieldSetColumn || label || required || error || cols) {
       const formElemProps = {
-        id,
+        controlId: id,
         label,
         required,
         error,
+        errorId,
         cols,
         tooltip,
         tooltipIcon,
         elementRef,
+        readOnly,
       };
       return <FormElement {...formElemProps}>{textareaElem}</FormElement>;
     }
diff --git a/src/scripts/Toggle.tsx b/src/scripts/Toggle.tsx
index 418d0e006..a6663b2df 100644
--- a/src/scripts/Toggle.tsx
+++ b/src/scripts/Toggle.tsx
@@ -49,20 +49,25 @@ export const Toggle = createFC<ToggleProps, { isFormElement: boolean }>(
         <input
           ref={inputRef}
           id={id}
-          name='checkbox'
           type='checkbox'
-          aria-describedby='toggle-desc'
           {...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>
         </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 }
diff --git a/src/scripts/Tree.tsx b/src/scripts/Tree.tsx
index 8545cde66..ed1c413f0 100644
--- a/src/scripts/Tree.tsx
+++ b/src/scripts/Tree.tsx
@@ -37,7 +37,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,
@@ -48,8 +48,8 @@ export const Tree: FC<TreeProps> = (props) => {
     [toggleOnNodeClick, onNodeClick, onNodeLabelClick, onNodeToggle]
   );
   return (
-    <div className={treeClassNames} role='application' {...rprops}>
-      {label ? <h4 className='slds-text-heading_label'>{label}</h4> : null}
+    <div className={treeClassNames} {...rprops}>
+      {label ? <h4 className='slds-tree__group-header'>{label}</h4> : null}
       <ul className='slds-tree' role='tree'>
         <TreeContext.Provider value={ctx}>{children}</TreeContext.Provider>
       </ul>
diff --git a/src/scripts/TreeNode.tsx b/src/scripts/TreeNode.tsx
index 4002534e5..30f6d272a 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;
@@ -83,7 +84,7 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
       )}
       {!leaf ? (
         <Button
-          className='slds-m-right_small'
+          className='slds-m-right_x-small'
           aria-controls=''
           type='icon-bare'
           icon={icon}
@@ -93,14 +94,15 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
           style={loading ? { opacity: 0, pointerEvents: 'none' } : undefined}
         />
       ) : null}
-      <a
-        className='slds-truncate'
-        tabIndex={-1}
-        role='presentation'
-        onClick={onLabelClick}
-      >
-        {ItemRender ? <ItemRender {...props} /> : label}
-      </a>
+      <span className='slds-has-flexi-truncate'>
+        <a
+          className='slds-tree__item-label slds-truncate'
+          onClick={onLabelClick}
+          title={typeof label === 'string' ? label : undefined}
+        >
+          {ItemRender ? <ItemRender {...props} /> : label}
+        </a>
+      </span>
       {leaf ? children : null}
     </div>
   );
@@ -114,6 +116,8 @@ export const TreeNode: FC<TreeNodeProps> = (props) => {
     defaultOpened,
     opened: opened_,
     leaf,
+    selected,
+    disabled,
     children,
     onClick: onClick_,
     onToggle: onToggle_,
@@ -153,15 +157,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'>
diff --git a/stories/Badge.stories.tsx b/stories/Badge.stories.tsx
index 6a4601c1e..06a94ca90 100644
--- a/stories/Badge.stories.tsx
+++ b/stories/Badge.stories.tsx
@@ -30,14 +30,14 @@ export const Default: ComponentStoryObj<typeof Badge> = {
 /**
  *
  */
-export const Shade: ComponentStoryObj<typeof Badge> = {
+export const Inverse: ComponentStoryObj<typeof Badge> = {
   args: {
-    type: 'shade',
+    type: 'inverse',
     children: 'Badge Label',
   },
   parameters: {
     docs: {
-      storyDescription: 'Badge with type: shade',
+      storyDescription: 'Badge with type: inverse',
     },
   },
 };
@@ -45,14 +45,59 @@ export const Shade: ComponentStoryObj<typeof Badge> = {
 /**
  *
  */
-export const Inverse: ComponentStoryObj<typeof Badge> = {
+export const Lightest: ComponentStoryObj<typeof Badge> = {
   args: {
-    type: 'inverse',
+    type: 'lightest',
     children: 'Badge Label',
   },
   parameters: {
     docs: {
-      storyDescription: 'Badge with type: inverse',
+      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',
     },
   },
 };
diff --git a/stories/Icon.stories.tsx b/stories/Icon.stories.tsx
index 86d5a23e6..81ea0f09c 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'];
@@ -63,17 +64,43 @@ 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',
+    },
+  },
+};
+
 /**
  *
  */
 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 +111,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 +120,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)',
     },
   },
 };
diff --git a/stories/Lookup.stories.tsx b/stories/Lookup.stories.tsx
index 4b40ad69f..11baf069e 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';
@@ -374,14 +374,28 @@ 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 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 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 +468,28 @@ 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 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 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: {
diff --git a/stories/MediaObject.stories.tsx b/stories/MediaObject.stories.tsx
index ceccc7e34..181008892 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,
+    centered: 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,
+    centered: 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,
+    centered: true,
+    children: mediaContent,
+  },
+  parameters: {
+    info: 'Vertically centered Media Object with figure in left and right',
+  },
+};
diff --git a/stories/Modal.stories.tsx b/stories/Modal.stories.tsx
index 50d080d4d..a60d7f41c 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: {
@@ -141,12 +142,13 @@ 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',
         children: modalContent,
       },
       footer: {
@@ -169,13 +171,14 @@ 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',
         children: modalContent,
       },
       footer: {
@@ -198,13 +201,14 @@ 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',
         children: modalContent,
       },
       footer: {
@@ -227,12 +231,13 @@ 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',
         children: modalContent,
       },
       footer: {
@@ -256,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',
@@ -288,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}
                     />
                   ))}
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.
diff --git a/stories/PageHeader.stories.tsx b/stories/PageHeader.stories.tsx
index addaa3520..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,62 +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>
-            <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'>
-              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>
@@ -137,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>,
         ]}
       />
@@ -212,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'>
@@ -244,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>
diff --git a/stories/Pill.stories.tsx b/stories/Pill.stories.tsx
index be55f1d9c..185d9b6be 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',
+    title: 'Full Label of the Pill',
   },
   parameters: {
     info: 'Pill controlled with knobs',
diff --git a/stories/Popover.stories.tsx b/stories/Popover.stories.tsx
index 3b9596ca0..ce8e07b4a 100644
--- a/stories/Popover.stories.tsx
+++ b/stories/Popover.stories.tsx
@@ -20,7 +20,7 @@ const paddingDecorator: DecoratorFn = (story) => (
       padding: '100px 350px',
     }}
   >
-    <div className='slds-dropdown-trigger'>
+    <div className='slds-dropdown-trigger slds-dropdown-trigger_click'>
       <Button type='icon' icon='question' />
       {story()}
     </div>
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)',
       },
     },
   },
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)',
+      },
+    },
+  },
+};
+
 /**
  *
  */