Initial Drupal 11 with DDEV setup

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

@@ -0,0 +1,66 @@
+# 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: Title
+
+# 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:
+  type: object
+  properties:
+    modifiers:
+      type: array
+      title: Modifier classes.
+      description:
+        Title modifiers.
+        https://en.bem.info/methodology/css/#modifiers
+      items:
+        type: string
+        enum:
+          - ellipsis
+          - xs
+        meta:enum:
+          ellipsis: Ellipsis
+          xs: 'Extra-small'
+    extra_classes:
+      type: array
+      title: Extra classes.
+      description:
+        External modifiers added from the placement context.
+        https://en.bem.info/methodology/css/#mixes
+      items:
+        type: string
+    html_tag:
+      type: string
+      title: HTML tag for title
+      # Limit the available options by using enums.
+      enum:
+        - h1
+        - h2
+        - h3
+        - h4
+        - h5
+        - h6
+        - span
+      meta:enum:
+        h1: Heading 1
+        h2: Heading 2
+        h3: Heading 3
+        h4: Heading 4
+        h5: Heading 5
+        h6: Heading 6
+        span: Inline
+      x-translation-context: HTML tag
+      # Provide a default value
+      default: h2
+    icon:
+      title: Icon
+      type: string
+slots:
+  content:
+    title: Content
+    description: Content of title.

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

@@ -0,0 +1,34 @@
+/*
+ * 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 title styles.
+ */
+.toolbar-title {
+  font-variation-settings: "wght" 500;
+}
+/* Sizes aligned with variables from css/base/variables.pcss.css */
+.toolbar-title--xs {
+  font-size: var(--admin-toolbar-font-size-heading-xs);
+}
+.toolbar-title--ellipsis .toolbar-title__label {
+  overflow: hidden;
+  max-width: var(--toolbar--title-max-width);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.toolbar-title:has(.toolbar-title__icon) {
+  display: flex;
+  align-items: center;
+  gap: var(--admin-toolbar-space-8);
+}
+.toolbar-title__icon {
+  flex-shrink: 0;
+  inline-size: var(--admin-toolbar-space-16);
+  block-size: var(--admin-toolbar-space-16);
+}

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

@@ -0,0 +1,35 @@
+/* cspell:ignore csvg cpath wght */
+/**
+ * @file
+ * Toolbar title styles.
+ */
+
+.toolbar-title {
+  font-variation-settings: "wght" 500;
+}
+
+/* Sizes aligned with variables from css/base/variables.pcss.css */
+.toolbar-title--xs {
+  font-size: var(--admin-toolbar-font-size-heading-xs);
+}
+
+.toolbar-title--ellipsis {
+  .toolbar-title__label {
+    overflow: hidden;
+    max-width: var(--toolbar--title-max-width);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+.toolbar-title:has(.toolbar-title__icon) {
+  display: flex;
+  align-items: center;
+  gap: var(--admin-toolbar-space-8);
+}
+
+.toolbar-title__icon {
+  flex-shrink: 0;
+  inline-size: var(--admin-toolbar-space-16);
+  block-size: var(--admin-toolbar-space-16);
+}

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

@@ -0,0 +1,23 @@
+{%
+  set classes = [
+    'toolbar-title',
+  ]
+%}
+{% if modifiers is iterable %}
+  {% set classes = classes|merge(modifiers|map(modifier => "toolbar-title--#{modifier}")) %}
+{% endif %}
+
+{% if extra_classes is iterable %}
+  {% set classes = classes|merge(extra_classes) %}
+{% endif %}
+
+<{{html_tag|default('h2')}}{{attributes.addClass(classes)}}>
+  {% if icon %}
+    {{ icon('navigation', icon, { class: 'toolbar-title__icon', size: 16 }) }}
+  {% endif %}
+  <span class="toolbar-title__label">
+    {% block content %}
+      {{ content }}
+    {% endblock %}
+  </span>
+</{{html_tag|default('h2')}}>