fix(renderers): normalize DateTimeInput placeholder color

renderers/angular/src/v0_8/components/datetime-input.ts

@@ -41,6 +41,11 @@ import { Types } from '../types';
     :host {
       display: block;
     }
+    input,
+    input::-webkit-datetime-edit,
+    input::-webkit-datetime-edit-fields-wrapper {
+      color: #333;
+    }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

renderers/angular/src/v0_9/catalog/basic/date-time-input.component.ts

@@ -79,6 +79,11 @@ import { BoundProperty } from '../../core/types';
         font-family: inherit;
         flex: 1;
       }
+      .a2ui-date-time-input,
+      .a2ui-date-time-input::-webkit-datetime-edit,
+      .a2ui-date-time-input::-webkit-datetime-edit-fields-wrapper {
+        color: #333;
+      }
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,

renderers/lit/src/0.8/ui/datetime-input.ts

@@ -58,6 +58,12 @@ export class DateTimeInput extends Root {
         border: 1px solid #ccc;
         width: 100%;
       }
+
+      input,
+      input::-webkit-datetime-edit,
+      input::-webkit-datetime-edit-fields-wrapper {
+        color: #333;
+      }
     `,
   ];
 

renderers/lit/src/v0_9/catalogs/basic/components/DateTimeInput.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { html, nothing } from "lit";
+import { css, html, nothing } from "lit";
 import { customElement } from "lit/decorators.js";
 import { DateTimeInputApi } from "@a2ui/web_core/v0_9/basic_catalog";
 import { A2uiLitElement, A2uiController } from "@a2ui/lit/v0_9";
@@ -27,6 +27,14 @@ export class A2uiDateTimeInputElement extends A2uiLitElement<
     return new A2uiController(this, DateTimeInputApi);
   }
 
+  static styles = css`
+    input,
+    input::-webkit-datetime-edit,
+    input::-webkit-datetime-edit-fields-wrapper {
+      color: #333;
+    }
+  `;
+
   render() {
     const props = this.controller.props;
     if (!props) return nothing;

renderers/react/src/v0_8/styles/index.ts

@@ -293,6 +293,11 @@ export const componentSpecificStyles: string = `
   border: 1px solid #ccc;
   width: 100%;
 }
+:where(.a2ui-surface .a2ui-datetime-input) input,
+:where(.a2ui-surface .a2ui-datetime-input) input::-webkit-datetime-edit,
+:where(.a2ui-surface .a2ui-datetime-input) input::-webkit-datetime-edit-fields-wrapper {
+  color: #333;
+}
 
 .a2ui-surface *,
 .a2ui-surface *::before,

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

@@ -37,8 +37,13 @@ export const DateTimeInput = createReactComponent(DateTimeInputApi, ({props}) =>
     border: STANDARD_BORDER,
     borderRadius: STANDARD_RADIUS,
     boxSizing: 'border-box',
+    color: '#333',
   };
 
+  // CSS class scoped to this instance for pseudo-element rules that
+  // cannot be expressed as React inline styles (WebKit date/time inputs).
+  const scopeClass = `a2ui-dti-${uniqueId.replace(/:/g, '')}`;
+
   return (
     <div
       style={{
@@ -49,13 +54,21 @@ export const DateTimeInput = createReactComponent(DateTimeInputApi, ({props}) =>
         margin: LEAF_MARGIN,
       }}
     >
+      <style>{`
+        .${scopeClass},
+        .${scopeClass}::-webkit-datetime-edit,
+        .${scopeClass}::-webkit-datetime-edit-fields-wrapper {
+          color: #333;
+        }
+      `}</style>
       {props.label && (
         <label htmlFor={uniqueId} style={{fontSize: '14px', fontWeight: 'bold'}}>
           {props.label}
         </label>
       )}
       <input
         id={uniqueId}
+        className={scopeClass}
         type={type}
         style={style}
         value={props.value || ''}