Breadcrumb: Add the mobile version

.bundlewatch.config.json

@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "41.5 kB"
+      "maxSize": "41.75 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

scss/_breadcrumb.scss

@@ -5,6 +5,7 @@
   --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
   @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
   --#{$prefix}breadcrumb-font-weight: #{$breadcrumb-font-weight}; // Boosted mod
+  --#{$prefix}breadcrumb-line-height: #{$breadcrumb-line-height}; // Boosted mod
   --#{$prefix}breadcrumb-color: #{$breadcrumb-color}; // Boosted mod
   --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
   --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
@@ -19,7 +20,7 @@
   margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
   @include font-size(var(--#{$prefix}breadcrumb-font-size));
   font-weight: var(--#{$prefix}breadcrumb-font-weight); // Boosted mod
-  color: var(--#{$prefix}breadcrumb-color); // Boosted mod
+  line-height: var(--#{$prefix}breadcrumb-line-height); // Boosted mod
   list-style: none;
   background-color: var(--#{$prefix}breadcrumb-bg);
   @include border-radius(var(--#{$prefix}breadcrumb-border-radius));
@@ -45,6 +46,44 @@
     }
   }
 
+  // Boosted mod: Handle responsive
+  display: none;
+
+  // Handle links differently to avoid any issue with colored backgrounds
+  a {
+    color: var(--#{$prefix}breadcrumb-color);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    display: block;
+  }
+
+  @include media-breakpoint-down(md) {
+    &:first-child:last-child,
+    &:nth-last-child(2) {
+      display: block;
+    }
+
+    &:nth-last-child(2) {
+      padding-left: 0;
+
+      &::before {
+        float: left;
+        padding-right: 0 #{"/* rtl:ignore */"};
+        padding-left: var(--#{$prefix}breadcrumb-item-padding-x) #{"/* rtl:ignore */"};
+        color: var(--#{$prefix}breadcrumb-divider-color);
+        content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
+        transform: scaleX(-1) #{"/* rtl:"} scaleX(1) #{"*/"};
+      }
+    }
+  }
+  // End mod
+
   &.active {
     color: var(--#{$prefix}breadcrumb-item-active-color);
   }

scss/_variables.scss

@@ -2101,18 +2101,19 @@ $title-bar-border-color-dark:       $gray-700 !default; // Deprecated in v5.3.3
 // Breadcrumbs
 
 // scss-docs-start breadcrumb-variables
-$breadcrumb-font-size:              $font-size-sm !default;
+$breadcrumb-font-size:              $font-size-sm !default; // Boosted mod: instead of `null`
 $breadcrumb-font-weight:            $font-weight-bold !default; // Boosted mod
+$breadcrumb-line-height:            $line-height-sm !default; // Boosted mod
 
-$breadcrumb-padding-y:              .5rem !default;
+$breadcrumb-padding-y:              .4375rem !default; // Boosted mod: instead of `0`
 $breadcrumb-padding-x:              0 !default;
-$breadcrumb-item-padding-x:         $spacer * .5 !default;
+$breadcrumb-item-padding-x:         $spacer * .5 !default; // Boosted mod: instead of `.5rem`
 $breadcrumb-margin-bottom:          1rem !default;
 $breadcrumb-color:                  var(--#{$prefix}emphasis-color) !default; // Boosted mod
 $breadcrumb-bg:                     null !default;
 $breadcrumb-divider-color:          $black !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 $breadcrumb-active-color:           null !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
-$breadcrumb-divider:                url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14' width='7' height='10'><path d='m-.4 12 2 2 7-7-7-7-2 2 5 5z'/></svg>") !default;
+$breadcrumb-divider:                url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14' width='7' height='10'><path d='m-.4 12 2 2 7-7-7-7-2 2 5 5z'/></svg>") !default; // Boosted mod: instead of `quote("/")`
 $breadcrumb-divider-filter:         none !default; // Boosted mod
 $breadcrumb-divider-flipped:        $breadcrumb-divider !default;
 $breadcrumb-border-radius:          null !default;

site/content/docs/5.3/components/breadcrumb.md

@@ -39,6 +39,12 @@ Use an ordered or unordered list with linked list items to create a minimally st
 
 Dividers are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). They can be changed by modifying a local CSS custom property `--bs-breadcrumb-divider`, or through the `$breadcrumb-divider` Sass variable — and `$breadcrumb-divider-flipped` for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.
 
+{{< design-callout-alert >}}
+These variants **changing or without the breadcrumb dividers** should not be used because they do not respect the Orange Design System specifications.
+
+Please refer to the [Local Headers/Breadcrumb](https://system.design.orange.com/0c1af118d/p/774477-local-headers/b/743cd0/i/66611057) guidelines on the Orange Design System website.
+{{< /design-callout-alert >}}
+
 {{< example >}}
 <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
   <ol class="breadcrumb">
@@ -75,12 +81,6 @@ $breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/
 
 You can also remove the divider setting `--bs-breadcrumb-divider: '';` (empty strings in CSS custom properties counts as a value), or setting the Sass variable to `$breadcrumb-divider: none;`.
 
-{{< design-callout-alert >}}
-This variant **without the breadcrumb dividers** should not be used because it does not respect the Orange Design System specifications.
-
-Please refer to the [Local Headers/Breadcrumb](https://system.design.orange.com/0c1af118d/p/774477-local-headers/b/743cd0/i/66611057) guidelines on the Orange Design System website.
-{{< /design-callout-alert >}}
-
 {{< example >}}
 <nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
   <ol class="breadcrumb">

site/content/docs/5.3/migration.md

@@ -555,6 +555,9 @@ If you need more details about the changes, please refer to the [v5.3.2 release]
 - **Accordion**
   - <span class="badge text-bg-warning">Warning</span> Accordion rendering has been improved for better accessibility. Although it is transparent for basic usage, you might want to check the rendering of your custom components if they are composed of an accordion.
 
+- **Breadcrumb**
+  - <span class="badge bg-success">New</span> Breadcrumbs now support responsive display.
+
 - **Local navigation**
   - <span class="badge text-bg-success">New</span> Added Local Navigation as a new component.
 
@@ -582,6 +585,7 @@ If you need more details about the changes, please refer to the [v5.3.2 release]
     <summary><span class="badge text-bg-success">New</span> CSS variables:</summary>
     <ul>
       <li><code>--bs-accordion-btn-hover-bg</code></li>
+      <li><code>--bs-breadcrumb-line-height</code></li>
       <li><code>--bs-local-nav-active-bg</code></li>
       <li><code>--bs-local-nav-active-color</code></li>
       <li><code>--bs-local-nav-active-marker-width</code></li>
@@ -600,6 +604,7 @@ If you need more details about the changes, please refer to the [v5.3.2 release]
     <ul>
       <li><code>$accordion-button-hover-bg</code></li>
       <li><code>$accordion-dark-button-hover-bg</code></li>
+      <li><code>$breadcrumb-line-height</code></li>
       <li><code>$footer-accordion-active-color</code></li>
       <li><code>$footer-accordion-btn-hover-bg</code></li>
       <li><code>$form-star-rating-checked-color</code></li>