@carbon/styles 1.103.0 → 1.104.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.103.0",
+  "version": "1.104.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.49.0",
+    "@carbon/colors": "^11.50.0",
     "@carbon/feature-flags": "^1.2.0",
-    "@carbon/grid": "^11.52.0",
-    "@carbon/layout": "^11.50.0",
-    "@carbon/motion": "^11.43.0",
-    "@carbon/themes": "^11.70.0",
-    "@carbon/type": "^11.56.0",
+    "@carbon/grid": "^11.53.0",
+    "@carbon/layout": "^11.51.0",
+    "@carbon/motion": "^11.44.0",
+    "@carbon/themes": "^11.71.0",
+    "@carbon/type": "^11.57.0",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/plex-mono": "1.1.0",
     "@ibm/plex-sans": "1.1.0",
@@ -59,7 +59,7 @@
     "@ibm/telemetry-js": "^1.5.0"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.40.0",
+    "@carbon/test-utils": "^10.41.0",
     "autoprefixer": "^10.4.7",
     "browserslist-config-carbon": "^11.2.0",
     "css": "^3.0.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "aeaaa31889990fc76c7e0e8a29ec0bf96ce33f82"
+  "gitHead": "937649543e9cc6af9dfb6b53a2adb76760bca986"
 }

package/scss/__tests__/layout-test.js

@@ -0,0 +1,206 @@
+/**
+ * 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 css = require('css');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('@carbon/styles/scss/layout', () => {
+  test('Public API', async () => {
+    const { get } = await render(`
+      @use 'sass:meta';
+      @use '../layout';
+
+      $_: get('api', (
+        mixins: (
+          emit-layout-tokens: meta.mixin-exists('emit-layout-tokens', 'layout'),
+          emit-layout-tokens-to-shadow-host: meta.mixin-exists('emit-layout-tokens-to-shadow-host', 'layout'),
+        ),
+      ));
+    `);
+
+    const { value: api } = get('api');
+    expect(api).toEqual({
+      mixins: {
+        'emit-layout-tokens': true,
+        'emit-layout-tokens-to-shadow-host': true,
+      },
+    });
+  });
+
+  test('emit-layout-tokens emits all size tokens', async () => {
+    const { result } = await render(`
+      @use '../layout';
+      .test {
+        @include layout.emit-layout-tokens();
+      }
+    `);
+
+    const output = result.css.toString();
+    expect(output).toContain('--cds-layout-size-height-xs');
+    expect(output).toContain('--cds-layout-size-height-sm');
+    expect(output).toContain('--cds-layout-size-height-md');
+    expect(output).toContain('--cds-layout-size-height-lg');
+    expect(output).toContain('--cds-layout-size-height-xl');
+    expect(output).toContain('--cds-layout-size-height-2xl');
+  });
+
+  test('emit-layout-tokens emits all density tokens', async () => {
+    const { result } = await render(`
+      @use '../layout';
+      .test {
+        @include layout.emit-layout-tokens();
+      }
+    `);
+
+    const output = result.css.toString();
+    expect(output).toContain('--cds-layout-density-padding-inline-condensed');
+    expect(output).toContain('--cds-layout-density-padding-inline-normal');
+  });
+
+  test('emit-layout-tokens emits min and max boundary tokens', async () => {
+    const { result } = await render(`
+      @use '../layout';
+      .test {
+        @include layout.emit-layout-tokens();
+      }
+    `);
+
+    const output = result.css.toString();
+    expect(output).toContain('--cds-layout-size-height-min');
+    expect(output).toContain('--cds-layout-size-height-max');
+    expect(output).toContain('--cds-layout-density-padding-inline-min');
+    expect(output).toContain('--cds-layout-density-padding-inline-max');
+  });
+
+  test('layout size classes set size context token', async () => {
+    const { result } = await render(`
+      @use '../layout';
+    `);
+
+    const { stylesheet } = css.parse(result.css.toString());
+
+    const findRule = (selector) =>
+      stylesheet.rules.find((rule) =>
+        rule.selectors?.some((s) => s.includes(selector))
+      );
+
+    const findDeclaration = (rule, property) =>
+      rule?.declarations?.find((d) => d.property.includes(property));
+
+    expect(
+      findDeclaration(
+        findRule('.cds--layout--size-sm'),
+        '--cds-layout-size-height-context'
+      )
+    ).toBeDefined();
+
+    expect(
+      findDeclaration(
+        findRule('.cds--layout--size-lg'),
+        '--cds-layout-size-height-context'
+      )
+    ).toBeDefined();
+  });
+
+  test('layout density classes set density context token', async () => {
+    const { result } = await render(`
+      @use '../layout';
+    `);
+
+    const { stylesheet } = css.parse(result.css.toString());
+
+    const findRule = (selector) =>
+      stylesheet.rules.find((rule) =>
+        rule.selectors?.some((s) => s.includes(selector))
+      );
+
+    const findDeclaration = (rule, property) =>
+      rule?.declarations?.find((d) => d.property.includes(property));
+
+    expect(
+      findDeclaration(
+        findRule('.cds--layout--density-condensed'),
+        '--cds-layout-density-padding-inline-context'
+      )
+    ).toBeDefined();
+
+    expect(
+      findDeclaration(
+        findRule('.cds--layout--density-normal'),
+        '--cds-layout-density-padding-inline-context'
+      )
+    ).toBeDefined();
+  });
+
+  test('layout constraint classes are generated for default, min and max', async () => {
+    const { result } = await render(`
+      @use '../layout';
+    `);
+
+    const output = result.css.toString();
+    expect(output).toContain('.cds--layout-constraint--size__default-md');
+    expect(output).toContain('.cds--layout-constraint--size__min-sm');
+    expect(output).toContain('.cds--layout-constraint--size__max-lg');
+    expect(output).toContain(
+      '.cds--layout-constraint--density__default-condensed'
+    );
+    expect(output).toContain('.cds--layout-constraint--density__min-normal');
+    expect(output).toContain('.cds--layout-constraint--density__max-normal');
+  });
+
+  test('emit-layout-tokens-to-shadow-host generates host selectors for size', async () => {
+    const { result } = await render(`
+      @use '../layout';
+      @include layout.emit-layout-tokens-to-shadow-host('cds-layout');
+    `);
+
+    const output = result.css.toString();
+    expect(output).toContain(':host(cds-layout[size=xs])');
+    expect(output).toContain(':host(cds-layout[size=sm])');
+    expect(output).toContain(':host(cds-layout[size=md])');
+    expect(output).toContain(':host(cds-layout[size=lg])');
+    expect(output).toContain(':host(cds-layout[size=xl])');
+    expect(output).toContain(':host(cds-layout[size="2xl"])');
+    expect(output).toContain('--cds-layout-size-height-context');
+  });
+
+  test('emit-layout-tokens-to-shadow-host generates host selectors for density', async () => {
+    const { result } = await render(`
+      @use '../layout';
+      @include layout.emit-layout-tokens-to-shadow-host('cds-layout');
+    `);
+
+    const output = result.css.toString();
+    expect(output).toContain(':host(cds-layout[density=condensed])');
+    expect(output).toContain(':host(cds-layout[density=normal])');
+    expect(output).toContain('--cds-layout-density-padding-inline-context');
+  });
+
+  test(':root emits layout tokens globally', async () => {
+    const { result } = await render(`
+      @use '../layout';
+    `);
+
+    const { stylesheet } = css.parse(result.css.toString());
+    const rootRule = stylesheet.rules.find((rule) =>
+      rule.selectors?.includes(':root')
+    );
+
+    expect(rootRule).toBeDefined();
+    expect(
+      rootRule.declarations.some((d) =>
+        d.property.includes('--cds-layout-size-height-xs')
+      )
+    ).toBe(true);
+  });
+});

package/scss/_layout.scss

@@ -103,6 +103,29 @@ $layout-tokens: (
   }
 }
 
+/// Emits layout context tokens for shadow host elements.
+@mixin emit-layout-tokens-to-shadow-host($host-selector) {
+  @each $group, $properties in $layout-tokens {
+    @each $property, $steps in $properties {
+      @each $step, $value in $steps {
+        :host(#{$host-selector}[#{$group}='#{$step}']) {
+          @include custom-property.declaration(
+            'layout-#{$group}-#{$property}-context',
+            custom-property.get-var(
+              'layout-#{$group}-#{$property}-#{$step}',
+              $value
+            )
+          );
+          @include custom-property.declaration(
+            'layout-#{$group}-#{$property}',
+            custom-property.get-var('layout-#{$group}-#{$property}-context')
+          );
+        }
+      }
+    }
+  }
+}
+
 :root {
   @include emit-layout-tokens();
 }

package/scss/components/contained-list/_contained-list.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022
+// Copyright IBM Corp. 2022, 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.
@@ -56,6 +56,7 @@
     position: sticky;
     z-index: 1;
     display: flex;
+    box-sizing: border-box;
     align-items: center;
     inset-block-start: 0;
     padding-inline: layout.density('padding-inline');
@@ -120,7 +121,7 @@
   .#{$prefix}--contained-list--on-page .#{$prefix}--contained-list__header {
     @include type-style('heading-compact-01');
 
-    background-color: $background;
+    background-color: $layer-background;
     block-size: layout.size('height');
     border-block-end: 1px solid $border-subtle;
     color: $text-primary;

package/scss/components/list/_list.scss

@@ -91,7 +91,7 @@
   .#{$prefix}--list--unordered.#{$prefix}--list--nested
     > .#{$prefix}--list__item::before {
     // ▪ square
-    content: '\0025AA';
+    content: '\0025AA\00FE0E';
     // offset to account for smaller ▪ vs –
     inset-inline-start: calc(-1 * #{$spacing-04});
   }