From d970378e5ce174f136f53124a027988e902622db Mon Sep 17 00:00:00 2001
From: omar <omaraziz.dev@proton.me>
Date: Thu, 23 May 2024 22:14:40 -0600
Subject: [PATCH 01/12] fix: remove dollar sign from command

currently it copies the `$` when copying
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 34bbe20..57d1ec0 100644
--- a/README.md
+++ b/README.md
@@ -27,7 +27,7 @@ If the browser's JavaScript is disabled, the default text served in the cached m
 Available on [npm](https://www.npmjs.com/) as [**@github/relative-time-element**](https://www.npmjs.com/package/@github/relative-time-element).
 
 ```
-$ npm install @github/relative-time-element
+npm install @github/relative-time-element
 ```
 
 This element uses the `Intl.DateTimeFormat` & `Intl.RelativeTimeFormat` APIs, which are supported by all modern JS engines. If you need to support an older browser, you may need to introduce a polyfill for `Intl.DateTimeFormat` & `Intl.RelativeTimeFormat`.

From ce767ccb6a658cab0b6778148bcdb0cc030399b7 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 29 May 2024 17:23:40 +0000
Subject: [PATCH 02/12] Adds flag to optionally hide title attribute

---
 examples/index.html          | 11 +++++++++--
 src/relative-time-element.ts |  7 ++++++-
 test/relative-time.js        | 16 ++++++++++++++++
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/examples/index.html b/examples/index.html
index 2dfeee8..8b7cc58 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -21,6 +21,13 @@ <h3>Format DateTime</h3>
     </relative-time>
   </p>
 
+  <p>
+    Hide title attribute:
+    <relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime" hour="numeric" minute="2-digit" second="2-digit" hide-title="true">
+      Jan 1 1970
+    </relative-time>
+  </p>
+
   <p>
     Customised options:
     <relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime" weekday="narrow" year="2-digit" month="narrow" day="numeric" hour="numeric" minute="2-digit" second="2-digit">
@@ -185,8 +192,8 @@ <h2>Localised Dates</h2>
     </relative-time>
   </p>
 
-  <!-- <script type="module" src="../dist/index.js"></script> -->
-  <script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script>
+  <script type="module" src="../dist/index.js"></script>
+  <!-- <script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script> -->
   <script>
     document.body.addEventListener('relative-time-updated', event => {
       console.log('event from', event.target, event)
diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts
index f379e54..81fed8a 100644
--- a/src/relative-time-element.ts
+++ b/src/relative-time-element.ts
@@ -107,6 +107,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
       'precision',
       'format',
       'format-style',
+      'hide-title',
       'datetime',
       'lang',
       'title',
@@ -382,6 +383,10 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
     this.setAttribute('format-style', value)
   }
 
+  get hideTitle(): boolean {
+    return this.getAttribute('hide-title') === 'true'
+  }
+
   get datetime() {
     return this.getAttribute('datetime') || ''
   }
@@ -431,7 +436,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
       return
     }
     const now = Date.now()
-    if (!this.#customTitle) {
+    if (!this.#customTitle && !this.hideTitle) {
       newTitle = this.#getFormattedTitle(date) || ''
       if (newTitle) this.setAttribute('title', newTitle)
     }
diff --git a/test/relative-time.js b/test/relative-time.js
index df73e56..d2e9c2f 100644
--- a/test/relative-time.js
+++ b/test/relative-time.js
@@ -83,6 +83,22 @@ suite('relative-time', function () {
     assert.equal(el.getAttribute('title'), text)
   })
 
+  test('does not set title if hide-title=true', async () => {
+    const el = document.createElement('relative-time')
+    el.setAttribute('datetime', new Date().toISOString())
+    el.setAttribute('hide-title', true)
+    await Promise.resolve()
+    assert.equal(el.getAttribute('title'), null)
+  })
+
+  test('sets title if hide-title=false', async () => {
+    const el = document.createElement('relative-time')
+    el.setAttribute('datetime', new Date().toISOString())
+    el.setAttribute('hide-title', false)
+    await Promise.resolve()
+    assert.ok(el.getAttribute('title'))
+  })
+
   test('shadowDOM reflects textContent with invalid date', async () => {
     const el = document.createElement('relative-time')
     el.textContent = 'A date string'

From fe78512b6be0ecab64dd514dead04bf711158ba8 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 29 May 2024 17:55:02 +0000
Subject: [PATCH 03/12] Update readme

---
 README.md           | 5 +++++
 examples/index.html | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 57d1ec0..34f9e5e 100644
--- a/README.md
+++ b/README.md
@@ -80,6 +80,7 @@ So, a relative date phrase is used for up to a month and then the actual date is
 | `month`        | `month`          | `'numeric'\|'2-digit'\|'short'\|'long'\|'narrow'\|undefined`                                | <sup>***</sup>                   |
 | `year`         | `year`           | `'numeric'\|'2-digit'\|undefined`                                                           | <sup>****</sup>                  |
 | `timeZoneName` | `time-zone-name` | `'long'\|'short'\|'shortOffset'\|'longOffset'` `\|'shortGeneric'\|'longGeneric'\|undefined` | `undefined`                      |
+| `hideTitle`    | `hide-title`     | `boolean \| null`                                                                           | -                                |
 
 <sup>*</sup>: If unspecified, `formatStyle` will return `'narrow'` if `format` is `'elapsed'` or `'micro'`, `'short'` if the format is `'relative'` or `'datetime'`, otherwise it will be `'long'`.
 
@@ -268,6 +269,10 @@ For dates outside of the specified `threshold`, the formatting of the date can b
 
 Lang is a [built-in global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang). Relative Time will use this to provide an applicable language to the `Intl` APIs. If the individual element does not have a `lang` attribute then it will traverse upwards in the tree to find the closest element that does, or default the lang to `en`.
 
+##### hideTitle (`boolean`, default: `undefined`)
+
+Passing in `hide-title="true"` will remove the `title` attribute from the `<relative-time>` element. The `title` attribute is inaccessible to screen reader and keyboard users, so hiding the title allows a user to create a custom accessible version of a tooltip if one is desired.
+
 ## Browser Support
 
 Browsers without native [custom element support][support] require a [polyfill][ce-polyfill].
diff --git a/examples/index.html b/examples/index.html
index 8b7cc58..4c389e2 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -192,8 +192,8 @@ <h2>Localised Dates</h2>
     </relative-time>
   </p>
 
-  <script type="module" src="../dist/index.js"></script>
-  <!-- <script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script> -->
+  <!-- <script type="module" src="../dist/index.js"></script> -->
+  <script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script>
   <script>
     document.body.addEventListener('relative-time-updated', event => {
       console.log('event from', event.target, event)

From abc079e4052a3093983694fd3f27477b00d903a3 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 29 May 2024 18:05:04 +0000
Subject: [PATCH 04/12] Updates based on PR feedback to noTitle instead of
 hideTitle

---
 README.md                    | 6 +++---
 examples/index.html          | 7 ++++---
 src/relative-time-element.ts | 8 ++++----
 test/relative-time.js        | 8 ++++----
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 34f9e5e..8d87f95 100644
--- a/README.md
+++ b/README.md
@@ -80,7 +80,7 @@ So, a relative date phrase is used for up to a month and then the actual date is
 | `month`        | `month`          | `'numeric'\|'2-digit'\|'short'\|'long'\|'narrow'\|undefined`                                | <sup>***</sup>                   |
 | `year`         | `year`           | `'numeric'\|'2-digit'\|undefined`                                                           | <sup>****</sup>                  |
 | `timeZoneName` | `time-zone-name` | `'long'\|'short'\|'shortOffset'\|'longOffset'` `\|'shortGeneric'\|'longGeneric'\|undefined` | `undefined`                      |
-| `hideTitle`    | `hide-title`     | `boolean \| null`                                                                           | -                                |
+| `noTitle`      | `no-title`       | `boolean \| null`                                                                           | -                                |
 
 <sup>*</sup>: If unspecified, `formatStyle` will return `'narrow'` if `format` is `'elapsed'` or `'micro'`, `'short'` if the format is `'relative'` or `'datetime'`, otherwise it will be `'long'`.
 
@@ -269,9 +269,9 @@ For dates outside of the specified `threshold`, the formatting of the date can b
 
 Lang is a [built-in global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang). Relative Time will use this to provide an applicable language to the `Intl` APIs. If the individual element does not have a `lang` attribute then it will traverse upwards in the tree to find the closest element that does, or default the lang to `en`.
 
-##### hideTitle (`boolean`, default: `undefined`)
+##### noTitle (`boolean`, default: `undefined`)
 
-Passing in `hide-title="true"` will remove the `title` attribute from the `<relative-time>` element. The `title` attribute is inaccessible to screen reader and keyboard users, so hiding the title allows a user to create a custom accessible version of a tooltip if one is desired.
+Passing in `no-title="true"` will remove the `title` attribute from the `<relative-time>` element. The `title` attribute is inaccessible to screen reader and keyboard users, so no adding a title attribute allows a user to create a custom, accessible tooltip if one is desired.
 
 ## Browser Support
 
diff --git a/examples/index.html b/examples/index.html
index 4c389e2..c0fd049 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -23,7 +23,8 @@ <h3>Format DateTime</h3>
 
   <p>
     Hide title attribute:
-    <relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime" hour="numeric" minute="2-digit" second="2-digit" hide-title="true">
+    <relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime" hour="numeric" minute="2-digit" second="2-digit"
+      no-title="true">
       Jan 1 1970
     </relative-time>
   </p>
@@ -192,8 +193,8 @@ <h2>Localised Dates</h2>
     </relative-time>
   </p>
 
-  <!-- <script type="module" src="../dist/index.js"></script> -->
-  <script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script>
+  <script type="module" src="../dist/index.js"></script>
+  <!-- <script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script> -->
   <script>
     document.body.addEventListener('relative-time-updated', event => {
       console.log('event from', event.target, event)
diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts
index 81fed8a..338f7d4 100644
--- a/src/relative-time-element.ts
+++ b/src/relative-time-element.ts
@@ -107,7 +107,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
       'precision',
       'format',
       'format-style',
-      'hide-title',
+      'no-title',
       'datetime',
       'lang',
       'title',
@@ -383,8 +383,8 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
     this.setAttribute('format-style', value)
   }
 
-  get hideTitle(): boolean {
-    return this.getAttribute('hide-title') === 'true'
+  get noTitle(): boolean {
+    return this.hasAttribute('no-title') && this.getAttribute('no-title') === 'true'
   }
 
   get datetime() {
@@ -436,7 +436,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
       return
     }
     const now = Date.now()
-    if (!this.#customTitle && !this.hideTitle) {
+    if (!this.#customTitle && !this.noTitle) {
       newTitle = this.#getFormattedTitle(date) || ''
       if (newTitle) this.setAttribute('title', newTitle)
     }
diff --git a/test/relative-time.js b/test/relative-time.js
index d2e9c2f..9df352d 100644
--- a/test/relative-time.js
+++ b/test/relative-time.js
@@ -83,18 +83,18 @@ suite('relative-time', function () {
     assert.equal(el.getAttribute('title'), text)
   })
 
-  test('does not set title if hide-title=true', async () => {
+  test('does not set title if no-title=true', async () => {
     const el = document.createElement('relative-time')
     el.setAttribute('datetime', new Date().toISOString())
-    el.setAttribute('hide-title', true)
+    el.setAttribute('no-title', true)
     await Promise.resolve()
     assert.equal(el.getAttribute('title'), null)
   })
 
-  test('sets title if hide-title=false', async () => {
+  test('sets title if no-title=false', async () => {
     const el = document.createElement('relative-time')
     el.setAttribute('datetime', new Date().toISOString())
-    el.setAttribute('hide-title', false)
+    el.setAttribute('no-title', false)
     await Promise.resolve()
     assert.ok(el.getAttribute('title'))
   })

From 48c1c8e568e3c38e3da4150d5d83dea6ef7a2bf1 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 29 May 2024 14:05:51 -0400
Subject: [PATCH 05/12] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 8d87f95..b26f331 100644
--- a/README.md
+++ b/README.md
@@ -271,7 +271,7 @@ Lang is a [built-in global attribute](https://developer.mozilla.org/en-US/docs/W
 
 ##### noTitle (`boolean`, default: `undefined`)
 
-Passing in `no-title="true"` will remove the `title` attribute from the `<relative-time>` element. The `title` attribute is inaccessible to screen reader and keyboard users, so no adding a title attribute allows a user to create a custom, accessible tooltip if one is desired.
+Passing in `no-title="true"` will remove the `title` attribute from the `<relative-time>` element. The `title` attribute is inaccessible to screen reader and keyboard users, so not adding a title attribute allows a user to create a custom, accessible tooltip if one is desired.
 
 ## Browser Support
 

From e281a47ec7e435f9b3394e2bb7e8585db54dc9e6 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 29 May 2024 18:06:28 +0000
Subject: [PATCH 06/12] Updates examples

---
 examples/index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/index.html b/examples/index.html
index c0fd049..6963027 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -22,7 +22,7 @@ <h3>Format DateTime</h3>
   </p>
 
   <p>
-    Hide title attribute:
+    No title attribute:
     <relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime" hour="numeric" minute="2-digit" second="2-digit"
       no-title="true">
       Jan 1 1970
@@ -193,8 +193,8 @@ <h2>Localised Dates</h2>
     </relative-time>
   </p>
 
-  <script type="module" src="../dist/index.js"></script>
-  <!-- <script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script> -->
+  <!-- <script type="module" src="../dist/index.js"></script> -->
+  <script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script>
   <script>
     document.body.addEventListener('relative-time-updated', event => {
       console.log('event from', event.target, event)

From 519d91572e37b6aa1063bbd5c8202c3dcf586ef3 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 29 May 2024 19:48:41 +0000
Subject: [PATCH 07/12] Updates to hasAttribute

---
 README.md                    |  6 +++---
 examples/index.html          |  2 +-
 src/relative-time-element.ts |  6 +++++-
 test/relative-time.js        | 10 +---------
 4 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index b26f331..a2423bc 100644
--- a/README.md
+++ b/README.md
@@ -80,7 +80,7 @@ So, a relative date phrase is used for up to a month and then the actual date is
 | `month`        | `month`          | `'numeric'\|'2-digit'\|'short'\|'long'\|'narrow'\|undefined`                                | <sup>***</sup>                   |
 | `year`         | `year`           | `'numeric'\|'2-digit'\|undefined`                                                           | <sup>****</sup>                  |
 | `timeZoneName` | `time-zone-name` | `'long'\|'short'\|'shortOffset'\|'longOffset'` `\|'shortGeneric'\|'longGeneric'\|undefined` | `undefined`                      |
-| `noTitle`      | `no-title`       | `boolean \| null`                                                                           | -                                |
+| `noTitle`      | `no-title`       | `'boolean \| null'`                                                                         | -                                |
 
 <sup>*</sup>: If unspecified, `formatStyle` will return `'narrow'` if `format` is `'elapsed'` or `'micro'`, `'short'` if the format is `'relative'` or `'datetime'`, otherwise it will be `'long'`.
 
@@ -269,9 +269,9 @@ For dates outside of the specified `threshold`, the formatting of the date can b
 
 Lang is a [built-in global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang). Relative Time will use this to provide an applicable language to the `Intl` APIs. If the individual element does not have a `lang` attribute then it will traverse upwards in the tree to find the closest element that does, or default the lang to `en`.
 
-##### noTitle (`boolean`, default: `undefined`)
+##### noTitle
 
-Passing in `no-title="true"` will remove the `title` attribute from the `<relative-time>` element. The `title` attribute is inaccessible to screen reader and keyboard users, so not adding a title attribute allows a user to create a custom, accessible tooltip if one is desired.
+Adding the `no-title` attribute will remove the `title` attribute from the `<relative-time>` element. The `title` attribute is inaccessible to screen reader and keyboard users, so not adding a title attribute allows a user to create a custom, accessible tooltip if one is desired.
 
 ## Browser Support
 
diff --git a/examples/index.html b/examples/index.html
index 6963027..d671479 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -24,7 +24,7 @@ <h3>Format DateTime</h3>
   <p>
     No title attribute:
     <relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime" hour="numeric" minute="2-digit" second="2-digit"
-      no-title="true">
+      no-title>
       Jan 1 1970
     </relative-time>
   </p>
diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts
index 338f7d4..7e956cc 100644
--- a/src/relative-time-element.ts
+++ b/src/relative-time-element.ts
@@ -384,7 +384,11 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
   }
 
   get noTitle(): boolean {
-    return this.hasAttribute('no-title') && this.getAttribute('no-title') === 'true'
+    return this.hasAttribute('no-title')
+  }
+
+  set noTitle(value: boolean | null) {
+    this.setAttribute('no-title', value?.toString() || '')
   }
 
   get datetime() {
diff --git a/test/relative-time.js b/test/relative-time.js
index 9df352d..bacc640 100644
--- a/test/relative-time.js
+++ b/test/relative-time.js
@@ -86,19 +86,11 @@ suite('relative-time', function () {
   test('does not set title if no-title=true', async () => {
     const el = document.createElement('relative-time')
     el.setAttribute('datetime', new Date().toISOString())
-    el.setAttribute('no-title', true)
+    el.setAttribute('no-title', '')
     await Promise.resolve()
     assert.equal(el.getAttribute('title'), null)
   })
 
-  test('sets title if no-title=false', async () => {
-    const el = document.createElement('relative-time')
-    el.setAttribute('datetime', new Date().toISOString())
-    el.setAttribute('no-title', false)
-    await Promise.resolve()
-    assert.ok(el.getAttribute('title'))
-  })
-
   test('shadowDOM reflects textContent with invalid date', async () => {
     const el = document.createElement('relative-time')
     el.textContent = 'A date string'

From 409d4565f9bb0d2dddb0fcef42a753b390f38c68 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 29 May 2024 19:56:48 +0000
Subject: [PATCH 08/12] Updates docs

---
 README.md                    | 2 +-
 src/relative-time-element.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index a2423bc..645543e 100644
--- a/README.md
+++ b/README.md
@@ -80,7 +80,7 @@ So, a relative date phrase is used for up to a month and then the actual date is
 | `month`        | `month`          | `'numeric'\|'2-digit'\|'short'\|'long'\|'narrow'\|undefined`                                | <sup>***</sup>                   |
 | `year`         | `year`           | `'numeric'\|'2-digit'\|undefined`                                                           | <sup>****</sup>                  |
 | `timeZoneName` | `time-zone-name` | `'long'\|'short'\|'shortOffset'\|'longOffset'` `\|'shortGeneric'\|'longGeneric'\|undefined` | `undefined`                      |
-| `noTitle`      | `no-title`       | `'boolean \| null'`                                                                         | -                                |
+| `noTitle`      | `no-title`       | `'boolean \| undefined'`                                                                    | `undefined`                      |
 
 <sup>*</sup>: If unspecified, `formatStyle` will return `'narrow'` if `format` is `'elapsed'` or `'micro'`, `'short'` if the format is `'relative'` or `'datetime'`, otherwise it will be `'long'`.
 
diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts
index 7e956cc..91c4816 100644
--- a/src/relative-time-element.ts
+++ b/src/relative-time-element.ts
@@ -387,7 +387,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
     return this.hasAttribute('no-title')
   }
 
-  set noTitle(value: boolean | null) {
+  set noTitle(value: boolean | undefined) {
     this.setAttribute('no-title', value?.toString() || '')
   }
 

From f7a01aa952bc138f266c7f15aae7d244dc905741 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Wed, 29 May 2024 20:00:50 +0000
Subject: [PATCH 09/12] Uses toggleAttribute

---
 README.md                    | 2 +-
 src/relative-time-element.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 645543e..50704e2 100644
--- a/README.md
+++ b/README.md
@@ -80,7 +80,7 @@ So, a relative date phrase is used for up to a month and then the actual date is
 | `month`        | `month`          | `'numeric'\|'2-digit'\|'short'\|'long'\|'narrow'\|undefined`                                | <sup>***</sup>                   |
 | `year`         | `year`           | `'numeric'\|'2-digit'\|undefined`                                                           | <sup>****</sup>                  |
 | `timeZoneName` | `time-zone-name` | `'long'\|'short'\|'shortOffset'\|'longOffset'` `\|'shortGeneric'\|'longGeneric'\|undefined` | `undefined`                      |
-| `noTitle`      | `no-title`       | `'boolean \| undefined'`                                                                    | `undefined`                      |
+| `noTitle`      | `no-title`       | `-`                                                                                         | `-`                              |
 
 <sup>*</sup>: If unspecified, `formatStyle` will return `'narrow'` if `format` is `'elapsed'` or `'micro'`, `'short'` if the format is `'relative'` or `'datetime'`, otherwise it will be `'long'`.
 
diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts
index 91c4816..43f1b7e 100644
--- a/src/relative-time-element.ts
+++ b/src/relative-time-element.ts
@@ -388,7 +388,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
   }
 
   set noTitle(value: boolean | undefined) {
-    this.setAttribute('no-title', value?.toString() || '')
+    this.toggleAttribute('no-title')
   }
 
   get datetime() {

From 4f8eefba1765d52811f74d42d6e6c3d7ed288b91 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Thu, 30 May 2024 10:51:39 -0400
Subject: [PATCH 10/12] Update src/relative-time-element.ts

Co-authored-by: Clay Miller <clay@smockle.com>
---
 src/relative-time-element.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts
index 43f1b7e..c844a9d 100644
--- a/src/relative-time-element.ts
+++ b/src/relative-time-element.ts
@@ -388,7 +388,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
   }
 
   set noTitle(value: boolean | undefined) {
-    this.toggleAttribute('no-title')
+    this.toggleAttribute('no-title', value)
   }
 
   get datetime() {

From 942896a884d2b525c8a824ebbc71b28721055038 Mon Sep 17 00:00:00 2001
From: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
Date: Thu, 30 May 2024 10:52:16 -0400
Subject: [PATCH 11/12] Update relative-time.js

---
 test/relative-time.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/relative-time.js b/test/relative-time.js
index bacc640..bd3cb32 100644
--- a/test/relative-time.js
+++ b/test/relative-time.js
@@ -83,7 +83,7 @@ suite('relative-time', function () {
     assert.equal(el.getAttribute('title'), text)
   })
 
-  test('does not set title if no-title=true', async () => {
+  test('does not set title if no-title attribute is present', async () => {
     const el = document.createElement('relative-time')
     el.setAttribute('datetime', new Date().toISOString())
     el.setAttribute('no-title', '')

From 257f0eb99b5b7a805ada1f2c84ffc01e87e7d4a2 Mon Sep 17 00:00:00 2001
From: Clay Miller <clay@smockle.com>
Date: Fri, 31 May 2024 18:19:08 +0000
Subject: [PATCH 12/12] fix: Move 'noTitle' conditional.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Calculate the new title, just don’t update the attribute. This change means the 'relative-time-updated' event will fire even if 'noTitle' is set.
---
 src/relative-time-element.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts
index c844a9d..660b169 100644
--- a/src/relative-time-element.ts
+++ b/src/relative-time-element.ts
@@ -440,9 +440,9 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
       return
     }
     const now = Date.now()
-    if (!this.#customTitle && !this.noTitle) {
+    if (!this.#customTitle) {
       newTitle = this.#getFormattedTitle(date) || ''
-      if (newTitle) this.setAttribute('title', newTitle)
+      if (newTitle && !this.noTitle) this.setAttribute('title', newTitle)
     }
 
     const duration = elapsedTime(date, this.precision, now)