Address review comments

- Use resolvedOptions().hour12 instead of whitespace heuristic for
  browser hour cycle detection
- Pass hourCycle directly to Intl.DateTimeFormat instead of converting
  to hour12, preserving h11/h12/h23/h24 distinctions
- Remove isHour12() helper, no longer needed
- Validate hourCycle getter against allowed values
- Add positive assertion to h24 test
- Fix README formatting for hourCycle default value

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: silverwind

README.md

@@ -75,7 +75,7 @@ So, a relative date phrase is used for up to a month and then the actual date is
 | `year`         | `year`           | `'numeric'\|'2-digit'\|undefined`                                                           | <sup>\*\*\*\*</sup>             |
 | `timeZoneName` | `time-zone-name` | `'long'\|'short'\|'shortOffset'\|'longOffset'` `\|'shortGeneric'\|'longGeneric'\|undefined` | `undefined`                      |
 | `timeZone`     | `time-zone`      | `string\|undefined`                                                                         | Browser default time zone        |
-| `hourCycle`    | `hour-cycle`     | `'h11'\|'h12'\|'h23'\|'h24'\|undefined`                                                     | 'h12' or 'h23' based on browser  |
+| `hourCycle`    | `hour-cycle`     | `'h11'\|'h12'\|'h23'\|'h24'\|undefined`                                                     | `'h12'` or `'h23'` based on browser |
 | `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'`.

src/relative-time-element.ts

@@ -32,16 +32,14 @@ function getUnitFactor(el: RelativeTimeElement): number {
   return 60 * 60 * 1000
 }
 
-// Determine whether the user has a 12 (vs. 24) hour cycle preference. This relies on the hour formatting in
-// a 12 hour preference being formatted like "1 AM" including a space, while with a 24 hour preference, the
-// same is formatted as "01" without a space. In the future `Intl.Locale.prototype.getHourCycles()` could be
-// used but it is not as well-supported as this method.
-function isBrowser12hCycle() {
-  return Boolean(/\s/.exec(new Intl.DateTimeFormat([], {hour: 'numeric'}).format(new Date(0))))
-}
-
-function isHour12(hourCycle: Intl.DateTimeFormatOptions['hourCycle']) {
-  return hourCycle === 'h11' || hourCycle === 'h12'
+// Determine whether the user has a 12 (vs. 24) hour cycle preference via the
+// browser's resolved DateTimeFormat options.
+function isBrowser12hCycle(): boolean {
+  try {
+    return new Intl.DateTimeFormat([], {hour: 'numeric'}).resolvedOptions().hour12 === true
+  } catch {
+    return false
+  }
 }
 
 const dateObserver = new (class {
@@ -115,7 +113,8 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
     const hc =
       this.closest('[hour-cycle]')?.getAttribute('hour-cycle') ||
       this.ownerDocument.documentElement.getAttribute('hour-cycle')
-    return (hc || (isBrowser12hCycle() ? 'h12' : 'h23')) as Intl.DateTimeFormatOptions['hourCycle']
+    if (hc === 'h11' || hc === 'h12' || hc === 'h23' || hc === 'h24') return hc
+    return isBrowser12hCycle() ? 'h12' : 'h23'
   }
 
   #renderRoot: Node = this.shadowRoot ? this.shadowRoot : this.attachShadow ? this.attachShadow({mode: 'open'}) : this
@@ -160,7 +159,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
       minute: '2-digit',
       timeZoneName: 'short',
       timeZone: this.timeZone,
-      hour12: isHour12(this.hourCycle),
+      hourCycle: this.hourCycle,
     }).format(date)
   }
 
@@ -235,7 +234,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
       year: this.year,
       timeZoneName: this.timeZoneName,
       timeZone: this.timeZone,
-      hour12: isHour12(this.hourCycle),
+      hourCycle: this.hourCycle,
     })
     return `${this.prefix} ${formatter.format(date)}`.trim()
   }
@@ -269,7 +268,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
       minute: '2-digit',
       timeZoneName: 'short',
       timeZone: this.timeZone,
-      hour12: isHour12(this.hourCycle),
+      hourCycle: this.hourCycle,
     }
 
     if (this.#isToday(date)) {

test/relative-time.js

@@ -2866,6 +2866,7 @@ suite('relative-time', function () {
       el.setAttribute('hour-cycle', 'h24')
       await Promise.resolve()
       assert.notMatch(el.shadowRoot.textContent, /AM|PM/i)
+      assert.match(el.shadowRoot.textContent, /15:00/)
     })
 
     test('title uses hour-cycle setting', async () => {