theme 2845 record-list fixes

src/components/form/dt-connection/dt-connection.js

@@ -108,6 +108,7 @@ export class DtConnection extends DtTags {
         clickedValue = intVal;
       }
       const event = new CustomEvent('change', {
+        bubbles: true,
         detail: {
           field: this.name,
           oldValue: this.value,

src/components/form/dt-location-map/dt-location-map.js

@@ -148,6 +148,7 @@ export class DtLocationMap extends DtFormBase {
 
   selectLocation(evt) {
     const event = new CustomEvent('change', {
+      bubbles: true,
       detail: {
         field: this.name,
         oldValue: this.value,
@@ -184,6 +185,7 @@ export class DtLocationMap extends DtFormBase {
   deleteItem(evt) {
     this.activeItem = undefined;
     const event = new CustomEvent('change', {
+      bubbles: true,
       detail: {
         field: this.name,
         oldValue: this.value,

src/components/form/dt-location/dt-location.js

@@ -84,6 +84,7 @@ export class DtLocation extends DtTags {
   _remove(e) {
     if (e.target && e.target.dataset && e.target.dataset.value) {
       const event = new CustomEvent('change', {
+        bubbles: true,
         detail: {
           field: this.name,
           oldValue: this.value,

src/components/form/dt-multi-text/dt-multi-text.js

@@ -274,6 +274,7 @@ export class DtMultiText extends DtText {
     const key = e?.currentTarget?.dataset?.key;
     if (key) {
       const event = new CustomEvent('change', {
+        bubbles: true,
         detail: {
           field: this.name,
           oldValue: this.value,

src/components/form/dt-textarea/docs.mdx

@@ -44,6 +44,11 @@ Inherits custom properties from [DtFormBase](?path=/docs/architecture-base-class
 | `--dt-textarea-border-color`  | `var(--dt-form-border-color, #cecece)`   |
 | `--dt-textarea-border-radius`  | `var(--dt-form-border-radius, 0)`  |
 | `--dt-textarea-input-box-shadow`  | `var(--dt-form-input-box-shadow, inset 0 1px 2px hsl(0deg 0% 4% / 10%))`   |
+| `--dt-textarea-placeholder-color`  | `var(--dt-form-placeholder-color, #999)`   |
+| `--dt-textarea-placeholder-transform`  | `none`   |
+| `--dt-textarea-placeholder-font-size`  | `1rem`   |
+| `--dt-textarea-placeholder-font-weight`  | `400`   |
+| `--dt-textarea-placeholder-letter-spacing`  | `normal`   |
 | `--dt-textarea-disabled-background-color`   | `var(--dt-form-disabled-background-color, #e6e6e6)`   |
 | `--dt-textarea-border-color-alert` | `var(--dt-form-border-color-alert, var(--alert-color))` |
 | `--dt-form-padding`   | `0.5333333333rem`   |

src/components/form/dt-textarea/dt-textarea.js

@@ -55,8 +55,18 @@ export class DtTextArea extends DtFormBase {
           resize: none;
           width: 100%;
         }
-        input:disabled,
-        input[readonly],
+        textarea:disabled,
+        textarea::placeholder {
+          color: var(
+            --dt-textarea-placeholder-color,
+            var(--dt-form-placeholder-color, #999)
+          );
+          text-transform: var(--dt-textarea-placeholder-transform, none);
+          font-size: var(--dt-textarea-placeholder-font-size, 1rem);
+          font-weight: var(--dt-textarea-placeholder-font-weight, 400);
+          letter-spacing: var(--dt-textarea-placeholder-letter-spacing, normal);
+        }
+        textarea[readonly],
         textarea:disabled,
         textarea[readonly] {
           background-color: var(
@@ -81,6 +91,8 @@ export class DtTextArea extends DtFormBase {
       ...super.properties,
       /** Element ID */
       id: { type: String },
+      /** Placeholder displayed when no value is entered */
+      placeholder: { type: String },
       /** Value of field. Reflected back to attribute in order to select from DOM if needed. */
       value: {
         type: String,
@@ -150,6 +162,7 @@ export class DtTextArea extends DtFormBase {
         <textarea
           id="${this.id}"
           name="${this.name}"
+          placeholder="${this.placeholder}"
           aria-label="${this.label}"
           ?disabled=${this.disabled}
           ?required=${this.required}

src/components/form/dt-textarea/dt-textarea.stories.js

@@ -15,6 +15,7 @@ export default {
   argTypes: {
     id: { control: 'text' },
     name: { control: 'text' },
+    placeholder: { control: 'text' },
     label: { control: 'text' },
     value: { control: 'text' },
     disabled: { control: 'boolean' },
@@ -41,6 +42,7 @@ export default {
       id = 'name',
       name = 'field-name',
       label = 'Field Name',
+      placeholder = 'Enter text here...',
       value,
       disabled = false,
       readonly = false,
@@ -60,6 +62,7 @@ export default {
         id=${ifDefined(id)}
         name=${ifDefined(name)}
         label=${ifDefined(label)}
+        placeholder=${ifDefined(placeholder)}
         value=${ifDefined(value)}
         ?disabled=${disabled}
         ?readonly=${readonly}
@@ -80,7 +83,11 @@ export default {
   },
 };
 
-export const Empty = {};
+export const Empty = {
+  args: {
+    placeholder: 'Enter text here...',
+  }
+};
 
 export const SvgIcon = {
   args: {

src/components/form/dt-users-connection/dt-users-connection.js

@@ -151,6 +151,7 @@ export class DtUsersConnection extends DtTags {
   _remove(e) {
     if (e.target && e.target.dataset && e.target.dataset.value) {
       const event = new CustomEvent('change', {
+        bubbles: true,
         detail: {
           field: this.name,
           oldValue: this.value,