@carbon/ibmdotcom-styles 2.16.0 → 2.16.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-styles",
   "description": "Carbon for IBM.com Styles",
-  "version": "2.16.0",
+  "version": "2.16.2",
   "license": "Apache-2.0",
   "main": "dist/ibm-dotcom-styles.min.css",
   "module": "src/scss",
@@ -48,5 +48,5 @@
     "sass": "~1.79.0",
     "sass-loader": "^13.0.0"
   },
-  "gitHead": "c82715f3720612dbf7f9e96d3bdaa21a4fbdcf49"
+  "gitHead": "c49334a3cce2754af28d0d47168357ce6a8163b2"
 }

package/scss/components/button-group/_button-group.scss

@@ -10,6 +10,7 @@
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 @use '../../globals/vars' as *;
 @use '../lightbox-media-viewer';

package/scss/components/callout-quote/_callout-quote.scss

@@ -20,6 +20,10 @@
 @include quote;
 
 @mixin callout-quote {
+  * {
+    box-sizing: border-box;
+  }
+
   :host(#{$c4d-prefix}-callout-quote) {
     @extend :host(#{$c4d-prefix}-callout);
     @extend :host(#{$c4d-prefix}-callout-text);
@@ -99,12 +103,9 @@
   }
 
   :host(#{$c4d-prefix}-callout-quote) #{$c4d-prefix}-hr {
-    margin: $spacing-05;
+    margin: $spacing-05 $spacing-07;
     @include breakpoint(md) {
-      margin: $spacing-05 0;
-    }
-    @include breakpoint(lg) {
-      margin: $spacing-05 $spacing-03;
+      margin: $spacing-05;
     }
   }
 }

package/scss/components/callout-with-media/_callout-with-media.scss

@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 @use '../../internal/callout/callout' as *;
 @use '../../internal/content-block';
@@ -21,6 +22,10 @@
 @include callout;
 
 @mixin callout-with-media {
+  * {
+    box-sizing: border-box;
+  }
+
   :host(#{$c4d-prefix}-callout-with-media) {
     @extend :host(#{$c4d-prefix}-callout);
 
@@ -178,7 +183,7 @@
     }
   }
 
-  :host(#{$c4d-prefix}-callout-with-media-image) .#{$prefix}--image__img {
+  :host(#{$c4d-prefix}-callout-with-media-image) .#{$c4d-prefix}--image__img {
     max-inline-size: 100%;
   }
 }

package/scss/components/card-group/_card-group.scss

@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../../globals/utils/ratio-base' as *;
@@ -58,6 +59,10 @@
   :host(#{$c4d-prefix}-card-group-item) {
     display: contents;
 
+    * {
+      row-gap: 0;
+    }
+
     .#{$prefix}--card {
       display: grid;
       border: 0;
@@ -72,6 +77,7 @@
         display: grid;
         justify-content: revert;
         grid-row: span 10;
+        grid-template-columns: subgrid;
         grid-template-rows: subgrid;
 
         &::before,
@@ -90,15 +96,15 @@
       .#{$prefix}--card__content {
         display: grid;
         grid-area: 1 / 1 / -1 / -1;
+        grid-template-columns: subgrid;
         grid-template-rows: subgrid;
-        row-gap: 0;
       }
 
       .#{$prefix}--card__copy {
         display: grid;
         grid-row: span 2;
+        grid-template-columns: subgrid;
         grid-template-rows: subgrid;
-        row-gap: 0;
       }
     }
 

package/scss/components/card-in-card/_card-in-card.scss

@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 @use '../../globals/utils/aspect-ratio';
 @use '../../globals/utils/ratio-base' as *;

package/scss/components/card-section-offset/_card-section-offset.scss

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,6 +12,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 @use '../card-group/card-group';
 

package/scss/components/content-block-media/_content-block-media.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,6 +8,7 @@
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 @use '../../internal/content-block';
 @use '../../internal/content-group';

package/scss/components/content-block-mixed/_content-block-mixed.scss

@@ -8,6 +8,7 @@
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../../internal/content-block';

package/scss/components/content-block-simple/_content-block-simple.scss

@@ -1,11 +1,12 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 @use '../../internal/content-block';
 @use '../../internal/content-item/content-item';

package/scss/components/content-item-row/_content-item-row.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../link-list';

package/scss/components/content-item-row-media/_content-item-row-media.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 @use '../link-list';
 

package/scss/components/cta-block/_cta-block.scss

@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../../internal/content-block';

package/scss/components/expressive-modal/_expressive-modal.scss

@@ -14,6 +14,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/components/modal' as *;
 
@@ -31,7 +32,7 @@
     .#{$prefix}--modal-container {
       padding: $spacing-05;
       grid-template-rows: 1fr;
-      min-block-size: $spacing-10 + to-rem($icon-size);
+      min-block-size: $spacing-10 + $icon-size;
 
       @include breakpoint(md) {
         padding: $spacing-07;

package/scss/components/filter-panel/_filter-panel.scss

@@ -9,6 +9,7 @@
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/layout' as *;

package/scss/components/footer/_footer.scss

@@ -487,7 +487,7 @@
     }
 
     .#{$prefix}--list-box__menu {
-      inset-block-end: to-rem($spacing-09);
+      inset-block-end: $spacing-09;
     }
 
     .#{$prefix}--dropdown,

package/scss/components/footer/_language-selector.scss

@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/combo-box/combo-box' as *;
 @use '@carbon/styles/scss/components/list-box/list-box' as *;
 @use '@carbon/styles/scss/components/select/select' as *;

package/scss/components/global-banner/_global-banner.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2023
+// Copyright IBM Corp. 2019, 2024
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../image/index';

package/scss/components/image/_image.scss

@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/colors' as *;
 @use '../lightbox-media-viewer/lightbox-media-viewer';
 

package/scss/components/leadspace/_leadspace.scss

@@ -15,6 +15,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/content-width' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/utils/ratio-base' as *;

package/scss/components/leadspace-block/_leadspace-block.scss

@@ -10,6 +10,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '../../globals/utils/content-width' as *;
 @use '../../globals/utils/hang' as *;

package/scss/components/leadspace-with-search/_leadspace-with-search.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/vars' as *;
 @use '../../internal/content-block';

package/scss/components/search-with-typeahead/_search-with-typeahead.scss

@@ -11,6 +11,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/ui-shell/header';
 @use '@carbon/styles/scss/components/ui-shell/side-nav';
 @use '@carbon/styles/scss/components/dropdown';

package/scss/components/tableofcontents/_table-of-contents.scss

@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../globals/carbon-grid' as *;
 @use '../../globals/vars' as *;
@@ -339,7 +340,7 @@ $hover-transition-timing: 95ms;
 
   .#{$prefix}--toc__navbar-chevron-right-container {
     z-index: 2;
-    inset-inline-end: -$spacing-01;
+    inset-inline-end: 0;
 
     @include breakpoint(md) {
       inset-inline-end: -$spacing-05;
@@ -416,11 +417,11 @@ $hover-transition-timing: 95ms;
       border-block-start: 1px solid $border-subtle-00;
       content: '';
       inset-block-start: -1px;
-      inset-inline: calc(-50vw + 50%) 100%;
+      inset-inline: calc(-50vw + 50% + $spacing-03) 100%;
     }
 
     &::after {
-      inset-inline: 100% calc(-50vw + 50%);
+      inset-inline: 100% calc(-50vw + 50% + $spacing-03);
     }
   }
 

package/scss/components/tabs-extended/_tabs-extended.scss

@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/button' as *;
 @use '../../globals/vars' as *;
 @use '@carbon/styles/scss/components/tabs/vars' as *;

package/scss/components/tag-link/_tag-link.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2023
+// Copyright IBM Corp. 2019, 2024
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -9,6 +9,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 
 @mixin tag-link {

package/scss/globals/utils/_content-width.scss

@@ -7,6 +7,7 @@
 
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 // Sets the Width and Max-Width of the Card to 90% / 640px.
 @mixin content-width {

package/scss/patterns/blocks/callout-data/_callout-data.scss

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@use '@carbon/styles/scss/utilities/convert' as *;
+
 @mixin callout-data {
   .#{$prefix}--callout-data {
     .#{$prefix}--callout {

package/scss/patterns/blocks/leadspace-block/_leadspace-block.scss

@@ -8,6 +8,7 @@
 /// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/leadspace-block/leadspace-block"
 @warn 'Deprecated scss import for `leadspace-block`, remap to `@carbon/ibmdotcom-styles/scss/components/leadspace-block/leadspace-block`';
 @use '../../../components/leadspace-block';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 @mixin leadspace-block {
   .#{$prefix}--leadspace-block {

package/scss/patterns/sections/leadspace/_leadspace.scss

@@ -7,6 +7,7 @@
 
 /// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/leadspace/leadspace"
 @warn 'Deprecated scss import for `leadspace`, remap to `@carbon/ibmdotcom-styles/scss/components/leadspace/leadspace`';
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/utils/flex-grid' as *;
 @use '../../../components/leadspace';