@dialpad/dialtone-css 8.81.0-next.14 → 8.81.0-next.15

package/lib/build/js/dialtone_migrate/index.mjs

@@ -56,11 +56,29 @@ const __dirname = path.dirname(__filename);
  * @property {string} [scriptDir]  - Directory name for standalone scripts
  * @property {boolean} [supportsPackageArg] - Forward --package to this standalone script
  * @property {string[]} [extraArgs] - Extra CLI args to forward
- * @property {RegExp[]} detectPatterns - Patterns that indicate migration is still needed
+ * @property {RegExp[]} detectPatterns - Patterns that unambiguously indicate migration is
+ *   still needed. Always evaluated, regardless of skipIfPatterns.
+ * @property {RegExp[]} [ambiguousDetectPatterns] - Patterns that overlap with valid
+ *   post-migration values. Only evaluated when skipIfPatterns does not match, so a file
+ *   already containing a new-scale-only marker isn't flagged on these alone — but an
+ *   unambiguous detectPatterns match elsewhere in the same (partially migrated) file
+ *   still counts.
+ * @property {RegExp[]} [skipIfPatterns] - New-scale-only markers that gate
+ *   ambiguousDetectPatterns — their presence means the file has already been migrated.
  * @property {string[]} fileExtensions - File extensions to scan during health check
  */
 
 /** @type {Migration[]} */
+// Consumes a Dialtone tag's attribute soup, treating quoted attribute values as opaque so a
+// literal > inside one (e.g. :disabled="count > 0") doesn't truncate the match early.
+const DT_TAG_ATTRS = '(?:[^>"\']|"[^"]*"|\'[^\']*\')*';
+
+// Allowlist (not denylist) of what may immediately precede "gap": whitespace (bare gap=),
+// whitespace+":" (shorthand :gap=), or whitespace+"v-bind:" (long form). This rejects
+// data-gap, @gap, v-on:gap, v-model:gap, v-slot:gap, and any other directive namespace,
+// without having to enumerate every prefix that isn't the real gap prop/attribute.
+const GAP_ATTR_LEAD = '(?:(?<=\\s)|(?<=\\s:)|(?<=\\sv-bind:))';
+
 const MIGRATIONS = [
   // ── Required (breaking) ────────────────────────────────────────────
   {
@@ -162,9 +180,13 @@ const MIGRATIONS = [
     type: 'standalone',
     scriptDir: 'dialtone_migrate_props',
     detectPatterns: [
-      /(?:show|hide-close|hide-icon|label-visible|selected-values)(?:=|[\s>])/,
-      /<(?:dt-(?:banner|notice|toast|modal)|Dt(?:Banner|Notice|Toast|Modal))\b[^>]*\btitle(?:=|[\s>])/,
-      /<(?:dt-[\w-]+|Dt\w+)\b[^>]*@(?:input|change)(?:=|\.)/,
+      // (?<!-) blocks a hyphen immediately before the prop name — \b alone still matches
+      // there (- is a non-word char), which would treat native v-show as the show prop.
+      new RegExp(`<(?:dt-[\\w-]+|Dt\\w+)\\b${DT_TAG_ATTRS}\\b(?<!-)(?:show|hide-close|hide-icon|label-visible|selected-values)(?:=|[\\s>])`),
+      // (?<!-) blocks a hyphen immediately before "title" so data-title (and any other
+      // custom -title attribute) isn't mistaken for the title prop.
+      new RegExp(`<(?:dt-(?:banner|notice|toast|modal)|Dt(?:Banner|Notice|Toast|Modal))\\b${DT_TAG_ATTRS}\\b(?<!-)title(?:=|[\\s>])`),
+      new RegExp(`<(?:dt-[\\w-]+|Dt\\w+)\\b${DT_TAG_ATTRS}@(?:input|change)(?:=|\\.)`),
       /kind="(?:danger|error)"/,
       /validation-state="(?:error|success)"/,
     ],
@@ -242,9 +264,27 @@ const MIGRATIONS = [
     category: 'opt-in',
     type: 'config',
     configName: 'stack-gap-to-spacing',
+    // Old-only stops (never valid post-migration values) — always flagged as pending.
     detectPatterns: [
-      /gap="(?:50|100|200|300|350|400|450|500|525|550|600|625|650|700)"/,
-      /d-stack--gap-(?:50|100|200|300|350|400|450|500|525|550|600|625|650|700)/,
+      new RegExp(`${GAP_ATTR_LEAD}gap="(?:350|450|500|550|625|650|700)"`),
+      /d-stack--gap-(?:350|450|500|550|625|650|700)/,
+    ],
+    // Old and new gap scales share some numeric stops (e.g. "100"), so a bare match on
+    // these doesn't prove pending work. Only counted when the file has no new-scale-only
+    // marker (skipIfPatterns) — an unambiguous detectPatterns match elsewhere in the same
+    // (partially migrated) file is still flagged regardless.
+    ambiguousDetectPatterns: [
+      new RegExp(`${GAP_ATTR_LEAD}gap="(?:50|100|200|300|400|525|600)"`),
+      /d-stack--gap-(?:50|100|200|300|400|525|600)/,
+    ],
+    // Mirrors dialtone_migration_helper/configs/stack-gap-to-spacing.mjs's isAlreadyMigrated
+    // check: new-scale-only stops indicate the file was already migrated.
+    skipIfPatterns: [
+      new RegExp(`${GAP_ATTR_LEAD}gap="(?:25|75|150|250|525)"`),
+      new RegExp(`${GAP_ATTR_LEAD}gap='(?:25|75|150|250|525)'`),
+      new RegExp(`${GAP_ATTR_LEAD}gap="'(?:25|75|150|250|525)'"`),
+      /d-stack--gap-(?:25|75|150|250|525)/,
+      /d-description-list--gap-(?:25|75|150|250|525)/,
     ],
     fileExtensions: ['.vue', '.html', '.js', '.ts', '.jsx', '.tsx', '.md'],
   },
@@ -546,7 +586,14 @@ async function healthCheck (cwd) {
 
     for (const [file, content] of fileContents) {
       if (!migration.fileExtensions.some(ext => file.endsWith(ext))) continue;
-      for (const pattern of migration.detectPatterns) {
+
+      let patterns = migration.detectPatterns;
+      const alreadyMigrated = migration.skipIfPatterns?.some(pattern => pattern.test(content));
+      if (!alreadyMigrated && migration.ambiguousDetectPatterns) {
+        patterns = [...patterns, ...migration.ambiguousDetectPatterns];
+      }
+
+      for (const pattern of patterns) {
         // Reset lastIndex for global patterns
         const re = new RegExp(pattern.source, pattern.flags.replace('g', ''));
         if (re.test(content)) {

package/lib/build/js/dialtone_migrate/test.mjs

@@ -86,3 +86,151 @@ describe('--package validation', () => {
     assert.equal(status, 0);
   });
 });
+
+describe('--health-check', () => {
+  function runHealthCheck (files) {
+    const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'dlt-health-'));
+    try {
+      for (const [name, contents] of Object.entries(files)) {
+        fs.writeFileSync(path.join(tmp, name), contents);
+      }
+      return execFileSync(process.execPath, [cli, '--health-check', '--cwd', tmp],
+        { encoding: 'utf8', stdio: ['ignore', 'pipe', 'ignore'] });
+    } finally {
+      fs.rmSync(tmp, { recursive: true, force: true });
+    }
+  }
+
+  it('does not flag native v-show on non-Dialtone elements as component-props', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><div v-show="isReady">Ready</div></template>',
+    });
+    assert.match(output, /\[DONE\].*Component Props & Events \(component-props\)/);
+  });
+
+  it('does not flag native v-show on a Dialtone element as component-props', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-modal v-show="isOpen"></dt-modal></template>',
+    });
+    assert.match(output, /\[DONE\].*Component Props & Events \(component-props\)/);
+  });
+
+  it('does not flag v-show on dt-button as component-props', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-button v-show="visible">Go</dt-button></template>',
+    });
+    assert.match(output, /\[DONE\].*Component Props & Events \(component-props\)/);
+  });
+
+  it('does not flag data-title or v-title on a Dialtone element as component-props', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-modal data-title="tooltip" v-title="x"></dt-modal></template>',
+    });
+    assert.match(output, /\[DONE\].*Component Props & Events \(component-props\)/);
+  });
+
+  it('still flags show= on a Dialtone component as component-props', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-modal show="isOpen"></dt-modal></template>',
+    });
+    assert.match(output, /\[PENDING\].*Component Props & Events \(component-props\)/);
+  });
+
+  it('still flags title= on a Dialtone component as component-props', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-modal title="isOpen"></dt-modal></template>',
+    });
+    assert.match(output, /\[PENDING\].*Component Props & Events \(component-props\)/);
+  });
+
+  it('still flags :show= on a Dialtone component when a quoted attribute earlier in the tag contains a literal >', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-modal :disabled="count > 0" :show="isOpen"></dt-modal></template>',
+    });
+    assert.match(output, /\[PENDING\].*Component Props & Events \(component-props\)/);
+  });
+
+  it('does not flag an already-migrated file for stack-gap-to-spacing', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-stack gap="100"></dt-stack><dt-stack gap="25"></dt-stack></template>',
+    });
+    assert.match(output, /\[DONE\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('still flags an unmigrated file for stack-gap-to-spacing', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-stack gap="625"></dt-stack></template>',
+    });
+    assert.match(output, /\[PENDING\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('does not flag an unrelated data-gap attribute for stack-gap-to-spacing', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><div data-gap="625"></div></template>',
+    });
+    assert.match(output, /\[DONE\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('does not let an unrelated data-gap new-scale value suppress a real ambiguous pending gap', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><div data-gap="25"></div><dt-stack gap="100"></dt-stack></template>',
+    });
+    assert.match(output, /\[PENDING\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('does not flag an @gap event-listener value as a pending gap prop', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-stack @gap="625"></dt-stack></template>',
+    });
+    assert.match(output, /\[DONE\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('does not let an @gap or v-on:gap event-listener value suppress a real ambiguous pending gap', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-stack @gap="25"></dt-stack><dt-stack v-on:gap="75"></dt-stack><dt-stack gap="100"></dt-stack></template>',
+    });
+    assert.match(output, /\[PENDING\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('still flags a bound :gap= and v-bind:gap= as pending', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-stack :gap="625"></dt-stack><dt-stack v-bind:gap="625"></dt-stack></template>',
+    });
+    assert.match(output, /\[PENDING\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('does not flag v-model:gap and still detects a real ambiguous gap alongside it', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-stack v-model:gap="someRef"></dt-stack><dt-stack gap="100"></dt-stack></template>',
+    });
+    assert.match(output, /\[PENDING\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('does not flag gap="525" for stack-gap-to-spacing', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-stack gap="525"></dt-stack></template>',
+    });
+    assert.match(output, /\[DONE\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('does not flag a mix of single-quoted gap=\'25\' and double-quoted gap="100" for stack-gap-to-spacing', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-stack gap=\'25\'></dt-stack><dt-stack gap="100"></dt-stack></template>',
+    });
+    assert.match(output, /\[DONE\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('still flags an unmigrated stop in a partially migrated (mixed) file for stack-gap-to-spacing', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-stack gap="25"></dt-stack><dt-stack gap="625"></dt-stack></template>',
+    });
+    assert.match(output, /\[PENDING\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('does not flag an old stack class alongside a bound gap="\'25\'" for stack-gap-to-spacing', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-stack class="d-stack--gap-100" :gap="\'25\'"></dt-stack></template>',
+    });
+    assert.match(output, /\[DONE\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+});

package/lib/dist/js/dialtone_migrate/index.mjs

@@ -56,11 +56,29 @@ const __dirname = path.dirname(__filename);
  * @property {string} [scriptDir]  - Directory name for standalone scripts
  * @property {boolean} [supportsPackageArg] - Forward --package to this standalone script
  * @property {string[]} [extraArgs] - Extra CLI args to forward
- * @property {RegExp[]} detectPatterns - Patterns that indicate migration is still needed
+ * @property {RegExp[]} detectPatterns - Patterns that unambiguously indicate migration is
+ *   still needed. Always evaluated, regardless of skipIfPatterns.
+ * @property {RegExp[]} [ambiguousDetectPatterns] - Patterns that overlap with valid
+ *   post-migration values. Only evaluated when skipIfPatterns does not match, so a file
+ *   already containing a new-scale-only marker isn't flagged on these alone — but an
+ *   unambiguous detectPatterns match elsewhere in the same (partially migrated) file
+ *   still counts.
+ * @property {RegExp[]} [skipIfPatterns] - New-scale-only markers that gate
+ *   ambiguousDetectPatterns — their presence means the file has already been migrated.
  * @property {string[]} fileExtensions - File extensions to scan during health check
  */
 
 /** @type {Migration[]} */
+// Consumes a Dialtone tag's attribute soup, treating quoted attribute values as opaque so a
+// literal > inside one (e.g. :disabled="count > 0") doesn't truncate the match early.
+const DT_TAG_ATTRS = '(?:[^>"\']|"[^"]*"|\'[^\']*\')*';
+
+// Allowlist (not denylist) of what may immediately precede "gap": whitespace (bare gap=),
+// whitespace+":" (shorthand :gap=), or whitespace+"v-bind:" (long form). This rejects
+// data-gap, @gap, v-on:gap, v-model:gap, v-slot:gap, and any other directive namespace,
+// without having to enumerate every prefix that isn't the real gap prop/attribute.
+const GAP_ATTR_LEAD = '(?:(?<=\\s)|(?<=\\s:)|(?<=\\sv-bind:))';
+
 const MIGRATIONS = [
   // ── Required (breaking) ────────────────────────────────────────────
   {
@@ -162,9 +180,13 @@ const MIGRATIONS = [
     type: 'standalone',
     scriptDir: 'dialtone_migrate_props',
     detectPatterns: [
-      /(?:show|hide-close|hide-icon|label-visible|selected-values)(?:=|[\s>])/,
-      /<(?:dt-(?:banner|notice|toast|modal)|Dt(?:Banner|Notice|Toast|Modal))\b[^>]*\btitle(?:=|[\s>])/,
-      /<(?:dt-[\w-]+|Dt\w+)\b[^>]*@(?:input|change)(?:=|\.)/,
+      // (?<!-) blocks a hyphen immediately before the prop name — \b alone still matches
+      // there (- is a non-word char), which would treat native v-show as the show prop.
+      new RegExp(`<(?:dt-[\\w-]+|Dt\\w+)\\b${DT_TAG_ATTRS}\\b(?<!-)(?:show|hide-close|hide-icon|label-visible|selected-values)(?:=|[\\s>])`),
+      // (?<!-) blocks a hyphen immediately before "title" so data-title (and any other
+      // custom -title attribute) isn't mistaken for the title prop.
+      new RegExp(`<(?:dt-(?:banner|notice|toast|modal)|Dt(?:Banner|Notice|Toast|Modal))\\b${DT_TAG_ATTRS}\\b(?<!-)title(?:=|[\\s>])`),
+      new RegExp(`<(?:dt-[\\w-]+|Dt\\w+)\\b${DT_TAG_ATTRS}@(?:input|change)(?:=|\\.)`),
       /kind="(?:danger|error)"/,
       /validation-state="(?:error|success)"/,
     ],
@@ -242,9 +264,27 @@ const MIGRATIONS = [
     category: 'opt-in',
     type: 'config',
     configName: 'stack-gap-to-spacing',
+    // Old-only stops (never valid post-migration values) — always flagged as pending.
     detectPatterns: [
-      /gap="(?:50|100|200|300|350|400|450|500|525|550|600|625|650|700)"/,
-      /d-stack--gap-(?:50|100|200|300|350|400|450|500|525|550|600|625|650|700)/,
+      new RegExp(`${GAP_ATTR_LEAD}gap="(?:350|450|500|550|625|650|700)"`),
+      /d-stack--gap-(?:350|450|500|550|625|650|700)/,
+    ],
+    // Old and new gap scales share some numeric stops (e.g. "100"), so a bare match on
+    // these doesn't prove pending work. Only counted when the file has no new-scale-only
+    // marker (skipIfPatterns) — an unambiguous detectPatterns match elsewhere in the same
+    // (partially migrated) file is still flagged regardless.
+    ambiguousDetectPatterns: [
+      new RegExp(`${GAP_ATTR_LEAD}gap="(?:50|100|200|300|400|525|600)"`),
+      /d-stack--gap-(?:50|100|200|300|400|525|600)/,
+    ],
+    // Mirrors dialtone_migration_helper/configs/stack-gap-to-spacing.mjs's isAlreadyMigrated
+    // check: new-scale-only stops indicate the file was already migrated.
+    skipIfPatterns: [
+      new RegExp(`${GAP_ATTR_LEAD}gap="(?:25|75|150|250|525)"`),
+      new RegExp(`${GAP_ATTR_LEAD}gap='(?:25|75|150|250|525)'`),
+      new RegExp(`${GAP_ATTR_LEAD}gap="'(?:25|75|150|250|525)'"`),
+      /d-stack--gap-(?:25|75|150|250|525)/,
+      /d-description-list--gap-(?:25|75|150|250|525)/,
     ],
     fileExtensions: ['.vue', '.html', '.js', '.ts', '.jsx', '.tsx', '.md'],
   },
@@ -546,7 +586,14 @@ async function healthCheck (cwd) {
 
     for (const [file, content] of fileContents) {
       if (!migration.fileExtensions.some(ext => file.endsWith(ext))) continue;
-      for (const pattern of migration.detectPatterns) {
+
+      let patterns = migration.detectPatterns;
+      const alreadyMigrated = migration.skipIfPatterns?.some(pattern => pattern.test(content));
+      if (!alreadyMigrated && migration.ambiguousDetectPatterns) {
+        patterns = [...patterns, ...migration.ambiguousDetectPatterns];
+      }
+
+      for (const pattern of patterns) {
         // Reset lastIndex for global patterns
         const re = new RegExp(pattern.source, pattern.flags.replace('g', ''));
         if (re.test(content)) {

package/lib/dist/js/dialtone_migrate/test.mjs

@@ -86,3 +86,151 @@ describe('--package validation', () => {
     assert.equal(status, 0);
   });
 });
+
+describe('--health-check', () => {
+  function runHealthCheck (files) {
+    const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'dlt-health-'));
+    try {
+      for (const [name, contents] of Object.entries(files)) {
+        fs.writeFileSync(path.join(tmp, name), contents);
+      }
+      return execFileSync(process.execPath, [cli, '--health-check', '--cwd', tmp],
+        { encoding: 'utf8', stdio: ['ignore', 'pipe', 'ignore'] });
+    } finally {
+      fs.rmSync(tmp, { recursive: true, force: true });
+    }
+  }
+
+  it('does not flag native v-show on non-Dialtone elements as component-props', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><div v-show="isReady">Ready</div></template>',
+    });
+    assert.match(output, /\[DONE\].*Component Props & Events \(component-props\)/);
+  });
+
+  it('does not flag native v-show on a Dialtone element as component-props', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-modal v-show="isOpen"></dt-modal></template>',
+    });
+    assert.match(output, /\[DONE\].*Component Props & Events \(component-props\)/);
+  });
+
+  it('does not flag v-show on dt-button as component-props', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-button v-show="visible">Go</dt-button></template>',
+    });
+    assert.match(output, /\[DONE\].*Component Props & Events \(component-props\)/);
+  });
+
+  it('does not flag data-title or v-title on a Dialtone element as component-props', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-modal data-title="tooltip" v-title="x"></dt-modal></template>',
+    });
+    assert.match(output, /\[DONE\].*Component Props & Events \(component-props\)/);
+  });
+
+  it('still flags show= on a Dialtone component as component-props', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-modal show="isOpen"></dt-modal></template>',
+    });
+    assert.match(output, /\[PENDING\].*Component Props & Events \(component-props\)/);
+  });
+
+  it('still flags title= on a Dialtone component as component-props', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-modal title="isOpen"></dt-modal></template>',
+    });
+    assert.match(output, /\[PENDING\].*Component Props & Events \(component-props\)/);
+  });
+
+  it('still flags :show= on a Dialtone component when a quoted attribute earlier in the tag contains a literal >', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-modal :disabled="count > 0" :show="isOpen"></dt-modal></template>',
+    });
+    assert.match(output, /\[PENDING\].*Component Props & Events \(component-props\)/);
+  });
+
+  it('does not flag an already-migrated file for stack-gap-to-spacing', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-stack gap="100"></dt-stack><dt-stack gap="25"></dt-stack></template>',
+    });
+    assert.match(output, /\[DONE\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('still flags an unmigrated file for stack-gap-to-spacing', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-stack gap="625"></dt-stack></template>',
+    });
+    assert.match(output, /\[PENDING\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('does not flag an unrelated data-gap attribute for stack-gap-to-spacing', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><div data-gap="625"></div></template>',
+    });
+    assert.match(output, /\[DONE\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('does not let an unrelated data-gap new-scale value suppress a real ambiguous pending gap', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><div data-gap="25"></div><dt-stack gap="100"></dt-stack></template>',
+    });
+    assert.match(output, /\[PENDING\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('does not flag an @gap event-listener value as a pending gap prop', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-stack @gap="625"></dt-stack></template>',
+    });
+    assert.match(output, /\[DONE\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('does not let an @gap or v-on:gap event-listener value suppress a real ambiguous pending gap', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-stack @gap="25"></dt-stack><dt-stack v-on:gap="75"></dt-stack><dt-stack gap="100"></dt-stack></template>',
+    });
+    assert.match(output, /\[PENDING\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('still flags a bound :gap= and v-bind:gap= as pending', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-stack :gap="625"></dt-stack><dt-stack v-bind:gap="625"></dt-stack></template>',
+    });
+    assert.match(output, /\[PENDING\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('does not flag v-model:gap and still detects a real ambiguous gap alongside it', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-stack v-model:gap="someRef"></dt-stack><dt-stack gap="100"></dt-stack></template>',
+    });
+    assert.match(output, /\[PENDING\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('does not flag gap="525" for stack-gap-to-spacing', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-stack gap="525"></dt-stack></template>',
+    });
+    assert.match(output, /\[DONE\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('does not flag a mix of single-quoted gap=\'25\' and double-quoted gap="100" for stack-gap-to-spacing', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-stack gap=\'25\'></dt-stack><dt-stack gap="100"></dt-stack></template>',
+    });
+    assert.match(output, /\[DONE\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('still flags an unmigrated stop in a partially migrated (mixed) file for stack-gap-to-spacing', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-stack gap="25"></dt-stack><dt-stack gap="625"></dt-stack></template>',
+    });
+    assert.match(output, /\[PENDING\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+
+  it('does not flag an old stack class alongside a bound gap="\'25\'" for stack-gap-to-spacing', () => {
+    const output = runHealthCheck({
+      'App.vue': '<template><dt-stack class="d-stack--gap-100" :gap="\'25\'"></dt-stack></template>',
+    });
+    assert.match(output, /\[DONE\].*Stack Gap to Spacing \(stack-gap-to-spacing\)/);
+  });
+});