@carbon/ibmdotcom-styles 2.16.0-rc.3 → 2.16.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-styles",
   "description": "Carbon for IBM.com Styles",
-  "version": "2.16.0-rc.3",
+  "version": "2.16.1",
   "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": "f35ac6b645aebca2cf92e2d39c91d4bf77cdf3af"
+  "gitHead": "5bef17f6bbbb85e82faaed49e585958166208e9b"
 }

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/_card.scss

@@ -157,7 +157,7 @@
       }
     }
 
-    .#{$prefix}--card__copy:not([hidden]) {
+    .#{$prefix}--card__copy {
       @include type-style('body-02');
 
       margin-block-end: $spacing-07;
@@ -219,10 +219,6 @@
 
       .#{$prefix}--card__copy {
         margin-block: $spacing-07 0;
-
-        &[hidden] {
-          margin: 0;
-        }
       }
 
       svg {
@@ -254,6 +250,16 @@
           align-items: flex-start;
         }
 
+        .#{$prefix}--card__content {
+          padding-block-end: $spacing-10;
+        }
+
+        .#{$prefix}--card__pictogram-wrapper {
+          position: absolute;
+          inset-block-end: $spacing-05;
+          inset-inline-start: $spacing-05;
+        }
+
         .#{$prefix}--card__copy {
           margin-block-end: $spacing-07;
         }
@@ -286,6 +292,13 @@
       display: flex;
       flex-direction: column;
       gap: $spacing-05;
+
+      &[hidden] {
+        // Need important to force [hidden] to really mean hidden above many
+        // other variants setting display.
+        /* stylelint-disable declaration-no-important */
+        display: none !important;
+      }
     }
   }
 

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 *;
@@ -62,6 +63,7 @@
       display: grid;
       border: 0;
       grid-row: span 10;
+      grid-template-columns: subgrid;
       grid-template-rows: subgrid;
       margin-block-end: $spacing-07;
       outline: 1px solid $border-tile-01;

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-group-cards/_content-group-cards.scss

@@ -38,7 +38,6 @@
 
   .#{$prefix}--content-group-cards__row {
     display: grid;
-    margin-inline: -$spacing-05;
 
     @include breakpoint(md) {
       grid-auto-rows: 1fr;

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/link-with-icon/_link-with-icon.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.
@@ -15,7 +15,7 @@
 @use '../lightbox-media-viewer/lightbox-media-viewer';
 
 @mixin link-with-icon {
-  .#{$c4d-prefix}--link-with-icon,
+  .#{$prefix}--link-with-icon,
   :host(#{$c4d-prefix}-link-with-icon),
   :host(#{$c4d-prefix}-link-list-item),
   :host(#{$c4d-prefix}-link-list-item-cta),

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 *;

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/internal/content-block/_content-block.scss

@@ -87,6 +87,7 @@
 
     ::slotted(#{$c4d-prefix}-content-group:not([slot])),
     ::slotted(#{$c4d-prefix}-cta-block-item-row:not([slot])),
+    ::slotted(#{$c4d-prefix}-content-group-cards-item:not([slot])),
     ::slotted([data-autoid^='c4d--tabs-']:not([slot])),
     ::slotted([data-autoid^='c4d--card']:not([slot])) {
       margin-inline-start: 0;

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';