@sveltia/ui 0.41.5 → 0.42.0

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

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

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

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

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

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

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

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

package/dist/components/grid/grid.svelte

@@ -55,15 +55,21 @@
   {@render children?.()}
 </div>
 
-<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>
+<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>

package/dist/components/icon/icon.svelte

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

package/dist/components/listbox/listbox.svelte

@@ -90,65 +90,82 @@
   </div>
 </div>
 
-<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 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;
   }
-}
-[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>
+</style>

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

@@ -62,16 +62,20 @@
   </div>
 </div>
 
-<style>.option-group:not(:first-child) {
-  margin: 12px 0 0;
-}
+<style lang="scss">
+  .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,42 +84,57 @@
   </Button>
 </div>
 
-<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>
+<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>

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

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

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

@@ -154,54 +154,70 @@
   {/if}
 </div>
 
-<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>
+<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>

package/dist/components/menu/menu.svelte

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

package/dist/components/progressbar/progressbar.svelte

@@ -43,18 +43,27 @@
   <div role="none" style:width="{now}%"></div>
 </div>
 
-<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>
+<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>