@sveltia/ui 0.42.0 → 0.43.0

package/dist/components/divider/divider.svelte

@@ -38,21 +38,17 @@
   aria-label={ariaLabel}
 ></div>
 
-<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>
+<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>

package/dist/components/divider/spacer.svelte

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

package/dist/components/drawer/drawer.svelte

@@ -138,346 +138,193 @@
   </div>
 </Modal>
 
-<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>
+<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>

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

@@ -49,21 +49,19 @@
   {@render children?.()}
 </div>
 
-<style lang="scss">
-  [role='rowgroup'] {
-    display: table-row-group;
-  }
+<style>[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,8 +31,6 @@
   {@render children?.()}
 </div>
 
-<style lang="scss">
-  .grid-cell {
-    display: table-cell;
-  }
-</style>
+<style>.grid-cell {
+  display: table-cell;
+}</style>