vanilla-framework 3.1.0 → 3.3.0

package/package.json

@@ -44,7 +44,7 @@
     "percy": "percy exec -- node snapshots.js",
     "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
   },
-  "version": "3.1.0",
+  "version": "3.3.0",
   "files": [
     "_index.scss",
     "/scss",
@@ -54,18 +54,18 @@
   "dependencies": {
     "@canonical/cookie-policy": "3.4.0",
     "@canonical/latest-news": "1.3.0",
-    "autoprefixer": "10.4.2",
-    "postcss": "8.4.6",
+    "autoprefixer": "10.4.4",
+    "postcss": "8.4.12",
     "postcss-cli": "9.1.0",
-    "sass": "1.49.7"
+    "sass": "1.49.11"
   },
   "devDependencies": {
     "@percy/script": "1.1.0",
     "get-site-urls": "1.1.7",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "prettier": "2.5.1",
-    "stylelint": "14.3.0",
+    "prettier": "2.6.2",
+    "stylelint": "14.6.1",
     "stylelint-config-prettier": "9.0.3",
     "stylelint-config-recommended-scss": "5.0.2",
     "stylelint-order": "5.0.0",

package/scss/_patterns_accordion.scss

@@ -16,48 +16,45 @@
   }
 
   .p-accordion__tab {
-    // calculate icon top position based on top padding (from %single-border-text-vpadding--scaling)
-    // and offset to align it with baseline of accordion tab text element
-    $icon-top-position: calc(#{$table-cell-vertical-padding + (map-get($line-heights, default-text) - $icon-size) * 0.5});
-
     @extend %single-border-text-vpadding--scaling;
     @include vf-focus;
 
-    background: {
-      color: inherit;
-      position: top $icon-top-position left $sph--large;
-      repeat: no-repeat;
-    }
-
+    background-color: inherit;
     border: 0;
     border-radius: 0;
     font-size: inherit;
     justify-content: flex-start;
     margin-bottom: 0;
-    padding-left: $sph--large + $icon-size + $sph--large;
     padding-right: $sph--large;
+    position: relative;
     text-align: left;
     transition-duration: 0s;
     width: 100%;
     z-index: 2;
 
+    &::before {
+      @include vf-icon-chevron($color-mid-dark);
+      @include vf-animation($property: transform, $duration: fast);
+      @extend %icon;
+
+      content: '';
+      margin-right: $sph--large;
+    }
+
     // aria-selected controls the open and closed state for the accordion tab
     &[aria-expanded='true'] {
-      @include vf-icon-minus($color-mid-dark);
-
       // override base expanded button styles
       background-color: inherit;
+
       &:hover {
         background-color: $colors--light-theme--background-hover;
       }
-
-      background-size: $icon-size;
     }
 
     &[aria-expanded='false'] {
-      @include vf-icon-plus($color-mid-dark);
-
-      background-size: $icon-size;
+      &::before {
+        transform: rotate(-90deg);
+      }
     }
   }
 
@@ -74,25 +71,17 @@
   }
 
   // stylelint-disable selector-max-type
-  h2.p-accordion__heading > .p-accordion__tab,
-  .p-heading--2 > .p-accordion__tab {
-    $icon-top-position: calc(#{$table-cell-vertical-padding + (map-get($line-heights, h2) - $icon-size) * 0.5});
-
-    background-position-y: $icon-top-position;
+  .p-heading--2 > .p-accordion__tab::before,
+  h2.p-accordion__heading > .p-accordion__tab::before {
+    @include vf-icon-size($x-height);
+    vertical-align: 0;
   }
 
-  h3.p-accordion__heading > .p-accordion__tab,
-  .p-heading--3 > .p-accordion__tab {
-    $icon-top-position: calc(#{$table-cell-vertical-padding + (map-get($line-heights, h3) - $icon-size) * 0.5});
-
-    background-position-y: $icon-top-position;
-  }
-
-  h4.p-accordion__heading > .p-accordion__tab,
-  .p-heading--4 > .p-accordion__tab {
-    $icon-top-position: calc(#{$table-cell-vertical-padding + (map-get($line-heights, h4) - $icon-size) * 0.5});
-
-    background-position-y: $icon-top-position;
+  .p-heading--3 > .p-accordion__tab::before,
+  .p-heading--4 > .p-accordion__tab::before,
+  h3.p-accordion__heading > .p-accordion__tab::before,
+  h4.p-accordion__heading > .p-accordion__tab::before {
+    vertical-align: 0;
   }
   // stylelint-enable selector-max-type
 

package/scss/_patterns_code-snippet.scss

@@ -40,10 +40,10 @@ $code-snippet-header-v-spacing: $spv--small;
 
     .p-code-snippet__block--numbered {
       counter-reset: line-numbering;
-    }
 
-    .p-code-snippet__line {
-      @extend %code-numbered-line;
+      .p-code-snippet__line {
+        @extend %code-numbered-line;
+      }
     }
 
     .p-code-snippet__header {

package/scss/_patterns_navigation.scss

@@ -1,12 +1,25 @@
 @import 'settings';
 
 $lightness-threshold: 70;
+$navigation-logo-tag-width: 1.5rem;
+$navigation-logo-tag-height: 2.2rem;
+$navigation-logo-tag-height-desktop: 2.4rem;
+$navigation-logo-height: 3rem;
+$navigation-logo-height-desktop: 3.5rem;
+$navigation-logo-width: 1.1rem;
+$sph-navigation-link: 0.3rem;
+$spv-navigation-logo: 0.3125rem;
 
 @mixin vf-p-navigation {
   // placeholders
   %navigation-link-responsive-padding-vertical {
-    padding-bottom: $spv--large;
-    padding-top: $spv--large;
+    padding-bottom: $spv--medium;
+    padding-top: $spv--medium;
+
+    @media (min-width: $breakpoint-navigation-threshold) {
+      padding-bottom: $spv--large;
+      padding-top: $spv--large;
+    }
   }
 
   %navigation-link-responsive-padding-left {
@@ -47,6 +60,11 @@ $lightness-threshold: 70;
     @include vf-animation($properties, snap);
     @include vf-focus;
 
+    // override button styles
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+
     display: block;
     font-weight: $font-weight-bold;
     line-height: map-get($line-heights, default-text);
@@ -179,12 +197,17 @@ $lightness-threshold: 70;
     }
   }
 
+  // Styles for old navigation logo
   .p-navigation__logo {
     display: flex;
     flex: 0 0 auto;
-    height: 3.5rem;
+    height: $navigation-logo-height;
     margin: 0 $sph--large 0 0;
 
+    @media (min-width: $breakpoint-navigation-threshold) {
+      height: $navigation-logo-height-desktop;
+    }
+
     .p-navigation__item {
       @include vf-focus;
 
@@ -192,6 +215,53 @@ $lightness-threshold: 70;
     }
   }
 
+  .p-navigation__tagged-logo {
+    display: flex; // to prevent logo link from expanding full width
+    margin-right: 0;
+    min-width: 13rem;
+
+    .p-navigation__logo-tag {
+      background-color: $color-accent;
+      height: $navigation-logo-tag-height;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: $navigation-logo-tag-width;
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        height: $navigation-logo-tag-height-desktop;
+      }
+    }
+
+    .p-navigation__logo-icon {
+      bottom: $spv-navigation-logo;
+      left: 50%;
+      position: absolute;
+      transform: translate(-50%, 0);
+      width: $navigation-logo-width;
+    }
+
+    .p-navigation__logo-title {
+      @extend %vf-heading-4;
+
+      line-height: map-get($line-heights, x-small);
+    }
+
+    .p-navigation__link {
+      @extend %navigation-link;
+
+      padding-left: $navigation-logo-tag-width + $sph-navigation-link;
+
+      &:hover {
+        background-color: transparent !important;
+      }
+
+      &::before {
+        content: none;
+      }
+    }
+  }
+
   .p-navigation__image {
     align-self: center;
     max-height: 2rem;
@@ -199,6 +269,19 @@ $lightness-threshold: 70;
   }
 
   // navigation items
+  .p-navigation__items {
+    display: none; // hidden by default on mobile (expands is a dropdown)
+    list-style: none;
+    margin: -1px 0 0 0;
+    padding: 0;
+
+    @media (min-width: $breakpoint-navigation-threshold) {
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 0; // prevents bottom border of nav from moving 1px
+    }
+  }
+
   .p-navigation__nav {
     display: none;
     flex-direction: column;
@@ -212,15 +295,14 @@ $lightness-threshold: 70;
     }
   }
 
-  .p-navigation__items {
-    list-style: none;
-    margin: -1px 0 0 0;
-    padding: 0;
+  // items inside the logo banner (for mobile menu)
+  .p-navigation__banner .p-navigation__items {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 0; // prevents bottom border of nav from moving 1px
 
     @media (min-width: $breakpoint-navigation-threshold) {
-      display: flex;
-      flex-wrap: wrap;
-      margin-top: 0; // prevents bottom border of nav from moving 1px
+      display: none;
     }
   }
 
@@ -229,7 +311,8 @@ $lightness-threshold: 70;
     display: none;
   }
 
-  .p-navigation__toggle--open {
+  .p-navigation__toggle--open,
+  .p-navigation__toggle--search {
     display: block;
 
     @media (min-width: $breakpoint-navigation-threshold) {
@@ -238,7 +321,8 @@ $lightness-threshold: 70;
   }
 
   .p-navigation__toggle--open,
-  .p-navigation__toggle--close {
+  .p-navigation__toggle--close,
+  .p-navigation__toggle--search {
     @extend %navigation-link-responsive-padding-horizontal;
     @extend %navigation-link-responsive-padding-vertical;
     @include vf-focus;
@@ -262,6 +346,14 @@ $lightness-threshold: 70;
       display: flex;
     }
 
+    .p-navigation__items {
+      display: block;
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        display: flex;
+      }
+    }
+
     .p-navigation__toggle--open {
       display: none;
     }
@@ -279,6 +371,7 @@ $lightness-threshold: 70;
 
   // on mobile screens search box is visible inside of the mobile navigation dropdown
   .p-navigation__search {
+    display: none;
     padding-top: $spv--large;
 
     // allow search box to take full width
@@ -287,64 +380,59 @@ $lightness-threshold: 70;
     }
   }
 
-  // on mobile screens both search toggle and overlay are not used and hidden from view
   .p-navigation__link--search-toggle {
     @extend %navigation-link;
 
-    display: none;
+    display: block;
     height: 100%; // keep the height of the navigation when 'Search' label is hidden
     padding-left: 0; // on small screens label is hidden, so we remove left padding as well
     padding-right: 2 * $sph--small + map-get($icon-sizes, default);
     position: relative;
-  }
 
-  .p-navigation__search-overlay {
-    display: none;
-  }
+    // hide "search" label on small screens (only show the icon)
+    .p-navigation__search-label {
+      display: none;
+    }
 
-  // the expanding search box is only visible on large screens in navigation bar
-  @media (min-width: $breakpoint-navigation-threshold) {
-    .p-navigation__link--search-toggle {
-      display: block;
+    // show both label and icon on large screens
+    @media (min-width: $breakpoint-large) {
+      padding-left: $sph--large;
 
-      // hide "search" label on small screens (only show the icon)
       .p-navigation__search-label {
-        display: none;
+        display: initial;
       }
+    }
 
-      // show both label and icon on large screens
-      @media (min-width: $breakpoint-large) {
-        padding-left: $sph--large;
-
-        .p-navigation__search-label {
-          display: initial;
-        }
-      }
+    &::after {
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      content: '';
+      display: block;
+      height: $spv--large;
+      pointer-events: none;
+      position: absolute;
+      right: calc(#{$sph--small} + 1px); // 1px for the border on selects. this aligns it with any selects underneath
+      text-indent: calc(100% + 10rem);
+      top: calc(#{$spv--medium} + #{map-get($nudges, x-small)});
+      width: map-get($icon-sizes, default);
 
-      &::after {
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: contain;
-        content: '';
-        display: block;
-        height: $spv--large;
-        pointer-events: none;
-        position: absolute;
-        right: map-get($grid-margin-widths, small);
-        text-indent: calc(100% + 10rem);
+      @media (min-width: $breakpoint-navigation-threshold) {
         top: calc(#{$spv--large} + #{map-get($nudges, x-small)});
-        width: map-get($icon-sizes, default);
+      }
+    }
+  }
 
-        @media (min-width: $threshold-4-6-col) {
-          right: map-get($grid-margin-widths, default);
-        }
+  .p-navigation__nav .p-navigation__link--search-toggle {
+    display: none;
 
-        @media (min-width: $breakpoint-navigation-threshold) {
-          right: calc(#{$sph--small} + 1px); // 1px for the border on selects. this aligns it with any selects underneath
-        }
-      }
+    @media (min-width: $breakpoint-navigation-threshold) {
+      display: block;
     }
+  }
 
+  // the expanding search box is only visible on large screens in navigation bar
+  @media (min-width: $breakpoint-navigation-threshold) {
     .p-navigation__search {
       align-items: center;
       display: none;
@@ -356,7 +444,6 @@ $lightness-threshold: 70;
       @include vf-animation(opacity, snap);
 
       background-color: $colors--light-theme--background-overlay;
-      bottom: 0;
       display: block;
       height: 100%;
       left: 0;
@@ -368,30 +455,51 @@ $lightness-threshold: 70;
       width: 100%;
       z-index: 59;
     }
+  }
 
-    // when navigation search is expanded
-    .p-navigation.has-search-open {
-      // hide all navigation items (including search toggle)
-      .p-navigation__items {
-        display: none;
-      }
+  // when navigation search is expanded
+  .p-navigation.has-search-open {
+    // make sure search in navigation renders on top of the overlay
+    .p-navigation__nav {
+      display: flex;
+      z-index: 60;
+    }
 
-      // show expanded search box
-      .p-navigation__search {
-        display: flex;
-      }
+    // hide all navigation items (including search toggle)
+    .p-navigation__nav .p-navigation__items {
+      display: none;
+    }
 
-      // fade in search overlay
-      .p-navigation__search-overlay {
-        opacity: 0.5;
-        pointer-events: all;
-      }
+    // show expanded search box
+    .p-navigation__search {
+      display: flex;
+    }
 
-      // make sure search in navigation renders on top of the overlay
-      .p-navigation__nav {
-        z-index: 60;
+    // fade in search overlay
+    .p-navigation__search-overlay {
+      opacity: 0.5;
+      pointer-events: all;
+    }
+  }
+
+  .p-navigation.has-menu-open {
+    // hide all navigation items (including search toggle)
+    .p-navigation__nav {
+      display: flex;
+    }
+
+    .p-navigation__nav .p-navigation__items {
+      display: block;
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        display: flex;
       }
     }
+
+    // show expanded search box
+    .p-navigation__search {
+      display: none;
+    }
   }
 
   // DROPDOWNS
@@ -412,7 +520,7 @@ $lightness-threshold: 70;
       top: $spv--large * 2 + map-get($line-heights, default-text);
     }
 
-    @media (max-width: $breakpoint-navigation-threshold - 1) {
+    @media (max-width: ($breakpoint-navigation-threshold - 1)) {
       box-shadow: none;
     }
   }
@@ -537,11 +645,16 @@ $lightness-threshold: 70;
       background-color: $color-navigation-background--hover;
     }
 
+    &[aria-pressed='true'],
     &:active {
       background-color: $color-navigation-background--active;
     }
   }
 
+  .p-navigation__logo-title {
+    color: $color-navigation-text;
+  }
+
   .p-navigation__item--dropdown-toggle {
     &::after {
       @include vf-icon-chevron($color-navigation-icon);
@@ -552,6 +665,7 @@ $lightness-threshold: 70;
     }
   }
 
+  .p-navigation__toggle--search::after,
   .p-navigation__item .p-navigation__link--search-toggle::after {
     @include vf-icon-search($color-navigation-icon);
   }
@@ -571,9 +685,19 @@ $lightness-threshold: 70;
     }
   }
 
-  .p-navigation__link::before {
+  .p-navigation__nav .p-navigation__link::before {
     background: $color-navigation-separator;
   }
+
+  // on mobile expanded nav needs to match pressed color of the buttons
+  &.has-menu-open .p-navigation__nav,
+  &.has-search-open .p-navigation__nav {
+    background-color: $color-navigation-background--active;
+
+    @media (min-width: $breakpoint-navigation-threshold) {
+      background-color: transparent;
+    }
+  }
 }
 
 @mixin vf-navigation-light-theme {
@@ -582,9 +706,9 @@ $lightness-threshold: 70;
     $color-navigation-background: $colors--light-theme--background-default,
     $color-navigation-background--hover: $colors--light-theme--background-alt,
     $color-navigation-background--active: $colors--light-theme--background-active,
-    $color-navigation-highlight: $color-accent,
+    $color-navigation-highlight: $colors--light-theme--text-default,
     $color-navigation-separator: $colors--light-theme--border-low-contrast,
-    $color-navigation-icon: $colors--light-theme--text-muted
+    $color-navigation-icon: $colors--light-theme--text-default
   );
 }
 
@@ -594,8 +718,8 @@ $lightness-threshold: 70;
     $color-navigation-background: $colors--dark-theme--background-default,
     $color-navigation-background--hover: $colors--dark-theme--background-hover,
     $color-navigation-background--active: $colors--dark-theme--background-active,
-    $color-navigation-highlight: $color-accent,
+    $color-navigation-highlight: $colors--dark-theme--text-default,
     $color-navigation-separator: $colors--dark-theme--border-low-contrast,
-    $color-navigation-icon: $colors--dark-theme--text-muted
+    $color-navigation-icon: $colors--dark-theme--text-default
   );
 }

package/scss/_patterns_pull-quotes.scss

@@ -29,6 +29,7 @@
     .p-pull-quote__citation {
       @extend %vf-heading-6;
 
+      display: block;
       margin-top: $spv--small;
     }
   }

package/scss/{_patterns_tab-buttons.scss → _patterns_segmented-control.scss}

@@ -1,9 +1,14 @@
-@mixin vf-p-tab-buttons {
+@mixin vf-p-segmented-control {
+  .p-segmented-control,
+  // p-tab-buttons is deprecated,
+  // please use p-segmented-control instead 
   .p-tab-buttons {
+    .p-segmented-control__list,
     .p-tab-buttons__list {
       display: flex;
     }
 
+    .p-segmented-control__button,
     .p-tab-buttons__button {
       @extend %vf-button-has-icon;
 
@@ -41,8 +46,14 @@
       }
     }
 
+    &.is-dense .p-segmented-control__button,
     &.is-dense .p-tab-buttons__button {
       @extend %vf-button-dense-vertical-padding;
     }
   }
 }
+
+// Deprecated mixin kept for compatibility
+@mixin vf-p-tab-buttons {
+  @include vf-p-segmented-control;
+}

package/scss/_patterns_side-navigation.scss

@@ -35,8 +35,11 @@
 
     .p-side-navigation:target &,
     [class*='p-side-navigation--']:target &,
+    // is-expanded and is-collapsed are deprecated and replaced by is-drawer-expanded and is-drawer-collapsed
     .p-side-navigation.is-expanded &,
-    [class*='p-side-navigation--'].is-expanded & {
+    .p-side-navigation.is-drawer-expanded &,
+    [class*='p-side-navigation--'].is-expanded &,
+    [class*='p-side-navigation--'].is-drawer-expanded & {
       @extend %vf-has-box-shadow;
 
       animation: vf-p-side-navigation-expand map-get($animation-duration, brisk);
@@ -44,10 +47,20 @@
     }
 
     .p-side-navigation.is-collapsed &,
-    [class*='p-side-navigation--'].is-collapsed & {
+    .p-side-navigation.is-drawer-collapsed &,
+    [class*='p-side-navigation--'].is-collapsed &,
+    [class*='p-side-navigation--'].is-drawer-collapsed & {
       animation: vf-p-side-navigation-collapse map-get($animation-duration, brisk);
     }
 
+    .p-side-navigation.is-drawer-hidden &,
+    [class*='p-side-navigation--'].is-drawer-hidden & {
+      display: none;
+      @media (min-width: $threshold-6-12-col) {
+        display: block;
+      }
+    }
+
     @media (min-width: $breakpoint-x-small) {
       max-width: 20rem;
     }
@@ -68,7 +81,9 @@
     .p-side-navigation:target &,
     [class*='p-side-navigation--']:target &,
     .p-side-navigation.is-expanded &,
-    [class*='p-side-navigation--'].is-expanded & {
+    .p-side-navigation.is-drawer-expanded &,
+    [class*='p-side-navigation--'].is-expanded &,
+    [class*='p-side-navigation--'].is-drawer-expanded & {
       opacity: 1;
       pointer-events: all;
     }
@@ -134,7 +149,9 @@
     .p-side-navigation:target .p-side-navigation__drawer,
     [class*='p-side-navigation--']:target .p-side-navigation__drawer,
     .p-side-navigation.is-expanded .p-side-navigation__drawer,
-    [class*='p-side-navigation--'].is-expanded .p-side-navigation__drawer {
+    .p-side-navigation.is-drawer-expanded .p-side-navigation__drawer,
+    [class*='p-side-navigation--'].is-expanded .p-side-navigation__drawer,
+    [class*='p-side-navigation--'].is-drawer-expanded .p-side-navigation__drawer {
       box-shadow: none;
       display: block;
       max-width: none;
@@ -416,6 +433,15 @@
     &::before {
       @include vf-icon-chevron($color-sidenav-toggle-icon);
     }
+
+    &[aria-expanded='true'] {
+      background-color: $color-transparent;
+
+      &:hover {
+        background: $color-sidenav-item-background-hover;
+        color: $color-sidenav-text-active;
+      }
+    }
   }
 
   .p-side-navigation__drawer {
@@ -431,11 +457,11 @@
     border-color: $color-sidenav-list-border;
   }
 
-  %theme-side-navigation__list {
+  .p-side-navigation__list::after {
     background: $color-sidenav-list-border;
   }
 
-  %theme-side-navigation__link {
+  .p-side-navigation__link {
     &,
     &:visited {
       color: $color-sidenav-text-default;
@@ -462,14 +488,6 @@
     }
   }
 
-  .p-side-navigation__list::after {
-    @extend %theme-side-navigation__list;
-  }
-
-  .p-side-navigation__link {
-    @extend %theme-side-navigation__link;
-  }
-
   .p-side-navigation__item--title,
   .p-side-navigation__item--title .p-side-navigation__link {
     color: $color-sidenav-text-active;

package/scss/{_patterns_label.scss → _patterns_status-label.scss}

@@ -1,8 +1,8 @@
 @import 'settings';
 
-// Default label styling
-@mixin vf-p-label {
-  %vf-label {
+// Default status label styling
+@mixin vf-p-status-label {
+  %vf-status-label {
     @extend %x-small-text;
     @extend %u-no-margin--bottom--small;
 
@@ -15,38 +15,48 @@
     white-space: nowrap;
   }
 
+  .p-status-label,
   .p-label {
-    @extend %vf-label;
+    @extend %vf-status-label;
 
     background-color: $color-mid-dark;
     color: $color-x-light;
   }
 
+  .p-status-label--positive,
   .p-label--positive {
-    @extend %vf-label;
+    @extend %vf-status-label;
 
     background-color: $color-positive;
     color: $color-x-light;
   }
 
+  .p-status-label--caution,
   .p-label--caution {
-    @extend %vf-label;
+    @extend %vf-status-label;
 
     background-color: $color-caution;
     color: $color-dark;
   }
 
+  .p-status-label--information,
   .p-label--information {
-    @extend %vf-label;
+    @extend %vf-status-label;
 
     background-color: $color-information;
     color: $color-x-light;
   }
 
+  .p-status-label--negative,
   .p-label--negative {
-    @extend %vf-label;
+    @extend %vf-status-label;
 
     background-color: $color-negative;
     color: $color-x-light;
   }
 }
+
+// Deprecated mixin kept for compatibility
+@mixin vf-p-label {
+  @include vf-p-status-label;
+}

package/scss/_vanilla.scss

@@ -21,7 +21,6 @@
 @import 'patterns_headings';
 @import 'patterns_icons';
 @import 'patterns_image';
-@import 'patterns_label';
 @import 'patterns_links';
 @import 'patterns_list-tree';
 @import 'patterns_lists';
@@ -39,9 +38,10 @@
 @import 'patterns_separator';
 @import 'patterns_side-navigation';
 @import 'patterns_slider';
+@import 'patterns_status-label';
 @import 'patterns_strip';
 @import 'patterns_switch';
-@import 'patterns_tab-buttons';
+@import 'patterns_segmented-control';
 @import 'patterns_table-icons';
 @import 'patterns_table-expanding';
 @import 'patterns_table-of-contents';
@@ -102,7 +102,6 @@
   @include vf-p-form-password-toggle;
   @include vf-p-icons;
   @include vf-p-image;
-  @include vf-p-label;
   @include vf-p-links;
   @include vf-p-list-tree;
   @include vf-p-lists;
@@ -117,12 +116,13 @@
   @include vf-p-pull-quotes;
   @include vf-p-search-and-filter;
   @include vf-p-search-box;
+  @include vf-p-segmented-control;
   @include vf-p-separator;
   @include vf-p-side-navigation;
   @include vf-p-slider;
+  @include vf-p-status-label;
   @include vf-p-strip;
   @include vf-p-switch;
-  @include vf-p-tab-buttons;
   @include vf-p-table-icons;
   @include vf-p-table-expanding;
   @include vf-p-table-of-contents;