feat: rename 'badge' element and break into own SCSS file

assets/newspack-ui/scss/elements/forms/_labels.scss

@@ -43,23 +43,15 @@
 				}
 			}
 
-			// 'Selected' label
-			&:has( .newspack_ui__input-card__selected ) {
+			// 'Selected' badge
+			&:has( .newspack_ui__badge ) {
 				grid-template-columns: var( --newspack-ui-spacer-4 ) 1fr min-content;
 			}
 
-			.newspack_ui__input-card__selected {
+			.newspack_ui__badge {
 				align-self: start;
-				background: var( --newspack-ui-color-neutral-90 );
-				border-radius: var( --newspack-ui-border-radius-xs );
-				color: var( --newspack-ui-color-neutral-0 );
-				font-size: var( --newspack-ui-font-size-xs );
-				font-weight: 600;
 				grid-column-start: 3;
 				grid-row-start: 1;
-				line-height: var( --newspack-ui-line-height-xs );
-				padding: 2px 6px; // TODO: replace with variables; they only go down to 8px, rethink?
-				text-transform: uppercase;
 			}
 		}
 	}

assets/newspack-ui/scss/elements/misc/_badge.scss

@@ -0,0 +1,12 @@
+.newspack_ui__badge {
+	background: var( --newspack-ui-color-neutral-90 );
+	border-radius: var( --newspack-ui-border-radius-xs );
+	color: var( --newspack-ui-color-neutral-0 );
+	display: inline-grid;
+	font-size: var( --newspack-ui-font-size-xs );
+	font-weight: 600;
+	line-height: var( --newspack-ui-line-height-xs );
+	padding: 2px 6px; // TODO: replace with variables; they only go down to 8px, perhaps they need to be rethought?
+	place-items: center;
+	text-transform: uppercase;
+}

assets/newspack-ui/scss/elements/misc/_index.scss

@@ -1 +1,2 @@
-@use 'word-divider';
+@use 'word-divider';
+@use 'badge';

includes/class-newspack-ui.php

@@ -257,7 +257,7 @@ public static function return_demo_content() {
 			<label class="newspack-ui__input-card">
 				<input type="radio" name="list-radio-option" checked>
 				<strong>The Weekly</strong><br>
-				<span class="newspack_ui__input-card__selected">Current</span>
+				<span class="newspack_ui__badge">Badge</span>
 				<span class="newspack-ui__helper-text">Friday roundup of the most relevant stories.</span>
 			</label>
 
@@ -311,6 +311,12 @@ public static function return_demo_content() {
 				</table>
 			</div>
 
+			<hr>
+
+			<h2 id="badges">Badges (more examples TK)</h2>
+			<span class="newspack_ui__badge">Badge</span><br>
+
+
 			<hr>
 
 			<h2 id="buttons">Buttons</h2>