Add hour-cycle to observedAttributes and add tests

Add hour-cycle to observedAttributes so dynamic attribute changes
trigger re-renders. Add test suite covering all four hour cycle values,
title formatting, ancestor inheritance, attribute override precedence,
and dynamic re-rendering. Fix existing locale test to use explicit
hour-cycle attribute.

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

Author: silverwind

src/relative-time-element.ts

@@ -142,6 +142,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
       'title',
       'aria-hidden',
       'time-zone',
+      'hour-cycle',
     ]
   }
 

test/relative-time.js

@@ -1982,6 +1982,7 @@ suite('relative-time', function () {
       const el = document.createElement('relative-time')
       el.setAttribute('lang', 'es-ES')
       el.setAttribute('time-zone', 'Europe/Madrid')
+      el.setAttribute('hour-cycle', 'h23')
 
       el.setAttribute('datetime', '2023-01-15T17:00:00.000Z')
       await Promise.resolve()
@@ -2815,6 +2816,134 @@ suite('relative-time', function () {
     }
   })
 
+  suite('[hourCycle]', function () {
+    test('formats with 24-hour cycle when hour-cycle is h23', async () => {
+      const el = document.createElement('relative-time')
+      el.setAttribute('datetime', '2020-01-01T15:00:00.000Z')
+      el.setAttribute('time-zone', 'UTC')
+      el.setAttribute('format', 'datetime')
+      el.setAttribute('hour', 'numeric')
+      el.setAttribute('minute', '2-digit')
+      el.setAttribute('hour-cycle', 'h23')
+      await Promise.resolve()
+      assert.notMatch(el.shadowRoot.textContent, /AM|PM/i)
+      assert.match(el.shadowRoot.textContent, /15:00/)
+    })
+
+    test('formats with 12-hour cycle when hour-cycle is h12', async () => {
+      const el = document.createElement('relative-time')
+      el.setAttribute('datetime', '2020-01-01T15:00:00.000Z')
+      el.setAttribute('time-zone', 'UTC')
+      el.setAttribute('format', 'datetime')
+      el.setAttribute('hour', 'numeric')
+      el.setAttribute('minute', '2-digit')
+      el.setAttribute('hour-cycle', 'h12')
+      await Promise.resolve()
+      assert.match(el.shadowRoot.textContent, /3:00/)
+      assert.match(el.shadowRoot.textContent, /PM/i)
+    })
+
+    test('formats with 12-hour cycle when hour-cycle is h11', async () => {
+      const el = document.createElement('relative-time')
+      el.setAttribute('datetime', '2020-01-01T15:00:00.000Z')
+      el.setAttribute('time-zone', 'UTC')
+      el.setAttribute('format', 'datetime')
+      el.setAttribute('hour', 'numeric')
+      el.setAttribute('minute', '2-digit')
+      el.setAttribute('hour-cycle', 'h11')
+      await Promise.resolve()
+      assert.match(el.shadowRoot.textContent, /3:00/)
+      assert.match(el.shadowRoot.textContent, /PM/i)
+    })
+
+    test('formats with 24-hour cycle when hour-cycle is h24', async () => {
+      const el = document.createElement('relative-time')
+      el.setAttribute('datetime', '2020-01-01T15:00:00.000Z')
+      el.setAttribute('time-zone', 'UTC')
+      el.setAttribute('format', 'datetime')
+      el.setAttribute('hour', 'numeric')
+      el.setAttribute('minute', '2-digit')
+      el.setAttribute('hour-cycle', 'h24')
+      await Promise.resolve()
+      assert.notMatch(el.shadowRoot.textContent, /AM|PM/i)
+    })
+
+    test('title uses hour-cycle setting', async () => {
+      const el = document.createElement('relative-time')
+      el.setAttribute('datetime', '2020-01-01T15:00:00.000Z')
+      el.setAttribute('time-zone', 'UTC')
+      el.setAttribute('hour-cycle', 'h23')
+      await Promise.resolve()
+      assert.notMatch(el.getAttribute('title'), /AM|PM/i)
+      assert.match(el.getAttribute('title'), /15/)
+    })
+
+    test('inherits hour-cycle from ancestor', async () => {
+      const el = document.createElement('relative-time')
+      el.setAttribute('datetime', '2020-01-01T15:00:00.000Z')
+      el.setAttribute('time-zone', 'UTC')
+      el.setAttribute('format', 'datetime')
+      el.setAttribute('hour', 'numeric')
+      el.setAttribute('minute', '2-digit')
+      const div = document.createElement('div')
+      div.setAttribute('hour-cycle', 'h23')
+      div.appendChild(el)
+      document.body.appendChild(div)
+      await Promise.resolve()
+      assert.notMatch(el.shadowRoot.textContent, /AM|PM/i)
+      assert.match(el.shadowRoot.textContent, /15:00/)
+      div.remove()
+    })
+
+    test('inherits hour-cycle from documentElement', async () => {
+      const el = document.createElement('relative-time')
+      el.setAttribute('datetime', '2020-01-01T15:00:00.000Z')
+      el.setAttribute('time-zone', 'UTC')
+      el.setAttribute('format', 'datetime')
+      el.setAttribute('hour', 'numeric')
+      el.setAttribute('minute', '2-digit')
+      document.documentElement.setAttribute('hour-cycle', 'h23')
+      await Promise.resolve()
+      assert.notMatch(el.shadowRoot.textContent, /AM|PM/i)
+      assert.match(el.shadowRoot.textContent, /15:00/)
+      document.documentElement.removeAttribute('hour-cycle')
+    })
+
+    test('element attribute overrides ancestor', async () => {
+      const el = document.createElement('relative-time')
+      el.setAttribute('datetime', '2020-01-01T15:00:00.000Z')
+      el.setAttribute('time-zone', 'UTC')
+      el.setAttribute('format', 'datetime')
+      el.setAttribute('hour', 'numeric')
+      el.setAttribute('minute', '2-digit')
+      el.setAttribute('hour-cycle', 'h12')
+      const div = document.createElement('div')
+      div.setAttribute('hour-cycle', 'h23')
+      div.appendChild(el)
+      document.body.appendChild(div)
+      await Promise.resolve()
+      assert.match(el.shadowRoot.textContent, /3:00/)
+      assert.match(el.shadowRoot.textContent, /PM/i)
+      div.remove()
+    })
+
+    test('re-renders when hour-cycle attribute changes', async () => {
+      const el = document.createElement('relative-time')
+      el.setAttribute('datetime', '2020-01-01T15:00:00.000Z')
+      el.setAttribute('time-zone', 'UTC')
+      el.setAttribute('format', 'datetime')
+      el.setAttribute('hour', 'numeric')
+      el.setAttribute('minute', '2-digit')
+      el.setAttribute('hour-cycle', 'h12')
+      await Promise.resolve()
+      assert.match(el.shadowRoot.textContent, /PM/i)
+      el.setAttribute('hour-cycle', 'h23')
+      await Promise.resolve()
+      assert.notMatch(el.shadowRoot.textContent, /AM|PM/i)
+      assert.match(el.shadowRoot.textContent, /15:00/)
+    })
+  })
+
   suite('[timeZone]', function () {
     test('updates when the time-zone attribute is set', async () => {
       const el = document.createElement('relative-time')