fix(react): Small adjustments to some components.

renderers/react/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 - (v0_9) Tighten resolved child list types in the basic catalog layout components.
 - (v0_9) Render known Text variants (h1–h5, caption) with declarative HTML instead of Markdown. [#1516](https://github.com/google/A2UI/issues/1516)
+- (v0_9) Add missing CSS classes to `Modal`, `Tabs`, `Card` and `ChoicePicker` to align with the
+  Angular and Lit implementations and integration tests.
+- (v0_9) Fix `DateTimeInput` to correctly render `datetime-local`, `date` and `time` input types.
 
 ## 0.10.0
 

renderers/react/src/v0_9/catalog/basic/components/Card.tsx

@@ -35,5 +35,9 @@ export const Card = createComponentImplementation(CardApi, ({props, buildChild})
     margin: 'var(--a2ui-card-margin, var(--a2ui-spacing-m))',
   };
 
-  return <div style={style}>{props.child ? buildChild(props.child) : null}</div>;
+  return (
+    <div className="a2ui-card" style={style}>
+      {props.child ? buildChild(props.child) : null}
+    </div>
+  );
 });

renderers/react/src/v0_9/catalog/basic/components/ChoicePicker.tsx

@@ -72,7 +72,7 @@ export const ChoicePicker = createComponentImplementation(ChoicePickerApi, ({pro
               <button
                 key={i}
                 onClick={() => onToggle(opt.value)}
-                className={`${styles.chip} ${isSelected ? styles.selected : ''}`}
+                className={`${styles.chip} chip ${isSelected ? `${styles.selected} selected` : ''}`}
                 aria-pressed={isSelected}
               >
                 {opt.label}

renderers/react/src/v0_9/catalog/basic/components/DateTimeInput.tsx

@@ -19,6 +19,26 @@ import {createComponentImplementation} from '../../../adapter';
 import {DateTimeInputApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {useBasicCatalogStyles} from '../utils';
 
+function normalizeDateTimeValue(value: string | null | undefined, type: string): string {
+  if (!value) return '';
+
+  const hasT = value.includes('T');
+  const split = value.split('T');
+
+  const datePart = (hasT ? split[0] : value)?.substring(0, 10) ?? '';
+  const timePart = (hasT ? split[1] : value)?.substring(0, 5) ?? '';
+
+  switch (type) {
+    case 'date':
+      return datePart;
+    case 'time':
+      return timePart;
+    case 'datetime-local':
+      return `${datePart}T${timePart}`;
+  }
+  return '';
+}
+
 export const DateTimeInput = createComponentImplementation(DateTimeInputApi, ({props}) => {
   useBasicCatalogStyles();
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -27,11 +47,16 @@ export const DateTimeInput = createComponentImplementation(DateTimeInputApi, ({p
 
   const uniqueId = React.useId();
 
+  // If neither date or time are enabled, render nothing.
+  if (!(props.enableDate || props.enableTime)) return null;
+
   // Map enableDate/enableTime to input type
   let type = 'datetime-local';
   if (props.enableDate && !props.enableTime) type = 'date';
   if (!props.enableDate && props.enableTime) type = 'time';
 
+  const normalizedValue = normalizeDateTimeValue(props.value, type);
+
   const style: React.CSSProperties = {
     backgroundColor: 'var(--a2ui-datetimeinput-background, var(--a2ui-color-input, #fff))',
     color: 'var(--a2ui-datetimeinput-color, var(--a2ui-color-on-input, #333))',
@@ -66,7 +91,7 @@ export const DateTimeInput = createComponentImplementation(DateTimeInputApi, ({p
         id={uniqueId}
         type={type}
         style={style}
-        value={props.value || ''}
+        value={normalizedValue}
         onChange={onChange}
         min={typeof props.min === 'string' ? props.min : undefined}
         max={typeof props.max === 'string' ? props.max : undefined}

renderers/react/src/v0_9/catalog/basic/components/Modal.tsx

@@ -25,11 +25,16 @@ export const Modal = createComponentImplementation(ModalApi, ({props, buildChild
 
   return (
     <>
-      <div onClick={() => setIsOpen(true)} style={{display: 'inline-block'}}>
+      <div
+        className="a2ui-modal-trigger"
+        onClick={() => setIsOpen(true)}
+        style={{display: 'inline-block'}}
+      >
         {props.trigger ? buildChild(props.trigger) : null}
       </div>
       {isOpen && (
         <div
+          className="a2ui-modal-overlay"
           style={{
             position: 'fixed',
             top: 0,
@@ -60,6 +65,7 @@ export const Modal = createComponentImplementation(ModalApi, ({props, buildChild
           >
             <div style={{display: 'flex', justifyContent: 'flex-end'}}>
               <button
+                className="a2ui-modal-close"
                 onClick={() => setIsOpen(false)}
                 style={{
                   border: 'none',

renderers/react/src/v0_9/catalog/basic/components/Tabs.tsx

@@ -68,6 +68,7 @@ export const Tabs = createComponentImplementation(TabsApi, ({props, buildChild})
         {tabs.map((tab: _Tab, i: number) => (
           <button
             key={i}
+            className={`a2ui-tabs-header a2ui-tab-button ${selectedIndex === i ? 'active' : ''}`}
             onClick={() => setSelectedIndex(i)}
             style={{
               ...tabsHeaderBase,