टाइमलाइन

अवलोकन

link

Web

tanrei-timeline

schedule

SwiftUI

TanreiTimeline

radio_button_unchecked

Jetpack Compose

TanreiTimeline

radio_button_unchecked

Flutter

TanreiTimeline

radio_button_unchecked

React Native

Timeline

radio_button_unchecked

इससे जनरेट किया गया: docs/status/status.json, specs/timeline.spec.json

जो हुआ उसका रिकॉर्ड

1. 22 सितंबर 2026

   स्तर के अनुसार टेक्स्ट स्टाइल

   टेक्स्ट स्टाइल के नाम अब उनके स्तर से आते हैं, और हर कोने को स्मूद किया जा सकता है।

2. 21 सितंबर 2026

   ऐसी शब्दावली जिसका विस्तार किया जा सकता है

   डिज़ाइन लेयर किसी सीरीज़ में एक स्टेप या किसी अक्ष में एक मान जोड़ सकती है, वजह बताकर।

3. 19 सितंबर 2026

   विकास शुरू

   टोकन पाइपलाइन, स्पेक का स्कीमा और पहला स्पेक तैयार हैं।

तीन चीज़ें एक रेखा से जुड़े निशानों के रूप में बनती हैं। फ़र्क़ इसमें है कि पाठक उनके साथ क्या करता है:

कंपोनेंट	यह क्या है	मार्कर	स्थिति के बारे में क्या कहता है	इनपुट लेता है
चरण	वह प्रक्रिया जिसे एक-एक करके पूरा किया जाता है	चरण के नंबर वाली रिंग	कुछ नहीं	कभी नहीं
टाइमलाइन	जो हुआ और जो आगे होना है, उसका रिकॉर्ड	एक बिंदु या ग्लिफ़, नंबर कभी नहीं	चाहें तो, कि हर घटना कहाँ तक पहुँची है	कभी नहीं
स्टेपर	प्रॉडक्ट के चलाए फ़्लो में व्यक्ति कहाँ है	एक नंबर या चेक	व्यक्ति की अपनी जगह	हाँ

टाइमलाइन अपनी घटनाओं को कभी नंबर नहीं देती, उनका क्रम नहीं बदलती और उन्हें नहीं छिपाती, और वह उनके समय नहीं पढ़ती। क्रम वही रहता है जो आप देते हैं।

इस्तेमाल

link

वेब पर टाइमलाइन कोई एलिमेंट नहीं, आपकी अपनी क्रम वाली लिस्ट पर लगी एक क्लास है। लिस्ट किसी स्क्रिप्ट के चलने से पहले ही दस्तावेज़ की लिस्ट है, अपने <time> एलिमेंट के साथ, और स्टाइलशीट के बिना यह ब्राउज़र की नंबर वाली लिस्ट है, जिसमें तारीख़ वाले पैराग्राफ़ हैं।

SwiftUI, Compose, Flutter और React Native नियोजित हैं: इस पेज के शुरू में हर प्लैटफ़ॉर्म के साथ दिए गए नाम वे हैं जो स्पेक उन्हें देता है, और वहाँ अभी कुछ उपलब्ध नहीं है। React में भी अभी Timeline कंपोनेंट नहीं है, इसलिए क्लास वाली लिस्ट इस्तेमाल करें।

<link rel="stylesheet" href="@tanrei/web/tokens.css" />
<link rel="stylesheet" href="@tanrei/web/icons.css" />
<link rel="stylesheet" href="@tanrei/web/timeline.css" />

<!-- लॉग: वे घटनाएँ जो बस हुईं। -->
<ol class="tanrei-timeline" role="list" aria-label="रिलीज़ का इतिहास">
  <li>
    <time class="tanrei-timeline-time" datetime="2026-09-19">19 सितंबर 2026</time>
    <p class="tanrei-timeline-title">विकास शुरू</p>
    <p>टोकन पाइपलाइन, स्पेक का स्कीमा और पहला स्पेक तैयार हैं।</p>
  </li>
</ol>

<!-- योजना: हर घटना की एक स्थिति है, आकार में और आपके शब्दों में। -->
<ol class="tanrei-timeline" role="list" data-size="large" aria-label="रोडमैप">
  <li data-status="done" data-status-label="पूरा हुआ">
    <!-- यह समय का कोई पल नहीं है: पैराग्राफ़, time एलिमेंट नहीं। -->
    <p class="tanrei-timeline-time">Wave 1</p>
    <!-- वह शीर्षक जो पेज की हेडिंग है: वह अपना रोल और स्तर बनाए रखता है। -->
    <h3 id="wave-1">पहले दिन के कंट्रोल</h3>
    <p>बटन, फ़ील्ड, चयन के कंट्रोल और लिस्ट।</p>
  </li>
  <li data-status="current" data-status-label="जारी है">
    <p class="tanrei-timeline-time">Wave 2</p>
    <h3 id="wave-2">नेविगेशन और ओवरले</h3>
  </li>
  <li data-status="upcoming" data-status-label="शुरू नहीं हुआ">
    <!-- मार्कर में आपका अपना ग्लिफ़। -->
    <span class="tanrei-timeline-marker tanrei-icon" aria-hidden="true">flag</span>
    <p class="tanrei-timeline-time">Wave 3</p>
    <h3 id="wave-3">ख़ास काम के कंपोनेंट</h3>
  </li>
</ol>

<script type="module">
  // वैकल्पिक: जो एक घटना जारी है, उसे लिस्ट के मौजूदा आइटम के रूप में चिह्नित करती है, और डीबग रिपोर्ट जोड़ती है।
  // `@tanrei/web` भी इसे लोड करता है।
  import '@tanrei/web/timeline';
</script>

import '@tanrei/web/timeline.css';
import '@tanrei/web/timeline';

<ol className="tanrei-timeline" role="list" aria-label="रिलीज़ का इतिहास">
  <li>
    <time className="tanrei-timeline-time" dateTime="2026-09-19">19 सितंबर 2026</time>
    <p className="tanrei-timeline-title">विकास शुरू</p>
    <p>टोकन पाइपलाइन, स्पेक का स्कीमा और पहला स्पेक तैयार हैं।</p>
  </li>
</ol>

प्रॉपर्टी	वेब पर
label	aria-label (या लिस्ट से पहले की हेडिंग का नाम लेने वाला aria-labelledby)
size: large	data-size="large"
density: compact	data-density="compact"
घटना	<li>
datetime वाला time	<time class="tanrei-timeline-time" datetime="…">, जिसमें आपके लिखे शब्द रहते हैं
वह time जो समय का कोई पल नहीं है	<p class="tanrei-timeline-time">
title	class="tanrei-timeline-title" वाला एलिमेंट (एक <p>)
title स्लॉट	एक हेडिंग (h2 से h6), जो घटना की शुरुआत में या उसके समय के बाद आती है
status	data-status="done", "current" या "upcoming"
statusLabel	data-status-label
icon	आइटम के पहले चाइल्ड के रूप में <span class="tanrei-timeline-marker tanrei-icon" aria-hidden="true">

लिस्ट पर role="list" लिखें: एक ब्राउज़र इंजन उस लिस्ट से लिस्ट के सिमैंटिक्स हटा देता है जिसके मार्कर हटा दिए गए हों।

समय आपका है। उसे अपने पाठक की भाषा, कैलेंडर और फ़ॉर्मैट में लिखें, और वही पल मशीनों के लिए datetime में रखें। टाइमलाइन कुछ भी फ़ॉर्मैट नहीं करती: “2 घंटे पहले” तब तक वैसा ही रहता है जब तक आप उसे न बदलें।

स्पेक

link

योजना: पूरा हुआ, पूरा हुआ, जारी, आगे

1. Wave 0

   बुनियादी बातें

   टोकन, थीमिंग, टाइपोग्राफ़ी, आइकन, सरफ़ेस और स्टेट के प्रिमिटिव।

2. Wave 1

   पहले दिन के कंट्रोल

   बटन, फ़ील्ड, चयन के कंट्रोल और लिस्ट।

3. Wave 2

   नेविगेशन और ओवरले

   ड्रॉअर, टैब, डायलॉग, मेन्यू और शीट।

4. Wave 3

   ख़ास काम के कंपोनेंट

   पिकर, कैरसेल और वह सब जो किसी दस्तावेज़ साइट को चाहिए।

आपके अपने ग्लिफ़, और एक compact लॉग

1. receipt_long

   सोमवार, 09:41

   ऑर्डर दिया गया

2. local_shipping

   मंगलवार, 14:05

   रास्ते में है

3. home

   गुरुवार तक पहुँचने की उम्मीद

   डिलीवर हुआ

1. 10:12

   लेयर सेव हुई

2. 10:09

   छह स्कीम में कंट्रास्ट जाँचा गया

3. 10:02

   प्राइमरी रंग बदला गया

• मार्कर शुरुआती किनारे के एक बॉक्स में रहता है, जो medium पर 24 चौड़ा और large पर 28 होता है, और घटना की पहली पंक्ति के बीच की सीध में रहता है। स्थिति न हो तो वह एक छोटा बिंदु है; आपका ग्लिफ़ हो तो बारीक रेखा की एक रिंग, जिसमें वह ग्लिफ़ रहता है।
• स्थिति मार्कर का आकार बदलती है और कुछ नहीं: पूरी हो चुकी घटना के लिए चेक वाली रिंग, जारी घटना के लिए बिंदु वाला भरा हुआ गोला, और आगे आने वाली घटना के लिए ख़ाली रिंग। समय के रंग के अलावा टाइमलाइन बस यही एक रंग लाती है: भरा हुआ गोला।
• कनेक्टर हर मार्कर के बॉक्स से अगले बॉक्स तक चलता है और दोनों से थोड़ा पहले रुक जाता है। आख़िरी घटना में कनेक्टर नहीं होता, और किसी भी स्थिति की घटनाओं के बीच रेखा वही रहती है।
• समय घटना में सबसे पहले आता है, हल्के रंग में। उसके बाद शीर्षक आता है, बॉडी के साइज़ में और हेडिंग के वेट में। बॉडी आपका कॉन्टेंट है: दो ब्लॉक के बीच 8 की दूरी होती है।
• डेंसिटी: regular दो घटनाओं के बीच 16 रखती है और compact 8, एक-एक पंक्ति की घटनाओं के लंबे लॉग के लिए। वह सिर्फ़ यही दूरी बदलती है।
• साइज़ वही दो हैं जो प्रोज़ के हैं: कंट्रोल के बीच medium, और उस पेज पर large जिसका मक़सद ही टेक्स्ट है। मार्कर और कनेक्टर चरणों के मार्कर और कनेक्टर से मेल खाते हैं, इसलिए एक पेज पर दोनों एक ही परिवार के लगते हैं।

संरचना

भाग	विवरण
1 list	The ordered list itself: one column of events, as wide as its container gives it. It has no fill, no edge, no padding and no state of its own.
2 item	One event: its marker at the start, and beside it its content — a time, a title and a body, each optional. Nothing about an event answers a pointer, a press or focus.
3 marker	What begins an event, centred in a box at the start edge. A small filled dot for an event with no status; a hairline ring holding a glyph where the product names one; and for an event with a status a shape of its own: a ring holding a check for done, a filled circle holding a dot for the one under way, an empty ring for one still ahead. Decorative: the status is given in words.
4 connector · वैकल्पिक	The line from an event's marker to the next event's: the system's one hairline, on the marker column's centre line, kept a small distance from both markers. It shows that the events are one course of time. Decorative. The last event has none.
5 time · वैकल्पिक	When the event happened or is due, as the product writes it ("19 September 2026", "09:41", "Q3", "Wave 1"): a short line in a quiet color, first in the event's content.
6 title · वैकल्पिक	What the event is, in a few words, set at the body's size in a heading weight. Text of its event and not a heading, unless the product gives a heading of its own as the title.
7 body · वैकल्पिक	What more there is to say: the product's content. Text placed directly takes the body's text style; long-form blocks are set as prose; a block that is not text takes the body's whole width.

प्रॉपर्टी

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
label	string	""	The list's accessible name, in the product's language ("Release history"). Not drawn. Give one where no heading directly before the timeline already says what it records.
size	medium | large	"medium"	The size of the events' text, in prose's two sizes. Medium sets the body in the interface's own text style, for a timeline among controls: a panel, a card, a record's activity. Large sets it in the style for long reading, for a page whose purpose is the text: a changelog, a plan. A timeline inside a prose is given that prose's size. A design system may add values.
density	regular | compact	"regular"	How far apart the events are. Regular is for events with a body, or few of them. Compact halves the space between events, for a long log of one-line events. It changes that space only. A design system may add values.

आइटम

वे आइटम के प्रकार जिन्हें कंपोनेंट दोहराता है। फ़िक्स्चर अपने आइटम क्रम से सूचीबद्ध करता है; हर प्लैटफ़ॉर्म हर प्रकार को अपने तरीक़े से नाम देता है।

event

One event of the timeline: a time, a title, a body, and where the events have them a status and a glyph. Its place comes from the order the product gives the events in.

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
time	string	""	When, as the product writes it for its reader, in the product's language, calendar and format ("19 September 2026", "2 hours ago", "Q3", "Wave 1"). Drawn first in the event. The timeline does not format, translate or compare it.
datetime	string	""	The same moment for a machine: a date, a time or a period in the form the platform's time element takes (ISO 8601: "2026-09-19", "2026-09-19T09:41:00Z"). Not drawn. With it the time is exposed as a time; without it, as text — which is right for a time that is not a moment ("Wave 1").
title	string	""	What the event is, in a few words. Plain text: read with the event, and not a heading. A title that is a heading of the page is given in the title slot instead.
status	none | done | current | upcoming	"none"	Where the event stands, for a timeline whose events have a state: done (finished), current (under way now), upcoming (not begun). None, the default, is an event that simply happened: a log has no statuses. It changes the marker's shape and nothing else; the words are statusLabel's.
statusLabel	string	""	The status in words, in the product's language ("Done", "In progress", "Planned"), read by assistive technology before the event's time and title and not drawn. Needed with every status but none, unless the event's own text already says it. Ignored while status is none.
icon	string	""	A glyph of the system's icon set, by name, drawn in the marker in place of the dot, the check or the inner mark (a release's tag, a comment's bubble). Decorative.

स्लॉट	विवरण
title	The title as content of the product's own: a heading of the level the page's outline needs (so the event is in the page's table of contents and can be linked to), or text with a link or a tag in it. Drawn in the title's text style whatever its level; its role and level are kept. Takes the place of the title prop.

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
आइटम	li	TanreiTimelineEvent	TanreiTimelineEvent	TanreiTimelineEvent	TimelineEvent
time · प्रॉपर्टी	tanrei-timeline-time	time	time	time	time
datetime · प्रॉपर्टी	datetime	date	dateTime	dateTime	dateTime
title · प्रॉपर्टी	tanrei-timeline-title	title	title	title	title
status · प्रॉपर्टी	data-status	status	status	status	status
statusLabel · प्रॉपर्टी	data-status-label	statusLabel	statusDescription	statusSemanticLabel	statusAccessibilityLabel
icon · प्रॉपर्टी	tanrei-timeline-marker	icon	icon	icon	icon
टिप्पणियाँ	An <li> of the list. The time is the item's <time class="tanrei-timeline-time" datetime="…">, or a <p> of that class where it is not a moment. The title is the next child where it is a heading (h2 to h6) or carries class="tanrei-timeline-title": the spec's title prop and its title slot are the same element on this platform, told apart by the tag the product chose. Every other child is the body. data-status is done, current or upcoming; data-status-label carries the words. A glyph is <span class="tanrei-timeline-marker tanrei-icon" aria-hidden="true">flag</span> as the item's first child.	TanreiTimelineEvent(title:, time:, date:, status:, statusLabel:, icon:) { body }; a heading title is the title: view builder, marked with the header trait by the product.	TanreiTimelineEvent(title, time, dateTime, status, statusDescription, icon) { body } inside the timeline's scope.	TanreiTimelineEvent(title:, time:, dateTime:, status:, statusSemanticLabel:, icon:, child:); titleWidget: takes a heading of the product's own.	<TimelineEvent title="…" time="…" status="done" statusAccessibilityLabel="Done">body</TimelineEvent>.

स्टेट

व्यवहार

EARS रूप में लिखी गई आवश्यकताएँ। हर प्लैटफ़ॉर्म के इम्प्लीमेंटेशन को इन ID के आधार पर टेस्ट किया जाता है। आवश्यकताओं का पाठ स्पेक फ़ाइल से ज्यों का त्यों, अंग्रेज़ी में दिखाया गया है।

ID	आवश्यकता
TML-1	THE timeline SHALL lay out its events in one column, in the order they are given, each event a row of two parts: its marker, in a column at the timeline's start edge, and its content — its time, its title and its body, those it has, in that order — beside it. The marker column SHALL be as wide as the marker's box of the size (comp.timeline.marker.height.medium for medium, comp.timeline.marker.height.large for large); every event's content SHALL begin at one edge, comp.timeline.marker.gap after that column, and run to the timeline's end edge. THE timeline SHALL draw no fill, no edge and no elevation of its own and SHALL add no padding around itself.
TML-2	THE timeline SHALL separate the end of one event from the beginning of the next by the item gap of its density (comp.timeline.item.gap.regular for regular, comp.timeline.item.gap.compact for compact), and SHALL change nothing else with density. THE timeline SHALL keep the order the product gives: it SHALL NOT sort, reverse, group, number, hide, collapse or page its events, and SHALL NOT read their times to do so.
TML-3	WHERE an event has a time THE timeline SHALL draw it first in the event's content, as the product wrote it, in the time style of its size (comp.timeline.time.typescale.medium for medium, comp.timeline.time.typescale.large for large) and in comp.timeline.time.color, wrapping and never cut, and SHALL begin what follows it in the event comp.timeline.time.gap below it. WHERE datetime is not empty THE timeline SHALL expose the time as a time whose machine-readable value is datetime, and SHALL NOT draw datetime; WHERE it is empty the time is text. THE timeline SHALL NOT format, translate, shorten or update a time: a time that changes as the clock moves ("2 hours ago") is the product's to change.
TML-4	WHERE an event has a title THE timeline SHALL draw it after the time, in comp.timeline.title.typescale.medium for medium (comp.timeline.title.typescale.large for large) and the content color of the surface the timeline sits on, SHALL wrap it and never cut it, and SHALL begin the event's body comp.timeline.title.gap below it. A title given as text SHALL be exposed as text of its event and SHALL NOT be a heading; WHERE the product gives the title as content of its own in the event's title slot THE timeline SHALL draw it as any title, in the same text style whatever its level, in place of the title prop, and SHALL change neither its role nor its level, nor the roles of what it holds (a link, a tag). THE timeline SHALL set the title's letter-spacing by the script of its text, as every title is set (PRS-20): no negative letter-spacing WHERE its language is Chinese, Japanese or Korean, and none WHERE its script joins its letters or stacks marks on them.
TML-5	THE timeline SHALL draw the content an event is given as that event's body and SHALL give it comp.timeline.body.typescale.medium for medium (comp.timeline.body.typescale.large for large) as the text style its text takes where nothing inside sets another, and no color of its own: its text takes the content color of the surface the timeline sits on. The body SHALL wrap and SHALL never be cut or limited to a number of lines. WHERE the body holds more than one block THE timeline SHALL separate two blocks that follow each other by comp.timeline.body.gap, SHALL lay long-form blocks out as prose of the timeline's size, and SHALL give every block that is not text — a code block, a table, a picture, any component — the body's whole inline size, such a block scrolling inside its own box when its content cannot shrink (PRS-15).
TML-6	THE timeline SHALL draw each event's marker centred in a square box whose side is the marker's box of the size (TML-1), the box at the top of the event with its centre on the centre of the event's first line of text; WHERE the box is taller than that line THE timeline SHALL lower the event's content by half the difference, so that no marker reaches into the space above its event. WHILE an event's status is none and its icon is empty THE marker SHALL be a filled circle of diameter comp.timeline.marker.dot.size in comp.timeline.marker.dot.color, a circle whatever corners a ring has. WHILE its status is none and its icon is not empty THE marker SHALL be a ring — the whole box, with corners comp.timeline.marker.shape, never larger than half the box's side and eased by sys.shape.corner-smoothing, no fill, and an edge comp.timeline.marker.outline.width wide in comp.timeline.marker.outline.color drawn inside the box — holding that glyph at its centre (TML-8). Every marker SHALL be kept from assistive technology.
TML-7	WHILE an event's status is done THE timeline SHALL draw its marker as the ring of TML-6 holding the icon set's check glyph, or the event's own glyph where icon is not empty, in comp.timeline.marker.icon.color. WHILE its status is current THE marker SHALL be the whole box filled with comp.timeline.marker.current.container.color, with the ring's corners and no edge, holding a filled circle of diameter comp.timeline.marker.dot.size, or the event's own glyph, in comp.timeline.marker.current.icon.color. WHILE its status is upcoming THE marker SHALL be the ring of TML-6, empty, or holding the event's own glyph in comp.timeline.marker.icon.color. The three SHALL differ in shape and not only in color — a mark in a ring, a filled circle, an empty ring — and a status SHALL change the marker only: the event's time, title, body and connectors are drawn as every other event's. Any number of events may have any status; THE timeline SHALL NOT derive one event's status from another's or from its time.
TML-8	WHERE a marker holds a glyph THE timeline SHALL draw it in a box of comp.timeline.marker.icon.size at the centre of the marker, in comp.timeline.marker.icon.color (comp.timeline.marker.current.icon.color on the marker of a current event), with sys.icon.family.unselected and sys.icon.fill.unselected, sys.icon.weight and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max, and SHALL keep it from assistive technology.
TML-9	WHILE an event is followed by another event THE timeline SHALL draw a connector between their two markers: a straight line comp.timeline.connector.thickness thick in comp.timeline.connector.color, on the centre line of the marker column, from comp.timeline.connector.gap below the bottom of the upper marker's box to comp.timeline.connector.gap above the top of the lower marker's box, through the space between the two events, however tall the upper event's content is. THE timeline SHALL draw no connector after the last event and none for a timeline of one event; a connector SHALL take no room in the layout, SHALL never be drawn over a marker or over content, SHALL be the same line between events of any status, and SHALL be kept from assistive technology.
TML-10	THE timeline SHALL lay itself out as a block in the flow of its container: it SHALL take the whole inline size the container gives it, with its start edge on the start edge of the text around it; it SHALL bring no outer space of its own (PRS-15: the space between it and its neighbours is its container's), SHALL never be wider than its container, SHALL have no minimum width and no maximum width, and SHALL NOT scroll. WHILE the timeline sits in a prose that keeps a measure THE timeline SHALL take that prose's full width as a block that is not text (PRS-18).
TML-11	THE timeline SHALL NOT take pointer, touch or keyboard input, SHALL NOT take focus or be a stop in the focus order, and SHALL NOT change anything it draws under a pointer, a press or focus: an event has no hovered, focused, pressed, selected or disabled state, a marker is not a control, and the timeline emits no event of its own. What the product places in a title slot or a body — a link, a Button, a tag — takes input by its own spec, and text in a time, a title and a body SHALL remain selectable where the platform lets text be selected.
TML-12	THE timeline SHALL be exposed to assistive technology as an ordered list of as many items as it has events, named by label where label is not empty, and each event as one item of that list holding, in this order, its status in words, its time, its title and its body. WHILE an event's status is not none and its statusLabel is not empty THE timeline SHALL expose statusLabel as text before the event's time, set apart so that it is read as a phrase of its own ("Done, 19 September 2026, …"), and SHALL NOT draw it; WHILE status is none it SHALL ignore statusLabel. WHILE exactly one event of the timeline has the status current THE timeline SHALL also expose that event as the current item of its list, in the platform's own way; with none or several it SHALL expose no item as current. THE timeline SHALL NOT expose a status in any other way, and SHALL add no role to a time without datetime, to a title given as text or to anything in a body.
TML-13	WHEN label, or an event's time, datetime, title, status, statusLabel, icon or body changes, or an event is added, removed or moved, THE timeline SHALL draw and expose the new value at once, without a motion, and SHALL NOT announce the change by itself and SHALL NOT scroll to it.
TML-14	WHILE the text size is enlarged THE timeline SHALL grow each time, title and body with it, keep every marker's box at the marker's box of the size and the dot and the glyph at comp.timeline.marker.dot.size and comp.timeline.marker.icon.size, each still centred on its event's first line (TML-6), and keep comp.timeline.marker.gap, the item gap, comp.timeline.time.gap, comp.timeline.title.gap, comp.timeline.body.gap and comp.timeline.connector.gap as they are; it SHALL wrap, set no fixed height on an event, lose no content when the reader raises line height, paragraph spacing, letter spacing or word spacing, and SHALL need no horizontal scrolling at a width of 320 points with text at 200 %, except inside a block that scrolls in its own box (TML-5).
TML-15	WHERE the timeline is placed inside an event's body of another timeline THE timeline SHALL draw itself as a timeline of its own in the body's width, and in debug builds SHALL report that timelines are nested: events inside an event are a list of prose in the body.
TML-16	WHERE the platform draws with a person's own forced colors (the web's forced-colors mode, and a platform's equivalent where it has one) THE timeline SHALL draw each dot, each ring, each glyph and each connector in the platform's text color at their own sizes and widths, the marker of a current event as a circle filled with that text color whose inner mark or glyph is in the platform's background color, and each time, title and body in the text color; the three statuses SHALL then still differ by shape (TML-7), and nothing else the timeline draws relies on a fill.
TML-17	WHERE the layout direction is right-to-left THE timeline SHALL mirror its two parts and apply its spaces by logical start and end, so that the marker column and the connectors are at the right and each event's content is at its left, beginning at one edge and running to the timeline's left edge.
TML-18	THE timeline SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the timeline is shown THE timeline SHALL draw itself for the new direction at once, without a motion of its own, keeping what it shows.
TML-19	WHERE the layout direction is right-to-left THE timeline SHALL draw the glyph of a marker mirrored left to right exactly when the system's icon set marks that glyph's name as mirrored or the product forces mirroring for that use, and unmirrored when the product forbids it: the icon helper mirrors the glyph inside its own box, about the box's vertical centre line, changing neither its place, size, color and fill nor the order TML-17 gives. THE timeline SHALL NOT mirror a glyph itself. The dot, the ring and the check are never mirrored.
TML-20	THE timeline SHALL lay out an event's time, and a title given as text, each as text of its own direction, isolated from the text around it: it takes the base direction of its first strong character, or the layout direction where it has none, so that a date written in digits, a version and a clock time keep their own order in a right-to-left layout and reorder nothing beside them; THE timeline SHALL still place the time and the title and align their lines by the layout direction, not by the text's own. The body's direction is its content's.
TML-21	WHEN size or density names a value that the active design system does not have THE timeline SHALL render with the default value's tokens, and WHEN an event's status names a value this spec does not have THE timeline SHALL draw that event as for none; in debug builds it SHALL report the unknown value.
TML-22	IF the timeline holds no event THE timeline SHALL draw nothing, take no space and expose nothing: what stands in an empty timeline's place is the product's (an empty state). IF an event has neither a time, a title nor a body THE timeline SHALL still draw its marker and count it in the list's items, and in debug builds report that an event is empty. WHILE an event's status is not none and its statusLabel is empty THE timeline SHALL still draw it and in debug builds report that a status is not given in words; IF statusLabel is not empty while status is none THE timeline SHALL ignore it and in debug builds report it.

प्लैटफ़ॉर्म के अनुसार नामों का मिलान

पैरिटी का मतलब एक जैसे API नहीं है। हर प्लैटफ़ॉर्म एक ही कॉन्ट्रैक्ट को अपने तरीक़े से व्यक्त करता है।

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
कंपोनेंट	tanrei-timeline	TanreiTimeline	TanreiTimeline	TanreiTimeline	Timeline
label · प्रॉपर्टी	aria-label	label	label	semanticLabel	accessibilityLabel
size · प्रॉपर्टी	data-size	size	size	size	size
density · प्रॉपर्टी	data-density	density	density	density	density
टिप्पणियाँ	It is the form the steps take. A class on the product's own ordered list, not an element — <ol class="tanrei-timeline" role="list"> with <li> children — styled by one optional stylesheet of the package, @tanrei/web/timeline.css, whose selectors are wrapped in :where() so one class on the product's side wins. The list stays the document's list: it is an ordered list with <time> elements before any script runs and for whatever reads the page as built, a renderer's <ol> needs one class and no wrapper, and there is nothing to define, so nothing changes place after the page loads; without the stylesheet it is the browser's numbered list of dated paragraphs. label is aria-label (or aria-labelledby naming the heading before it); data-size="large" and data-density="compact" are the size and the density. The marker is the item's ::before — the dot, the ring, the filled circle with its inner dot, and the done event's check as the icon font's check ligature — unless the item's first child is a .tanrei-timeline-marker, which then is the marker and holds the glyph through the package's .tanrei-icon helper; the connector is the item's ::after, absolutely placed, with pointer-events: none. list-style: none removes list semantics in one engine's accessibility tree, which is why the contract writes role="list" on the <ol>. The status in words (TML-12) is generated content of the item's first text part, content: attr(data-status-label) ", ", clipped out of sight and read with the item; the test of TML-12 is run with a screen reader in each engine, and where an engine does not read it the package's script writes a visually hidden <span> instead. The same script, where it is loaded, sets aria-current="true" on the item while exactly one has data-status="current", and adds the debug reports of TML-15, TML-21 and TML-22; without it no item is exposed as current, and the words still are. A time and a title are dir="auto"-like through unicode-bidi: plaintext with physical alignment by :dir() (TML-20). TML-6 uses 1lh of the item's first line. Inside a .tanrei-prose the list is not an island (it is a class on an <ol>), so prose's own rules keep reaching each body, and timeline.css takes back from prose.css what a timeline draws itself: the list's inset, its markers, the item gap and the measure on the list. Under forced-colors: active the markers and the connector are CanvasText, and the current marker a CanvasText disc with a Canvas mark (TML-16). React: Timeline and TimelineEvent render the same <ol> and <li>; TimelineEvent takes time, dateTime, title (text, rendered as <p class="tanrei-timeline-title">) or a heading child, status, statusLabel and icon.	TanreiTimeline(label:, size:, density:) { TanreiTimelineEvent(…) … }. A VStack of rows, not a List (no row chrome, no selection). Each event is one accessibility element that contains its children, whose label begins with the status label; date is a Date handed to the element's accessibility value where the platform has a use for it.	TanreiTimeline(label, size, density) { TanreiTimelineEvent(…) … }. A Column with collectionInfo and collectionItemInfo semantics, so the events are a list of that many items; the connector is drawn behind the rows with drawBehind. No clickable and no focusable modifier.	TanreiTimeline(semanticLabel:, size:, density:, events: [TanreiTimelineEvent(…), …]). A Column, not a ListView: the timeline does not scroll (TML-10). The connector is a CustomPaint behind the rows. Each event is a Semantics(container: true) whose label begins with the status label.	<Timeline accessibilityLabel="Release history"> with <TimelineEvent> children; accessibilityRole="list" on the container. Each event is one accessible element whose label is composed from the status label, the time and the title. Follows the app's direction where an ancestor's is not known.

टोकन

टोकन	किसका एलियास	रिज़ॉल्व किया गया मान (लाइट)
--tanrei-comp-timeline-body-gap	sys.space.space100	8px
--tanrei-comp-timeline-connector-color	sys.color.outline-variant	#000000 · 8%
--tanrei-comp-timeline-connector-gap	sys.space.space50	4px
--tanrei-comp-timeline-connector-thickness	sys.border.hairline	1px
--tanrei-comp-timeline-item-gap-compact	—	8px
--tanrei-comp-timeline-item-gap-regular	—	16px
--tanrei-comp-timeline-marker-current-container-color	sys.color.primary	#1b1b1b
--tanrei-comp-timeline-marker-current-icon-color	sys.color.on-primary	#ffffff
--tanrei-comp-timeline-marker-dot-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-timeline-marker-dot-size	sys.space.space100	8px
--tanrei-comp-timeline-marker-gap	sys.space.space150	12px
--tanrei-comp-timeline-marker-height-large	—	28px
--tanrei-comp-timeline-marker-height-medium	—	24px
--tanrei-comp-timeline-marker-icon-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-timeline-marker-icon-size	sys.icon.extra-small	16px
--tanrei-comp-timeline-marker-outline-color	sys.color.outline-variant	#000000 · 8%
--tanrei-comp-timeline-marker-outline-width	sys.border.hairline	1px
--tanrei-comp-timeline-marker-shape	sys.shape.corner.full	9999px
--tanrei-comp-timeline-time-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-timeline-time-gap	sys.space.space25	2px
--tanrei-comp-timeline-title-gap	sys.space.space50	4px
--tanrei-comp-timeline-body-typescale-large	sys.typescale.body-large	400 16px/1.625
--tanrei-comp-timeline-body-typescale-medium	sys.typescale.body	400 14px/1.5714
--tanrei-comp-timeline-time-typescale-large	sys.typescale.body	400 14px/1.5714
--tanrei-comp-timeline-time-typescale-medium	sys.typescale.body-small	400 13px/1.5385
--tanrei-comp-timeline-title-typescale-large	sys.typescale.heading-5	500 16px/1.5
--tanrei-comp-timeline-title-typescale-medium	sys.typescale.heading-6	500 14px/1.4286

फ़िक्स्चर

मानक रेंडरिंग। हर प्लैटफ़ॉर्म हर फ़िक्स्चर का स्नैपशॉट एक ही ID से लेता है, ताकि नतीजों की तुलना की जा सके।

size: medium (12)

dated

label: Release history items: 3

titles-only

label: Release history items: 3

plan

label: Roadmap items: 4

plan-icons

label: Order 1042 items: 3

icons

label: Activity items: 3

compact

label: Activity density: compact items: 4

long-bodies

label: The history of an account items: 2

no-time

label: What happened items: 3

single

label: Release history items: 1

dated-rtl

label: سجل الإصدارات direction: rtl items: 2

plan-rtl

label: خارطة الطريق direction: rtl items: 3

ltr-times-rtl

label: سجل الإصدارات direction: rtl items: 2

size: large (2)

large

label: Release history size: large items: 2

large-plan-compact

label: Roadmap size: large density: compact items: 3

इससे जनरेट किया गया: specs/timeline.spec.json, tokens/comp/timeline.tokens.json, design/tokens/

प्रोज़ में

link

.tanrei-prose के भीतर टाइमलाइन कोई अलग टापू नहीं है: हर बॉडी के पैराग्राफ़, लिस्ट, लिंक और इनलाइन कोड तब भी प्रोज़ के ही रहते हैं। टाइमलाइन प्रोज़ की पूरी चौड़ाई लेती है, इसलिए बॉडी के भीतर का कोड ब्लॉक पूरा कॉलम लेता है, और बॉडी के भीतर के पैराग्राफ़ तब भी पंक्ति की लंबाई की सीमा पर रुकते हैं। @tanrei/web/prose.css में टाइमलाइन के नियम शामिल हैं, इसलिए प्रोज़ वाले पेज को दूसरी स्टाइलशीट नहीं चाहिए।

वेब क्या अलग ढंग से बनाता है

link

• घटना का टेक्स्ट एलिमेंट (<p>) में लिखें: आइटम में सीधे लिखे गए टेक्स्ट को समय या शीर्षक के नीचे का गैप नहीं दिया जा सकता।
• पूरी हो चुकी घटना का चेक आइकन सेट का check है, इसलिए उसे icons.css और आइकन फ़ॉन्ट चाहिए। उनके बिना रिंग ख़ाली रहती है।
• प्रोज़ के बाहर लंबी बॉडी (लिस्ट, उद्धरण) वैसे ही रखी जाती है जैसे आपके पेज पर कहीं भी, प्रोज़ की तरह नहीं।
• जो साइज़ या डेंसिटी कोई डिज़ाइन सिस्टम जोड़ता है, वह तब तक डिफ़ॉल्ट की तरह बनती है जब तक वह सिस्टम उसके लिए नियम न दे।
• पैकेज की स्क्रिप्ट के बिना कोई आइटम लिस्ट के मौजूदा आइटम के रूप में चिह्नित नहीं होता। स्थिति तब भी शब्दों में पढ़ी जाती है।

दिशानिर्देश

link

करें

link

• घटनाएँ उस क्रम में दें जिसकी आपके पाठक को उम्मीद है: बदलावों के लॉग में सबसे नई पहले, और योजना में सबसे पुरानी पहले। टाइमलाइन वही क्रम रखती है।
• स्थिति वाली हर घटना को data-status-label में उसके शब्द दें, अपने पाठक की भाषा में।
• जहाँ स्थिति हर पाठक के लिए मायने रखती है, वहाँ उसे शब्दों में भी दिखाएँ: शीर्षक या बॉडी में एक टैग।
• सापेक्ष समय (“2 घंटे पहले”) को datetime में उसका सटीक पल दें।
• एक-एक पंक्ति की घटनाओं के लंबे लॉग के लिए compact इस्तेमाल करें, और पुरानी घटनाएँ दिखाने के लिए लिस्ट के बाद एक बटन रखें।

न करें

link

• किसी प्रक्रिया के लिए टाइमलाइन इस्तेमाल न करें। पाठक को जो करना है, उसे नंबर देना चरणों का काम है।
• व्यक्ति जिस फ़्लो में है, उसमें उसकी जगह दिखाने के लिए इसे इस्तेमाल न करें: वह स्टेपर है, और मार्कर कोई कंट्रोल नहीं है।
• हर शीर्षक को हेडिंग न बनाएँ। चालीस घटनाओं वाला बदलावों का लॉग पेज की आउटलाइन भर देगा। हेडिंग वहाँ इस्तेमाल करें जहाँ हर घटना पेज का एक सेक्शन हो।
• घटना के भीतर टाइमलाइन न रखें। घटना के भीतर की घटनाएँ बॉडी में रखी एक लिस्ट हैं।
• कुछ विफल हुआ है, यह बताने के लिए अकेले मार्कर पर निर्भर न रहें। इसे घटना के शब्दों में और एक टैग से कहें।

सुलभता

link

रोल

list

लेबलिंग

An ordered list, named by label where the product gives one; where a heading directly before the timeline says what it records, no label is needed. Each event is a list item read as its status in words (statusLabel, where it has a status), its time, its title and its body, in that order. A time with datetime is exposed as a time; the markers and the connector are decorative and hidden. A title is text of its item, or the product's own heading where the product gave one. Where exactly one event is current, it is the list's current item.

न्यूनतम टार्गेट

दिखने वाला आकार छोटा होने पर भी हिट एरिया न्यूनतम टार्गेट साइज़ को पूरा करता है। minimum 32px · pointer 44px · spacing 8px · touch 48px

कीबोर्ड

कुंजियाँ	क्रिया

टिप्पणियाँ

• Not interactive: the timeline takes no input and no focus (TML-11), so there is no target of its own to size and minimumTarget holds trivially. What is pressable inside a title or a body meets the minimum target by its own spec.
• A status never rests on color alone (WCAG 1.4.1), and not on shape alone either. For a reader who sees, the three statuses are three shapes (TML-7), which forced colors keep (TML-16); for assistive technology each is statusLabel in words (TML-12). The component cannot tell whether an event's own text already says its status, so giving statusLabel is the product's to check. Where the status matters to every reader (a plan people decide by), show it in words too: a tag in the title or the body.
• Order is carried by structure, not by the drawing: the timeline is an ordered list (TML-12), so a reader who does not see the markers and the connector loses nothing, and a missing stylesheet costs only the look.
• A time is the product's words (TML-3). "2 hours ago" is read as written and goes stale as written; a product that shows relative times also gives datetime, so the exact moment is available to assistive technology and to the platform.
• Contrast: the timeline brings no color for a title or a body, so they have the contrast of the content color of the surface they sit on. The time, the dot and a ring's glyph are on-surface-variant, held to 4.5:1 on every surface tone by the token invariants; the current marker's mark is on-primary on primary, held to 4.5:1, and primary on every surface tone is held to 4.5:1, as primary-colored text is, so the filled marker is found on any of them. The ring and the connector are the decorative hairline and are not held to a ratio: an upcoming event's empty ring may be faint, which is why its status is also in words.
• A title is not a heading by default: a changelog of forty events would otherwise fill the page's outline. Where the events are the page's sections (one release per section), give each title as a heading in the title slot; its level is the page's, and the timeline does not change it (TML-4).
• A timeline does not announce an event that is added (TML-13). A feed that grows while the person watches is the product's to announce, in a live region around or beside the timeline, and its own to decide whether to interrupt.
• Text size, text spacing and reflow: TML-14. A long timeline is never cut, collapsed or paged by the component; hiding older events behind a control is the product's, with a Button after the list.

इससे जनरेट किया गया: specs/timeline.spec.json, tokens/sys/measure.tokens.json

कंपोनेंट क्या सँभालता है

link

• टाइमलाइन दस्तावेज़ की क्रम वाली लिस्ट ही रहती है: उतने आइटम की लिस्ट जितनी घटनाएँ हैं, और हर आइटम इस क्रम में पढ़ा जाता है: शब्दों में उसकी स्थिति, उसका समय, उसका शीर्षक और उसकी बॉडी।
• शब्दों में स्थिति समय से पहले पढ़ी जाती है और कहीं दिखाई नहीं जाती। मार्कर और कनेक्टर सजावटी हैं और छिपे रहते हैं।
• तीन स्थितियाँ तीन आकार हैं, तीन रंग नहीं, और फ़ोर्स्ड कलर्स में भी ऐसी ही रहती हैं।
• जहाँ ठीक एक घटना जारी है, वहाँ पैकेज की स्क्रिप्ट उसे लिस्ट के मौजूदा आइटम के रूप में चिह्नित करती है।
• datetime वाला समय दस्तावेज़ का अपना time एलिमेंट है।
• टेक्स्ट पाठक की सेटिंग के साथ बढ़ता है और रैप होता है। कुछ भी काटा, समेटा या पेजों में बाँटा नहीं जाता।

आपको क्या करना है

link

• लिस्ट पर role="list" लिखें, और उसे उससे पहले की हेडिंग से या aria-label से नाम दें।
• हर स्थिति के साथ data-status-label दें, जब तक घटना का अपना टेक्स्ट पहले से वह बात न कहता हो।
• तीनों ब्राउज़र इंजन के मौजूदा वर्शन में ये शब्द स्टाइलशीट के ज़रिए स्क्रीन रीडर तक पहुँचते हैं। पैकेज की स्क्रिप्ट के बिना इस्तेमाल किए जाने वाले किसी पुराने ब्राउज़र के लिए इन्हें ख़ुद लिखें, data-status-label की जगह, आइटम की शुरुआत में <span class="tanrei-timeline-status">पूरा हुआ, </span> के रूप में।
• जो घटना व्यक्ति के देखते-देखते जोड़ी जाती है, उसे अपने किसी लाइव रीजन में पढ़कर सुनवाएँ: टाइमलाइन ऐसा नहीं करती।