[css-values-5] Define ident()

css-values-5/Overview.bs

@@ -1791,6 +1791,94 @@ Security</h4>
 	''--foo: attr(foo type(&lt;number&gt;)); background-image: src(string(var(--foo)))''
 	needs to be invalid as well.
 
+<!-- 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><<ident-fn>></dfn> = ident(<<ident-args>>);
+	<dfn><<ident-args>></dfn> = [<<string>> | <<integer>> | <<ident>>]+
+	</pre>
+
+	Issue: 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: 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
+		.card[id] {
+			/* E.g. card1, card2, card3, … */
+			--id: attr(id);
+
+			view-transition-name: 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>
+
 <!-- Big Text: random
 
 ████▌   ███▌  █    █▌ ████▌   ███▌  █     █