@sveltia/ui 0.41.5 → 0.42.0

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

@@ -73,36 +73,45 @@
   </div>
 </div>
 
-<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;
+<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);
+          }
+        }
+      }
+    }
   }
-}
-.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,66 +127,84 @@
   {/if}
 </span>
 
-<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>
+<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>

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

@@ -276,51 +276,63 @@
   {/if}
 </div>
 
-<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>
+<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>

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

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

package/dist/components/select/combobox.svelte

@@ -245,115 +245,138 @@
   </div>
 </Popup>
 
-<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>
+<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>