refactor: use style directive where applicable (#1760)

Closes #1604

src/CodeSnippet/CodeSnippet.svelte

@@ -228,7 +228,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}"
     >
       <pre bind:this="{ref}"><code><slot>{code}</slot></code></pre>
     </div>

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

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}"
 >
   <slot />
 </section>

src/ImageLoader/ImageLoader.svelte

@@ -82,8 +82,8 @@
   {/if}
   {#if loaded}
     <img
+      style:width="100%"
       {...$$restProps}
-      style="width: 100%;{$$restProps.style}"
       src="{src}"
       alt="{alt}"
       transition:fade|local="{{ duration: fadeIn ? fast02 : 0 }}"
@@ -99,8 +99,8 @@
     {/if}
     {#if loaded}
       <img
+        style:width="100%"
         {...$$restProps}
-        style="width: 100%;{$$restProps.style}"
         src="{src}"
         alt="{alt}"
         transition:fade|local="{{ duration: fadeIn ? fast02 : 0 }}"

src/Notification/ToastNotification.svelte

@@ -89,8 +89,8 @@
     class:bx--toast-notification--success="{kind === 'success'}"
     class:bx--toast-notification--warning="{kind === 'warning'}"
     class:bx--toast-notification--warning-alt="{kind === 'warning-alt'}"
+    style:width="{fullWidth ? "100%" : undefined}"
     {...$$restProps}
-    style="{fullWidth && 'width: 100%;'}{$$restProps.style}"
     on:click
     on:mouseover
     on:mouseenter

src/Popover/Popover.svelte

@@ -64,8 +64,8 @@
   class:bx--popover--right-top="{align === 'right-top'}"
   class:bx--popover--open="{open}"
   class:bx--popover--relative="{relative}"
+  style:position="{relative ? "relative" : undefined}"
   {...$$restProps}
-  style="{$$restProps.style}; {relative && 'position: relative'}"
 >
   <div class:bx--popover-contents="{true}">
     <slot />

src/SkeletonText/SkeletonText.svelte

@@ -34,7 +34,7 @@
       <p
         class:bx--skeleton__text="{true}"
         class:bx--skeleton__heading="{heading}"
-        style="width: {width}"
+        style:width="{width}"
       ></p>
     {/each}
   </div>
@@ -43,8 +43,8 @@
   <p
     class:bx--skeleton__text="{true}"
     class:bx--skeleton__heading="{heading}"
+    style:width="{width}"
     {...$$restProps}
-    style="width: {width};{$$restProps.style}"
     on:click
     on:mouseover
     on:mouseenter

src/Slider/Slider.svelte

@@ -157,10 +157,7 @@
       {labelText}
     </slot>
   </label>
-  <div
+  <div class:bx--slider-container="{true}" style:width="{fullWidth && "100%"}">
-    class:bx--slider-container="{true}"
-    style="{fullWidth ? 'width: 100%' : undefined}"
-  >
     <span class:bx--slider__range-label="{true}">{minLabel || min}</span>
     <div
       bind:this="{ref}"
@@ -168,7 +165,7 @@
       tabindex="-1"
       class:bx--slider="{true}"
       class:bx--slider--disabled="{disabled}"
-      style="{fullWidth ? 'max-width: none' : undefined}"
+      style:max-width="{fullWidth ? "none" : undefined}"
       on:mousedown="{startDragging}"
       on:mousedown="{startHolding}"
       on:touchstart="{startHolding}"
@@ -189,7 +186,7 @@
         role="slider"
         tabindex="0"
         class:bx--slider__thumb="{true}"
-        style="left: {left}%"
+        style:left="{left}%"
         aria-valuemax="{max}"
         aria-valuemin="{min}"
         aria-valuenow="{value}"
@@ -199,7 +196,7 @@
       <div bind:this="{trackRef}" class:bx--slider__track="{true}"></div>
       <div
         class:bx--slider__filled-track="{true}"
-        style="transform: translate(0, -50%) scaleX({left / 100})"
+        style:transform="translate(0, -50%) scaleX({left / 100})"
       ></div>
     </div>
     <span class:bx--slider__range-label="{true}">{maxLabel || max}</span>

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}"
   >
     <slot>{label}</slot>
   </a>

src/Toggle/Toggle.svelte

@@ -47,8 +47,8 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class:bx--form-item="{true}"
+  style:user-select="none"
   {...$$restProps}
-  style="{$$restProps['style']}; user-select: none"
   on:click
   on:mouseover
   on:mouseenter
@@ -90,7 +90,7 @@
     </span>
     <span
       class:bx--toggle__switch="{true}"
-      style="{hideLabel && 'margin-top: 0'}"
+      style:margin-top="{hideLabel ? 0 : undefined}"
     >
       <span aria-hidden="true" class:bx--toggle__text--off="{true}">
         <slot name="labelA">

src/Tooltip/Tooltip.svelte

@@ -200,8 +200,9 @@
 />
 
 <div
+  style:position="relative"
+  style:z-index="{open ? 1 : undefined}"
   {...$$restProps}
-  style="{open ? 'z-index: 1;' : ''}{$$restProps.style}; position: relative;"
 >
   {#if !hideIcon}
     <div bind:this="{ref}" id="{triggerId}" class:bx--tooltip__label="{true}">

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

src/UIShell/Content.svelte

@@ -17,8 +17,8 @@
 <main
   id="{id}"
   class:bx--content="{true}"
+  style:margin-left="{unsetLeftMargin ? 0 : undefined}"
   {...$$restProps}
-  style="{unsetLeftMargin ? 'margin-left: 0;' : ''} {$$restProps.style}"
 >
   <slot />
 </main>

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();

src/UIShell/SideNav.svelte

@@ -64,7 +64,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}"
   ></div>
 {/if}
 <nav

src/UIShell/SideNavMenu.svelte

@@ -52,7 +52,7 @@
   <ul
     role="menu"
     class:bx--side-nav__menu="{true}"
-    style="{expanded && 'max-height: none'}"
+    style:max-height="{expanded ? "none" : undefined}"
   >
     <slot />
   </ul>