@sveltia/ui 0.41.2 → 0.41.5

package/dist/components/alert/alert.svelte

@@ -14,6 +14,7 @@
   /**
    * @typedef {object} Props
    * @property {'error' | 'warning' | 'info' | 'success'} status Alert status.
+   * @property {'off' | 'polite' | 'assertive'} [ariaLive] ARIA live region politeness.
    * @property {Snippet} [children] Primary slot content.
    * @property {Snippet} [icon] Icon slot content.
    */
@@ -24,6 +25,7 @@
   let {
     /* eslint-disable prefer-const */
     status,
+    ariaLive = 'assertive',
     children,
     icon,
     ...restProps
@@ -31,7 +33,7 @@
   } = $props();
 </script>
 
-<div {...restProps} role="alert" class="sui alert {status}">
+<div {...restProps} role="alert" class="sui alert {status}" aria-live={ariaLive}>
   {#if icon}
     {@render icon()}
   {:else}

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

@@ -13,6 +13,10 @@ declare const Alert: import("svelte").Component<{
      * Alert status.
      */
     status: "error" | "warning" | "info" | "success";
+    /**
+     * ARIA live region politeness.
+     */
+    ariaLive?: "off" | "polite" | "assertive" | undefined;
     /**
      * Primary slot content.
      */
@@ -27,6 +31,10 @@ type Props = {
      * Alert status.
      */
     status: "error" | "warning" | "info" | "success";
+    /**
+     * ARIA live region politeness.
+     */
+    ariaLive?: "off" | "polite" | "assertive" | undefined;
     /**
      * Primary slot content.
      */

package/dist/components/alert/infobar.svelte

@@ -12,6 +12,7 @@
    * @property {boolean} [show] Whether to show the toast.
    * @property {boolean} [dismissible] Whether to show the close button.
    * @property {'error' | 'warning' | 'info' | 'success'} [status] Information status.
+   * @property {'off' | 'polite' | 'assertive'} [ariaLive] ARIA live region politeness.
    * @property {Snippet} [children] Primary slot content.
    * @property {Snippet} [icon] Icon slot content.
    */
@@ -22,6 +23,7 @@
     show = $bindable(true),
     dismissible = true,
     status = 'info',
+    ariaLive = 'polite',
     children = undefined,
     icon = undefined,
     /* eslint-enable prefer-const */
@@ -30,7 +32,7 @@
 
 {#if show}
   <div role="none" class="infobar {status}">
-    <div role="alert" class="message">
+    <div role="alert" class="message" aria-live={ariaLive}>
       {#if icon}
         {@render icon()}
       {:else}

package/dist/components/alert/infobar.svelte.d.ts

@@ -16,6 +16,10 @@ declare const Infobar: import("svelte").Component<{
      * Information status.
      */
     status?: "error" | "warning" | "info" | "success" | undefined;
+    /**
+     * ARIA live region politeness.
+     */
+    ariaLive?: "off" | "polite" | "assertive" | undefined;
     /**
      * Primary slot content.
      */
@@ -38,6 +42,10 @@ type Props = {
      * Information status.
      */
     status?: "error" | "warning" | "info" | "success" | undefined;
+    /**
+     * ARIA live region politeness.
+     */
+    ariaLive?: "off" | "polite" | "assertive" | undefined;
     /**
      * Primary slot content.
      */

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

@@ -6,6 +6,7 @@
   /**
    * @typedef {object} Props
    * @property {string} [class] The `class` attribute on the wrapper element.
+   * @property {string} [ariaLabel] The `aria-label` attribute on the wrapper element.
    * @property {Snippet} [children] Primary slot content.
    */
 
@@ -15,13 +16,14 @@
   let {
     /* eslint-disable prefer-const */
     class: className,
+    ariaLabel = undefined,
     children,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 </script>
 
-<div {...restProps} role="group" class="sui button-group {className}">
+<div {...restProps} role="group" class="sui button-group {className}" aria-label={ariaLabel}>
   {@render children?.()}
 </div>
 

package/dist/components/button/button-group.svelte.d.ts

@@ -8,6 +8,10 @@ declare const ButtonGroup: import("svelte").Component<{
      * The `class` attribute on the wrapper element.
      */
     class?: string | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -18,6 +22,10 @@ type Props = {
      * The `class` attribute on the wrapper element.
      */
     class?: string | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */

package/dist/components/button/select-button-group.svelte

@@ -23,6 +23,7 @@
    * `aria-required` attribute.
    * @property {boolean} [invalid] Whether to mark the widget invalid. An alias of the
    * `aria-invalid` 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.
    */
@@ -38,6 +39,7 @@
     readonly = false,
     required = false,
     invalid = false,
+    ariaLabel = undefined,
     children,
     ...restProps
     /* eslint-enable prefer-const */
@@ -55,6 +57,7 @@
   aria-readonly={readonly}
   aria-required={required}
   aria-invalid={invalid}
+  aria-label={ariaLabel}
   {@attach activateGroup()}
 >
   <div role="none" class="inner" inert={disabled}>

package/dist/components/button/select-button-group.svelte.d.ts

@@ -37,6 +37,10 @@ declare const SelectButtonGroup: import("svelte").Component<{
      * `aria-invalid` attribute.
      */
     invalid?: boolean | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -75,6 +79,10 @@ type Props = {
      * `aria-invalid` attribute.
      */
     invalid?: boolean | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */

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

@@ -15,6 +15,7 @@
    * @property {boolean} [disabled] Whether to disable the widget. An alias of the `aria-disabled`
    * attribute.
    * @property {'horizontal'|'vertical'} [orientation] Orientation of the widget.
+   * @property {string} [ariaLabel] The `aria-label` attribute on the wrapper element.
    * @property {Snippet} [children] Primary slot content.
    */
 
@@ -27,6 +28,7 @@
     hidden = false,
     disabled = false,
     orientation = 'horizontal',
+    ariaLabel = undefined,
     children,
     ...restProps
     /* eslint-enable prefer-const */
@@ -41,6 +43,7 @@
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-roledescription="checkbox group"
+  aria-label={ariaLabel}
 >
   <div role="none" class="inner" inert={disabled}>
     {@render children?.()}

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

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

package/dist/components/checkbox/checkbox.svelte

@@ -24,7 +24,7 @@
    * @property {boolean | 'mixed'} [checked] Whether to check the widget. An alias of the
    * `aria-checked` attribute.
    * @property {string} [label] Text label displayed next to the checkbox.
-   * @property {string} [aria-label] `aria-label` attribute.
+   * @property {string} [ariaLabel] `aria-label` attribute.
    * @property {Snippet} [checkIcon] Check icon slot content.
    * @property {string[]} [group] The two-way bound variable to manage the state of a group of
    * checkboxes. It works in the same way as the [`<input
@@ -46,7 +46,7 @@
     required = false,
     invalid = false,
     label = undefined,
-    'aria-label': ariaLabel,
+    ariaLabel = undefined,
     group = $bindable(),
     onChange,
     children,

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

@@ -36,7 +36,7 @@ declare const Checkbox: import("svelte").Component<ButtonProps & import("../../t
     /**
      * `aria-label` attribute.
      */
-    "aria-label"?: string | undefined;
+    ariaLabel?: string | undefined;
     /**
      * Check icon slot content.
      */
@@ -75,7 +75,7 @@ type Props = {
     /**
      * `aria-label` attribute.
      */
-    "aria-label"?: string | undefined;
+    ariaLabel?: string | undefined;
     /**
      * Check icon slot content.
      */

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,6 +35,7 @@
   {hidden}
   aria-hidden={hidden}
   aria-orientation={orientation}
+  aria-label={ariaLabel}
 ></div>
 
 <style>.divider {

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/grid/grid.svelte

@@ -18,6 +18,7 @@
    * `<GridCell>`. An alias of the `aria-multiselectable` attribute.
    * @property {boolean} [clickToSelect] Whether to select a row by clicking on it.
    * @property {HTMLElement} [element] A reference to the wrapper element.
+   * @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.
    */
@@ -31,6 +32,7 @@
     class: className,
     multiple = false,
     clickToSelect = true,
+    ariaLabel = undefined,
     children,
     onChange,
     ...restProps
@@ -44,6 +46,7 @@
   role="grid"
   class="sui grid {className}"
   aria-multiselectable={multiple}
+  aria-label={ariaLabel}
   onChange={(/** @type {CustomEvent} */ event) => {
     onChange?.(event);
   }}

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

@@ -26,6 +26,10 @@ declare const Grid: import("svelte").Component<{
      * A reference to the wrapper element.
      */
     element?: HTMLElement | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -53,6 +57,10 @@ type Props = {
      * A reference to the wrapper element.
      */
     element?: HTMLElement | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */

package/dist/components/listbox/listbox.svelte

@@ -29,6 +29,7 @@
    * @property {boolean} [multiple] Whether to allow selecting more than one `<Option>`. An alias of
    * the `aria-multiselectable` attribute.
    * @property {string} [searchTerms] Search terms to be used to filter the items.
+   * @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.
    * @property {(event: CustomEvent) => void} [onFilter] Custom `Filter` event handler.
@@ -47,6 +48,7 @@
     invalid = false,
     multiple = false,
     searchTerms = '',
+    ariaLabel = undefined,
     children,
     onFilter,
     ...restProps
@@ -72,6 +74,7 @@
   aria-required={required}
   aria-invalid={invalid}
   aria-multiselectable={multiple}
+  aria-label={ariaLabel}
   onFilter={(/** @type {CustomEvent} */ event) => {
     const {
       detail: { matched, total },

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

@@ -48,6 +48,10 @@ declare const Listbox: import("svelte").Component<import("../../typedefs").Keybo
      * Search terms to be used to filter the items.
      */
     searchTerms?: string | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -100,6 +104,10 @@ type Props = {
      * Search terms to be used to filter the items.
      */
     searchTerms?: string | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */

package/dist/components/menu/menu.svelte

@@ -18,6 +18,7 @@
    * attribute.
    * @property {boolean} [disabled] Whether to disable the widget. An alias of the `aria-disabled`
    * 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.
    */
@@ -30,6 +31,7 @@
     class: className,
     hidden = false,
     disabled = false,
+    ariaLabel = undefined,
     children,
     onChange,
     ...restProps
@@ -44,6 +46,7 @@
   {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}
+  aria-label={ariaLabel}
   onChange={(/** @type {CustomEvent} */ event) => {
     onChange?.(event);
   }}

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

@@ -23,6 +23,10 @@ declare const Menu: import("svelte").Component<{
      * attribute.
      */
     disabled?: boolean | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -47,6 +51,10 @@ type Props = {
      * attribute.
      */
     disabled?: boolean | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */

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,6 +38,7 @@
   aria-valuemin={min}
   aria-valuemax={max}
   aria-valuetext={text}
+  aria-label={ariaLabel}
 >
   <div role="none" style:width="{now}%"></div>
 </div>

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);
   }}

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/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}

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/select/combobox.svelte

@@ -41,6 +41,7 @@
     editable = true,
     position = 'bottom-left',
     filterThreshold = 5,
+    ariaLabel = undefined,
     children,
     chevronIcon,
     onChange,
@@ -134,6 +135,7 @@
       aria-required={required}
       aria-invalid={invalid}
       aria-haspopup="listbox"
+      aria-label={ariaLabel}
     >
       <div role="none" class="label">
         <TruncatedText>
@@ -157,6 +159,7 @@
       aria-controls="{id}-popup"
       aria-expanded={isPopupOpen}
       aria-haspopup="listbox"
+      aria-label={ariaLabel}
     />
   {/if}
   <Button
@@ -235,7 +238,7 @@
       {@render children?.()}
     </Listbox>
     {#if !hasMatchingOptions}
-      <div role="alert" class="no-options">
+      <div role="alert" class="no-options" aria-live="assertive">
         {_('_sui.combobox.no_matching_options')}
       </div>
     {/if}

package/dist/components/switch/switch.svelte

@@ -22,6 +22,7 @@
    * `aria-required` attribute.
    * @property {boolean} [invalid] Whether to mark the widget invalid. An alias of the
    * `aria-invalid` 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.
    */
@@ -39,6 +40,7 @@
     readonly = false,
     required = false,
     invalid = false,
+    ariaLabel = undefined,
     children,
     onChange,
     ...restProps
@@ -59,6 +61,7 @@
   aria-readonly={readonly}
   aria-required={required}
   aria-invalid={invalid}
+  aria-label={ariaLabel}
   onclick={() => {
     if (!disabled && !readonly) {
       checked = !checked;

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

@@ -41,6 +41,10 @@ declare const Switch: import("svelte").Component<{
      * `aria-invalid` attribute.
      */
     invalid?: boolean | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -83,6 +87,10 @@ type Props = {
      * `aria-invalid` attribute.
      */
     invalid?: boolean | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */