@sveltia/ui 0.42.0 → 0.43.0

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

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

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

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

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

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

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

@@ -31,9 +31,7 @@
   {@render children?.()}
 </div>
 
-<style lang="scss">
-  .grid-row-header {
-    display: table-cell;
-    height: var(--sui-secondary-row-height);
-  }
-</style>
+<style>.grid-row-header {
+  display: table-cell;
+  height: var(--sui-secondary-row-height);
+}</style>

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

@@ -42,9 +42,7 @@
   {@render children?.()}
 </div>
 
-<style lang="scss">
-  .grid-row {
-    display: table-row;
-    height: var(--sui-primary-row-height);
-  }
-</style>
+<style>.grid-row {
+  display: table-row;
+  height: var(--sui-primary-row-height);
+}</style>

package/dist/components/grid/grid.svelte

@@ -55,21 +55,15 @@
   {@render children?.()}
 </div>
 
-<style lang="scss">
-  .grid {
-    display: table;
-    margin: var(--sui-focus-ring-width);
-    width: calc(100% - var(--sui-focus-ring-width) * 2);
-
-    &.data {
-      border-collapse: collapse;
-
-      :global {
-        :is(.grid-col-header, .grid-row-header, .grid-cell) {
-          border: 1px solid var(--sui-secondary-border-color);
-          padding: 8px 8px;
-        }
-      }
-    }
-  }
-</style>
+<style>.grid {
+  display: table;
+  margin: var(--sui-focus-ring-width);
+  width: calc(100% - var(--sui-focus-ring-width) * 2);
+}
+.grid.data {
+  border-collapse: collapse;
+}
+.grid.data :global(:is(.grid-col-header, .grid-row-header, .grid-cell)) {
+  border: 1px solid var(--sui-secondary-border-color);
+  padding: 8px 8px;
+}</style>

package/dist/components/icon/icon.svelte

@@ -30,10 +30,8 @@
   {name}
 </span>
 
-<style lang="scss">
-  .icon.small-arrow {
-    overflow: hidden;
-    width: 12px;
-    text-indent: -6px;
-  }
-</style>
+<style>.icon.small-arrow {
+  overflow: hidden;
+  width: 12px;
+  text-indent: -6px;
+}</style>

package/dist/components/listbox/listbox.svelte

@@ -90,82 +90,65 @@
   </div>
 </div>
 
-<style lang="scss">
-  [role='listbox'] {
-    display: flex;
-    flex-direction: column;
-    margin: var(--sui-focus-ring-width);
-    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);
-    min-width: var(--sui-listbox-min-width, calc(var(--sui-option-height) * 5));
-    color: var(--sui-listbox-foreground-color);
-    background-color: var(--sui-listbox-background-color);
-    font-family: var(--sui-control-font-family);
-    font-size: var(--sui-control-font-size);
-    line-height: var(--sui-control-line-height);
-
-    @media (pointer: coarse) {
-      gap: 8px 0;
-    }
-
-    :global {
-      [role='separator'] {
-        margin: 4px 0;
-        background-color: var(--sui-control-border-color);
-      }
-    }
-
-    &[aria-invalid='true'] {
-      border-color: var(--sui-error-border-color);
-    }
-
-    &.tabs {
-      padding: 0;
-      border-block-start-width: 0;
-      border-block-end-width: 0;
-      border-inline-end-width: 1px;
-      border-inline-start-width: 0;
-      border-color: var(--sui-control-border-color);
-
-      :global {
-        .option button {
-          justify-content: flex-start;
-          border-width: 0;
-          border-inline-end-width: 2px;
-          border-color: transparent;
-          padding: 0 12px;
-          border-start-end-radius: 0;
-          border-end-end-radius: 0;
-          height: var(--sui-tab-medium-height);
-
-          &[aria-selected='true'] {
-            border-color: var(--sui-primary-accent-color-light);
-          }
-
-          .icon {
-            display: none;
-          }
-        }
-      }
-    }
-
-    &.in-combobox:focus-visible {
-      outline-color: transparent;
-    }
-
-    &.filtered {
-      :global {
-        [role='separator'] {
-          display: none;
-        }
-      }
-    }
-  }
-
-  .inner {
-    display: contents;
+<style>[role=listbox] {
+  display: flex;
+  flex-direction: column;
+  margin: var(--sui-focus-ring-width);
+  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);
+  min-width: var(--sui-listbox-min-width, calc(var(--sui-option-height) * 5));
+  color: var(--sui-listbox-foreground-color);
+  background-color: var(--sui-listbox-background-color);
+  font-family: var(--sui-control-font-family);
+  font-size: var(--sui-control-font-size);
+  line-height: var(--sui-control-line-height);
+}
+@media (pointer: coarse) {
+  [role=listbox] {
+    gap: 8px 0;
   }
-</style>
+}
+[role=listbox] :global([role=separator]) {
+  margin: 4px 0;
+  background-color: var(--sui-control-border-color);
+}
+[role=listbox][aria-invalid=true] {
+  border-color: var(--sui-error-border-color);
+}
+[role=listbox].tabs {
+  padding: 0;
+  border-block-start-width: 0;
+  border-block-end-width: 0;
+  border-inline-end-width: 1px;
+  border-inline-start-width: 0;
+  border-color: var(--sui-control-border-color);
+}
+[role=listbox].tabs :global(.option) :global(button) {
+  justify-content: flex-start;
+  border-width: 0;
+  border-inline-end-width: 2px;
+  border-color: transparent;
+  padding: 0 12px;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  height: var(--sui-tab-medium-height);
+}
+[role=listbox].tabs :global(.option) :global(button[aria-selected=true]) {
+  border-color: var(--sui-primary-accent-color-light);
+}
+[role=listbox].tabs :global(.option) :global(button) :global(.icon) {
+  display: none;
+}
+[role=listbox].in-combobox:focus-visible {
+  outline-color: transparent;
+}
+[role=listbox].filtered :global([role=separator]) {
+  display: none;
+}
+
+.inner {
+  display: contents;
+}</style>

package/dist/components/listbox/option-group.svelte

@@ -62,20 +62,16 @@
   </div>
 </div>
 
-<style lang="scss">
-  .option-group {
-    &:not(:first-child) {
-      margin: 12px 0 0;
-    }
-  }
+<style>.option-group:not(:first-child) {
+  margin: 12px 0 0;
+}
 
-  .label {
-    margin: 8px;
-    color: var(--sui-secondary-foreground-color);
-    font-size: var(--sui-font-size-small);
-  }
+.label {
+  margin: 8px;
+  color: var(--sui-secondary-foreground-color);
+  font-size: var(--sui-font-size-small);
+}
 
-  .inner {
-    display: contents;
-  }
-</style>
+.inner {
+  display: contents;
+}</style>

package/dist/components/listbox/option.svelte

@@ -84,57 +84,42 @@
   </Button>
 </div>
 
-<style lang="scss">
-  .option {
-    display: contents;
-
-    &:focus-visible {
-      outline-width: 0 !important;
-    }
-
-    :global {
-      &.wrap button {
-        white-space: normal;
-      }
-
-      button {
-        flex: none;
-        display: flex;
-        gap: 4px;
-        margin: 0 !important;
-        border-radius: var(--sui-option-border-radius);
-        padding: var(--sui-option-padding);
-        width: 100%;
-        height: auto;
-        min-height: var(--sui-option-height);
-
-        &:active {
-          background-color: var(--sui-active-background-color);
-        }
-
-        &[aria-selected='true'] {
-          .icon.check {
-            color: var(--sui-primary-accent-color-text);
-          }
-        }
-
-        * {
-          flex: none;
-        }
-
-        .label {
-          flex: auto;
-        }
-      }
-
-      :is(.focused, button:hover) {
-        color: var(--sui-highlight-foreground-color);
-        background-color: var(--sui-hover-background-color);
-      }
-
-      .icon.check {
-        margin: -2px;
-      }
-    }
-  }
-</style>
+<style>.option {
+  display: contents;
+}
+.option:focus-visible {
+  outline-width: 0 !important;
+}
+.option :global(.wrap) :global(button) {
+  white-space: normal;
+}
+.option :global(button) {
+  flex: none;
+  display: flex;
+  gap: 4px;
+  margin: 0 !important;
+  border-radius: var(--sui-option-border-radius);
+  padding: var(--sui-option-padding);
+  width: 100%;
+  height: auto;
+  min-height: var(--sui-option-height);
+}
+.option :global(button:active) {
+  background-color: var(--sui-active-background-color);
+}
+.option :global(button[aria-selected=true]) :global(.icon.check) {
+  color: var(--sui-primary-accent-color-text);
+}
+.option :global(button) :global(*) {
+  flex: none;
+}
+.option :global(button) :global(.label) {
+  flex: auto;
+}
+.option :global(:is(.focused, button:hover)) {
+  color: var(--sui-highlight-foreground-color);
+  background-color: var(--sui-hover-background-color);
+}
+.option :global(.icon.check) {
+  margin: -2px;
+}</style>

package/dist/components/menu/menu-item-group.svelte

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

package/dist/components/menu/menu-item.svelte

@@ -154,70 +154,54 @@
   {/if}
 </div>
 
-<style lang="scss">
-  .menuitem {
-    position: relative;
-
-    :global {
-      button {
-        display: flex;
-        gap: var(--sui-menuitem-gap, 4px);
-        align-items: var(--sui-menuitem-align-items, center);
-        border-radius: var(--sui-menuitem-border-radius, var(--sui-option-border-radius, 4px));
-        margin: 0 !important;
-        padding: var(--sui-menuitem-padding, 0 16px);
-        width: 100%;
-        min-width: var(--sui-menuitem-min-width, 160px);
-        height: var(--sui-menuitem-height, var(--sui-option-height));
-        color: var(--sui-menuitem-foreground-color, var(--sui-control-foreground-color, inherit));
-        background-color: var(--sui-menuitem-background-color, transparent);
-        font-size: var(--sui-menuitem-font-size, var(--sui-option-font-size));
-        font-weight: var(
-          --sui-menuitem-font-weight,
-          var(--sui-option-font-weight, var(--sui-font-weight-normal, normal))
-        );
-
-        &[aria-checked='true'] {
-          .icon {
-            color: var(--sui-primary-accent-color-text);
-          }
-        }
-
-        &:hover {
-          color: var(--sui-highlight-foreground-color);
-          background-color: var(--sui-hover-background-color);
-        }
-
-        &:active {
-          background-color: var(--sui-active-background-color);
-        }
-      }
-
-      &:hover > [role='menu'] {
-        opacity: 1;
-      }
-
-      & > [role='menu'] {
-        position: absolute;
-        inset-block-start: 2px;
-        inset-block-end: auto;
-        inset-inline-start: calc(100% + 4px);
-        inset-inline-end: auto;
-
-        &:hover {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  .content {
-    flex: auto;
-  }
-
-  .icon-outer {
-    flex: none;
-    width: 24px;
-    height: 24px;
-  }
-</style>
+<style>.menuitem {
+  position: relative;
+}
+.menuitem :global(button) {
+  display: flex;
+  gap: var(--sui-menuitem-gap, 4px);
+  align-items: var(--sui-menuitem-align-items, center);
+  border-radius: var(--sui-menuitem-border-radius, var(--sui-option-border-radius, 4px));
+  margin: 0 !important;
+  padding: var(--sui-menuitem-padding, 0 16px);
+  width: 100%;
+  min-width: var(--sui-menuitem-min-width, 160px);
+  height: var(--sui-menuitem-height, var(--sui-option-height));
+  color: var(--sui-menuitem-foreground-color, var(--sui-control-foreground-color, inherit));
+  background-color: var(--sui-menuitem-background-color, transparent);
+  font-size: var(--sui-menuitem-font-size, var(--sui-option-font-size));
+  font-weight: var(--sui-menuitem-font-weight, var(--sui-option-font-weight, var(--sui-font-weight-normal, normal)));
+}
+.menuitem :global(button[aria-checked=true]) :global(.icon) {
+  color: var(--sui-primary-accent-color-text);
+}
+.menuitem :global(button:hover) {
+  color: var(--sui-highlight-foreground-color);
+  background-color: var(--sui-hover-background-color);
+}
+.menuitem :global(button:active) {
+  background-color: var(--sui-active-background-color);
+}
+.menuitem :global(:hover) > :global([role=menu]) {
+  opacity: 1;
+}
+.menuitem > :global([role=menu]) {
+  position: absolute;
+  inset-block-start: 2px;
+  inset-block-end: auto;
+  inset-inline-start: calc(100% + 4px);
+  inset-inline-end: auto;
+}
+.menuitem > :global([role=menu]:hover) {
+  opacity: 1;
+}
+
+.content {
+  flex: auto;
+}
+
+.icon-outer {
+  flex: none;
+  width: 24px;
+  height: 24px;
+}</style>

package/dist/components/menu/menu.svelte

@@ -55,26 +55,22 @@
   {@render children?.()}
 </div>
 
-<style lang="scss">
+<style>.menu {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  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);
+}
+@media (pointer: coarse) {
   .menu {
-    display: flex;
-    flex-direction: column;
-    margin: 0;
-    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);
-
-    @media (pointer: coarse) {
-      gap: 8px 0;
-    }
-
-    :global {
-      [role='separator'] {
-        margin: var(--sui-menu-divider-margin, 4px);
-        background-color: var(--sui-menu-divider-color, var(--sui-control-border-color));
-      }
-    }
+    gap: 8px 0;
   }
-</style>
+}
+.menu :global([role=separator]) {
+  margin: var(--sui-menu-divider-margin, 4px);
+  background-color: var(--sui-menu-divider-color, var(--sui-control-border-color));
+}</style>

package/dist/components/progressbar/progressbar.svelte

@@ -43,27 +43,18 @@
   <div role="none" style:width="{now}%"></div>
 </div>
 
-<style lang="scss">
-  .progressbar {
-    overflow: hidden;
-    border-width: var(--sui-progressbar-border-width, 1px);
-    border-style: var(--sui-progressbar-border-style, solid);
-    border-color: var(--sui-progressbar-border-color, var(--sui-control-border-color));
-    border-radius: var(--sui-progressbar-border-radius, 16px);
-    width: var(--sui-progressbar-width, 240px);
-    height: var(--sui-progressbar-height, 10px);
-    background-color: var(
-      --sui-progressbar-background-color,
-      var(--sui-secondary-background-color)
-    );
-
-    div {
-      height: 100%;
-      background-color: var(
-        --sui-progressbar-foreground-color,
-        var(--sui-primary-accent-color-light)
-      );
-      transition: width 250ms;
-    }
-  }
-</style>
+<style>.progressbar {
+  overflow: hidden;
+  border-width: var(--sui-progressbar-border-width, 1px);
+  border-style: var(--sui-progressbar-border-style, solid);
+  border-color: var(--sui-progressbar-border-color, var(--sui-control-border-color));
+  border-radius: var(--sui-progressbar-border-radius, 16px);
+  width: var(--sui-progressbar-width, 240px);
+  height: var(--sui-progressbar-height, 10px);
+  background-color: var(--sui-progressbar-background-color, var(--sui-secondary-background-color));
+}
+.progressbar div {
+  height: 100%;
+  background-color: var(--sui-progressbar-foreground-color, var(--sui-primary-accent-color-light));
+  transition: width 250ms;
+}</style>