@sveltia/ui 0.41.5 → 0.42.0

package/dist/components/calendar/calendar.svelte

@@ -180,87 +180,110 @@
   </div>
 </div>
 
-<style>[role=group] {
-  display: inline-flex;
-  flex-direction: column;
-  gap: 8px;
-  -webkit-user-select: none;
-  user-select: none;
-  cursor: default;
-}
-[role=group] > * {
-  flex: none;
-}
+<style lang="scss">
+  [role='group'] {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 8px;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: default;
 
-:is(.header, .footer) {
-  display: flex;
-  gap: 8px;
-  height: 24px;
-  align-items: center;
-}
-:is(.header, .footer) :global(button.secondary) {
-  width: 100px;
-  flex: auto;
-}
+    & > * {
+      flex: none;
+    }
+  }
 
-.grid {
-  display: grid !important;
-  grid-template-columns: repeat(auto-fill, 24px);
-  gap: 2px;
-  width: 180px;
-}
-.grid div {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 24px;
-  height: 24px;
-  font-size: var(--sui-font-size-small);
-}
-.grid div.weekday {
-  color: var(--sui-secondary-foreground-color);
-}
-.grid div.other-month {
-  color: var(--sui-tertiary-foreground-color);
-}
-.grid div :global(.today) :global(button) {
-  color: var(--sui-highlight-foreground-color);
-  background-color: var(--sui-primary-accent-color);
-}
-.grid div :global(button) {
-  justify-content: center;
-  margin: 0 !important;
-  width: 100%;
-  height: 24px;
-  border-radius: 50%;
-}
-.grid div :global(button:hover) {
-  background-color: var(--sui-hover-background-color);
-}
-.grid div :global(button:focus) {
-  border-width: 1px;
-  border-color: var(--sui-primary-accent-color-light);
-}
+  :is(.header, .footer) {
+    display: flex;
+    gap: 8px;
+    height: 24px;
+    align-items: center;
 
-.footer :global(button) {
-  font-size: var(--sui-font-size-small);
-}
+    :global {
+      button.secondary {
+        width: 100px;
+        flex: auto;
+      }
+    }
+  }
 
-.popup-inner {
-  display: flex;
-  gap: 8px;
-  padding: 8px;
-}
-.popup-inner [role=group] {
-  gap: 0;
-}
-.popup-inner [role=group] .header {
-  justify-content: center;
-}
-.popup-inner .grid {
-  grid-template-columns: repeat(auto-fill, 48px);
-  width: 98px;
-}
-.popup-inner .grid > div {
-  width: 48px;
-}</style>
+  .grid {
+    display: grid !important;
+    grid-template-columns: repeat(auto-fill, 24px);
+    gap: 2px;
+    width: 180px;
+
+    div {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 24px;
+      height: 24px;
+      font-size: var(--sui-font-size-small);
+
+      &.weekday {
+        color: var(--sui-secondary-foreground-color);
+      }
+
+      &.other-month {
+        color: var(--sui-tertiary-foreground-color);
+      }
+
+      :global {
+        &.today button {
+          color: var(--sui-highlight-foreground-color);
+          background-color: var(--sui-primary-accent-color);
+        }
+
+        button {
+          justify-content: center;
+          margin: 0 !important;
+          width: 100%;
+          height: 24px;
+          border-radius: 50%;
+
+          &:hover {
+            background-color: var(--sui-hover-background-color);
+          }
+
+          &:focus {
+            border-width: 1px;
+            border-color: var(--sui-primary-accent-color-light);
+          }
+        }
+      }
+    }
+  }
+
+  .footer {
+    :global {
+      button {
+        font-size: var(--sui-font-size-small);
+      }
+    }
+  }
+
+  .popup-inner {
+    display: flex;
+    gap: 8px;
+    padding: 8px;
+
+    [role='group'] {
+      gap: 0;
+
+      .header {
+        justify-content: center;
+      }
+    }
+
+    .grid {
+      grid-template-columns: repeat(auto-fill, 48px);
+      width: calc(48px * 2 + 2px);
+
+      & > div {
+        width: 48px;
+      }
+    }
+  }
+</style>

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

@@ -50,24 +50,27 @@
   </div>
 </div>
 
-<style>.checkbox-group {
-  display: inline-flex;
-}
-.checkbox-group.horizontal {
-  gap: 8px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-.checkbox-group.vertical {
-  gap: 4px;
-  flex-direction: column;
-}
-@media (pointer: coarse) {
-  .checkbox-group.vertical {
-    gap: 8px;
+<style lang="scss">
+  .checkbox-group {
+    display: inline-flex;
+
+    &.horizontal {
+      gap: 8px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    &.vertical {
+      gap: 4px;
+      flex-direction: column;
+
+      @media (pointer: coarse) {
+        gap: 8px;
+      }
+    }
   }
-}
 
-.inner {
-  display: contents;
-}</style>
+  .inner {
+    display: contents;
+  }
+</style>

package/dist/components/checkbox/checkbox.svelte

@@ -157,66 +157,94 @@
   </div>
 </div>
 
-<style>.checkbox {
-  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;
-}
-.checkbox:hover :global(button) {
-  background-color: var(--sui-hover-background-color);
-}
-.checkbox:hover :global(button[aria-checked=true]) {
-  background-color: var(--sui-primary-accent-color-light);
-}
-.checkbox:active :global(button) {
-  background-color: var(--sui-active-background-color);
-}
-.checkbox:active :global(button[aria-checked=true]) {
-  background-color: var(--sui-primary-accent-color-dark);
-}
-.checkbox :global(button) {
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  margin: 0 !important;
-  border-width: var(--sui-checkbox-border-width, 1.5px);
-  border-color: var(--sui-checkbox-border-color);
-  border-radius: var(--sui-checkbox-border-radius);
-  padding: 0;
-  width: var(--sui-checkbox-height);
-  height: var(--sui-checkbox-height);
-  color: var(--sui-primary-accent-text-color);
-  background-color: var(--sui-checkbox-background-color);
-  transition: all 200ms;
-}
-.checkbox :global(button[aria-checked=true]) {
-  border-color: var(--sui-checkbox-border-color-checked, var(--sui-primary-accent-color));
-  color: var(--sui-checkbox-foreground-color-checked, var(--sui-primary-accent-color-inverted));
-  background-color: var(--sui-checkbox-background-color-checked, var(--sui-primary-accent-color));
-}
-.checkbox :global(button[aria-invalid=true]) {
-  border-color: var(--sui-error-border-color);
-  color: var(--sui-error-foreground-color);
-}
-.checkbox :global(button[aria-checked=true][aria-invalid=true]) {
-  background-color: var(--sui-checkbox-background-color);
-}
-.checkbox :global(button) :global(.icon) {
-  font-size: calc(var(--sui-checkbox-height) - 2px);
-}
-.checkbox label {
-  cursor: inherit;
-}
-
-.inner {
-  display: contents;
-}</style>
+<style lang="scss">
+  .checkbox {
+    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;
+
+    &:hover {
+      :global {
+        button {
+          background-color: var(--sui-hover-background-color);
+
+          &[aria-checked='true'] {
+            background-color: var(--sui-primary-accent-color-light);
+          }
+        }
+      }
+    }
+
+    &:active {
+      :global {
+        button {
+          background-color: var(--sui-active-background-color);
+
+          &[aria-checked='true'] {
+            background-color: var(--sui-primary-accent-color-dark);
+          }
+        }
+      }
+    }
+
+    :global {
+      button {
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        margin: 0 !important;
+        border-width: var(--sui-checkbox-border-width, 1.5px);
+        border-color: var(--sui-checkbox-border-color);
+        border-radius: var(--sui-checkbox-border-radius);
+        padding: 0;
+        width: var(--sui-checkbox-height);
+        height: var(--sui-checkbox-height);
+        color: var(--sui-primary-accent-text-color);
+        background-color: var(--sui-checkbox-background-color);
+        transition: all 200ms;
+
+        &[aria-checked='true'] {
+          border-color: var(--sui-checkbox-border-color-checked, var(--sui-primary-accent-color));
+          color: var(
+            --sui-checkbox-foreground-color-checked,
+            var(--sui-primary-accent-color-inverted)
+          );
+          background-color: var(
+            --sui-checkbox-background-color-checked,
+            var(--sui-primary-accent-color)
+          );
+        }
+
+        &[aria-invalid='true'] {
+          border-color: var(--sui-error-border-color);
+          color: var(--sui-error-foreground-color);
+        }
+
+        &[aria-checked='true'][aria-invalid='true'] {
+          background-color: var(--sui-checkbox-background-color);
+        }
+
+        .icon {
+          font-size: calc(var(--sui-checkbox-height) - 2px);
+        }
+      }
+    }
+
+    label {
+      cursor: inherit;
+    }
+  }
+
+  .inner {
+    display: contents;
+  }
+</style>

package/dist/components/dialog/dialog.svelte

@@ -176,100 +176,118 @@
   </div>
 </Modal>
 
-<style>.content {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  border-radius: var(--sui-dialog-content-border-radius, 4px);
-  max-width: calc(100dvw - var(--sui-dialog-content-margin, 16px) * 2);
-  background-color: var(--sui-dialog-content-background-color, var(--sui-secondary-background-color-translucent));
-  box-shadow: var(--sui-dialog-content-box-shadow, 0 8px 16px var(--sui-popup-shadow-color));
-  -webkit-backdrop-filter: var(--sui-dialog-content-backdrop-filter, blur(16px));
-  backdrop-filter: var(--sui-dialog-content-backdrop-filter, blur(16px));
-  transition-property: transform;
-}
-:global(dialog.open) .content {
-  transition-duration: 150ms;
-  transform: scale(100%);
-}
-:global(dialog:not(.open)) .content {
-  transition-duration: 300ms;
-  transform: scale(90%);
-}
-.content.small {
-  width: var(--sui-dialog-small-content-width, var(--sui-dialog-content-width, 400px));
-  max-height: var(--sui-dialog-small-content-max-height, var(--sui-dialog-content-max-height, 400px));
-}
-@media (max-height: 400px) {
-  .content.small {
-    max-height: calc(100dvh - 32px);
-  }
-}
-.content.medium {
-  width: var(--sui-dialog-medium-content-width, var(--sui-dialog-content-width, 600px));
-  max-height: var(--sui-dialog-medium-content-max-height, var(--sui-dialog-content-max-height, 600px));
-}
-@media (max-height: 600px) {
-  .content.medium {
-    max-height: calc(100dvh - 32px);
-  }
-}
-.content.large {
-  width: var(--sui-dialog-large-content-width, var(--sui-dialog-content-width, 800px));
-  max-height: var(--sui-dialog-large-content-max-height, var(--sui-dialog-content-max-height, 800px));
-}
-@media (max-height: 800px) {
-  .content.large {
-    max-height: calc(100dvh - 32px);
+<style lang="scss">
+  .content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border-radius: var(--sui-dialog-content-border-radius, 4px);
+    max-width: calc(100dvw - var(--sui-dialog-content-margin, 16px) * 2);
+    background-color: var(
+      --sui-dialog-content-background-color,
+      var(--sui-secondary-background-color-translucent)
+    );
+    box-shadow: var(--sui-dialog-content-box-shadow, 0 8px 16px var(--sui-popup-shadow-color));
+    -webkit-backdrop-filter: var(--sui-dialog-content-backdrop-filter, blur(16px));
+    backdrop-filter: var(--sui-dialog-content-backdrop-filter, blur(16px));
+    transition-property: transform;
+
+    :global(dialog.open) & {
+      transition-duration: 150ms;
+      transform: scale(100%);
+    }
+
+    :global(dialog:not(.open)) & {
+      transition-duration: 300ms;
+      transform: scale(90%);
+    }
+
+    &.small {
+      width: var(--sui-dialog-small-content-width, var(--sui-dialog-content-width, 400px));
+      max-height: var(
+        --sui-dialog-small-content-max-height,
+        var(--sui-dialog-content-max-height, 400px)
+      );
+
+      @media (max-height: 400px) {
+        max-height: calc(100dvh - 32px);
+      }
+    }
+
+    &.medium {
+      width: var(--sui-dialog-medium-content-width, var(--sui-dialog-content-width, 600px));
+      max-height: var(
+        --sui-dialog-medium-content-max-height,
+        var(--sui-dialog-content-max-height, 600px)
+      );
+
+      @media (max-height: 600px) {
+        max-height: calc(100dvh - 32px);
+      }
+    }
+
+    &.large {
+      width: var(--sui-dialog-large-content-width, var(--sui-dialog-content-width, 800px));
+      max-height: var(
+        --sui-dialog-large-content-max-height,
+        var(--sui-dialog-content-max-height, 800px)
+      );
+
+      @media (max-height: 800px) {
+        max-height: calc(100dvh - 32px);
+      }
+    }
+
+    &.x-large {
+      width: var(--sui-dialog-x-large-content-width, var(--sui-dialog-content-width, 1000px));
+      max-height: var(
+        --sui-dialog-x-large-content-max-height,
+        var(--sui-dialog-content-max-height, 1000px)
+      );
+
+      @media (max-height: 1000px) {
+        max-height: calc(100dvh - 32px);
+      }
+    }
   }
-}
-.content.x-large {
-  width: var(--sui-dialog-x-large-content-width, var(--sui-dialog-content-width, 1000px));
-  max-height: var(--sui-dialog-x-large-content-max-height, var(--sui-dialog-content-max-height, 1000px));
-}
-@media (max-height: 1000px) {
-  .content.x-large {
-    max-height: calc(100dvh - 32px);
+
+  :is(.header, .footer) {
+    display: flex;
+    align-items: center;
+    gap: 4px;
   }
-}
 
-:is(.header, .footer) {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
+  .header {
+    box-sizing: content-box;
+    margin: var(--sui-dialog-header-margin, 0 16px);
+    border-width: var(--sui-dialog-header-border-width, 0 0 1px);
+    border-color: var(--sui-dialog-header-border-color, var(--sui-secondary-border-color));
+    padding: var(--sui-dialog-header-padding, 16px 8px);
+    height: var(--sui-dialog-header-height, 32px);
 
-.header {
-  box-sizing: content-box;
-  margin: var(--sui-dialog-header-margin, 0 16px);
-  border-width: var(--sui-dialog-header-border-width, 0 0 1px);
-  border-color: var(--sui-dialog-header-border-color, var(--sui-secondary-border-color));
-  padding: var(--sui-dialog-header-padding, 16px 8px);
-  height: var(--sui-dialog-header-height, 32px);
-}
-.header .title {
-  font-size: var(--sui-font-size-large);
-  font-weight: var(--sui-font-weight-bold);
-}
+    .title {
+      font-size: var(--sui-font-size-large);
+      font-weight: var(--sui-font-weight-bold);
+    }
+  }
 
-.footer {
-  margin: var(--sui-dialog-footer-margin, 0 24px 24px);
-}
-@media (width < 768px) {
   .footer {
-    margin: var(--sui-dialog-footer-margin, 0 16px 16px);
+    margin: var(--sui-dialog-footer-margin, 0 24px 24px);
+
+    @media (width < 768px) {
+      margin: var(--sui-dialog-footer-margin, 0 16px 16px);
+    }
   }
-}
 
-.body {
-  overflow: auto;
-  margin: var(--sui-dialog-body-margin, 24px 24px);
-  white-space: normal;
-  line-height: var(--sui-line-height-compact);
-}
-@media (width < 768px) {
   .body {
-    margin: var(--sui-dialog-body-margin, 16px 16px);
+    overflow: auto;
+    margin: var(--sui-dialog-body-margin, 24px 24px);
+    white-space: normal;
+    line-height: var(--sui-line-height-compact);
+
+    @media (width < 768px) {
+      margin: var(--sui-dialog-body-margin, 16px 16px);
+    }
   }
-}</style>
+</style>

package/dist/components/dialog/prompt-dialog.svelte

@@ -69,6 +69,8 @@
   </div>
 </Dialog>
 
-<style>.input-outer {
-  margin: 12px 0 0;
-}</style>
+<style lang="scss">
+  .input-outer {
+    margin: 12px 0 0;
+  }
+</style>

package/dist/components/disclosure/disclosure.svelte

@@ -85,26 +85,39 @@
   </div>
 </div>
 
-<style>.disclosure :global(button) {
-  display: flex;
-  width: 100%;
-}
-.disclosure :global(button) :global(.icon) {
-  transition: all 200ms;
-}
-.disclosure :global(button[aria-expanded=false]) :global(.icon:dir(ltr)) {
-  transform: rotate(-90deg);
-}
-.disclosure :global(button[aria-expanded=false]) :global(.icon:dir(rtl)) {
-  transform: rotate(90deg);
-}
+<style lang="scss">
+  .disclosure {
+    :global {
+      button {
+        display: flex;
+        width: 100%;
 
-.inner {
-  display: contents;
-}
+        .icon {
+          transition: all 200ms;
+        }
 
-.content[hidden] {
-  display: block;
-  overflow: hidden;
-  height: 0;
-}</style>
+        &[aria-expanded='false'] .icon {
+          &:dir(ltr) {
+            transform: rotate(-90deg);
+          }
+
+          &:dir(rtl) {
+            transform: rotate(90deg);
+          }
+        }
+      }
+    }
+  }
+
+  .inner {
+    display: contents;
+  }
+
+  .content {
+    &[hidden] {
+      display: block;
+      overflow: hidden;
+      height: 0;
+    }
+  }
+</style>