Add new chip components and styles for it

ui-demo/lang/en

@@ -296,6 +296,8 @@ index_l_days_plain=days
 index_badge_clock=Scheduled
 index_badge_tip=With a tooltip
 index_badge_tip_text=Badges take a title option, shown by the browser on hover
+index_chip_cached=Cached
+index_chip_download=Download on creation
 index_tip_text=Hover this text
 index_tip=Any HTML can carry the theme tooltip that the help bubble uses
 index_e_dl=Description list

ui-demo/ui-demo-pages.pl

@@ -373,6 +373,12 @@ $rv .= ui_grid([
 				       'title' => $text{'index_badge_tip_text'} }),
 			    ui_chip('journal'),
 			    ui_chip('ipv6'),
+			    # Chips can carry a state dot for a summary line
+			    # that reads as facts rather than alerts
+			    ui_chip($text{'index_chip_cached'},
+				    { 'state' => 'success' }),
+			    ui_chip($text{'index_chip_download'},
+				    { 'state' => 'warning' }),
 			    ]),
 			# The small badge, which does not outweigh the
 			# text beside it, and the rounded one. Only

ui-lib.pl

@@ -5139,7 +5139,24 @@ return &ui_page_assets().&ui_tag($tag,
 =head2 ui_chip(text, [&opts])
 
 Returns HTML for a small muted chip, such as a category or source label
-next to a list entry.
+next to a list entry, or one fact in a summary line. Options are :
+
+=item state - Shows a colored dot before the text : success, warning,
+danger, info or neutral, as for ui_badge. The chip itself stays muted,
+so a row of chips reads as one line rather than a row of alerts.
+
+=item icon - Icon name shown before the text instead of a dot.
+
+=item title - Tooltip text for the chip.
+
+=item id - HTML id for the chip.
+
+=item attrs - Hash reference of additional attributes, such as data-*
+values for a script that updates or hides the chip. The text sits in a
+span with the ui_chip_text class, so a script can replace it without
+touching the dot.
+
+=item class - Additional CSS classes.
 
 =cut
 sub ui_chip
@@ -5147,8 +5164,19 @@ sub ui_chip
 return &theme_ui_chip(@_) if (defined(&theme_ui_chip));
 my ($label, $opts) = @_;
 $opts ||= {};
-return &ui_tag('span', &html_escape($label),
-	{ 'class' => &_ui_class('ui_chip', $opts->{'class'}) });
+my $icon = "";
+if ($opts->{'state'}) {
+	$icon = &ui_tag('span', &ui_svg_icon('dot', { 'size' => 12 }),
+		{ 'class' => 'ui_chip_dot ui_fg_'.&_ui_state($opts->{'state'}) });
+	}
+elsif ($opts->{'icon'}) {
+	$icon = &ui_svg_icon($opts->{'icon'}, { 'size' => 12 });
+	}
+return &ui_tag('span',
+	$icon.&ui_tag('span', &html_escape($label), { 'class' => 'ui_chip_text' }),
+	&_ui_attrs({ %{$opts->{'attrs'} || {}},
+		     'class' => &_ui_class('ui_chip', $opts->{'class'}),
+		     'id' => $opts->{'id'}, 'title' => $opts->{'title'} }));
 }
 
 =head2 ui_list(&items, [&opts])

unauthenticated/css/ui-lib.css

@@ -654,6 +654,7 @@ a.ui_stat:hover .ui_stat_value { color: var(--ui-accent); }
 .ui_chip {
 	display: inline-flex;
 	align-items: center;
+	gap: 5px;
 	padding: 1px 8px;
 	background: var(--ui-neutral-soft);
 	border: 1px solid var(--ui-border);
@@ -663,6 +664,8 @@ a.ui_stat:hover .ui_stat_value { color: var(--ui-accent); }
 	vertical-align: middle;
 	white-space: nowrap;
 }
+.ui_chip_dot { display: inline-flex; flex: none; }
+.ui_chip .ui_svg_icon { flex: none; }
 
 /* ---- Lists ---- */