@carbon/styles 1.113.0 → 1.114.0-rc.0

package/scss/components/OptionsTile/_options-tile.scss

@@ -0,0 +1,240 @@
+//
+// 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.
+//
+
+//-----------------------------
+// Options tile
+//-----------------------------
+
+@use '../../config' as *;
+@use '../../theme' as *;
+@use '../../type';
+@use '../../spacing' as *;
+@use '../../motion' as *;
+@use '../../utilities/focus-outline';
+@use '../../utilities/visually-hidden';
+
+/// Options tile styles
+/// @access public
+/// @group options-tile
+@mixin options-tile {
+  .#{$prefix}--options-tile {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    background-color: $layer;
+    border-block-end: 1px solid $border-subtle;
+  }
+
+  .#{$prefix}--options-tile__toggle-container {
+    position: absolute;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: calc(#{$spacing-05} + 2rem + #{$spacing-05});
+
+    inset-block: 0;
+    inset-inline-end: 0;
+    padding-inline-end: $spacing-05;
+    padding-inline-start: $spacing-05;
+  }
+
+  .#{$prefix}--options-tile__toggle {
+    position: absolute;
+  }
+
+  .#{$prefix}--options-tile__toggle
+    .#{$prefix}--toggle-input__label
+    .#{$prefix}--toggle__switch {
+    margin: 0;
+  }
+
+  .#{$prefix}--options-tile__toggle .#{$prefix}--toggle__label-text {
+    @include visually-hidden.visually-hidden;
+  }
+
+  .#{$prefix}--options-tile__details {
+    display: inline-flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  .#{$prefix}--options-tile__header,
+  .#{$prefix}--options-tile__static-content {
+    display: grid;
+    box-sizing: border-box;
+    align-items: center;
+    grid-template-columns: 3rem 1fr 0;
+    padding-inline-end: $spacing-05;
+  }
+
+  .#{$prefix}--options-tile__header {
+    flex-grow: 1;
+    background-color: transparent;
+    cursor: pointer;
+    inline-size: 100%;
+    transition: background-color $duration-fast-01 motion(entrance, productive);
+
+    &--has-toggle {
+      inline-size: calc(100% - (#{$spacing-05} + 2rem + #{$spacing-05}));
+    }
+  }
+
+  .#{$prefix}--options-tile__header::-webkit-details-marker {
+    display: none;
+  }
+
+  .#{$prefix}--options-tile__header:hover {
+    background-color: $background-hover;
+  }
+
+  .#{$prefix}--options-tile__header:has(
+      .#{$prefix}--options-tile__toggle-container:hover
+    ) {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--options-tile__header:focus {
+    @include focus-outline.focus-outline('outline');
+  }
+
+  .#{$prefix}--options-tile__heading {
+    grid-column: 2;
+  }
+
+  .#{$prefix}--options-tile__title {
+    @include type.type-style('productive-heading-01');
+
+    color: $text-primary;
+  }
+
+  .#{$prefix}--options-tile__summary {
+    @include type.type-style('helper-text-01');
+
+    display: grid;
+    block-size: $spacing-05;
+    color: $text-secondary;
+    margin-block-start: $spacing-02;
+    opacity: 1;
+    transition-duration: $duration-moderate-01;
+    transition-property: height, opacity, margin-top;
+    transition-timing-function: motion(standard, productive);
+  }
+
+  .#{$prefix}--options-tile__summary--invalid,
+  .#{$prefix}--options-tile__summary--warn,
+  .#{$prefix}--options-tile__summary--locked {
+    column-gap: $spacing-02;
+    grid-template-columns: 1rem 1fr;
+  }
+
+  .#{$prefix}--options-tile__summary--invalid {
+    color: $support-error;
+  }
+
+  .#{$prefix}--options-tile__summary--warn {
+    color: $text-primary;
+  }
+
+  .#{$prefix}--options-tile__summary--warn svg {
+    color: $support-warning;
+  }
+
+  .#{$prefix}--options-tile__summary--warn svg path[fill='none'] {
+    fill: #000000;
+  }
+
+  .#{$prefix}--options-tile__summary-text {
+    overflow: hidden;
+    block-size: max-content;
+    padding-inline-end: $spacing-05;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .#{$prefix}--options-tile__chevron {
+    display: block;
+    justify-self: center;
+    transition: transform $duration-fast-02 motion(standard, productive);
+  }
+
+  .#{$prefix}--options-tile__content {
+    padding-inline: $spacing-09 $spacing-05;
+  }
+
+  .#{$prefix}--options-tile__content
+    > .#{$prefix}--fieldset
+    > .#{$prefix}--label:empty {
+    display: none;
+  }
+
+  .#{$prefix}--options-tile--closing .#{$prefix}--options-tile__content {
+    overflow: hidden;
+  }
+
+  .#{$prefix}--options-tile__summary.#{$prefix}--options-tile__summary--open:not(
+      .#{$prefix}--options-tile__summary--closing
+    ),
+  .#{$prefix}--options-tile__summary--hidden {
+    block-size: 0;
+    margin-block-start: 0;
+    opacity: 0;
+  }
+
+  .#{$prefix}--options-tile__chevron.#{$prefix}--options-tile__chevron--open:not(
+      .#{$prefix}--options-tile__chevron--closing
+    ) {
+    transform: rotate(180deg);
+  }
+
+  .#{$prefix}--options-tile > details[open] .#{$prefix}--options-tile__content {
+    padding-block: $spacing-03 $spacing-06;
+  }
+
+  .#{$prefix}--options-tile__locked-text {
+    @include type.type-style('body-long-01');
+
+    display: inline-flex;
+    align-items: center;
+    color: $text-secondary;
+    margin-block-end: $spacing-06;
+  }
+
+  .#{$prefix}--options-tile__locked-text > svg {
+    margin-inline-end: $spacing-02;
+  }
+
+  .#{$prefix}--options-tile--lg .#{$prefix}--options-tile__header,
+  .#{$prefix}--options-tile--lg .#{$prefix}--options-tile__static-content {
+    block-size: 3rem;
+  }
+
+  .#{$prefix}--options-tile--xl .#{$prefix}--options-tile__header,
+  .#{$prefix}--options-tile--xl .#{$prefix}--options-tile__static-content {
+    block-size: 4rem;
+  }
+
+  .#{$prefix}--options-tile--lg .#{$prefix}--options-tile__toggle {
+    // "top" shouldn't be a spacing token as it depends on the toggle size
+    inset-block-start: $spacing-05;
+  }
+
+  .#{$prefix}--options-tile--xl .#{$prefix}--options-tile__toggle {
+    // "top" shouldn't be a spacing token as it depends on the toggle size
+    inset-block-start: $spacing-06;
+  }
+
+  .#{$prefix}--options-tile--lg .#{$prefix}--options-tile__summary {
+    margin-block-start: $spacing-01;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .#{$prefix}--options-tile__summary,
+    .#{$prefix}--options-tile__chevron {
+      transition: none;
+    }
+  }
+}

package/scss/components/__tests__/data-table-test.js

@@ -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.
@@ -9,6 +9,7 @@
 
 'use strict';
 
+const postcss = require('postcss');
 const { SassRenderer } = require('@carbon/test-utils/scss');
 
 const { render } = SassRenderer.create(__dirname);
@@ -30,6 +31,47 @@ describe('scss/components/data-table', () => {
       ]
     `);
   });
+
+  test('row hover styles are only applied on devices that support hover', async () => {
+    const { result } = await render(`
+      @use '../data-table';
+      @use '../data-table/expandable';
+      @use '../data-table/skeleton';
+    `);
+    const hoverRules = [];
+
+    postcss.parse(result.css.toString()).walkRules((rule) => {
+      if (
+        /(?:^|[\s>+~,])tr(?=[.\[:\s])/.test(rule.selector) &&
+        rule.selector.includes(':hover')
+      ) {
+        hoverRules.push(rule);
+      }
+    });
+
+    expect(hoverRules.length).toBeGreaterThan(0);
+    expect(
+      hoverRules
+        .filter((rule) => {
+          let parent = rule.parent;
+
+          while (parent) {
+            if (
+              parent.type === 'atrule' &&
+              parent.name === 'media' &&
+              parent.params.includes('(any-hover: hover)')
+            ) {
+              return false;
+            }
+
+            parent = parent.parent;
+          }
+
+          return true;
+        })
+        .map((rule) => rule.selector)
+    ).toEqual([]);
+  });
 });
 
 describe('scss/components/data-table/action', () => {

package/scss/components/__tests__/file-uploader.js

@@ -9,6 +9,7 @@
 
 'use strict';
 
+const postcss = require('postcss');
 const { SassRenderer } = require('@carbon/test-utils/scss');
 
 const { render } = SassRenderer.create(__dirname);
@@ -24,4 +25,33 @@ describe('scss/components/file-uploader', () => {
     `);
     expect(unwrap('mixin')).toBe(true);
   });
+
+  test('disabled drop containers use disabled cursor', async () => {
+    const { result } = await render(`
+      @use '../file-uploader';
+    `);
+    const disabledDropContainerRules = [];
+
+    postcss.parse(result.css.toString()).walkRules((rule) => {
+      if (
+        rule.selector.includes('--file-browse-btn--disabled') &&
+        rule.selector.includes('--file__drop-container')
+      ) {
+        disabledDropContainerRules.push(rule);
+      }
+    });
+
+    expect(disabledDropContainerRules).toHaveLength(1);
+    expect(disabledDropContainerRules[0].selector).toContain(
+      '--file-browse-btn--disabled.cds--file__drop-container'
+    );
+    expect(disabledDropContainerRules[0].selector).toContain(
+      '--file-browse-btn--disabled .cds--file__drop-container'
+    );
+    expect(
+      disabledDropContainerRules[0].nodes.some(
+        (node) => node.prop === 'cursor' && node.value === 'no-drop'
+      )
+    ).toBe(true);
+  });
 });

package/scss/components/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2018, 2025
+// 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.
@@ -10,9 +10,11 @@
 @use 'ai-label';
 @use 'aspect-ratio';
 @use 'badge-indicator';
+@use 'big-number';
 @use 'breadcrumb';
 @use 'button';
 @use 'card';
+@use 'coachmark';
 @use 'chat-button';
 @use 'checkbox';
 @use 'code-snippet';
@@ -42,8 +44,10 @@
 @use 'fluid-text-input';
 @use 'fluid-time-picker';
 @use 'form';
+@use 'FullPageError';
 @use 'icon-indicator';
 @use 'inline-loading';
+@use 'InterstitialScreen';
 @use 'link';
 @use 'list';
 @use 'list-box';
@@ -55,6 +59,7 @@
 @use 'notification';
 @use 'number-input';
 @use 'overflow-menu';
+@use 'OptionsTile';
 @use 'page-header';
 @use 'pagination';
 @use 'pagination-nav';
@@ -63,6 +68,7 @@
 @use 'progress-indicator';
 @use 'radio-button';
 @use 'resizer';
+@use 'scroll-gradient';
 @use 'side-panel';
 @use 'search';
 @use 'select';
@@ -84,3 +90,5 @@
 @use 'treeview';
 @use 'truncated-text';
 @use 'ui-shell';
+@use 'EditInPlace';
+@use 'user-avatar';

package/scss/components/big-number/_big-number.scss

@@ -0,0 +1,164 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+//-----------------------------
+// Big number
+//-----------------------------
+
+@use '../../config' as *;
+@use '../../theme' as *;
+@use '../../type' as *;
+@use '../../spacing' as *;
+
+/// BigNumber styles
+/// @access public
+/// @group big-number
+@mixin big-number {
+  .#{$prefix}--big-number {
+    margin: 0;
+  }
+
+  .#{$prefix}--big-number__label {
+    @include type-style('label-01');
+
+    display: block;
+    margin: 0;
+    color: $text-secondary;
+  }
+
+  .#{$prefix}--big-number__value {
+    @include type-style('heading-04');
+
+    margin-block-end: 0;
+  }
+
+  .#{$prefix}--big-number__total {
+    @include type-style('body-compact-01');
+  }
+
+  .#{$prefix}--big-number__total,
+  .#{$prefix}--big-number__percentage-mark {
+    margin-block: auto $spacing-02;
+  }
+
+  .#{$prefix}--big-number__info {
+    padding-inline-start: $spacing-03;
+    vertical-align: top;
+  }
+
+  .#{$prefix}--big-number__trend {
+    margin-block-start: $spacing-03;
+    vertical-align: top;
+  }
+
+  .#{$prefix}--big-number__row {
+    display: flex;
+  }
+
+  .#{$prefix}--big-number__percentage {
+    @include type-style('heading-04');
+  }
+
+  .#{$prefix}--big-number__percentage-mark {
+    @include type-style('body-compact-01');
+  }
+
+  .#{$prefix}--big-number__icon-button {
+    margin-inline-start: $spacing-02;
+  }
+
+  .#{$prefix}--big-number--lg .#{$prefix}--big-number__value,
+  .#{$prefix}--big-number--lg .#{$prefix}--big-number__percentage {
+    @include type-style('heading-06');
+  }
+
+  .#{$prefix}--big-number--lg .#{$prefix}--big-number__total,
+  .#{$prefix}--big-number--lg .#{$prefix}--big-number__percentage-mark {
+    @include type-style('heading-03');
+  }
+
+  .#{$prefix}--big-number--xl .#{$prefix}--big-number__label {
+    @include type-style('body-compact-01');
+  }
+
+  .#{$prefix}--big-number--xl .#{$prefix}--big-number__value,
+  .#{$prefix}--big-number--xl .#{$prefix}--big-number__percentage {
+    @include type-style('heading-07');
+  }
+
+  .#{$prefix}--big-number--xl .#{$prefix}--big-number__total,
+  .#{$prefix}--big-number--xl .#{$prefix}--big-number__percentage-mark {
+    @include type-style('heading-04');
+  }
+
+  .#{$prefix}--big-number--xl .#{$prefix}--big-number__trend {
+    margin-block-start: $spacing-04;
+  }
+
+  .#{$prefix}--big-number .#{$prefix}--big-number__tooltip-trigger {
+    display: inline-flex;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    cursor: pointer;
+    vertical-align: top;
+
+    &:focus {
+      outline: 1px solid $focus;
+    }
+  }
+
+  //
+  // Skeleton
+  //
+
+  .#{$prefix}--big-number-skeleton {
+    inline-size: 4rem;
+  }
+
+  .#{$prefix}--big-number-skeleton__label {
+    block-size: $spacing-04;
+    margin-block: 0 $spacing-03;
+  }
+
+  .#{$prefix}--big-number-skeleton__value {
+    margin: 0;
+    /* stylelint-disable-next-line declaration-no-important */
+    block-size: $spacing-08 !important;
+  }
+
+  .#{$prefix}--big-number-skeleton--lg {
+    inline-size: 5rem;
+  }
+
+  .#{$prefix}--big-number-skeleton--xl {
+    inline-size: 6rem;
+  }
+
+  .#{$prefix}--big-number-skeleton.#{$prefix}--big-number-skeleton--lg
+    .#{$prefix}--big-number-skeleton__label {
+    block-size: $spacing-04;
+  }
+
+  .#{$prefix}--big-number-skeleton.#{$prefix}--big-number-skeleton--lg
+    .#{$prefix}--big-number-skeleton__value {
+    /* stylelint-disable-next-line declaration-no-important */
+    block-size: $spacing-09 !important;
+  }
+
+  .#{$prefix}--big-number-skeleton.#{$prefix}--big-number-skeleton--xl
+    .#{$prefix}--big-number-skeleton__label {
+    block-size: $spacing-04;
+  }
+
+  .#{$prefix}--big-number-skeleton.#{$prefix}--big-number-skeleton--xl
+    .#{$prefix}--big-number-skeleton__value {
+    /* stylelint-disable-next-line declaration-no-important */
+    block-size: $spacing-10 !important;
+  }
+}

package/scss/components/big-number/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2024, 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 'big-number';
+@use 'big-number';
+
+@include big-number.big-number;

package/scss/components/card/_card.scss

@@ -24,33 +24,53 @@
   // ─── Base ────────────────────────────────────────────────────────────
   .#{$prefix}--card {
     position: relative;
-    border: 1px solid $border-subtle-01;
-    background-color: $layer-01;
+    background-color: $layer;
     color: $text-primary;
   }
 
   // ─── Clickable ───────────────────────────────────────────────────────
   .#{$prefix}--card--clickable {
+    display: block;
+    border: 1px solid $border-tile-01;
     cursor: pointer;
+    // Reset anchor defaults when card is rendered as <a>
+    text-decoration: none;
     transition: background-color $duration-fast-02 motion(standard, productive);
 
     &:hover {
-      background-color: $layer-hover-01;
+      background-color: $layer-hover;
     }
 
     &:focus {
       @include focus-outline('outline');
+
+      outline-offset: 0;
     }
 
     &:active {
-      background-color: $layer-active-01;
+      background-color: $layer-active;
     }
   }
 
+  // ─── Clickable footer affordance ─────────────────────────────────────
+  // Auto-rendered by Card when clickable is true.
+  .#{$prefix}--card__clickable-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: $spacing-05;
+    color: $icon-interactive;
+  }
+
+  // Disabled state: mute the footer icon
+  .#{$prefix}--card--disabled .#{$prefix}--card__clickable-footer {
+    color: $icon-disabled;
+  }
+
   // ─── Disabled ────────────────────────────────────────────────────────
   .#{$prefix}--card--disabled {
     border-color: $border-disabled;
-    background-color: $layer-01;
+    background-color: $layer;
     color: $text-disabled;
     cursor: not-allowed;
     pointer-events: none;
@@ -71,14 +91,12 @@
   .#{$prefix}--card__body {
     @include type-style('body-compact-01');
 
-    margin-block: $spacing-05;
-    margin-block-start: 0;
-    margin-inline: $spacing-05;
+    padding-block: $spacing-05;
+    padding-inline: $spacing-05;
   }
 
-  // When body is the first child (no header), restore top padding
-  .#{$prefix}--card > .#{$prefix}--card__body:first-child {
-    margin-block-start: $spacing-05;
+  .#{$prefix}--card__body--flush {
+    padding: 0;
   }
 
   // ─── Footer ──────────────────────────────────────────────────────────
@@ -231,6 +249,10 @@
     color: $text-secondary;
   }
 
+  .#{$prefix}--card--disabled .#{$prefix}--card__label {
+    color: $text-disabled;
+  }
+
   .#{$prefix}--card__label--truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -250,7 +272,6 @@
     display: flex;
     overflow: hidden;
     flex-direction: column;
-    color: $text-primary;
     // 2px between label / text-row / description
     gap: $spacing-01;
     margin-inline: $spacing-05;
@@ -325,6 +346,10 @@
     color: $text-secondary;
   }
 
+  .#{$prefix}--card--disabled .#{$prefix}--card__description {
+    color: $text-disabled;
+  }
+
   .#{$prefix}--card__description--truncate {
     overflow: hidden;
     text-overflow: ellipsis;