split utility styles out

src/styles/component.styles.ts

@@ -1,4 +1,5 @@
 import { css } from 'lit';
+import utilityStyles from '../styles/utility.styles';
 
 export default css`
   :host {
@@ -16,3 +17,8 @@ export default css`
     display: none !important;
   }
 `;
+
+// All components import this file, so it's a good place to ensure utility styles are applied to the light DOM
+const style = document.createElement('style');
+style.textContent = utilityStyles.toString();
+document.head.append(style);

src/styles/utility.styles.ts

@@ -0,0 +1,23 @@
+import { css } from 'lit';
+
+export default css`
+  .sl-scroll-lock {
+    overflow: hidden !important;
+  }
+
+  .sl-toast-stack {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: var(--sl-z-index-toast);
+    width: 28rem;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: auto;
+  }
+
+  .sl-toast-stack sl-alert {
+    --box-shadow: var(--sl-shadow-large);
+    margin: var(--sl-spacing-medium);
+  }
+`;