@carbon/styles 1.113.0 → 1.114.0

package/index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2023
+// Copyright IBM Corp. 2018, 2026
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,6 +7,7 @@
 
 @forward 'scss/config';
 @forward 'scss/spacing';
+@forward 'scss/border-radius';
 @forward 'scss/colors' hide $white;
 @forward 'scss/motion';
 @forward 'scss/type';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.113.0",
+  "version": "1.114.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.56.0",
-    "@carbon/feature-flags": "^1.7.0",
-    "@carbon/grid": "^11.60.0",
-    "@carbon/layout": "^11.57.0",
-    "@carbon/motion": "^11.50.0",
-    "@carbon/themes": "^11.79.0",
-    "@carbon/type": "^11.65.0",
+    "@carbon/colors": "^11.57.0",
+    "@carbon/feature-flags": "^1.8.0",
+    "@carbon/grid": "^11.61.0",
+    "@carbon/layout": "^11.58.0",
+    "@carbon/motion": "^11.51.0",
+    "@carbon/themes": "^11.80.0",
+    "@carbon/type": "^11.66.0",
     "@ibm/plex": "6.4.1",
     "@ibm/plex-mono": "2.5.0",
     "@ibm/plex-sans": "1.1.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "188d23202ec1092322dee92cf0df9d9958224ae4"
+  "gitHead": "7518c84ffd00f22434fe19d83119692c12fccb2f"
 }

package/scss/__tests__/__snapshots__/border-radius-test.js.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`@carbon/styles/scss/border-radius Public API 1`] = `
+{
+  "variables": {
+    "border-radius": {
+      "border-radius-00": "0px",
+      "border-radius-02": "0.125rem",
+      "border-radius-04": "0.25rem",
+      "border-radius-08": "0.5rem",
+      "border-radius-16": "1rem",
+      "border-radius-24": "1.5rem",
+      "border-radius-max": "999999px",
+    },
+    "border-radius-00": "0px",
+    "border-radius-02": "0.125rem",
+    "border-radius-04": "0.25rem",
+    "border-radius-08": "0.5rem",
+    "border-radius-16": "1rem",
+    "border-radius-24": "1.5rem",
+    "border-radius-max": "999999px",
+  },
+}
+`;

package/scss/__tests__/__snapshots__/colors-test.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`@carbon/styles/scss/colors Public API 1`] = `
 {

package/scss/__tests__/__snapshots__/config-test.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`@carbon/styles/scss/config Public API 1`] = `
 {

package/scss/__tests__/__snapshots__/spacing-test.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`@carbon/styles/scss/spacing Public API 1`] = `
 {

package/scss/__tests__/__snapshots__/type-test.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`@carbon/styles/scss/type type-classes mixin 1`] = `
 {

package/scss/__tests__/border-radius-test.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('@carbon/styles/scss/border-radius', () => {
+  test('Public API', async () => {
+    const { get } = await render(`
+      @use 'sass:meta';
+      @use '../border-radius';
+
+      $_: get('api', (
+        variables: meta.module-variables('border-radius'),
+      ));
+    `);
+
+    const { value: api } = get('api');
+
+    expect(api).toMatchSnapshot();
+  });
+});

package/scss/_border-radius.scss

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2026
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/layout/scss/border-radius' show $border-radius,
+  $border-radius-00, $border-radius-02, $border-radius-04, $border-radius-08,
+  $border-radius-16, $border-radius-24, $border-radius-max;

package/scss/components/EditInPlace/_edit-in-place.scss

@@ -0,0 +1,188 @@
+//
+// Copyright IBM Corp. 2022, 2025
+//
+// 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 '../../config' as *;
+@use '../../theme' as *;
+@use '../../type' as *;
+@use '../../spacing' as *;
+@use '../../motion' as *;
+
+/// EditInPlace styles
+/// @access public
+/// @group edit-in-place
+@mixin edit-in-place {
+  $block-class: #{$prefix}--edit-in-place;
+  $carbon-input: #{$prefix}--text-input;
+
+  .#{$block-class} {
+    --#{$block-class}--size: #{$spacing-07};
+
+    display: flex;
+    align-items: center;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .#{$block-class}--sm {
+    --#{$block-class}--size: #{$spacing-08};
+  }
+
+  .#{$block-class}--md {
+    --#{$block-class}--size: #{$spacing-09};
+  }
+
+  .#{$block-class}--lg {
+    --#{$block-class}--size: #{$spacing-10};
+  }
+
+  .#{$block-class}__toggletip-wrapper {
+    display: block;
+    inline-size: 100%;
+  }
+
+  .#{$block-class}__toggletip-wrapper .#{$prefix}--toggletip-button {
+    display: block;
+    inline-size: 100%;
+  }
+
+  .#{$block-class}:hover {
+    background: $field-01;
+  }
+
+  .#{$block-class}:hover .#{$block-class}__btn-edit,
+  .#{$block-class}__btn-edit.#{$block-class}__btn-edit--always-visible {
+    visibility: visible;
+  }
+
+  .#{$block-class}__btn-edit {
+    visibility: hidden;
+  }
+
+  .#{$block-class}--invalid {
+    border: 2px solid $support-error;
+  }
+
+  .#{$block-class}--focused {
+    background: $field-01;
+  }
+
+  // Show outline on entire component when input has focus
+  .#{$block-class}--focused:has(.#{$block-class}__text-input:focus) {
+    outline: 2px solid $focus;
+  }
+
+  // Remove border when focused to avoid double border with outline
+  .#{$block-class}--invalid.#{$block-class}--focused {
+    border: none;
+  }
+
+  .#{$block-class}__text-input {
+    flex: 1;
+  }
+
+  .#{$block-class}--inherit-type .#{$block-class}__text-input {
+    /* match font of container */
+    font-size: inherit;
+    font-weight: inherit;
+    letter-spacing: inherit;
+    line-height: inherit;
+  }
+
+  .#{$block-class}__text-input-label {
+    display: none;
+  }
+
+  .#{$block-class}__warning-icon {
+    margin: auto $spacing-03;
+    color: $support-error;
+    inline-size: $spacing-05;
+  }
+
+  .#{$block-class}__warning-text {
+    @include type-style('label-01');
+
+    color: $support-error;
+
+    margin-block-start: $spacing-03;
+  }
+
+  // overrides
+  .#{$block-class}__text-input.#{$carbon-input} {
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    outline: none;
+  }
+
+  // Remove outline when not in edit mode
+  .#{$block-class}:not(.#{$block-class}--focused)
+    .#{$block-class}__text-input.#{$carbon-input}:focus,
+  .#{$block-class}:not(.#{$block-class}--focused)
+    .#{$block-class}__text-input.#{$carbon-input}:active {
+    outline: none;
+  }
+
+  .#{$block-class}__toolbar {
+    --toolbar-width: var(--#{$block-class}--size);
+    --toolbar-width-focussed: calc(2 * var(--#{$block-class}--size));
+
+    // animation div
+    display: inline-flex;
+    align-self: stretch;
+    inline-size: var(--toolbar-width);
+
+    .#{$prefix}--btn.#{$prefix}--btn--icon-only:not(#{$prefix}-icon-button) {
+      padding: 0;
+      min-block-size: unset;
+    }
+  }
+
+  // Match button heights to input heights for each size and make them square
+  .#{$block-class}__toolbar
+    .#{$prefix}--btn.#{$prefix}--btn--icon-only:not(#{$prefix}-icon-button) {
+    block-size: var(--#{$block-class}--size);
+    inline-size: var(--#{$block-class}--size);
+  }
+
+  .#{$block-class}__toolbar #{$prefix}-icon-button::part(button) {
+    padding: $spacing-02;
+  }
+
+  .#{$block-class}--invalid .#{$block-class}__toolbar {
+    // width of invalid icon is always $spacing-07 ($spacing-05 + 2 * $spacing-03 margin)
+    --toolbar-width: calc(var(--#{$block-class}--size) + #{$spacing-07});
+    --toolbar-width-focussed: calc(
+      2 * var(--#{$block-class}--size) + #{$spacing-07}
+    );
+  }
+
+  @keyframes edit-in-place-slide-in {
+    0% {
+      overflow: hidden;
+      inline-size: var(--toolbar-width);
+    }
+
+    99% {
+      overflow: hidden;
+      inline-size: var(--toolbar-width-focussed);
+    }
+
+    100% {
+      overflow: visible;
+      inline-size: var(--toolbar-width-focussed);
+    }
+  }
+
+  .#{$block-class}--focused:not(.#{$block-class}--readonly)
+    .#{$block-class}__toolbar {
+    overflow: initial;
+
+    animation: edit-in-place-slide-in $duration-moderate-01
+      motion(entrance, productive);
+    inline-size: var(--toolbar-width-focussed);
+  }
+}

package/scss/components/EditInPlace/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2022, 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'edit-in-place';
+@use 'edit-in-place';
+
+@include edit-in-place.edit-in-place;

package/scss/components/FullPageError/_full-page-error.scss

@@ -0,0 +1,91 @@
+//
+// Copyright IBM Corp. 2024, 2025
+//
+// 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 '../../config' as *;
+@use '../../theme' as *;
+@use '../../type' as *;
+@use '../../spacing' as *;
+@use '../../breakpoint' as *;
+
+/// FullPageError styles
+/// @access public
+/// @group full-page-error
+@mixin full-page-error {
+  .#{$prefix}--full-page-error {
+    block-size: inherit;
+  }
+
+  .#{$prefix}--full-page-error__container {
+    margin: 0 $spacing-06;
+    block-size: 100%;
+
+    @include breakpoint-down(md) {
+      margin: 0 $spacing-03;
+    }
+  }
+
+  .#{$prefix}--full-page-error__grid {
+    block-size: 100%;
+    padding-block: $spacing-07;
+  }
+
+  .#{$prefix}--full-page-error__column {
+    padding: 0;
+
+    @include breakpoint(lg) {
+      padding: 0 $spacing-07 0 0;
+    }
+  }
+
+  .#{$prefix}--full-page-error__svg-container {
+    display: flex;
+    padding: $spacing-03 $spacing-03 $spacing-11 $spacing-03;
+    block-size: 100%;
+
+    @include breakpoint(md) {
+      padding: auto $spacing-03 $spacing-11;
+    }
+  }
+
+  .#{$prefix}--full-page-error__label,
+  .#{$prefix}--full-page-error__title {
+    @include type-style('fluid-heading-05', true);
+  }
+
+  .#{$prefix}--full-page-error__label {
+    display: block;
+    color: $text-error;
+  }
+
+  .#{$prefix}--full-page-error__title {
+    margin-block-end: $spacing-09;
+  }
+
+  .#{$prefix}--full-page-error__description {
+    @include type-style('body-02');
+
+    margin-block-end: $spacing-07;
+  }
+
+  .#{$prefix}--full-page-error__body {
+    @include type-style('body-02');
+  }
+
+  // safari rendering fix
+  .#{$prefix}--full-page-error__svg-container
+    svg.#{$prefix}--full-page-error__svg {
+    inline-size: 100%;
+  }
+
+  // svg theme styles
+  .#{$prefix}--full-page-error__svg-container
+    svg.#{$prefix}--full-page-error__svg
+    path {
+    fill: $background;
+    stroke: $border-inverse;
+  }
+}

package/scss/components/FullPageError/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2024, 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'full-page-error';
+@use 'full-page-error';
+
+@include full-page-error.full-page-error;

package/scss/components/InterstitialScreen/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2024, 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'interstitial-screen';
+@use 'interstitial-screen';
+
+@include interstitial-screen.interstitial-screen;

package/scss/components/InterstitialScreen/_interstitial-screen.scss

@@ -0,0 +1,181 @@
+//
+// Copyright IBM Corp. 2024, 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/* stylelint-disable declaration-no-important */
+
+@use '../../config' as *;
+@use '../../theme' as *;
+@use '../../type' as *;
+@use '../../spacing' as *;
+@use '../../breakpoint' as *;
+
+/// InterstitialScreen styles
+/// @access public
+/// @group interstitial-screen
+@mixin interstitial-screen {
+  $block-class: #{$prefix}--interstitial-screen;
+  $carousel-item: #{$prefix}--carousel__item;
+
+  .#{$block-class} {
+    $block: &;
+
+    &--body {
+      overflow: hidden auto;
+      flex-grow: 1;
+      padding: 0;
+      margin: 0;
+      background-color: $background;
+    }
+
+    &--progress {
+      overflow: auto;
+      margin-block-end: $spacing-04;
+    }
+
+    &__carousel {
+      block-size: 100%;
+
+      .#{$carousel-item} {
+        flex: 0 0 100%;
+        scroll-snap-align: start;
+      }
+    }
+
+    &--internal-body {
+      padding: 0 !important;
+      margin: 0 !important;
+    }
+
+    &--content {
+      block-size: 100%;
+    }
+
+    // HEADER
+    &--internal-header {
+      position: relative;
+      background-color: $background;
+      margin-block-end: 0 !important;
+      padding-block-start: $spacing-06 !important;
+      padding-inline-start: $spacing-07 !important;
+
+      @include breakpoint-down(md) {
+        padding-inline: $spacing-05 !important;
+      }
+
+      &:empty {
+        min-block-size: 0;
+      }
+
+      .#{$block-class}--titleContainer {
+        margin-block-end: $spacing-05;
+
+        h1 {
+          @include type-style('productive-heading-04');
+
+          margin-block-end: $spacing-03;
+
+          &:empty {
+            padding: 0;
+          }
+        }
+
+        h2 {
+          @include type-style('productive-heading-03');
+
+          &:empty {
+            padding: 0;
+          }
+        }
+      }
+
+      &--has-title {
+        background: $layer-01;
+        border-block-end: 1px solid $border-subtle-01;
+
+        #{$block}--progress {
+          margin-block-start: 0;
+        }
+      }
+    }
+
+    // FOOTER
+    &--footer {
+      background: $background;
+      border-block-start: 1px solid $border-subtle-01;
+      inline-size: 100%;
+
+      @include breakpoint-down(md) {
+        block-size: auto;
+      }
+
+      // ButtonSet wrapper
+      .#{$prefix}--btn-set {
+        display: flex;
+        justify-content: flex-end;
+        inline-size: 100%;
+      }
+
+      // On small screens, split width equally among all buttons
+      @include breakpoint-down(md) {
+        .#{$prefix}--btn#{$block}--prev-btn,
+        .#{$prefix}--btn#{$block}--next-btn,
+        .#{$prefix}--btn#{$block}--start-btn,
+        .#{$prefix}--btn#{$block}--skip-btn {
+          flex: 1 1 0;
+          inline-size: auto;
+          max-inline-size: none;
+          min-inline-size: 0;
+        }
+      }
+
+      // On larger screens, fixed widths for action buttons, flexible skip
+      @include breakpoint(md) {
+        .#{$prefix}--btn#{$block}--prev-btn,
+        .#{$prefix}--btn#{$block}--next-btn,
+        .#{$prefix}--btn#{$block}--start-btn {
+          flex: 0 0 auto;
+          inline-size: calc($spacing-11 * 3);
+          max-inline-size: 15rem;
+        }
+
+        .#{$prefix}--btn#{$block}--skip-btn {
+          flex: 1 1 auto;
+          max-inline-size: none;
+        }
+      }
+
+      .#{$prefix}--inline-loading {
+        position: absolute;
+        inline-size: $spacing-07;
+        inset-block-start: 0;
+        inset-inline-end: 0;
+      }
+    }
+
+    &--footer-controls {
+      display: flex;
+      flex-direction: row;
+      margin-inline-start: auto;
+    }
+
+    // FULL SCREEN
+    &--full-screen {
+      position: fixed;
+      inset-block-start: 0;
+      inset-inline: 0;
+
+      #{$block}--container {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+        margin: 0;
+        block-size: 100vh;
+        max-inline-size: 100vw;
+      }
+    }
+  }
+}

package/scss/components/OptionsTile/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2021, 2026
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'options-tile';
+@use 'options-tile';
+
+@include options-tile.options-tile;