Carbon Components Svelte Versions Save

This release includes changes needed for the latest version of carbon-preprocess-svelte, which is a from-scratch rewrite of the optimizeImports preprocessor and optimizeCss plugin.

If using pre-compiled CSS from carbon-components-svelte, the optimizeCss plugin can greatly reduce the outputted CSS bundle by remove unused Carbon CSS selectors.

See examples for usage.

export default defineConfig({
  plugins: [sveltekit(), optimizeCss()],
});

Optimized index-CU4gbKFa.css
- Before: 606.26 kB
+ After:   53.22 kB (-91.22%)

---

What's Changed

• refactor!: use :global() for custom UI Shell styles by @metonym in https://github.com/carbon-design-system/carbon-components-svelte/pull/1940

Full Changelog: https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.84.1...v0.85.0

What's Changed

• fix(data-table): loosen sort return type to be a number by @berndfuhrmann in https://github.com/carbon-design-system/carbon-components-svelte/pull/1935
• fix(checkbox): forward focus, blur events to Checkbox and InlineCheckbox by @wickning1 in https://github.com/carbon-design-system/carbon-components-svelte/pull/1937

New Contributors

• @berndfuhrmann made their first contribution in https://github.com/carbon-design-system/carbon-components-svelte/pull/1935
• @wickning1 made their first contribution in https://github.com/carbon-design-system/carbon-components-svelte/pull/1937

Full Changelog: https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.84.0...v0.84.1

What's Changed

• feat(ui-shell): support button tooltip in HeaderGlobalAction by @spburtsev in https://github.com/carbon-design-system/carbon-components-svelte/pull/1894
• fix(exports): resolve imports with explicit *.js extension by @metonym in https://github.com/carbon-design-system/carbon-components-svelte/pull/1927

New Contributors

• @spburtsev made their first contribution in https://github.com/carbon-design-system/carbon-components-svelte/pull/1894

Full Changelog: https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.83.0...v0.84.0

What's Changed

• ⚠️ BREAKING CHANGE: fix(link)!: do not render p for disabled link by @metonym in #1926
• fix: avoid using reserved $ for Svelte 5 compat by @metonym and @Sahasrara in #1926
• fix(search): hoist ignore a11y autofocus comment by @metonym in #1926

Full Changelog: https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.11...v0.83.0

What's Changed

• fix(code-snippet): showMoreLess={false} should hide button by @metonym in https://github.com/carbon-design-system/carbon-components-svelte/pull/1917
• fix(image-loader): updated src should update the image by @metonym in https://github.com/carbon-design-system/carbon-components-svelte/pull/1919
• fix(overflow-menu): use offsetWidth, offsetHeight to compute menu dimensions by @Sahasrara in https://github.com/carbon-design-system/carbon-components-svelte/pull/1913
• fix(toast-notification): clear autoclose timeout correctly by @metonym, @brunnerh in https://github.com/carbon-design-system/carbon-components-svelte/pull/1915

New Contributors

• @Sahasrara made their first contribution in https://github.com/carbon-design-system/carbon-components-svelte/pull/1913

Full Changelog: https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.10...v0.82.11

What's Changed

• fix(slider): dispatch on:input event by @mmamedel in https://github.com/carbon-design-system/carbon-components-svelte/pull/1906

New Contributors

• @mmamedel made their first contribution in https://github.com/carbon-design-system/carbon-components-svelte/pull/1906

Full Changelog: https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.9...v0.82.10

What's Changed

• fix(types): improve e.detail type for dispatched events by @metonym in https://github.com/carbon-design-system/carbon-components-svelte/pull/1907
• fix(context-menu): prevent on:contextmenu default behavior only when opening menu by @metonym in https://github.com/carbon-design-system/carbon-components-svelte/pull/1911

Full Changelog: https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.8...v0.82.9

Note: this is an unstable prerelease. See discussion https://github.com/carbon-design-system/carbon-components-svelte/discussions/1872 for details and contribution guide!

What's Changed

• TextInput v11 Styles by @SimpleProgrammingAU in https://github.com/carbon-design-system/carbon-components-svelte/pull/1889

Full Changelog: https://github.com/carbon-design-system/carbon-components-svelte/compare/v1.0.0-next.0...v1.0.0-next.1

Note: this is an unstable prerelease. See discussion https://github.com/carbon-design-system/carbon-components-svelte/discussions/1872 for details and contribution guide!

New features

• Generate Carbon v11 styles and implement visual and interactive designs based on the flagship Carbon component library
• UIShell has a new light theme
• Tabs will display as a horizontal scrolling list on small viewports
• Buttons have a new xl size

Breaking changes

Overall, this is a major style change the will impact the appearance and features of many components. Use caution when upgrading and test your applications.

Components

• Button has new prop values for size and kind
• Theme follows v11 conventions: g80 theme isn't supported, toggled themes adjust data-carbon-theme attribute in <html> tag (for now, tokens use bx prefix, but that may change)
• Tabs has a contained prop instead of type
• ContentSwitcher size prop no longer supports size="xl"; md is the new default
• MultiSelect no longer supports xl size
• OverflowMenu no longer supports xl size
• Search no longer supports xl size
• TreeView no longer supports compact size
• UIShell has a different appearance per theme

CSS

• Several class names have been changed due to the v11 overhaul. If you're targeting or overriding component classes, be sure to test your code
• Many tokens and CSS variables have been renamed. Details: https://carbondesignsystem.com/migrating/guide/develop
• Themes are applied to the <html> element as data-carbon-theme="g10" instead of theme="g10"
• The g80 theme no longer exists

General

• Codebase uses npm instead of yarn

🎉 Thank you @gregorw for initial work.

Full Changelog: https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.8...v1.0.0-next.0

What's Changed

• fix(button): forward on:focus event by @ryanbmarx in https://github.com/carbon-design-system/carbon-components-svelte/pull/1878

Full Changelog: https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.82.7...v0.82.8