Feed tabs say what they are

Below xl every feed tab but the selected one was a lone icon with no name, for a screen reader or a finger. DTab takes
an AccessibleName, which DTabs renders as the tab's label and tooltip, and FeedTabs names each tab; on a phone every
tab shows its name too. The strip is marked as one that scrolls sideways (data-scroll-x), says it holds the feeds, and
on a phone fades at the edge where more tabs wait (edge-fade-x, a scroll-driven animation where the browser has one);
the selected tab is brought into view when it changes (window.revealActive). Explore's tabs get the same.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw

Styles/touch.css

@@ -112,3 +112,46 @@
 		}
 	}
 }
+
+/* A sideways strip fades at the edge where more of it waits: the right edge at first, both while scrolled, the left
+   at the end (a scroll-driven animation where the browser has one; without, the right edge only). */
+@property --fade-start {
+	syntax: "<length>";
+	inherits: false;
+	initial-value: 0px;
+}
+
+@property --fade-end {
+	syntax: "<length>";
+	inherits: false;
+	initial-value: 1.5rem;
+}
+
+@keyframes edge-fade-x {
+	from {
+		--fade-start: 0px;
+		--fade-end: 1.5rem;
+	}
+
+	8% {
+		--fade-start: 1.5rem;
+	}
+
+	92% {
+		--fade-end: 1.5rem;
+	}
+
+	to {
+		--fade-start: 1.5rem;
+		--fade-end: 0px;
+	}
+}
+
+@utility edge-fade-x {
+	mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
+
+	@supports (animation-timeline: scroll()) {
+		animation: edge-fade-x linear both;
+		animation-timeline: scroll(self inline);
+	}
+}