carbon-components-svelte 0.108.1 → 0.110.0

package/README.md

@@ -6,13 +6,16 @@
 <img src="https://img.shields.io/discord/689212587170201628?color=5865F2&style=for-the-badge" alt="Chat with us on Discord">
 </a>
 
-Carbon Components Svelte is a [Svelte](https://github.com/sveltejs/svelte) component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.
+Carbon Components Svelte is a [Svelte](https://github.com/sveltejs/svelte) component library that implements the [Carbon Design System](https://www.carbondesignsystem.com/), an open source design system by IBM. Ship accessible, consistent, production-ready interfaces.
 
-Design systems facilitate design and development through reuse, consistency, and extensibility.
+- **70+ components**: from inputs to data tables
+- **5 built-in themes**: two light, three dark
+- **Fully typed TypeScript API**: props, events, and slots
+- **WCAG 2.1 AA**: keyboard and screen-reader ready
 
-The Carbon Svelte portfolio also includes:
+The Carbon Svelte ecosystem also includes:
 
-- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,600+ Carbon icons as Svelte components
+- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,700+ Carbon icons as Svelte components
 - **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,500+ Carbon pictograms as Svelte components
 - **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 25+ charts, powered by d3
 - **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
@@ -26,7 +29,7 @@ The Carbon Svelte portfolio also includes:
 npm i carbon-components-svelte
 
 # pnpm
-pnpm i carbon-components-svelte
+pnpm add carbon-components-svelte
 
 # Yarn
 yarn add carbon-components-svelte
@@ -46,9 +49,9 @@ Before importing components, you will need to first apply Carbon component style
 - **g80.css**: Gray 80 theme (dark)
 - **g90.css**: Gray 90 theme (dark)
 - **g100.css**: Gray 100 theme (dark)
-- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
+- **all.css**: All five themes (White, Gray 10, Gray 80, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
 
-Each StyleSheet is [generated](scripts/build-css.js) from the flagship [carbon-components](https://github.com/carbon-design-system/carbon/tree/main/packages/carbon-components) library.
+Each StyleSheet is [generated](scripts/build-css.ts) from the flagship [carbon-components](https://github.com/carbon-design-system/carbon/tree/main/packages/carbon-components) library.
 
 The compiled CSS is generated from the following `.scss` files:
 
@@ -59,6 +62,8 @@ The compiled CSS is generated from the following `.scss` files:
 - [css/g100.scss](css/g100.scss)
 - [css/all.scss](css/all.scss)
 
+Import one theme once at the top-level entry point of your app, like `index.js` or `src/+layout.svelte`.
+
 #### CSS StyleSheet
 
 ```js
@@ -89,7 +94,7 @@ Refer to the [official Carbon guide on SASS](https://github.com/carbon-design-sy
 
 ### Dynamic theming
 
-Use the "all.css" StyleSheet for dynamic, client-side theming.
+To switch themes at runtime, import the combined "all.css" StyleSheet instead of a single theme. It bundles all five themes and toggles between them through a `theme` attribute on the HTML element.
 
 ```js
 import "carbon-components-svelte/css/all.css";
@@ -106,7 +111,7 @@ Update the theme by setting the `theme` attribute on the `html` element. The def
 </html>
 ```
 
-Programmatically switch between each of the five Carbon themes by setting the "theme" attribute on the HTML element.
+Or programmatically switch between each of the five Carbon themes by setting the `theme` attribute on the HTML element.
 
 ```html
 <script>
@@ -116,6 +121,8 @@ Programmatically switch between each of the five Carbon themes by setting the "t
 </script>
 ```
 
+Alternatively, use the [Theme component](https://svelte.carbondesignsystem.com/components/Theme) to manage the theme reactively.
+
 ### Importing components
 
 Import components from `carbon-components-svelte` in the `script` tag of your Svelte file. Visit the [documentation site](https://svelte.carbondesignsystem.com) for examples.
@@ -137,7 +144,7 @@ Import components from `carbon-components-svelte` in the `script` tag of your Sv
 
 ## Preprocessors & Plugins
 
-[carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte) is a collection of Svelte preprocessors for Carbon.
+[carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte) is a collection of Svelte preprocessors for Carbon. It trims build times and bundle size with two drop-in tools for faster HMR in development and leaner CSS when you ship.
 
 > [!NOTE]
 > Using `carbon-preprocess-svelte` is optional and not a prerequisite for this library. It should be installed as a development dependency.
@@ -147,7 +154,7 @@ Import components from `carbon-components-svelte` in the `script` tag of your Sv
 npm i -D carbon-preprocess-svelte
 
 # pnpm
-pnpm i -D carbon-preprocess-svelte
+pnpm add -D carbon-preprocess-svelte
 
 # Yarn
 yarn add -D carbon-preprocess-svelte
@@ -179,39 +186,9 @@ The preprocessor optimizes imports from the following packages:
 + import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte";
 ```
 
-#### Usage
-
-See [examples](examples) for full configurations.
-
-```js
-// svelte.config.js
-import { optimizeImports } from "carbon-preprocess-svelte";
-
-export default {
-  preprocess: [optimizeImports()],
-};
-```
-
-Any other preprocessors that transpile code in the `script` block should be invoked before `optimizeImports`.
-
-For example, `vitePreprocess` should precede `optimizeImports`.
-
-```diff
-// svelte.config.js
-+ import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
-import { optimizeImports } from "carbon-preprocess-svelte";
-
-export default {
-  preprocess: [
-+   vitePreprocess(),
-    optimizeImports()
-  ],
-};
-```
-
 ### `optimizeCss`
 
-`optimizeCss` is a Vite plugin that removes unused Carbon styles at build time. The plugin is compatible with Rollup ([Vite](https://vitejs.dev/guide/api-plugin) extends the Rollup plugin API).
+`optimizeCss` is a Vite plugin that removes unused Carbon styles at build time, often removing hundreds of kilobytes from production bundles. The plugin is compatible with Rollup ([Vite](https://vitejs.dev/guide/api-plugin) extends the Rollup plugin API).
 
 `carbon-components-svelte@0.85.0` or greater is required.
 
@@ -230,9 +207,42 @@ dist/assets/index-Ceijs3eO.js   53.65 kB │ gzip: 15.88 kB
 > [!NOTE]
 > This is a plugin and not a Svelte preprocessor. It should be added to the list of `vite.plugins`. For Vite set-ups, this plugin is only run when building the app. For Rollup and Webpack, you should conditionally apply the plugin to only execute when building for production.
 
-#### Usage
+### Configure your bundler
+
+Add `optimizeImports` to your Svelte preprocessor and `optimizeCss` to your bundler plugins. See [examples](examples) for full configurations.
 
-See [examples](examples) for full configurations.
+**Vite**
+
+```js
+// vite.config.js
+import { svelte, vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+import { optimizeCss, optimizeImports } from "carbon-preprocess-svelte";
+
+export default {
+  plugins: [
+    svelte({
+      preprocess: [vitePreprocess(), optimizeImports()],
+    }),
+    optimizeCss(),
+  ],
+};
+```
+
+**SvelteKit**
+
+```js
+// svelte.config.js
+import adapter from "@sveltejs/adapter-static";
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+import { optimizeImports } from "carbon-preprocess-svelte";
+
+const config = {
+  preprocess: [vitePreprocess(), optimizeImports()],
+  kit: { adapter: adapter() },
+};
+
+export default config;
+```
 
 ```js
 // vite.config.js
@@ -245,6 +255,112 @@ export default defineConfig({
 });
 ```
 
+**Rollup**
+
+```js
+// rollup.config.js
+import svelte from "rollup-plugin-svelte";
+import { optimizeCss, optimizeImports } from "carbon-preprocess-svelte";
+
+const production = !process.env.ROLLUP_WATCH;
+
+export default {
+  plugins: [
+    svelte({
+      preprocess: [optimizeImports()],
+    }),
+    production && optimizeCss(),
+  ],
+};
+```
+
+**Webpack**
+
+```js
+// webpack.config.mjs
+import { OptimizeCssPlugin, optimizeImports } from "carbon-preprocess-svelte";
+
+export default {
+  module: {
+    rules: [
+      {
+        test: /\.svelte$/,
+        use: {
+          loader: "svelte-loader",
+          options: {
+            preprocess: [optimizeImports()],
+          },
+        },
+      },
+    ],
+  },
+  plugins: [new OptimizeCssPlugin()],
+};
+```
+
+## Icons and pictograms
+
+The icon and pictogram sets ship as separate packages of individual Svelte components. Each is optional, so install only what you need.
+
+### Icons
+
+2,700+ icons designed for product UI, in four sizes (16, 20, 24, and 32 pixels), set with a single prop.
+
+```sh
+# npm
+npm i carbon-icons-svelte
+
+# pnpm
+pnpm add carbon-icons-svelte
+
+# Yarn
+yarn add carbon-icons-svelte
+
+# Bun
+bun add carbon-icons-svelte
+```
+
+```svelte
+<script>
+  import Add from "carbon-icons-svelte/lib/Add.svelte";
+</script>
+
+<Add size={24} />
+```
+
+### Pictograms
+
+1,500+ illustrative pictograms for empty states, onboarding, hero sections, and feature callouts. Larger than icons, 64px by default.
+
+```sh
+# npm
+npm i carbon-pictograms-svelte
+
+# pnpm
+pnpm add carbon-pictograms-svelte
+
+# Yarn
+yarn add carbon-pictograms-svelte
+
+# Bun
+bun add carbon-pictograms-svelte
+```
+
+```svelte
+<script>
+  import Cloud from "carbon-pictograms-svelte/lib/Cloud.svelte";
+</script>
+
+<Cloud />
+```
+
+## Documentation for LLMs
+
+Documentation is available in LLM-friendly plain text for use with coding assistants, plus a standalone Markdown document for every component. Append `.md` to any component's URL to read it.
+
+- **[llms.txt](https://svelte.carbondesignsystem.com/llms.txt)**: a component index where each entry links to its per-component Markdown doc, sized for model context windows.
+- **[llms-full.txt](https://svelte.carbondesignsystem.com/llms-full.txt)**: the full component documentation in a single plain-text file.
+
 ## Examples
 
 - [examples/rollup](examples/rollup/)

package/css/_badge-indicator.scss

@@ -0,0 +1,48 @@
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+@import "carbon-components/scss/globals/scss/typography";
+
+/// Badge indicator (Carbon React BadgeIndicator; absent from v10).
+/// An empty dot or a numbered count overlaid on a positioned ancestor.
+/// @access private
+/// @group components
+@mixin badge-indicator {
+  .#{$prefix}--badge-indicator {
+    @include type-style("helper-text-01");
+
+    position: absolute;
+    display: flex;
+    padding: 0 $carbon--spacing-02 $carbon--spacing-01;
+    border-radius: 100px;
+    background: $support-error;
+    color: $text-on-color;
+
+    inset-block-start: 0;
+    inset-inline-end: 0;
+
+    margin-block-start: $carbon--spacing-03;
+    margin-inline-end: $carbon--spacing-03;
+
+    max-block-size: $carbon--spacing-05;
+    min-block-size: $carbon--spacing-03;
+    min-inline-size: $carbon--spacing-03;
+  }
+
+  .#{$prefix}--badge-indicator--count {
+    margin-block-start: $carbon--spacing-02;
+    margin-inline-end: $carbon--spacing-02;
+  }
+
+  .#{$prefix}--btn__badge-wrapper {
+    position: relative;
+    display: inline-flex;
+
+    .#{$prefix}--badge-indicator {
+      pointer-events: none;
+    }
+  }
+}
+
+@include exports("badge-indicator") {
+  @include badge-indicator;
+}

package/css/_box.scss

@@ -0,0 +1,71 @@
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+@import "./spacing-scale";
+
+/// Box utility classes for fill, inset, and border tokens.
+/// @access private
+/// @group components
+@mixin box {
+  // Token names follow Carbon v11; values resolve through v10 theme variables.
+  $fill-tokens: (
+    background: $background,
+    layer-01: $ui-01,
+    layer-02: $ui-02,
+    layer-03: $ui-03,
+    field: $field-01,
+    inverse: $background-inverse,
+  );
+
+  @each $name, $value in $fill-tokens {
+    .#{$prefix}--box-fill-#{$name} {
+      background-color: $value;
+    }
+  }
+
+  $border-tokens: (
+    subtle: $border-subtle,
+    strong: $border-strong,
+    interactive: $border-interactive,
+    disabled: $border-disabled,
+  );
+
+  @each $name, $value in $border-tokens {
+    .#{$prefix}--box-border-#{$name} {
+      border: 1px solid $value;
+    }
+  }
+
+  @each $step, $size in $ccs-spacing-scale {
+    .#{$prefix}--box-p-#{$step} {
+      padding: $size;
+    }
+
+    .#{$prefix}--box-px-#{$step} {
+      padding-inline: $size;
+    }
+
+    .#{$prefix}--box-py-#{$step} {
+      padding-block: $size;
+    }
+
+    .#{$prefix}--box-m-#{$step} {
+      margin: $size;
+    }
+
+    .#{$prefix}--box-mx-#{$step} {
+      margin-inline: $size;
+    }
+
+    .#{$prefix}--box-my-#{$step} {
+      margin-block: $size;
+    }
+  }
+
+  .#{$prefix}--box-full-width {
+    width: 100%;
+  }
+}
+
+@include exports("box") {
+  @include box;
+}

package/css/_breadcrumb.scss

@@ -3,7 +3,7 @@
 @import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
 @import "carbon-components/scss/globals/scss/typography";
 
-/// Small breadcrumb variant (Carbon React `size="sm"` parity)
+/// Small breadcrumb (Carbon React size="sm")
 /// @access private
 /// @group components
 @mixin breadcrumb-sm {
@@ -35,8 +35,10 @@
     height: $carbon--spacing-05;
     min-height: $carbon--spacing-05;
 
+    // Carbon shifts this icon down 4px inside breadcrumb items. At 1rem trigger
+    // size the icon is already centered, so reset `transform`.
     .#{$prefix}--overflow-menu__icon {
-      transform: translateY(3px);
+      transform: none;
     }
   }
 }
@@ -44,3 +46,18 @@
 @include exports('breadcrumb-sm') {
   @include breadcrumb-sm;
 }
+
+/// Carbon's `--sm`/`--xl` caret sets `width: 40px` on `::after`. Same
+/// specificity as the breadcrumb rule, but Carbon loads first. Force `width: 0`
+/// here so the caret stays a triangle.
+/// @access private
+/// @group components
+@mixin breadcrumb-menu-caret {
+  .#{$prefix}--breadcrumb-menu-options.#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after {
+    width: 0;
+  }
+}
+
+@include exports('breadcrumb-menu-caret') {
+  @include breadcrumb-menu-caret;
+}

package/css/_checkbox-readonly.scss

@@ -1,7 +1,3 @@
-// This file backports readonly checkbox styles from carbon-components v11+
-// to ensure compatibility with carbon-components v10.58.12.
-// The readonly checkbox feature was added to Carbon Design System in Nov 2022.
-
 @import "carbon-components/scss/globals/scss/vars";
 @import "carbon-components/scss/globals/scss/helper-mixins";
 @import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
@@ -10,9 +6,6 @@
 /// @access private
 /// @group checkbox
 @mixin checkbox-readonly {
-  //----------------------------------------------
-  // Read-only
-  // ---------------------------------------------
   .#{$prefix}--checkbox-wrapper--readonly .#{$prefix}--checkbox-label {
     cursor: default;
   }

package/css/_code-snippet.scss

@@ -0,0 +1,46 @@
+@import "carbon-components/scss/globals/scss/vars";
+
+/// Edge fade for code snippets (Carbon React v11 parity). v10 uses
+/// `--overflow-indicator` gradient elements that this library's markup does not
+/// render. v11 masks the scroll container instead, which is background-agnostic
+/// and works across themes, the light variant, and skeleton state.
+/// @access private
+/// @group components
+@mixin code-snippet-fade {
+  .#{$prefix}--snippet--single .#{$prefix}--snippet-container {
+    mask-image: linear-gradient(
+      90deg,
+      $black-100 calc(100% - #{$carbon--spacing-07}),
+      transparent 100%
+    );
+
+    // The focus outline is drawn on this same element, so the edge fade would
+    // clip the ring. Drop the mask while focused so the outline is unbroken.
+    &:focus {
+      mask-image: none;
+    }
+  }
+
+  // Expanded multi-line adds padding-bottom: $spacing-05, so the bottom fade
+  // offset matches that padding when content no longer scrolls.
+  .#{$prefix}--snippet--multi .#{$prefix}--snippet-container {
+    mask-image: linear-gradient(
+        90deg,
+        $black-100 calc(100% - #{$carbon--spacing-07}),
+        transparent 100%
+      ),
+      linear-gradient(
+        $black-100 calc(100% - #{$spacing-05}),
+        transparent 100%
+      );
+    mask-composite: intersect;
+
+    &:focus {
+      mask-image: none;
+    }
+  }
+}
+
+@include exports("code-snippet-fade") {
+  @include code-snippet-fade;
+}

package/css/_combo-button.scss

@@ -0,0 +1,50 @@
+@import "carbon-components/scss/globals/scss/vars";
+@import "carbon-components/scss/globals/scss/helper-mixins";
+@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
+
+/// Groups a `ComboButton`'s primary action and icon-only trigger button into
+/// a single visual unit. The divider mirrors v10's own `.bx--btn-set`
+/// technique (a box-shadow on the trigger, since adjacent buttons have no
+/// margin between them); the chevron rotates on open.
+/// @access private
+/// @group components
+@mixin combo-button {
+  .#{$prefix}--combo-button {
+    display: inline-flex;
+  }
+
+  .#{$prefix}--combo-button .#{$prefix}--combo-button__trigger:not(:focus) {
+    box-shadow: to-rem(-1px) 0 0 0 $button-separator;
+  }
+
+  .#{$prefix}--combo-button
+    .#{$prefix}--combo-button__trigger.#{$prefix}--btn--disabled {
+    box-shadow: to-rem(-1px) 0 0 0 $disabled-03;
+  }
+
+  .#{$prefix}--combo-button__trigger .#{$prefix}--btn__icon {
+    transition: transform $duration--fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--combo-button__trigger--open .#{$prefix}--btn__icon {
+    transform: rotate(180deg);
+  }
+
+  // Extra-small (Carbon React size="xs", 24px). Neither Button's "small"
+  // class (32px) nor any other Button size lands on 24px, so shrink further
+  // on top of the "small" size already passed to both buttons.
+  .#{$prefix}--combo-button--xs .#{$prefix}--btn {
+    min-height: to-rem(24px);
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .#{$prefix}--combo-button--xs .#{$prefix}--btn--icon-only {
+    padding-right: to-rem(4px);
+    padding-left: to-rem(4px);
+  }
+}
+
+@include exports("combo-button") {
+  @include combo-button;
+}

package/css/_combobox-readonly.scss

@@ -1,6 +1,3 @@
-// This file backports readonly combo-box styles from carbon-components v11+
-// to ensure compatibility with carbon-components v10.58.12.
-
 @import "carbon-components/scss/globals/scss/vars";
 @import "carbon-components/scss/globals/scss/helper-mixins";
 @import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
@@ -9,9 +6,6 @@
 /// @access private
 /// @group combobox
 @mixin combobox-readonly {
-  //----------------------------------------------
-  // Read-only
-  // ---------------------------------------------
   .#{$prefix}--list-box.#{$prefix}--combo-box--readonly,
   .#{$prefix}--list-box.#{$prefix}--combo-box--readonly:hover {
     background-color: transparent;

package/css/_contained-list.scss

@@ -1,7 +1,3 @@
-// This file adds contained list styles from carbon-components v11+
-// to ensure compatibility with carbon-components v10.58.12.
-// The ContainedList component provides a structured list with header and items.
-
 @import "carbon-components/scss/globals/scss/vars";
 @import "carbon-components/scss/globals/scss/helper-mixins";
 @import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
@@ -10,19 +6,15 @@
 /// @access private
 /// @group contained-list
 @mixin contained-list {
-  // Tag within contained list
   .#{$prefix}--contained-list .#{$prefix}--tag {
-    // Tag size adjustments for contained list context
     height: 1.5rem; // 24px equivalent to md size
   }
 
-  // List container
   .#{$prefix}--contained-list > ul {
     padding: 0;
     margin: 0;
   }
 
-  // Header
   .#{$prefix}--contained-list__header {
     position: sticky;
     z-index: 1;
@@ -37,7 +29,6 @@
     width: 100%;
   }
 
-  // Search within contained list
   .#{$prefix}--contained-list .#{$prefix}--search {
     position: sticky;
     z-index: 1;
@@ -47,12 +38,10 @@
     }
   }
 
-  // Search top offset for disclosed variant (fixed height)
   .#{$prefix}--contained-list--disclosed .#{$prefix}--search {
     top: 2rem; // Fixed header height for disclosed variant
   }
 
-  // Search top offset for on-page variant (size-dependent)
   .#{$prefix}--contained-list--on-page .#{$prefix}--search {
     top: 3rem; // Default md size header height
   }
@@ -72,7 +61,6 @@
     top: 4.5rem; // xl size header height
   }
 
-  // Omit search input background when used inside contained list
   .#{$prefix}--contained-list .#{$prefix}--search .#{$prefix}--search-input {
     background-color: $ui-background;
     border-bottom: 1px solid $ui-03;
@@ -109,7 +97,6 @@
     outline: none;
   }
 
-  // "On Page" variant
   .#{$prefix}--contained-list--on-page + .#{$prefix}--contained-list--on-page {
     margin-top: $spacing-05;
   }
@@ -123,7 +110,6 @@
     color: $text-01;
   }
 
-  // Size variants for on-page header
   .#{$prefix}--contained-list--on-page.#{$prefix}--contained-list--sm
     .#{$prefix}--contained-list__header {
     height: 2rem;
@@ -139,7 +125,7 @@
     height: 4.5rem;
   }
 
-  // "Disclosed" variant
+  // Disclosed variant
   .#{$prefix}--contained-list--disclosed .#{$prefix}--contained-list__header {
     @include type-style('label-01');
 
@@ -148,7 +134,6 @@
     color: $text-02;
   }
 
-  // List item
   .#{$prefix}--contained-list-item {
     position: relative;
     display: list-item;
@@ -176,15 +161,12 @@
     .#{$prefix}--contained-list-item__content {
     @include type-style('body-short-01');
 
-    // Calculate padding based on line-height
-    // body-short-01 line-height is typically 1.25rem (20px)
-    // Height is 3rem (48px) for md size, so padding = (48px - 20px) / 2 = 14px
-    padding: 0.875rem $spacing-05; // 14px vertical, 16px horizontal
+    // Vertical padding centers body-short-01 in the row height
+    padding: 0.875rem $spacing-05;
     color: $text-01;
     min-height: 3rem; // md size default
   }
 
-  // Size variants for list items
   .#{$prefix}--contained-list--sm
     .#{$prefix}--contained-list-item__content,
   .#{$prefix}--contained-list--sm