@sveltia/ui 0.41.5 → 0.42.0

package/dist/components/divider/divider.svelte

@@ -38,17 +38,21 @@
   aria-label={ariaLabel}
 ></div>
 
-<style>.divider {
-  flex: none;
-  background-color: var(--sui-secondary-border-color);
-}
-.divider[aria-orientation=horizontal] {
-  margin: 8px 0;
-  width: 100%;
-  height: 1px;
-}
-.divider[aria-orientation=vertical] {
-  margin: 0 8px;
-  width: 1px;
-  height: 100%;
-}</style>
+<style lang="scss">
+  .divider {
+    flex: none;
+    background-color: var(--sui-secondary-border-color);
+
+    &[aria-orientation='horizontal'] {
+      margin: 8px 0;
+      width: 100%;
+      height: 1px;
+    }
+
+    &[aria-orientation='vertical'] {
+      margin: 0 8px;
+      width: 1px;
+      height: 100%;
+    }
+  }
+</style>

package/dist/components/divider/spacer.svelte

@@ -23,11 +23,16 @@
 
 <div {...restProps} role="none" class="sui spacer {className}" class:flex></div>
 
-<style>.spacer.flex:not([hidden]) {
-  display: block;
-  flex: auto;
-}
-.spacer:not(.flex) {
-  width: 8px;
-  height: 8px;
-}</style>
+<style lang="scss">
+  .spacer {
+    &.flex:not([hidden]) {
+      display: block; // Avoid Tailwind .flex class collisions
+      flex: auto;
+    }
+
+    &:not(.flex) {
+      width: 8px;
+      height: 8px;
+    }
+  }
+</style>

package/dist/components/drawer/drawer.svelte

@@ -138,193 +138,346 @@
   </div>
 </Modal>
 
-<style>.content {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  max-width: 100dvw;
-  max-height: 100dvh;
-  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: transform;
-}
-.content .extra-control {
-  position: absolute;
-}
-.content .extra-control :global(button.close) {
-  margin: 8px;
-}
-:global(dialog.open) .content {
-  transition-duration: 150ms;
-  transform: translateX(0%);
-}
-:global(dialog:not(.open)) .content {
-  transition-duration: 300ms;
-}
-.content.right {
-  inset-block: var(--sui-drawer-right-content-inset-block, 0);
-  inset-inline: var(--sui-drawer-right-content-inset-inline, auto 0);
-  border-start-start-radius: var(--sui-drawer-right-content-border-start-start-radius, var(--sui-drawer-content-border-start-start-radius, 4px));
-  border-start-end-radius: var(--sui-drawer-right-content-border-start-end-radius, var(--sui-drawer-content-border-start-end-radius, 0));
-  border-end-end-radius: var(--sui-drawer-right-content-border-end-end-radius, var(--sui-drawer-content-border-end-end-radius, 0));
-  border-end-start-radius: var(--sui-drawer-right-content-border-end-start-radius, var(--sui-drawer-content-border-end-start-radius, 4px));
-}
-.content.right.full {
-  border-radius: var(--sui-drawer-right-full-content-border-radius, var(--sui-drawer-right-content-border-radius, 0));
-}
-.content.right .extra-control {
-  inset-block-start: 0;
-  inset-inline-end: 100%;
-}
-:global(dialog:not(.open)) .content.right:dir(ltr) {
-  transform: translateX(105%);
-}
-:global(dialog:not(.open)) .content.right:dir(rtl) {
-  transform: translateX(-105%);
-}
-.content.left {
-  inset-block: var(--sui-drawer-left-content-inset-block, 0);
-  inset-inline: var(--sui-drawer-left-content-inset-inline, 0 auto);
-  border-start-start-radius: var(--sui-drawer-left-content-border-start-start-radius, var(--sui-drawer-content-border-start-start-radius, 0));
-  border-start-end-radius: var(--sui-drawer-left-content-border-start-end-radius, var(--sui-drawer-content-border-start-end-radius, 4px));
-  border-end-end-radius: var(--sui-drawer-left-content-border-end-end-radius, var(--sui-drawer-content-border-end-end-radius, 4px));
-  border-end-start-radius: var(--sui-drawer-left-content-border-end-start-radius, var(--sui-drawer-content-border-end-start-radius, 0));
-}
-.content.left.full {
-  border-radius: var(--sui-drawer-left-full-content-border-radius, var(--sui-drawer-left-content-border-radius, 0));
-}
-.content.left .extra-control {
-  inset-block-start: 0;
-  inset-inline-start: 100%;
-}
-:global(dialog:not(.open)) .content.left:dir(ltr) {
-  transform: translateX(-105%);
-}
-:global(dialog:not(.open)) .content.left:dir(rtl) {
-  transform: translateX(105%);
-}
-:global(dialog.open) .content.vertical {
-  transform: translateX(0%);
-}
-.content.vertical.small {
-  width: var(--sui-drawer-vertical-small-width, var(--sui-drawer-vertical-width, 400px));
-  max-width: var(--sui-drawer-vertical-small-max-width, var(--sui-drawer-vertical-max-width, calc(100dvw - 56px)));
-  height: var(--sui-drawer-vertical-small-height, var(--sui-drawer-vertical-height, 100dvh));
-}
-.content.vertical.medium {
-  width: var(--sui-drawer-vertical-medium-width, var(--sui-drawer-vertical-width, 600px));
-  max-width: var(--sui-drawer-vertical-medium-max-width, var(--sui-drawer-vertical-max-width, calc(100dvw - 56px)));
-  height: var(--sui-drawer-vertical-medium-height, var(--sui-drawer-vertical-height, 100dvh));
-}
-.content.vertical.large {
-  width: var(--sui-drawer-vertical-large-width, var(--sui-drawer-vertical-width, 800px));
-  max-width: var(--sui-drawer-vertical-large-max-width, var(--sui-drawer-vertical-max-width, calc(100dvw - 56px)));
-  height: var(--sui-drawer-vertical-large-height, var(--sui-drawer-vertical-height, 100dvh));
-}
-.content.vertical.x-large {
-  width: var(--sui-drawer-vertical-x-large-width, var(--sui-drawer-vertical-width, 1000px));
-  max-width: var(--sui-drawer-vertical-x-large-max-width, var(--sui-drawer-vertical-max-width, calc(100dvw - 56px)));
-  height: var(--sui-drawer-vertical-x-large-height, var(--sui-drawer-vertical-height, 100dvh));
-}
-.content.vertical.full {
-  width: 100dvw;
-  max-width: 100dvw;
-  height: 100dvh;
-}
-.content.top {
-  inset-block-start: var(--sui-drawer-top-content-inset-block, 0);
-  inset-inline: var(--sui-drawer-top-content-inset-inline, 0 0);
-  border-start-start-radius: var(--sui-drawer-top-content-border-start-start-radius, var(--sui-drawer-content-border-start-start-radius, 0));
-  border-start-end-radius: var(--sui-drawer-top-content-border-start-end-radius, var(--sui-drawer-content-border-start-end-radius, 0));
-  border-end-end-radius: var(--sui-drawer-top-content-border-end-end-radius, var(--sui-drawer-content-border-end-end-radius, 4px));
-  border-end-start-radius: var(--sui-drawer-top-content-border-end-start-radius, var(--sui-drawer-content-border-end-start-radius, 4px));
-}
-.content.top.full {
-  border-radius: var(--sui-drawer-top-full-content-border-radius, var(--sui-drawer-top-content-border-radius, 0));
-}
-.content.top .extra-control {
-  inset-block-start: 100%;
-  inset-inline-end: 0;
-}
-:global(dialog:not(.open)) .content.top {
-  transform: translateY(-105%);
-}
-.content.bottom {
-  inset-block: var(--sui-drawer-bottom-content-inset-block, auto 0);
-  inset-inline: var(--sui-drawer-bottom-content-inset-inline, 0);
-  border-start-start-radius: var(--sui-drawer-bottom-content-border-start-start-radius, var(--sui-drawer-content-border-start-start-radius, 4px));
-  border-start-end-radius: var(--sui-drawer-bottom-content-border-start-end-radius, var(--sui-drawer-content-border-start-end-radius, 4px));
-  border-end-end-radius: var(--sui-drawer-bottom-content-border-end-end-radius, var(--sui-drawer-content-border-end-end-radius, 0));
-  border-end-start-radius: var(--sui-drawer-bottom-content-border-end-start-radius, var(--sui-drawer-content-border-end-start-radius, 0));
-}
-.content.bottom.full {
-  border-radius: var(--sui-drawer-bottom-full-content-border-radius, var(--sui-drawer-bottom-content-border-radius, 0));
-}
-.content.bottom .extra-control {
-  inset-block-end: 100%;
-  inset-inline-end: 0;
-}
-:global(dialog:not(.open)) .content.bottom {
-  transform: translateY(105%);
-}
-:global(dialog.open) .content.horizontal {
-  transform: translateY(0%);
-}
-.content.horizontal.small {
-  width: var(--sui-drawer-horizontal-small-width, var(--sui-drawer-horizontal-width, 100dvw));
-  height: var(--sui-drawer-horizontal-small-height, var(--sui-drawer-horizontal-height, 400px));
-  max-height: var(--sui-drawer-horizontal-small-max-height, var(--sui-drawer-horizontal-max-height, calc(100dvh - 56px)));
-}
-.content.horizontal.medium {
-  width: var(--sui-drawer-horizontal-medium-width, var(--sui-drawer-horizontal-width, 100dvw));
-  height: var(--sui-drawer-horizontal-medium-height, var(--sui-drawer-horizontal-height, 600px));
-  max-height: var(--sui-drawer-horizontal-medium-max-height, var(--sui-drawer-horizontal-max-height, calc(100dvh - 56px)));
-}
-.content.horizontal.large {
-  width: var(--sui-drawer-horizontal-large-width, var(--sui-drawer-horizontal-width, 100dvw));
-  height: var(--sui-drawer-horizontal-large-height, var(--sui-drawer-horizontal-height, 800px));
-  max-height: var(--sui-drawer-horizontal-large-max-height, var(--sui-drawer-horizontal-max-height, calc(100dvh - 56px)));
-}
-.content.horizontal.x-large {
-  width: var(--sui-drawer-horizontal-x-large-width, var(--sui-drawer-horizontal-width, 100dvw));
-  height: var(--sui-drawer-horizontal-x-large-height, var(--sui-drawer-horizontal-height, 1000px));
-  max-height: var(--sui-drawer-horizontal-x-large-max-height, var(--sui-drawer-horizontal-max-height, calc(100dvh - 56px)));
-}
-.content.horizontal.full {
-  width: 100dvw;
-  height: 100dvh;
-  max-height: 100dvh;
-}
-
-:is(.header, .footer) {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.header {
-  flex-direction: var(--sui-drawer-header-flex-direction, row);
-  box-sizing: content-box;
-  margin: var(--sui-drawer-header-margin, 0 16px);
-  border-width: var(--sui-drawer-header-border-width, 0 0 1px);
-  border-color: var(--sui-drawer-header-border-color, var(--sui-secondary-border-color));
-  padding: var(--sui-drawer-header-padding, 16px 8px);
-  height: var(--sui-drawer-header-height, 32px);
-}
-.header .title {
-  font-size: var(--sui-font-size-large);
-  font-weight: var(--sui-font-weight-bold);
-}
-
-.footer {
-  margin: 0 24px 24px;
-}
-
-.main {
-  flex: auto;
-  overflow: auto;
-  padding: var(--sui-drawer-main-padding, 24px);
-  white-space: normal;
-}</style>
+<style lang="scss">
+  .content {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    max-width: 100dvw;
+    max-height: 100dvh;
+    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: transform;
+
+    .extra-control {
+      position: absolute;
+
+      :global {
+        button.close {
+          margin: 8px;
+        }
+      }
+    }
+
+    :global(dialog.open) & {
+      transition-duration: 150ms;
+      transform: translateX(0%);
+    }
+
+    :global(dialog:not(.open)) & {
+      transition-duration: 300ms;
+    }
+
+    &.right {
+      inset-block: var(--sui-drawer-right-content-inset-block, 0);
+      inset-inline: var(--sui-drawer-right-content-inset-inline, auto 0);
+      border-start-start-radius: var(
+        --sui-drawer-right-content-border-start-start-radius,
+        var(--sui-drawer-content-border-start-start-radius, 4px)
+      );
+      border-start-end-radius: var(
+        --sui-drawer-right-content-border-start-end-radius,
+        var(--sui-drawer-content-border-start-end-radius, 0)
+      );
+      border-end-end-radius: var(
+        --sui-drawer-right-content-border-end-end-radius,
+        var(--sui-drawer-content-border-end-end-radius, 0)
+      );
+      border-end-start-radius: var(
+        --sui-drawer-right-content-border-end-start-radius,
+        var(--sui-drawer-content-border-end-start-radius, 4px)
+      );
+
+      &.full {
+        border-radius: var(
+          --sui-drawer-right-full-content-border-radius,
+          var(--sui-drawer-right-content-border-radius, 0)
+        );
+      }
+
+      .extra-control {
+        inset-block-start: 0;
+        inset-inline-end: 100%;
+      }
+
+      :global(dialog:not(.open)) & {
+        &:dir(ltr) {
+          transform: translateX(105%);
+        }
+
+        &:dir(rtl) {
+          transform: translateX(-105%);
+        }
+      }
+    }
+
+    &.left {
+      inset-block: var(--sui-drawer-left-content-inset-block, 0);
+      inset-inline: var(--sui-drawer-left-content-inset-inline, 0 auto);
+      border-start-start-radius: var(
+        --sui-drawer-left-content-border-start-start-radius,
+        var(--sui-drawer-content-border-start-start-radius, 0)
+      );
+      border-start-end-radius: var(
+        --sui-drawer-left-content-border-start-end-radius,
+        var(--sui-drawer-content-border-start-end-radius, 4px)
+      );
+      border-end-end-radius: var(
+        --sui-drawer-left-content-border-end-end-radius,
+        var(--sui-drawer-content-border-end-end-radius, 4px)
+      );
+      border-end-start-radius: var(
+        --sui-drawer-left-content-border-end-start-radius,
+        var(--sui-drawer-content-border-end-start-radius, 0)
+      );
+
+      &.full {
+        border-radius: var(
+          --sui-drawer-left-full-content-border-radius,
+          var(--sui-drawer-left-content-border-radius, 0)
+        );
+      }
+
+      .extra-control {
+        inset-block-start: 0;
+        inset-inline-start: 100%;
+      }
+
+      :global(dialog:not(.open)) & {
+        &:dir(ltr) {
+          transform: translateX(-105%);
+        }
+
+        &:dir(rtl) {
+          transform: translateX(105%);
+        }
+      }
+    }
+
+    &.vertical {
+      :global(dialog.open) & {
+        transform: translateX(0%);
+      }
+
+      &.small {
+        width: var(--sui-drawer-vertical-small-width, var(--sui-drawer-vertical-width, 400px));
+        max-width: var(
+          --sui-drawer-vertical-small-max-width,
+          var(--sui-drawer-vertical-max-width, calc(100dvw - 56px))
+        );
+        height: var(--sui-drawer-vertical-small-height, var(--sui-drawer-vertical-height, 100dvh));
+      }
+
+      &.medium {
+        width: var(--sui-drawer-vertical-medium-width, var(--sui-drawer-vertical-width, 600px));
+        max-width: var(
+          --sui-drawer-vertical-medium-max-width,
+          var(--sui-drawer-vertical-max-width, calc(100dvw - 56px))
+        );
+        height: var(--sui-drawer-vertical-medium-height, var(--sui-drawer-vertical-height, 100dvh));
+      }
+
+      &.large {
+        width: var(--sui-drawer-vertical-large-width, var(--sui-drawer-vertical-width, 800px));
+        max-width: var(
+          --sui-drawer-vertical-large-max-width,
+          var(--sui-drawer-vertical-max-width, calc(100dvw - 56px))
+        );
+        height: var(--sui-drawer-vertical-large-height, var(--sui-drawer-vertical-height, 100dvh));
+      }
+
+      &.x-large {
+        width: var(--sui-drawer-vertical-x-large-width, var(--sui-drawer-vertical-width, 1000px));
+        max-width: var(
+          --sui-drawer-vertical-x-large-max-width,
+          var(--sui-drawer-vertical-max-width, calc(100dvw - 56px))
+        );
+        height: var(
+          --sui-drawer-vertical-x-large-height,
+          var(--sui-drawer-vertical-height, 100dvh)
+        );
+      }
+
+      &.full {
+        width: 100dvw;
+        max-width: 100dvw;
+        height: 100dvh;
+      }
+    }
+
+    &.top {
+      inset-block-start: var(--sui-drawer-top-content-inset-block, 0);
+      inset-inline: var(--sui-drawer-top-content-inset-inline, 0 0);
+      border-start-start-radius: var(
+        --sui-drawer-top-content-border-start-start-radius,
+        var(--sui-drawer-content-border-start-start-radius, 0)
+      );
+      border-start-end-radius: var(
+        --sui-drawer-top-content-border-start-end-radius,
+        var(--sui-drawer-content-border-start-end-radius, 0)
+      );
+      border-end-end-radius: var(
+        --sui-drawer-top-content-border-end-end-radius,
+        var(--sui-drawer-content-border-end-end-radius, 4px)
+      );
+      border-end-start-radius: var(
+        --sui-drawer-top-content-border-end-start-radius,
+        var(--sui-drawer-content-border-end-start-radius, 4px)
+      );
+
+      &.full {
+        border-radius: var(
+          --sui-drawer-top-full-content-border-radius,
+          var(--sui-drawer-top-content-border-radius, 0)
+        );
+      }
+
+      .extra-control {
+        inset-block-start: 100%;
+        inset-inline-end: 0;
+      }
+
+      :global(dialog:not(.open)) & {
+        transform: translateY(-105%);
+      }
+    }
+
+    &.bottom {
+      inset-block: var(--sui-drawer-bottom-content-inset-block, auto 0);
+      inset-inline: var(--sui-drawer-bottom-content-inset-inline, 0);
+
+      border-start-start-radius: var(
+        --sui-drawer-bottom-content-border-start-start-radius,
+        var(--sui-drawer-content-border-start-start-radius, 4px)
+      );
+      border-start-end-radius: var(
+        --sui-drawer-bottom-content-border-start-end-radius,
+        var(--sui-drawer-content-border-start-end-radius, 4px)
+      );
+      border-end-end-radius: var(
+        --sui-drawer-bottom-content-border-end-end-radius,
+        var(--sui-drawer-content-border-end-end-radius, 0)
+      );
+      border-end-start-radius: var(
+        --sui-drawer-bottom-content-border-end-start-radius,
+        var(--sui-drawer-content-border-end-start-radius, 0)
+      );
+
+      &.full {
+        border-radius: var(
+          --sui-drawer-bottom-full-content-border-radius,
+          var(--sui-drawer-bottom-content-border-radius, 0)
+        );
+      }
+
+      .extra-control {
+        inset-block-end: 100%;
+        inset-inline-end: 0;
+      }
+
+      :global(dialog:not(.open)) & {
+        transform: translateY(105%);
+      }
+    }
+
+    &.horizontal {
+      :global(dialog.open) & {
+        transform: translateY(0%);
+      }
+
+      &.small {
+        width: var(--sui-drawer-horizontal-small-width, var(--sui-drawer-horizontal-width, 100dvw));
+        height: var(
+          --sui-drawer-horizontal-small-height,
+          var(--sui-drawer-horizontal-height, 400px)
+        );
+        max-height: var(
+          --sui-drawer-horizontal-small-max-height,
+          var(--sui-drawer-horizontal-max-height, calc(100dvh - 56px))
+        );
+      }
+
+      &.medium {
+        width: var(
+          --sui-drawer-horizontal-medium-width,
+          var(--sui-drawer-horizontal-width, 100dvw)
+        );
+        height: var(
+          --sui-drawer-horizontal-medium-height,
+          var(--sui-drawer-horizontal-height, 600px)
+        );
+        max-height: var(
+          --sui-drawer-horizontal-medium-max-height,
+          var(--sui-drawer-horizontal-max-height, calc(100dvh - 56px))
+        );
+      }
+
+      &.large {
+        width: var(--sui-drawer-horizontal-large-width, var(--sui-drawer-horizontal-width, 100dvw));
+        height: var(
+          --sui-drawer-horizontal-large-height,
+          var(--sui-drawer-horizontal-height, 800px)
+        );
+        max-height: var(
+          --sui-drawer-horizontal-large-max-height,
+          var(--sui-drawer-horizontal-max-height, calc(100dvh - 56px))
+        );
+      }
+
+      &.x-large {
+        width: var(
+          --sui-drawer-horizontal-x-large-width,
+          var(--sui-drawer-horizontal-width, 100dvw)
+        );
+        height: var(
+          --sui-drawer-horizontal-x-large-height,
+          var(--sui-drawer-horizontal-height, 1000px)
+        );
+        max-height: var(
+          --sui-drawer-horizontal-x-large-max-height,
+          var(--sui-drawer-horizontal-max-height, calc(100dvh - 56px))
+        );
+      }
+
+      &.full {
+        width: 100dvw;
+        height: 100dvh;
+        max-height: 100dvh;
+      }
+    }
+  }
+
+  :is(.header, .footer) {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .header {
+    flex-direction: var(--sui-drawer-header-flex-direction, row);
+    box-sizing: content-box;
+    margin: var(--sui-drawer-header-margin, 0 16px);
+    border-width: var(--sui-drawer-header-border-width, 0 0 1px);
+    border-color: var(--sui-drawer-header-border-color, var(--sui-secondary-border-color));
+    padding: var(--sui-drawer-header-padding, 16px 8px);
+    height: var(--sui-drawer-header-height, 32px);
+
+    .title {
+      font-size: var(--sui-font-size-large);
+      font-weight: var(--sui-font-weight-bold);
+    }
+  }
+
+  .footer {
+    margin: 0 24px 24px;
+  }
+
+  .main {
+    flex: auto;
+    overflow: auto;
+    padding: var(--sui-drawer-main-padding, 24px);
+    white-space: normal;
+  }
+</style>

package/dist/components/grid/grid-body.svelte

@@ -49,19 +49,21 @@
   {@render children?.()}
 </div>
 
-<style>[role=rowgroup] {
-  display: table-row-group;
-}
+<style lang="scss">
+  [role='rowgroup'] {
+    display: table-row-group;
+  }
 
-[role=row] {
-  display: table-row;
-}
+  [role='row'] {
+    display: table-row;
+  }
 
-[role=columnheader] {
-  display: table-cell;
-  padding: 8px;
-  color: var(--sui-secondary-foreground-color);
-  background-color: var(--sui-secondary-background-color);
-  font-size: var(--sui-font-size-default);
-  text-align: start;
-}</style>
+  [role='columnheader'] {
+    display: table-cell;
+    padding: 8px;
+    color: var(--sui-secondary-foreground-color);
+    background-color: var(--sui-secondary-background-color);
+    font-size: var(--sui-font-size-default);
+    text-align: start;
+  }
+</style>

package/dist/components/grid/grid-cell.svelte

@@ -31,6 +31,8 @@
   {@render children?.()}
 </div>
 
-<style>.grid-cell {
-  display: table-cell;
-}</style>
+<style lang="scss">
+  .grid-cell {
+    display: table-cell;
+  }
+</style>

package/dist/components/grid/grid-col-header.svelte

@@ -31,6 +31,8 @@
   {@render children?.()}
 </div>
 
-<style>.grid-col-header {
-  display: table-cell;
-}</style>
+<style lang="scss">
+  .grid-col-header {
+    display: table-cell;
+  }
+</style>