@sveltia/ui 0.41.3 → 0.42.0

package/dist/components/progressbar/progressbar.svelte

@@ -11,6 +11,7 @@
    * @property {number} [min] The `aria-valuemin` attribute on the wrapper element.
    * @property {number} [max] The `aria-valuemax` attribute on the wrapper element.
    * @property {string} [text] The `aria-valuetext` attribute on the wrapper element.
+   * @property {string} [ariaLabel] The `aria-label` attribute on the wrapper element.
    */
 
   /**
@@ -23,6 +24,7 @@
     min = 0,
     max = 100,
     text,
+    ariaLabel = undefined,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
@@ -36,22 +38,32 @@
   aria-valuemin={min}
   aria-valuemax={max}
   aria-valuetext={text}
+  aria-label={ariaLabel}
 >
   <div role="none" style:width="{now}%"></div>
 </div>
 
-<style>.progressbar {
-  overflow: hidden;
-  border-width: var(--sui-progressbar-border-width, 1px);
-  border-style: var(--sui-progressbar-border-style, solid);
-  border-color: var(--sui-progressbar-border-color, var(--sui-control-border-color));
-  border-radius: var(--sui-progressbar-border-radius, 16px);
-  width: var(--sui-progressbar-width, 240px);
-  height: var(--sui-progressbar-height, 10px);
-  background-color: var(--sui-progressbar-background-color, var(--sui-secondary-background-color));
-}
-.progressbar div {
-  height: 100%;
-  background-color: var(--sui-progressbar-foreground-color, var(--sui-primary-accent-color-light));
-  transition: width 250ms;
-}</style>
+<style lang="scss">
+  .progressbar {
+    overflow: hidden;
+    border-width: var(--sui-progressbar-border-width, 1px);
+    border-style: var(--sui-progressbar-border-style, solid);
+    border-color: var(--sui-progressbar-border-color, var(--sui-control-border-color));
+    border-radius: var(--sui-progressbar-border-radius, 16px);
+    width: var(--sui-progressbar-width, 240px);
+    height: var(--sui-progressbar-height, 10px);
+    background-color: var(
+      --sui-progressbar-background-color,
+      var(--sui-secondary-background-color)
+    );
+
+    div {
+      height: 100%;
+      background-color: var(
+        --sui-progressbar-foreground-color,
+        var(--sui-primary-accent-color-light)
+      );
+      transition: width 250ms;
+    }
+  }
+</style>

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

@@ -28,6 +28,10 @@ declare const Progressbar: import("svelte").Component<{
      * The `aria-valuetext` attribute on the wrapper element.
      */
     text?: string | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
 } & Record<string, any>, {}, "">;
 type Props = {
     /**
@@ -50,4 +54,8 @@ type Props = {
      * The `aria-valuetext` attribute on the wrapper element.
      */
     text?: string | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
 };

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

@@ -25,6 +25,7 @@
    * `aria-invalid` 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.
    * @property {Snippet} [children] Primary slot content.
    * @property {(event: CustomEvent) => void} [onChange] Custom `Change` event handler.
    */
@@ -41,6 +42,7 @@
     required = false,
     invalid = false,
     orientation = 'horizontal',
+    ariaLabel = undefined,
     children,
     onChange,
     ...restProps
@@ -60,6 +62,7 @@
   aria-required={required}
   aria-invalid={invalid}
   aria-orientation={orientation}
+  aria-label={ariaLabel}
   onChange={(/** @type {CustomEvent} */ event) => {
     onChange?.(event);
   }}
@@ -70,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-group.svelte.d.ts

@@ -42,6 +42,10 @@ declare const RadioGroup: import("svelte").Component<{
      * `aria-orientation` attribute.
      */
     orientation?: "horizontal" | "vertical" | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -85,6 +89,10 @@ type Props = {
      * `aria-orientation` attribute.
      */
     orientation?: "horizontal" | "vertical" | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */

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

@@ -18,6 +18,7 @@
    * @property {boolean} [disabled] Whether to disable the handle.
    * @property {boolean} [showHandleBar] Whether to show the handle bar.
    * @property {string} [class] The `class` attribute on the wrapper element.
+   * @property {string} [ariaLabel] The `aria-label` attribute on the wrapper element.
    * @property {Snippet} [children] Custom handle content. If omitted, a default visual indicator is
    * rendered.
    * @property {() => void} [onResizeStart] Called when a resize interaction begins (pointer down or
@@ -34,6 +35,7 @@
     disabled = false,
     showHandleBar = false,
     class: className,
+    ariaLabel = undefined,
     children,
     onResizeStart,
     onResizeEnd,
@@ -257,6 +259,7 @@
   aria-valuemax={currentPaneMax}
   aria-controls={ctx.paneDefs[handleIndex]?.id}
   aria-disabled={disabled || undefined}
+  aria-label={ariaLabel}
   class="sui resizable-handle {className ?? ''}"
   class:horizontal={isHorizontal}
   class:vertical={!isHorizontal}
@@ -273,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-handle.svelte.d.ts

@@ -21,6 +21,10 @@ declare const ResizableHandle: import("svelte").Component<{
      * The `class` attribute on the wrapper element.
      */
     class?: string | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Custom handle content. If omitted, a default visual indicator is
      * rendered.
@@ -50,6 +54,10 @@ type Props = {
      * The `class` attribute on the wrapper element.
      */
     class?: string | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Custom handle content. If omitted, a default visual indicator is
      * rendered.

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>