Initial Drupal 11 with DDEV setup

web/core/modules/navigation/components/badge/badge.component.yml

@@ -0,0 +1,30 @@
+# This is so your IDE knows about the syntax for fixes and autocomplete.
+$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
+
+# The human readable name.
+name: Badge
+
+# Status can be: "experimental", "stable", "deprecated", "obsolete".
+status: experimental
+
+# Schema for the props. We support www.json-schema.org. Learn more about the
+# syntax there.
+props:
+  # Props are always an object with keys. Each key is a variable in your
+  # component template.
+  type: object
+
+  properties:
+    status:
+      type: string
+      default: info
+      enum:
+        - info
+        - success
+      meta:enum:
+        info: Information
+        success: Success
+slots:
+  label:
+    type: string
+    description: Label text

web/core/modules/navigation/components/badge/badge.css

@@ -0,0 +1,23 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+/* cspell:ignore csvg cpath wght */
+/**
+ * @file
+ * Toolbar badge styles.
+ */
+.toolbar-badge {
+  padding: var(--admin-toolbar-space-4) var(--admin-toolbar-space-8);
+  border-radius: 1rem;
+  background-color: var(--admin-toolbar-color-gray-100);
+  font-size: var(--admin-toolbar-font-size-label-sm);
+  line-height: var(--admin-toolbar-line-height-label-sm);
+  font-variation-settings: "wght" 700;
+}
+.toolbar-badge--success {
+  color: var(--admin-toolbar-color-green-600);
+  background-color: var(--admin-toolbar-color-green-050);
+}

web/core/modules/navigation/components/badge/badge.pcss.css

@@ -0,0 +1,19 @@
+/* cspell:ignore csvg cpath wght */
+/**
+ * @file
+ * Toolbar badge styles.
+ */
+
+.toolbar-badge {
+  padding: var(--admin-toolbar-space-4) var(--admin-toolbar-space-8);
+  border-radius: 1rem;
+  background-color: var(--admin-toolbar-color-gray-100);
+  font-size: var(--admin-toolbar-font-size-label-sm);
+  line-height: var(--admin-toolbar-line-height-label-sm);
+  font-variation-settings: "wght" 700;
+}
+
+.toolbar-badge--success {
+  color: var(--admin-toolbar-color-green-600);
+  background-color: var(--admin-toolbar-color-green-050);
+}

web/core/modules/navigation/components/badge/badge.twig

@@ -0,0 +1,5 @@
+<div{{ attributes.addClass('toolbar-badge', 'toolbar-badge--' ~ status|default('info')) }}>
+  {% block label %}
+    {{ label }}
+  {% endblock %}
+</div>