@sveltia/ui 0.42.0 → 0.42.1

package/dist/components/radio/radio-group.svelte

@@ -73,45 +73,36 @@
   </div>
 </div>
 
-<style lang="scss">
-  .radio-group {
-    display: inline-flex;
-
-    &:focus-visible {
-      outline-width: 0 !important;
-    }
-
-    &.horizontal {
-      gap: 8px;
-      align-items: center;
-      flex-wrap: wrap;
-    }
-
-    &.vertical {
-      gap: 4px;
-      flex-direction: column;
-
-      @media (pointer: coarse) {
-        gap: 8px;
-      }
-    }
-
-    :global {
-      &[aria-invalid='true'] button {
-        border-color: var(--sui-error-border-color);
-
-        &[aria-checked='true'] {
-          border-color: var(--sui-error-border-color);
-
-          &::before {
-            background-color: var(--sui-error-border-color);
-          }
-        }
-      }
-    }
+<style>.radio-group {
+  display: inline-flex;
+}
+.radio-group:focus-visible {
+  outline-width: 0 !important;
+}
+.radio-group.horizontal {
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.radio-group.vertical {
+  gap: 4px;
+  flex-direction: column;
+}
+@media (pointer: coarse) {
+  .radio-group.vertical {
+    gap: 8px;
   }
+}
+.radio-group :global([aria-invalid=true]) :global(button) {
+  border-color: var(--sui-error-border-color);
+}
+.radio-group :global([aria-invalid=true]) :global(button[aria-checked=true]) {
+  border-color: var(--sui-error-border-color);
+}
+.radio-group :global([aria-invalid=true]) :global(button[aria-checked=true]::before) {
+  background-color: var(--sui-error-border-color);
+}
 
-  .inner {
-    display: contents;
-  }
-</style>
+.inner {
+  display: contents;
+}</style>

package/dist/components/radio/radio.svelte

@@ -127,84 +127,66 @@
   {/if}
 </span>
 
-<style lang="scss">
-  .radio {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    margin: var(--sui-focus-ring-width);
-    color: var(--sui-control-foreground-color);
-    font-family: var(--sui-control-font-family);
-    font-size: var(--sui-control-font-size);
-    line-height: var(--sui-control-line-height);
-    cursor: pointer;
-    -webkit-user-select: none;
-    user-select: none;
-
-    :global {
-      &:hover {
-        button {
-          background-color: var(--sui-hover-background-color);
-
-          &[aria-checked='true'] {
-            border-color: var(--sui-primary-accent-color-light);
-            color: var(--sui-primary-accent-color-text);
-
-            &::before {
-              background-color: var(--sui-primary-accent-color-light);
-            }
-          }
-        }
-      }
-
-      &:active {
-        button {
-          background-color: var(--sui-active-background-color);
-
-          &[aria-checked='true'] {
-            border-color: var(--sui-primary-accent-color-dark);
-            color: var(--sui-primary-accent-color-dark);
-          }
-        }
-      }
-
-      button {
-        flex: none;
-        justify-content: center;
-        overflow: hidden;
-        margin: 0 !important;
-        border-width: 1.5px;
-        border-color: var(--sui-checkbox-border-color);
-        border-radius: var(--sui-checkbox-height);
-        padding: 0;
-        width: var(--sui-checkbox-height);
-        height: var(--sui-checkbox-height);
-        background-color: var(--sui-checkbox-background-color);
-        transition: all 200ms;
-
-        &::before {
-          content: '';
-          border-radius: var(--sui-checkbox-height);
-          width: calc(var(--sui-checkbox-height) - 7px);
-          height: calc(var(--sui-checkbox-height) - 7px);
-          background-color: var(--sui-primary-accent-color);
-          opacity: 0;
-          transition: all 200ms;
-          will-change: opacity;
-        }
-
-        &[aria-checked='true'] {
-          border-color: var(--sui-primary-accent-color);
-
-          &::before {
-            opacity: 1;
-          }
-        }
-      }
-    }
-
-    label {
-      cursor: inherit;
-    }
-  }
-</style>
+<style>.radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin: var(--sui-focus-ring-width);
+  color: var(--sui-control-foreground-color);
+  font-family: var(--sui-control-font-family);
+  font-size: var(--sui-control-font-size);
+  line-height: var(--sui-control-line-height);
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.radio :global(:hover) :global(button) {
+  background-color: var(--sui-hover-background-color);
+}
+.radio :global(:hover) :global(button[aria-checked=true]) {
+  border-color: var(--sui-primary-accent-color-light);
+  color: var(--sui-primary-accent-color-text);
+}
+.radio :global(:hover) :global(button[aria-checked=true]::before) {
+  background-color: var(--sui-primary-accent-color-light);
+}
+.radio :global(:active) :global(button) {
+  background-color: var(--sui-active-background-color);
+}
+.radio :global(:active) :global(button[aria-checked=true]) {
+  border-color: var(--sui-primary-accent-color-dark);
+  color: var(--sui-primary-accent-color-dark);
+}
+.radio :global(button) {
+  flex: none;
+  justify-content: center;
+  overflow: hidden;
+  margin: 0 !important;
+  border-width: 1.5px;
+  border-color: var(--sui-checkbox-border-color);
+  border-radius: var(--sui-checkbox-height);
+  padding: 0;
+  width: var(--sui-checkbox-height);
+  height: var(--sui-checkbox-height);
+  background-color: var(--sui-checkbox-background-color);
+  transition: all 200ms;
+}
+.radio :global(button::before) {
+  content: "";
+  border-radius: var(--sui-checkbox-height);
+  width: calc(var(--sui-checkbox-height) - 7px);
+  height: calc(var(--sui-checkbox-height) - 7px);
+  background-color: var(--sui-primary-accent-color);
+  opacity: 0;
+  transition: all 200ms;
+  will-change: opacity;
+}
+.radio :global(button[aria-checked=true]) {
+  border-color: var(--sui-primary-accent-color);
+}
+.radio :global(button[aria-checked=true]::before) {
+  opacity: 1;
+}
+.radio label {
+  cursor: inherit;
+}</style>

package/dist/components/resizable-pane/resizable-handle.svelte

@@ -276,63 +276,51 @@
   {/if}
 </div>
 
-<style lang="scss">
-  .resizable-handle {
-    position: relative;
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    touch-action: none;
-    outline-offset: 0;
-    background-color: transparent;
-    transition: background-color 200ms;
-
-    &:focus-visible,
-    &:hover,
-    &.dragging {
-      outline: none;
-      z-index: 1;
-      background-color: var(--sui-primary-accent-color-translucent);
-
-      .handle-bar {
-        background-color: var(--sui-primary-accent-color);
-      }
-    }
-
-    &.disabled {
-      pointer-events: none;
-      opacity: 0.4;
-    }
-
-    &.horizontal {
-      width: var(--sui-resizable-handle-size, 4px);
-      height: 100%;
-      cursor: col-resize;
-
-      .handle-bar {
-        width: 2px;
-        height: 40%;
-        min-height: 20px;
-      }
-    }
-
-    &.vertical {
-      width: 100%;
-      height: var(--sui-resizable-handle-size, 4px);
-      cursor: row-resize;
-
-      .handle-bar {
-        height: 2px;
-        width: 40%;
-        min-width: 20px;
-      }
-    }
-
-    .handle-bar {
-      border-radius: 1px;
-      background-color: hsl(var(--sui-border-color-1-hsl));
-      transition: background-color 200ms;
-    }
-  }
-</style>
+<style>.resizable-handle {
+  position: relative;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  touch-action: none;
+  outline-offset: 0;
+  background-color: transparent;
+  transition: background-color 200ms;
+}
+.resizable-handle:focus-visible, .resizable-handle:hover, .resizable-handle.dragging {
+  outline: none;
+  z-index: 1;
+  background-color: var(--sui-primary-accent-color-translucent);
+}
+.resizable-handle:focus-visible .handle-bar, .resizable-handle:hover .handle-bar, .resizable-handle.dragging .handle-bar {
+  background-color: var(--sui-primary-accent-color);
+}
+.resizable-handle.disabled {
+  pointer-events: none;
+  opacity: 0.4;
+}
+.resizable-handle.horizontal {
+  width: var(--sui-resizable-handle-size, 4px);
+  height: 100%;
+  cursor: col-resize;
+}
+.resizable-handle.horizontal .handle-bar {
+  width: 2px;
+  height: 40%;
+  min-height: 20px;
+}
+.resizable-handle.vertical {
+  width: 100%;
+  height: var(--sui-resizable-handle-size, 4px);
+  cursor: row-resize;
+}
+.resizable-handle.vertical .handle-bar {
+  height: 2px;
+  width: 40%;
+  min-width: 20px;
+}
+.resizable-handle .handle-bar {
+  border-radius: 1px;
+  background-color: hsl(var(--sui-border-color-1-hsl));
+  transition: background-color 200ms;
+}</style>

package/dist/components/resizable-pane/resizable-pane-group.svelte

@@ -271,21 +271,17 @@
   {@render children?.()}
 </div>
 
-<style lang="scss">
-  .resizable-pane-group {
-    display: flex;
-    overflow: hidden;
-
-    &.horizontal {
-      flex-direction: row;
-      width: 100%;
-      height: 100%;
-    }
-
-    &.vertical {
-      flex-direction: column;
-      width: 100%;
-      height: 100%;
-    }
-  }
-</style>
+<style>.resizable-pane-group {
+  display: flex;
+  overflow: hidden;
+}
+.resizable-pane-group.horizontal {
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+}
+.resizable-pane-group.vertical {
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}</style>

package/dist/components/select/combobox.svelte

@@ -245,138 +245,115 @@
   </div>
 </Popup>
 
-<style lang="scss">
-  .combobox {
-    margin: var(--sui-focus-ring-width);
-    display: flex;
-    align-items: center;
-    position: relative;
-    min-width: var(--sui-combobox-min-width, calc(var(--sui-option-height) * 5));
-
-    div[role='combobox'] {
-      display: flex;
-      align-items: center;
-      border-width: 1px;
-      border-color: var(--sui-control-border-color);
-      border-radius: var(--sui-textbox-border-radius);
-      padding-block: 0;
-      padding-inline-start: calc(var(--sui-textbox-height) / 4);
-      padding-inline-end: var(--sui-textbox-height);
-      width: 100%;
-      height: var(--sui-textbox-height);
-      color: var(--sui-control-foreground-color);
-      background-color: var(--sui-disabled-background-color);
-      font-family: var(--sui-control-font-family);
-      font-size: var(--sui-control-font-size);
-      line-height: var(--sui-control-line-height);
-      -webkit-user-select: none;
-      user-select: none;
-      cursor: pointer;
-      transition: all 200ms;
-
-      &:not(.selected) {
-        font-style: italic;
-      }
-
-      &:is(:hover, :focus) {
-        background-color: var(--sui-hover-background-color);
-      }
-
-      &[aria-invalid='true'] {
-        border-color: var(--sui-error-border-color);
-      }
-
-      .label {
-        width: 100%;
-      }
-    }
-
-    :global {
-      .icon {
-        font-size: var(--sui-font-size-xx-large);
-        opacity: 0.5;
-      }
-
-      & > .icon {
-        position: absolute;
-        inset-block-start: 8px;
-        inset-inline-start: 8px;
-        z-index: 1;
-      }
-
-      & > button {
-        position: absolute;
-        inset-block-start: 0;
-        inset-inline-end: 0;
-        z-index: 1;
-        margin: 0 !important;
-        border-start-start-radius: 0;
-        border-end-start-radius: 0;
-        background-color: transparent !important;
-
-        &[tabindex='-1'] {
-          pointer-events: none;
-        }
-      }
-
-      &:not(.editable) > button {
-        background-color: transparent !important;
-      }
-
-      .text-input {
-        margin: 0 !important;
-        width: 100% !important;
-      }
-
-      input {
-        padding-block: 0;
-        padding-inline: 8px 32px;
-        width: 0; // = auto
-      }
-
-      & + [role='listbox'] {
-        position: fixed;
-        z-index: 100;
-        border-radius: var(--sui-control-medium-border-radius);
-        box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
-        overflow: auto;
-        background-color: var(--sui-secondary-background-color);
-        -webkit-backdrop-filter: blur(32px);
-        backdrop-filter: blur(32px);
-        /* Add .1s delay before the position can be determined */
-        transition: opacity 100ms 100ms;
-
-        &:not(.open) {
-          opacity: 0;
-          pointer-events: none;
-        }
-      }
-    }
-  }
-
-  .combobox-inner {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-
-    :global {
-      .sui.search-bar {
-        flex: none;
-      }
-
-      .sui.listbox {
-        flex: auto;
-        overflow-y: auto;
-      }
-    }
-
-    .no-options {
-      flex: none;
-      display: flex;
-      align-items: center;
-      padding: var(--sui-option-padding);
-      height: var(--sui-option-height);
-      color: var(--sui-tertiary-foreground-color);
-    }
-  }
-</style>
+<style>.combobox {
+  margin: var(--sui-focus-ring-width);
+  display: flex;
+  align-items: center;
+  position: relative;
+  min-width: var(--sui-combobox-min-width, calc(var(--sui-option-height) * 5));
+}
+.combobox div[role=combobox] {
+  display: flex;
+  align-items: center;
+  border-width: 1px;
+  border-color: var(--sui-control-border-color);
+  border-radius: var(--sui-textbox-border-radius);
+  padding-block: 0;
+  padding-inline-start: calc(var(--sui-textbox-height) / 4);
+  padding-inline-end: var(--sui-textbox-height);
+  width: 100%;
+  height: var(--sui-textbox-height);
+  color: var(--sui-control-foreground-color);
+  background-color: var(--sui-disabled-background-color);
+  font-family: var(--sui-control-font-family);
+  font-size: var(--sui-control-font-size);
+  line-height: var(--sui-control-line-height);
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: pointer;
+  transition: all 200ms;
+}
+.combobox div[role=combobox]:not(.selected) {
+  font-style: italic;
+}
+.combobox div[role=combobox]:is(:hover, :focus) {
+  background-color: var(--sui-hover-background-color);
+}
+.combobox div[role=combobox][aria-invalid=true] {
+  border-color: var(--sui-error-border-color);
+}
+.combobox div[role=combobox] .label {
+  width: 100%;
+}
+.combobox :global(.icon) {
+  font-size: var(--sui-font-size-xx-large);
+  opacity: 0.5;
+}
+.combobox > :global(.icon) {
+  position: absolute;
+  inset-block-start: 8px;
+  inset-inline-start: 8px;
+  z-index: 1;
+}
+.combobox > :global(button) {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  z-index: 1;
+  margin: 0 !important;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  background-color: transparent !important;
+}
+.combobox > :global(button[tabindex="-1"]) {
+  pointer-events: none;
+}
+.combobox :global(:not(.editable)) > :global(button) {
+  background-color: transparent !important;
+}
+.combobox :global(.text-input) {
+  margin: 0 !important;
+  width: 100% !important;
+}
+.combobox :global(input) {
+  padding-block: 0;
+  padding-inline: 8px 32px;
+  width: 0;
+}
+.combobox + :global([role=listbox]) {
+  position: fixed;
+  z-index: 100;
+  border-radius: var(--sui-control-medium-border-radius);
+  box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
+  overflow: auto;
+  background-color: var(--sui-secondary-background-color);
+  -webkit-backdrop-filter: blur(32px);
+  backdrop-filter: blur(32px);
+  /* Add .1s delay before the position can be determined */
+  transition: opacity 100ms 100ms;
+}
+.combobox + :global([role=listbox]:not(.open)) {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.combobox-inner {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.combobox-inner :global(.sui.search-bar) {
+  flex: none;
+}
+.combobox-inner :global(.sui.listbox) {
+  flex: auto;
+  overflow-y: auto;
+}
+.combobox-inner .no-options {
+  flex: none;
+  display: flex;
+  align-items: center;
+  padding: var(--sui-option-padding);
+  height: var(--sui-option-height);
+  color: var(--sui-tertiary-foreground-color);
+}</style>