@sveltia/ui 0.42.0 → 0.43.0

package/dist/components/calendar/calendar.svelte

@@ -180,110 +180,87 @@
   </div>
 </div>
 
-<style lang="scss">
-  [role='group'] {
-    display: inline-flex;
-    flex-direction: column;
-    gap: 8px;
-    -webkit-user-select: none;
-    user-select: none;
-    cursor: default;
+<style>[role=group] {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 8px;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: default;
+}
+[role=group] > * {
+  flex: none;
+}
 
-    & > * {
-      flex: none;
-    }
-  }
+:is(.header, .footer) {
+  display: flex;
+  gap: 8px;
+  height: 24px;
+  align-items: center;
+}
+:is(.header, .footer) :global(button.secondary) {
+  width: 100px;
+  flex: auto;
+}
 
-  :is(.header, .footer) {
-    display: flex;
-    gap: 8px;
-    height: 24px;
-    align-items: center;
+.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);
+}
 
-    :global {
-      button.secondary {
-        width: 100px;
-        flex: auto;
-      }
-    }
-  }
+.footer :global(button) {
+  font-size: var(--sui-font-size-small);
+}
 
-  .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>
+.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>

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

@@ -50,27 +50,24 @@
   </div>
 </div>
 
-<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;
-      }
-    }
+<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;
   }
+}
 
-  .inner {
-    display: contents;
-  }
-</style>
+.inner {
+  display: contents;
+}</style>

package/dist/components/checkbox/checkbox.svelte

@@ -157,94 +157,66 @@
   </div>
 </div>
 
-<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>
+<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>

package/dist/components/dialog/dialog.svelte

@@ -176,118 +176,100 @@
   </div>
 </Modal>
 
-<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);
-      }
-    }
+<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);
   }
-
-  :is(.header, .footer) {
-    display: flex;
-    align-items: center;
-    gap: 4px;
+}
+.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);
+  }
+}
+.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);
   }
+}
 
-  .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);
+:is(.header, .footer) {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
 
-    .title {
-      font-size: var(--sui-font-size-large);
-      font-weight: var(--sui-font-weight-bold);
-    }
-  }
+.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);
+}
 
+.footer {
+  margin: var(--sui-dialog-footer-margin, 0 24px 24px);
+}
+@media (width < 768px) {
   .footer {
-    margin: var(--sui-dialog-footer-margin, 0 24px 24px);
-
-    @media (width < 768px) {
-      margin: var(--sui-dialog-footer-margin, 0 16px 16px);
-    }
+    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 {
-    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);
-    }
+    margin: var(--sui-dialog-body-margin, 16px 16px);
   }
-</style>
+}</style>

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

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

package/dist/components/disclosure/disclosure.svelte

@@ -85,39 +85,26 @@
   </div>
 </div>
 
-<style lang="scss">
-  .disclosure {
-    :global {
-      button {
-        display: flex;
-        width: 100%;
+<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);
+}
 
-        .icon {
-          transition: all 200ms;
-        }
+.inner {
+  display: contents;
+}
 
-        &[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>
+.content[hidden] {
+  display: block;
+  overflow: hidden;
+  height: 0;
+}</style>