{
  "tag": "ed-relative-time",
  "kind": "component",
  "summary": "Outputs a localized time phrase relative to the current date and time.",
  "status": "experimental",
  "level": "atom",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/relative-time/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/relative-time/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [],
  "use": [
    "Recency-driven surfaces — activity feeds, notifications, log lists, \"last saved\", \"last synced\"",
    "Nearby future moments where the distance matters more than the date, such as an approaching due time",
    "A last saved or last synced note, such as saved 2 minutes ago, that updates while the screen stays open",
    "An activity log entry such as comment added 3 hours ago, so a user sees what is new"
  ],
  "notFor": [
    {
      "when": "Records, receipts, deadlines, or anything users cite or compare",
      "instead": "[Format Date](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/format-date)"
    },
    {
      "when": "A time that must be exact for a deadline or filing",
      "instead": "a [Format Date](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/format-date)"
    }
  ],
  "rules": [
    {
      "id": "relative-time/path-to-exact-moment",
      "rule": "Never make a relative phrase the only path to the actual timestamp — wherever the precise time can matter, give users a path to the exact moment: an adjacent [Format Date](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/format-date) or a [Tooltip](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tooltip) carrying it.",
      "why": "Relative time answers \"how recent?\", not \"when?\". It is the right display while recency is the message — the moment users need the exact date, it becomes the wrong one.",
      "check": "warning"
    },
    {
      "id": "relative-time/absolute-once-long-past",
      "rule": "Never leave long-past events relative — switch to an absolute date once age itself stops being the message.",
      "why": "\"3 years ago\" forces mental math."
    },
    {
      "id": "relative-time/sync-open-views",
      "rule": "Enable sync on views that stay open, so \"this minute\" does not silently age into a lie.",
      "check": "warning"
    },
    {
      "id": "relative-time/no-hand-built-phrases",
      "rule": "Don't hand-build relative phrases — the component phrases them in the user's language.",
      "why": "Hand-pluralized \"vor 2 Minuten\" strings break across locales the component already covers.",
      "check": "warning"
    },
    {
      "id": "relative-time/natural-phrasing",
      "rule": "Never override the natural phrasing to always-numeric without a reason.",
      "why": "\"Yesterday\" reads faster than \"1 day ago\".",
      "check": "warning"
    },
    {
      "id": "relative-time/one-display-per-view",
      "rule": "Keep one display style per view, so entries stay comparable.",
      "check": "warning"
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "date",
        "property": "date",
        "type": "null | string | { toString: { }, toDateString: { }, toTimeString: { }, toLocaleString: { }, toLocaleDateString: { }, toLocaleTimeString: { }, valueOf: { }, getTime: { }, getFullYear: { }, getUTCFullYear: { }, getMonth: { }, getUTCMonth: { }, getDate: { }, getUTCDate: { }, getDay: { }, getUTCDay: { }, getHours: { }, getUTCHours: { }, getMinutes: { }, getUTCMinutes: { }, getSeconds: { }, getUTCSeconds: { }, getMilliseconds: { }, getUTCMilliseconds: { }, getTimezoneOffset: { }, setTime: { }, setMilliseconds: { }, setUTCMilliseconds: { }, setSeconds: { }, setUTCSeconds: { }, setMinutes: { }, setUTCMinutes: { }, setHours: { }, setUTCHours: { }, setDate: { }, setUTCDate: { }, setMonth: { }, setUTCMonth: { }, setFullYear: { }, setUTCFullYear: { }, toUTCString: { }, toISOString: { }, toJSON: { }, __@toPrimitive@534: { } }",
        "default": "new Date()",
        "description": "The date from which to calculate time from. If not set, the current date and time will be used. Set `null` or an\nempty value to render nothing. A value that cannot be read renders nothing either, and says so in the console.\n\nA string is read as a **calendar day** when it carries no time of day (`2026-08-03`, `2026-08`, `2026`) and as an\n**exact instant** when it does (`2026-08-03T10:30:00Z`). A calendar day counts from its local midnight, so the\nphrase does not flip to the neighboring day depending on the viewer's zone. Use the ISO 8601 format either way — to\nserialize a `Date`, use\n[`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)."
      },
      {
        "name": "display",
        "property": "display",
        "type": "'short' | 'long' | 'narrow'",
        "default": "'long'",
        "description": "Determines how to display the result, from the most verbose form down to the shortest. Some\nlocales render `short` and `narrow` alike."
      },
      {
        "name": "numeric",
        "property": "numeric",
        "type": "'auto' | 'always'",
        "default": "'auto'",
        "description": "When `auto`, values such as \"yesterday\" and \"tomorrow\" will be shown when possible. When `always`, values such as\n\"1 day ago\" and \"in 1 day\" will be shown."
      },
      {
        "name": "sync",
        "property": "sync",
        "type": "boolean",
        "default": "false",
        "description": "Keep the displayed value up to date as time passes."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [
      {
        "name": "getPropertyDescriptor",
        "static": true,
        "parameters": [
          {
            "name": "name",
            "type": "PropertyKey"
          },
          {
            "name": "key",
            "type": "string | symbol"
          },
          {
            "name": "options",
            "type": "PropertyDeclaration"
          }
        ],
        "returns": "PropertyDescriptor | undefined",
        "description": "Wraps the accessor of reflected properties so they always hold a valid value, as a native\nreflected IDL attribute does (`button.type = undefined` reads `submit`):\n\n- A property that declares `useDefault` takes the first value set on an element for its\n  default. That value is its field initializer's: the constructor has finished before markup,\n  a framework or any other code can set anything. Every later `null` or `undefined` means what\n  a dropped prop means on a native element — the attribute is removed: with the attribute\n  there, it is removed and Lit's `useDefault` restores the default without writing it; without\n  one, the property is set to the default. A value set and cleared again before the element\n  updates still writes the default once, from the pending reflection.\n- A Boolean is coerced with `Boolean()`, so `undefined` is `false`.\n\nLit's `useDefault` keeps the initial default out of the DOM. Setting the default explicitly\nwrites it, as `button.type = 'submit'` writes `type`."
      }
    ],
    "events": [],
    "slots": [],
    "cssProperties": [],
    "parts": [],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/relative-time/relative-time.js';",
  "react": {
    "component": "EdRelativeTime",
    "import": "import EdRelativeTime from '@eurodata/eurodata-ui/dist/react/relative-time/index.js';"
  }
}