diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
index 8a2e184ed8..097b1d30a2 100644
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@@ -221,7 +221,9 @@
tabindex="{type === 'single' && !disabled ? '0' : undefined}"
aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
class:bx--snippet-container="{true}"
- style="width: 100%; min-height: {minHeight}px; max-height: {maxHeight}"
+ style:width="100%"
+ style:min-height="{minHeight}px"
+ style:max-height="{maxHeight}"
>
{code}
diff --git a/src/ContextMenu/ContextMenu.svelte b/src/ContextMenu/ContextMenu.svelte
index 80182eb9cd..1e794f0b34 100644
--- a/src/ContextMenu/ContextMenu.svelte
+++ b/src/ContextMenu/ContextMenu.svelte
@@ -164,8 +164,9 @@
class:bx--menu--open="{open}"
class:bx--menu--invisible="{open && x === 0 && y === 0}"
class:bx--menu--root="{level === 1}"
+ style:left="{x}px"
+ style:top="{y}px"
{...$$restProps}
- style="left: {x}px; top: {y}px; {$$restProps.style}"
on:click
on:click="{({ target }) => {
const closestOption = target.closest('[tabindex]');
diff --git a/src/DataTable/Toolbar.svelte b/src/DataTable/Toolbar.svelte
index 6f4e7121ac..99b1f2cf7a 100644
--- a/src/DataTable/Toolbar.svelte
+++ b/src/DataTable/Toolbar.svelte
@@ -27,8 +27,8 @@
class:bx--table-toolbar="{true}"
class:bx--table-toolbar--small="{size === 'sm'}"
class:bx--table-toolbar--normal="{size === 'default'}"
+ style:z-index="{1}"
{...$$restProps}
- style="z-index: 1; {$$restProps.style}"
>
diff --git a/src/ImageLoader/ImageLoader.svelte b/src/ImageLoader/ImageLoader.svelte
index 56e5efd76a..f1250576f7 100644
--- a/src/ImageLoader/ImageLoader.svelte
+++ b/src/ImageLoader/ImageLoader.svelte
@@ -82,8 +82,8 @@
{/if}
{#if loaded}
diff --git a/src/SkeletonText/SkeletonText.svelte b/src/SkeletonText/SkeletonText.svelte
index 7a97717cfa..1b4fb66d99 100644
--- a/src/SkeletonText/SkeletonText.svelte
+++ b/src/SkeletonText/SkeletonText.svelte
@@ -33,7 +33,7 @@
{/each}
@@ -41,8 +41,8 @@
-
+
{maxLabel || max}
diff --git a/src/Tabs/Tab.svelte b/src/Tabs/Tab.svelte
index b99e50f908..343c1d1d3f 100644
--- a/src/Tabs/Tab.svelte
+++ b/src/Tabs/Tab.svelte
@@ -67,7 +67,7 @@
id="{id}"
href="{href}"
class:bx--tabs__nav-link="{true}"
- style="{$useAutoWidth ? 'width: auto' : undefined}"
+ style:width="{$useAutoWidth ? "auto" : undefined}"
>
{label}
diff --git a/src/Toggle/Toggle.svelte b/src/Toggle/Toggle.svelte
index 18fcc13497..1ff9ccb927 100644
--- a/src/Toggle/Toggle.svelte
+++ b/src/Toggle/Toggle.svelte
@@ -46,8 +46,8 @@
diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte
index b9df6d48cd..4408fccead 100644
--- a/src/Tooltip/Tooltip.svelte
+++ b/src/Tooltip/Tooltip.svelte
@@ -200,8 +200,9 @@
/>
{#if !hideIcon}
diff --git a/src/TooltipIcon/TooltipIcon.svelte b/src/TooltipIcon/TooltipIcon.svelte
index bfcc1170f0..0e8ec316b9 100644
--- a/src/TooltipIcon/TooltipIcon.svelte
+++ b/src/TooltipIcon/TooltipIcon.svelte
@@ -57,8 +57,8 @@
class:bx--tooltip--align-start="{align === 'start'}"
class:bx--tooltip--align-center="{align === 'center'}"
class:bx--tooltip--align-end="{align === 'end'}"
+ style:cursor="{disabled ? "not-allowed" : "default"}"
{...$$restProps}
- style="cursor: {disabled ? 'not-allowed' : 'default'}; {$$restProps.style}"
on:click
on:mouseover
on:mouseenter
diff --git a/src/UIShell/Content.svelte b/src/UIShell/Content.svelte
index 768b1dc563..dbce9d04a4 100644
--- a/src/UIShell/Content.svelte
+++ b/src/UIShell/Content.svelte
@@ -17,8 +17,8 @@
diff --git a/src/UIShell/HeaderNavMenu.svelte b/src/UIShell/HeaderNavMenu.svelte
index 4309bec00c..0ec7ef3772 100644
--- a/src/UIShell/HeaderNavMenu.svelte
+++ b/src/UIShell/HeaderNavMenu.svelte
@@ -74,8 +74,8 @@
href="{href}"
class:bx--header__menu-item="{true}"
class:bx--header__menu-title="{true}"
+ style:z-index="{1}"
{...$$restProps}
- style="{$$restProps.style}; z-index: 1"
on:keydown
on:keydown="{(e) => {
if (e.key === ' ') e.preventDefault();
diff --git a/src/UIShell/SideNav.svelte b/src/UIShell/SideNav.svelte
index 3db9e0bb9b..d1f0c90981 100644
--- a/src/UIShell/SideNav.svelte
+++ b/src/UIShell/SideNav.svelte
@@ -63,7 +63,7 @@
}}"
class:bx--side-nav__overlay="{true}"
class:bx--side-nav__overlay-active="{isOpen}"
- style="{isOpen && 'z-index: 6000'}"
+ style:z-index="{isOpen ? 6000 : undefined}"
>
{/if}