From de0805e0329606136d65a6d86207821024d5f530 Mon Sep 17 00:00:00 2001
From: Brady Lamansky <brady.l@global-gtt.com>
Date: Thu, 30 Apr 2026 11:04:17 -0400
Subject: [PATCH 1/3] moved multi-text icon to match multi text groups

---
 .../form/dt-multi-text/dt-multi-text.js       | 68 ++++++++++++-------
 1 file changed, 43 insertions(+), 25 deletions(-)

diff --git a/src/components/form/dt-multi-text/dt-multi-text.js b/src/components/form/dt-multi-text/dt-multi-text.js
index 7d396c9..5f83a95 100644
--- a/src/components/form/dt-multi-text/dt-multi-text.js
+++ b/src/components/form/dt-multi-text/dt-multi-text.js
@@ -160,24 +160,14 @@ export class DtMultiText extends DtText {
             color: var(--dt-multi-text-remove-button-hover-color, #ffffff);
           }
         }
-        .input-addon.btn-add {
-          color: var(
-            --dt-multi-text-add-button-color,
-            var(--success-color, #cc4b37)
-          );
-          &:disabled {
-            color: var(
-              --dt-multi-text-disabled-color,
-              var(--dt-form-placeholder-color, #999)
-            );
-          }
-          &:hover:not([disabled]) {
-            background-color: var(
-              --dt-multi-text-add-button-hover-background-color,
-              var(--success-color, #cc4b37)
-            );
-            color: var(--dt-multi-text-add-button-hover-color, #ffffff);
-          }
+        .icon-btn {
+          background-color: transparent;
+          border: none;
+          cursor: pointer;
+          height: 1.25em;
+          padding: 0;
+          color: var(--success-color, #cc4b37);
+          transform: scale(1.5);
         }
 
         .icon-overlay {
@@ -300,6 +290,7 @@ export class DtMultiText extends DtText {
       <div class="field-container">
         <input
           data-key="${item.key ?? item.tempKey}"
+          tabindex="1"
           name="${this.name}"
           aria-label="${this.label}"
           type="${this.type || 'text'}"
@@ -326,13 +317,6 @@ export class DtMultiText extends DtText {
           `,
           () => html``,
         )}
-        <button
-          class="input-addon btn-add"
-          @click=${this._addItem}
-          ?disabled=${this.disabled}
-        >
-          <dt-icon icon="mdi:plus-thick"></dt-icon>
-        </button>
       </div>
     `;
   }
@@ -428,6 +412,40 @@ export class DtMultiText extends DtText {
     return classes;
   }
 
+    labelTemplate() {
+    if (!this.label) {
+      return '';
+    }
+
+    return html`
+      <dt-label
+        ?private=${this.private}
+        privateLabel="${this.privateLabel}"
+        iconAltText="${this.iconAltText}"
+        icon="${this.icon}"
+        exportparts="label: label-container"
+      >
+        ${!this.icon
+          ? html`<slot name="icon-start" slot="icon-start"></slot>`
+          : null}
+        ${this.label}
+        <slot name="icon-end" slot="icon-end">
+          <button
+            @click="${this._addItem}"
+            @keydown="${this._inputKeyDown}"
+            @blur="${this._handleButtonBlur}"
+            class="icon-btn"
+            id="add-item"
+            type="button"
+            tabindex="1"
+          >
+            <dt-icon icon="mdi:plus-thick"></dt-icon>
+          </button>
+        </slot>
+      </dt-label>
+    `;
+  }
+
   render() {
     return html`
       ${this.labelTemplate()}

From 85aac943a2303062ca4610c25edd2a7c4550cb17 Mon Sep 17 00:00:00 2001
From: Brady Lamansky <brady.l@global-gtt.com>
Date: Thu, 30 Apr 2026 11:28:27 -0400
Subject: [PATCH 2/3] fixed tests

---
 src/components/form/dt-multi-text/dt-multi-text.js      | 4 ++--
 src/components/form/dt-multi-text/dt-multi-text.test.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/form/dt-multi-text/dt-multi-text.js b/src/components/form/dt-multi-text/dt-multi-text.js
index 5f83a95..d048e38 100644
--- a/src/components/form/dt-multi-text/dt-multi-text.js
+++ b/src/components/form/dt-multi-text/dt-multi-text.js
@@ -160,7 +160,7 @@ export class DtMultiText extends DtText {
             color: var(--dt-multi-text-remove-button-hover-color, #ffffff);
           }
         }
-        .icon-btn {
+        .btn-add {
           background-color: transparent;
           border: none;
           cursor: pointer;
@@ -434,7 +434,7 @@ export class DtMultiText extends DtText {
             @click="${this._addItem}"
             @keydown="${this._inputKeyDown}"
             @blur="${this._handleButtonBlur}"
-            class="icon-btn"
+            class="btn-add"
             id="add-item"
             type="button"
             tabindex="1"
diff --git a/src/components/form/dt-multi-text/dt-multi-text.test.js b/src/components/form/dt-multi-text/dt-multi-text.test.js
index 26e367f..92728f5 100644
--- a/src/components/form/dt-multi-text/dt-multi-text.test.js
+++ b/src/components/form/dt-multi-text/dt-multi-text.test.js
@@ -72,7 +72,7 @@ describe('DtMultiText', () => {
   });
 
   it('adds a new item on add button click', async () => {
-    const el = await fixture(html`<dt-multi-text></dt-multi-text>`);
+    const el = await fixture(html`<dt-multi-text label="Default List"></dt-multi-text>`);
 
     expect(el.shadowRoot.querySelectorAll('input')).to.have.length(1);
 

From f132f758a6158952068633cad345a65ec65e7c39 Mon Sep 17 00:00:00 2001
From: Brady Lamansky <brady.l@global-gtt.com>
Date: Fri, 1 May 2026 09:07:54 -0400
Subject: [PATCH 3/3] fixed delete button tabbing

---
 src/components/form/dt-multi-text/dt-multi-text.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/form/dt-multi-text/dt-multi-text.js b/src/components/form/dt-multi-text/dt-multi-text.js
index d048e38..ff82885 100644
--- a/src/components/form/dt-multi-text/dt-multi-text.js
+++ b/src/components/form/dt-multi-text/dt-multi-text.js
@@ -308,6 +308,7 @@ export class DtMultiText extends DtText {
           () => html`
             <button
               class="input-addon btn-remove"
+              tabindex="1"
               @click=${this._removeItem}
               data-key="${item.key ?? item.tempKey}"
               ?disabled=${this.disabled}