[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
 
 ████▌   ███▌  █    █▌ ████▌   ███▌  █     █
@@ -3024,13 +3112,13 @@ Appendix A: Arbitrary Substitution Functions</h2>
 
 <!-- Big Text: invalid
 
-████ █    █▌ █▌   █▌  ███▌  █▌    ████ ████▌
+████ █    █▌ █▌   █▌  ███▌  █▌    ████ ████▌ 
  ▐▌  █▌   █▌ █▌   █▌ ▐█ ▐█  █▌     ▐▌  █▌  █▌
  ▐▌  ██▌  █▌ █▌   █▌ █▌  █▌ █▌     ▐▌  █▌  █▌
  ▐▌  █▌▐█ █▌ ▐▌   █  █▌  █▌ █▌     ▐▌  █▌  █▌
  ▐▌  █▌  ██▌  █  ▐▌  █████▌ █▌     ▐▌  █▌  █▌
  ▐▌  █▌   █▌  ▐▌ █   █▌  █▌ █▌     ▐▌  █▌  █▌
-████ █▌   ▐▌   ▐█    █▌  █▌ █████ ████ ████▌
+████ █▌   ▐▌   ▐█    █▌  █▌ █████ ████ ████▌ 
 -->
 
 <h3 id=invalid-substitution oldids='invalid-variables'>
@@ -3090,13 +3178,13 @@ Invalid Substitution</h3>
 
 <!-- Big Text: shorthand
 
- ███▌  █▌  █▌  ███▌  ████▌  █████▌ █▌  █▌  ███▌  █    █▌ ████▌
+ ███▌  █▌  █▌  ███▌  ████▌  █████▌ █▌  █▌  ███▌  █    █▌ ████▌ 
 █▌  █▌ █▌  █▌ █▌  █▌ █▌  █▌   █▌   █▌  █▌ ▐█ ▐█  █▌   █▌ █▌  █▌
 █▌     █▌  █▌ █▌  █▌ █▌  █▌   █▌   █▌  █▌ █▌  █▌ ██▌  █▌ █▌  █▌
  ███▌  █████▌ █▌  █▌ ████▌    █▌   █████▌ █▌  █▌ █▌▐█ █▌ █▌  █▌
     █▌ █▌  █▌ █▌  █▌ █▌▐█     █▌   █▌  █▌ █████▌ █▌  ██▌ █▌  █▌
 █▌  █▌ █▌  █▌ █▌  █▌ █▌ ▐█    █▌   █▌  █▌ █▌  █▌ █▌   █▌ █▌  █▌
- ███▌  █▌  █▌  ███▌  █▌  █▌   █▌   █▌  █▌ █▌  █▌ █▌   ▐▌ ████▌
+ ███▌  █▌  █▌  ███▌  █▌  █▌   █▌   █▌  █▌ █▌  █▌ █▌   ▐▌ ████▌ 
 -->
 
 <h3 id=substitution-in-shorthands oldids=variables-in-shorthands>
@@ -3165,13 +3253,13 @@ Substitution in Shorthand Properties</h3>
 
 <!-- Big Text: too long
 
-█████▌  ███▌   ███▌      █▌     ███▌  █    █▌  ███▌
+█████▌  ███▌   ███▌      █▌     ███▌  █    █▌  ███▌ 
   █▌   █▌  █▌ █▌  █▌     █▌    █▌  █▌ █▌   █▌ █▌  █▌
-  █▌   █▌  █▌ █▌  █▌     █▌    █▌  █▌ ██▌  █▌ █▌
+  █▌   █▌  █▌ █▌  █▌     █▌    █▌  █▌ ██▌  █▌ █▌    
   █▌   █▌  █▌ █▌  █▌     █▌    █▌  █▌ █▌▐█ █▌ █▌ ██▌
   █▌   █▌  █▌ █▌  █▌     █▌    █▌  █▌ █▌  ██▌ █▌  █▌
   █▌   █▌  █▌ █▌  █▌     █▌    █▌  █▌ █▌   █▌ █▌  █▌
-  █▌    ███▌   ███▌      █████  ███▌  █▌   ▐▌  ███▌
+  █▌    ███▌   ███▌      █████  ███▌  █▌   ▐▌  ███▌ 
 -->
 
 <h3 id=long-substitution oldids=long-variables>
@@ -3269,13 +3357,13 @@ Appendix B: Boolean Logic</h2>
 
 <!-- Big Text: etc
 
-█████▌ █████▌  ███▌
+█████▌ █████▌  ███▌ 
 █▌       █▌   █▌  █▌
-█▌       █▌   █▌
-████     █▌   █▌
-█▌       █▌   █▌
+█▌       █▌   █▌    
+████     █▌   █▌    
+█▌       █▌   █▌    
 █▌       █▌   █▌  █▌
-█████▌   █▌    ███▌
+█████▌   █▌    ███▌ 
 -->