@carbon/styles 1.113.0 → 1.114.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__/button-test.js

@@ -9,6 +9,7 @@
 
 'use strict';
 
+const postcss = require('postcss');
 const { SassRenderer } = require('@carbon/test-utils/scss');
 
 const { render } = SassRenderer.create(__dirname);
@@ -69,4 +70,30 @@ describe('scss/components/button', () => {
     `);
     expect(unwrap('height')).toBe('2rem');
   });
+
+  test('icon-only ghost button does not apply active background on focus', async () => {
+    const { result } = await render(`
+    @use '../button';
+  `);
+
+    let focusRule;
+
+    postcss.parse(result.css.toString()).walkRules((rule) => {
+      if (rule.selector === '.cds--btn--icon-only.cds--btn--ghost:focus') {
+        focusRule = rule;
+      }
+    });
+
+    expect(focusRule).toBeDefined();
+
+    const declarations = focusRule.nodes
+      .filter((node) => node.type === 'decl')
+      .reduce((styles, node) => {
+        styles[node.prop] = node.value;
+        return styles;
+      }, {});
+
+    expect(declarations['background-color']).toBeUndefined();
+    expect(declarations['box-shadow']).toBeDefined();
+  });
 });

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/__tests__/overflow-menu-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);
@@ -24,4 +25,42 @@ describe('scss/components/overflow-menu', () => {
      `);
     expect(unwrap('mixin')).toBe(true);
   });
+
+  test('trigger hover styles are only applied on devices that support hover', async () => {
+    const { result } = await render(`
+      @use '../overflow-menu';
+    `);
+    const hoverRules = [];
+    const triggerSelector =
+      /\.cds--overflow-menu(?=[.:#\s>+~,\[]).*:hover|\.cds--overflow-menu__trigger(?=[.:#\s>+~,\[]).*:hover/;
+
+    postcss.parse(result.css.toString()).walkRules((rule) => {
+      if (triggerSelector.test(rule.selector)) {
+        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([]);
+  });
 });

package/scss/components/__tests__/structured-list-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);
@@ -24,4 +25,40 @@ describe('scss/components/structured-list', () => {
       `);
     expect(unwrap('mixin')).toBe(true);
   });
+
+  test('row hover styles are only applied on devices that support hover', async () => {
+    const { result } = await render(`
+      @use '../structured-list';
+    `);
+    const hoverRules = [];
+
+    postcss.parse(result.css.toString()).walkRules((rule) => {
+      if (rule.selector.includes('.cds--structured-list-row: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([]);
+  });
 });

package/scss/components/__tests__/tag-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.
@@ -8,7 +8,6 @@
  */
 
 'use strict';
-
 const { SassRenderer } = require('@carbon/test-utils/scss');
 
 const { render } = SassRenderer.create(__dirname);

package/scss/components/__tests__/text-input-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.

package/scss/components/__tests__/treeview-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);
@@ -22,4 +23,62 @@ describe('scss/components/treeview', () => {
      `);
     expect(unwrap('mixin')).toBe(true);
   });
+
+  test('hover styles are only applied on devices that support hover', async () => {
+    const { result } = await render(`
+      @use '../treeview';
+    `);
+    const hoverRules = [];
+
+    postcss.parse(result.css.toString()).walkRules((rule) => {
+      if (
+        rule.selector.includes('.cds--tree') &&
+        rule.selector.includes(':hover')
+      ) {
+        hoverRules.push(rule);
+      }
+    });
+
+    expect(hoverRules.length).toBeGreaterThan(0);
+    expect(
+      hoverRules.some((rule) =>
+        rule.selector.includes('.cds--tree-node__label:hover')
+      )
+    ).toBe(true);
+    expect(
+      hoverRules.some(
+        (rule) =>
+          rule.selector.includes('.cds--tree-node--disabled') &&
+          rule.selector.includes('.cds--tree-node__label:hover')
+      )
+    ).toBe(true);
+    expect(
+      hoverRules.some(
+        (rule) =>
+          rule.selector.includes('.cds--tree-node--selected') &&
+          rule.selector.includes('.cds--tree-node__label:hover')
+      )
+    ).toBe(true);
+    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([]);
+  });
 });

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