@sveltia/ui 0.41.3 → 0.42.0

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>

package/dist/components/divider/divider.svelte

@@ -11,6 +11,7 @@
    * attribute.
    * @property {'horizontal'|'vertical'} [orientation] Orientation of the widget. An alias of the
    * `aria-orientation` attribute.
+   * @property {string} [ariaLabel] The `aria-label` attribute on the wrapper element.
    */
 
   /**
@@ -21,6 +22,7 @@
     class: className,
     hidden = false,
     orientation = 'horizontal',
+    ariaLabel = undefined,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
@@ -33,19 +35,24 @@
   {hidden}
   aria-hidden={hidden}
   aria-orientation={orientation}
+  aria-label={ariaLabel}
 ></div>
 
-<style>.divider {
-  flex: none;
-  background-color: var(--sui-secondary-border-color);
-}
-.divider[aria-orientation=horizontal] {
-  margin: 8px 0;
-  width: 100%;
-  height: 1px;
-}
-.divider[aria-orientation=vertical] {
-  margin: 0 8px;
-  width: 1px;
-  height: 100%;
-}</style>
+<style lang="scss">
+  .divider {
+    flex: none;
+    background-color: var(--sui-secondary-border-color);
+
+    &[aria-orientation='horizontal'] {
+      margin: 8px 0;
+      width: 100%;
+      height: 1px;
+    }
+
+    &[aria-orientation='vertical'] {
+      margin: 0 8px;
+      width: 1px;
+      height: 100%;
+    }
+  }
+</style>

package/dist/components/divider/divider.svelte.d.ts

@@ -22,6 +22,10 @@ declare const Divider: import("svelte").Component<{
      * `aria-orientation` attribute.
      */
     orientation?: "horizontal" | "vertical" | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
 } & Record<string, any>, {}, "">;
 type Props = {
     /**
@@ -38,4 +42,8 @@ type Props = {
      * `aria-orientation` attribute.
      */
     orientation?: "horizontal" | "vertical" | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
 };

package/dist/components/divider/spacer.svelte

@@ -23,11 +23,16 @@
 
 <div {...restProps} role="none" class="sui spacer {className}" class:flex></div>
 
-<style>.spacer.flex:not([hidden]) {
-  display: block;
-  flex: auto;
-}
-.spacer:not(.flex) {
-  width: 8px;
-  height: 8px;
-}</style>
+<style lang="scss">
+  .spacer {
+    &.flex:not([hidden]) {
+      display: block; // Avoid Tailwind .flex class collisions
+      flex: auto;
+    }
+
+    &:not(.flex) {
+      width: 8px;
+      height: 8px;
+    }
+  }
+</style>