@sveltia/ui 0.41.5 → 0.42.0

package/dist/components/toolbar/toolbar.svelte

@@ -54,59 +54,75 @@
   </div>
 </div>
 
-<style>[role=toolbar] {
-  --toolbar-size: var(--sui-secondary-toolbar-size);
-  flex: none !important;
-  display: flex;
-  align-items: center;
-  padding-inline: 8px;
-  background-color: var(--toolbar-background-color, transparent);
-}
-[role=toolbar].primary {
-  --toolbar-size: var(--sui-primary-toolbar-size);
-}
-@media (width < 768px) {
-  [role=toolbar].secondary {
-    padding-inline: 0;
+<style lang="scss">
+  [role='toolbar'] {
+    --toolbar-size: var(--sui-secondary-toolbar-size);
+    flex: none !important;
+    display: flex;
+    align-items: center;
+    padding-inline: 8px;
+    background-color: var(--toolbar-background-color, transparent);
+
+    &.primary {
+      --toolbar-size: var(--sui-primary-toolbar-size);
+    }
+
+    &.secondary {
+      @media (width < 768px) {
+        padding-inline: 0;
+      }
+    }
+
+    &[aria-orientation='horizontal'] {
+      height: var(--toolbar-size);
+    }
+
+    &[aria-orientation='vertical'] {
+      flex-direction: column;
+      width: var(--toolbar-size);
+    }
+
+    :global {
+      button[role='button']:is([aria-pressed='true'], [aria-checked='true']) {
+        background-color: var(--sui-selected-background-color);
+      }
+
+      h2 {
+        flex: auto;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin: 0;
+        padding-inline-end: 12px;
+        min-width: 0;
+        font-size: var(--sui-font-size-x-large);
+
+        &:first-child {
+          padding-inline-start: 12px;
+        }
+
+        span:not(.sui.truncated-text) {
+          font-size: var(--sui-font-size-small);
+          font-weight: var(--sui-font-weight-normal, normal);
+          opacity: 0.8;
+        }
+      }
+
+      .divider {
+        &[aria-orientation='horizontal'] {
+          margin: 0 4px;
+          width: calc(100% - 8px);
+        }
+
+        &[aria-orientation='vertical'] {
+          margin: 4px 0;
+          height: calc(100% - 8px);
+        }
+      }
+    }
   }
-}
-[role=toolbar][aria-orientation=horizontal] {
-  height: var(--toolbar-size);
-}
-[role=toolbar][aria-orientation=vertical] {
-  flex-direction: column;
-  width: var(--toolbar-size);
-}
-[role=toolbar] :global(button[role=button]:is([aria-pressed=true], [aria-checked=true])) {
-  background-color: var(--sui-selected-background-color);
-}
-[role=toolbar] :global(h2) {
-  flex: auto;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 0;
-  padding-inline-end: 12px;
-  min-width: 0;
-  font-size: var(--sui-font-size-x-large);
-}
-[role=toolbar] :global(h2:first-child) {
-  padding-inline-start: 12px;
-}
-[role=toolbar] :global(h2) :global(span:not(.sui.truncated-text)) {
-  font-size: var(--sui-font-size-small);
-  font-weight: var(--sui-font-weight-normal, normal);
-  opacity: 0.8;
-}
-[role=toolbar] :global(.divider[aria-orientation=horizontal]) {
-  margin: 0 4px;
-  width: calc(100% - 8px);
-}
-[role=toolbar] :global(.divider[aria-orientation=vertical]) {
-  margin: 4px 0;
-  height: calc(100% - 8px);
-}
 
-.inner {
-  display: contents;
-}</style>
+  .inner {
+    display: contents;
+  }
+</style>

package/dist/components/typography/truncated-text.svelte

@@ -26,10 +26,12 @@
   {@render children?.()}
 </span>
 
-<style>.truncated-text {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  white-space: normal;
-  overflow-wrap: anywhere;
-}</style>
+<style lang="scss">
+  .truncated-text {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+</style>