[css-values-5] Define ident() (#11422)

* [css-values-5] Define ident()

* [css-values-5] Link up relevant issue

* [css-values-5] Fix dashed-ident example

* [css-values-5] Fix view-transition-name ident() example

* Update css-values-5/Overview.bs

---------

Co-authored-by: Tab Atkins Jr. <jackalmage@gmail.com>

css-values-5/Overview.bs

@@ -1794,6 +1794,7 @@ Security</h4>
 	''--foo: attr(foo type(&lt;number&gt;)); background-image: src(string(var(--foo)))''
 	needs to be invalid as well.
 
+
 <h4 id=attr-cycles>
 Cycles</h4>
 
@@ -1856,6 +1857,83 @@ makes the containing [=declaration=] [=invalid at computed-value time=].
 	</pre>
 </div>
 
+<!-- Big Text: ident() 
+
+████ ████▌  █████▌ █    █▌ █████▌   ██ ██
+ ▐▌  █▌  █▌ █▌     █▌   █▌   █▌    █▌   ▐█
+ ▐▌  █▌  █▌ █▌     ██▌  █▌   █▌   █▌     ▐█
+ ▐▌  █▌  █▌ ████   █▌▐█ █▌   █▌   █▌     ▐█
+ ▐▌  █▌  █▌ █▌     █▌  ██▌   █▌   █▌     ▐█
+ ▐▌  █▌  █▌ █▌     █▌   █▌   █▌    █▌   ▐█
+████ ████▌  █████▌ █▌   ▐▌   █▌     ██ ██
+-->
+
+<h3 id=ident>
+Constructing <<custom-ident>> values: the ''ident()'' function</h3>
+
+	<!-- https://github.com/w3c/csswg-drafts/issues/9141 -->
+
+	The <dfn>ident()</dfn> function is an [=arbitrary substitution function=]
+	that can be used to manually construct <<custom-ident>> values from several parts.
+
+	<pre class=prod>
+	<dfn function lt="ident()"><<ident()>></dfn> = ident( <<ident-arg>>+ )
+	<dfn><<ident-arg>></dfn> = <<string>> | <<integer>> | <<ident>>
+	</pre>
+
+	Issue(w3c/csswg-drafts#11426): Should we allow a fallback value?
+
+	The ''ident()'' function can be used as a value for any property or function argument
+	that accepts a <<custom-ident>>.
+
+	<div class=example>
+		In the following example,
+		each matched element gets a unique <dfn><<'view-timeline-name'>></dfn>
+		in the format of <code>"vtl-<em>number</em>"</code>.
+		The <code><em>number</em></code> is generated using ''sibling-index()''.
+
+		```css
+		.item {
+			/* vtl-1, vtl-2, vtl-3, … */
+			view-timeline-name: ident("vtl-" sibling-index());
+		}
+		```
+	</div>
+
+	While in many cases ''attr()'' with the <<attr-type>> set to <code>type(<<custom-ident>>)</code> will do,
+	''ident()'' can be used to construct a <<custom-ident>> using values that come from other elements.
+
+	<div class=example>
+		In the following example, the  ''ident()'' function uses a custom property
+		which is defined on a parent.
+
+		```css
+		.card[id] {
+			/* E.g. card1, card2, card3, … */
+			--id: attr(id);
+
+			view-transition-name: ident(var(--id));
+			view-transition-class: card;
+
+			h1 {
+				/* E.g. card1-title, card2-title, card3-title, … */
+				view-transition-name: ident(var(--id) "-title");
+				view-transition-class: card-title;
+			}
+		}
+		```
+	</div>
+
+	To generate a <<dashed-ident>>, put <code>"--"</code> as the first argument.
+
+	<div class=example>
+
+		```css
+		.element {
+			anchor-name: ident("--" attr(id));
+		}
+		```
+	</div>
 
 <!-- Big Text: random