@sveltia/ui 0.42.0 → 0.42.1

package/dist/components/util/empty-state.svelte

@@ -20,16 +20,14 @@
   {@render children?.()}
 </div>
 
-<style lang="scss">
-  .empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 16px;
-    padding: 16px;
-    width: 100%;
-    height: 100%;
-    text-align: center;
-  }
-</style>
+<style>.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 16px;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}</style>

package/dist/components/util/group.svelte

@@ -47,8 +47,6 @@
   </div>
 </div>
 
-<style lang="scss">
-  .inner {
-    display: contents;
-  }
-</style>
+<style>.inner {
+  display: contents;
+}</style>

package/dist/components/util/modal.svelte

@@ -217,62 +217,51 @@
   </dialog>
 {/snippet}
 
-<style lang="scss">
-  dialog {
-    position: fixed;
-    inset: 0;
-    z-index: 9999999;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-    outline: 0;
-    margin: 0;
-    border: 0;
-    padding: 0;
-    width: 100dvw;
-    max-width: 100dvw;
-    height: 100dvh;
-    max-height: 100dvh;
-    color: var(--sui-primary-foreground-color);
-    background: transparent;
-    -webkit-user-select: none;
-    user-select: none;
-    touch-action: none;
-    pointer-events: all;
-    cursor: default;
-
-    &::backdrop {
-      background: transparent;
-    }
-
-    &.backdrop {
-      background-color: var(--sui-popup-backdrop-color);
-    }
-
-    &.open {
-      transition-duration: 50ms;
-      opacity: 1;
-    }
-
-    &:not(.open) {
-      transition-duration: 400ms;
-      opacity: 0;
-    }
-
-    &[hidden] {
-      transition-duration: 1ms !important;
-    }
-
-    &:not(.active) {
-      pointer-events: none !important;
-
-      :global {
-        * {
-          transition-duration: 0ms !important;
-          pointer-events: none !important;
-        }
-      }
-    }
-  }
-</style>
+<style>dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 9999999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  outline: 0;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  width: 100dvw;
+  max-width: 100dvw;
+  height: 100dvh;
+  max-height: 100dvh;
+  color: var(--sui-primary-foreground-color);
+  background: transparent;
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: none;
+  pointer-events: all;
+  cursor: default;
+}
+dialog::backdrop {
+  background: transparent;
+}
+dialog.backdrop {
+  background-color: var(--sui-popup-backdrop-color);
+}
+dialog.open {
+  transition-duration: 50ms;
+  opacity: 1;
+}
+dialog:not(.open) {
+  transition-duration: 400ms;
+  opacity: 0;
+}
+dialog[hidden] {
+  transition-duration: 1ms !important;
+}
+dialog:not(.active) {
+  pointer-events: none !important;
+}
+dialog:not(.active) :global(*) {
+  transition-duration: 0ms !important;
+  pointer-events: none !important;
+}</style>

package/dist/components/util/popup.svelte

@@ -201,90 +201,70 @@
   </Modal>
 {/if}
 
-<style lang="scss">
-  .content {
-    position: absolute;
-    overflow-y: auto;
-    outline-width: 0 !important;
-    width: auto;
-    color: var(--sui-primary-foreground-color);
-    background-color: var(--sui-secondary-background-color-translucent);
-    box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
-    -webkit-backdrop-filter: blur(16px);
-    backdrop-filter: blur(16px);
-    transition-property: opacity, transform;
-
-    &.menu {
-      border-width: var(--sui-menu-border-width, 1px);
-      border-style: var(--sui-menu-border-style, solid);
-      border-color: var(--sui-menu-border-width, var(--sui-secondary-border-color));
-      border-radius: var(--sui-menu-border-radius, 4px);
-      padding: var(--sui-menu-padding, 4px);
-
-      :global {
-        .sui.menu {
-          border-width: 0;
-          border-radius: 0;
-          padding: 0;
-          background-color: transparent;
-        }
-      }
-    }
-
-    &.listbox {
-      border-width: var(--sui-listbox-border-width, 1px);
-      border-style: var(--sui-listbox-border-style, solid);
-      border-color: var(--sui-listbox-border-width, var(--sui-secondary-border-color));
-      border-radius: var(--sui-listbox-border-radius, 4px);
-      padding: var(--sui-listbox-padding, 4px);
-
-      :global {
-        .sui.listbox {
-          border-width: 0;
-          border-radius: 0;
-          padding: 0;
-          background-color: transparent;
-        }
-      }
-    }
-
-    &.touch {
-      position: static;
-      border-width: 0 !important;
-      border-radius: 4px !important;
-      padding: 8px;
-      min-width: 320px !important;
-      max-width: calc(100dvw - 32px) !important;
-      max-height: calc(100dvh - 32px) !important;
-
-      :global(dialog.open) & {
-        transform: scale(100%) !important;
-      }
-
-      :global(dialog:not(.open)) & {
-        transform: scale(90%);
-      }
-
-      &.combobox {
-        :global {
-          .sui.listbox {
-            gap: 4px;
-            padding: 8px 4px !important;
-          }
-        }
-      }
-    }
-
-    :global(dialog.open) & {
-      transition-duration: 50ms;
-      opacity: 1;
-      transform: translateY(2px);
-    }
-
-    :global(dialog:not(.open)) & {
-      transition-duration: 300ms;
-      opacity: 0;
-      transform: translateY(-8px);
-    }
-  }
-</style>
+<style>.content {
+  position: absolute;
+  overflow-y: auto;
+  outline-width: 0 !important;
+  width: auto;
+  color: var(--sui-primary-foreground-color);
+  background-color: var(--sui-secondary-background-color-translucent);
+  box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
+  -webkit-backdrop-filter: blur(16px);
+  backdrop-filter: blur(16px);
+  transition-property: opacity, transform;
+}
+.content.menu {
+  border-width: var(--sui-menu-border-width, 1px);
+  border-style: var(--sui-menu-border-style, solid);
+  border-color: var(--sui-menu-border-width, var(--sui-secondary-border-color));
+  border-radius: var(--sui-menu-border-radius, 4px);
+  padding: var(--sui-menu-padding, 4px);
+}
+.content.menu :global(.sui.menu) {
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  background-color: transparent;
+}
+.content.listbox {
+  border-width: var(--sui-listbox-border-width, 1px);
+  border-style: var(--sui-listbox-border-style, solid);
+  border-color: var(--sui-listbox-border-width, var(--sui-secondary-border-color));
+  border-radius: var(--sui-listbox-border-radius, 4px);
+  padding: var(--sui-listbox-padding, 4px);
+}
+.content.listbox :global(.sui.listbox) {
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  background-color: transparent;
+}
+.content.touch {
+  position: static;
+  border-width: 0 !important;
+  border-radius: 4px !important;
+  padding: 8px;
+  min-width: 320px !important;
+  max-width: calc(100dvw - 32px) !important;
+  max-height: calc(100dvh - 32px) !important;
+}
+:global(dialog.open) .content.touch {
+  transform: scale(100%) !important;
+}
+:global(dialog:not(.open)) .content.touch {
+  transform: scale(90%);
+}
+.content.touch.combobox :global(.sui.listbox) {
+  gap: 4px;
+  padding: 8px 4px !important;
+}
+:global(dialog.open) .content {
+  transition-duration: 50ms;
+  opacity: 1;
+  transform: translateY(2px);
+}
+:global(dialog:not(.open)) .content {
+  transition-duration: 300ms;
+  opacity: 0;
+  transform: translateY(-8px);
+}</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.42.0",
+  "version": "0.42.1",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",