@sveltia/ui 0.41.3 → 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.
      */

package/dist/components/table/table.svelte

@@ -12,6 +12,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.
    */
 
@@ -21,13 +22,14 @@
   let {
     /* eslint-disable prefer-const */
     class: className,
+    ariaLabel = undefined,
     children,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 </script>
 
-<div {...restProps} role="table" class="sui table {className}">
+<div {...restProps} role="table" class="sui table {className}" aria-label={ariaLabel}>
   {@render children?.()}
 </div>
 

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

@@ -13,6 +13,10 @@ declare const Table: 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.
      */
@@ -23,6 +27,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/tabs/tab-list.svelte

@@ -21,6 +21,7 @@
    * @property {'horizontal' | 'vertical'} [orientation] Orientation of the widget. An alias of the
    * `aria-orientation` attribute.
    * @property {string} [name] The `data-name` attribute on 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.
    */
@@ -35,6 +36,7 @@
     disabled = false,
     orientation = 'horizontal',
     name = undefined,
+    ariaLabel = undefined,
     children,
     onChange,
     ...restProps
@@ -100,6 +102,7 @@
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-orientation={orientation}
+  aria-label={ariaLabel}
   data-name={name || undefined}
   onInitialized={() => {
     updateIndicator();

package/dist/components/tabs/tab-list.svelte.d.ts

@@ -31,6 +31,10 @@ declare const TabList: import("svelte").Component<{
      * The `data-name` attribute on the wrapper element.
      */
     name?: string | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -63,6 +67,10 @@ type Props = {
      * The `data-name` attribute on the wrapper element.
      */
     name?: string | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */

package/dist/components/text-editor/core.js

@@ -3,6 +3,8 @@
 import 'prismjs';
 
 import {
+  CodeHighlightNode,
+  CodeNode,
   $createCodeNode as createCodeNode,
   $isCodeHighlightNode as isCodeHighlightNode,
   $isCodeNode as isCodeNode,
@@ -208,6 +210,7 @@ export const initEditor = ({
           .filter(([button]) => enabledButtons.includes(/** @type {TextEditorNodeType} */ (button)))
           .flatMap(([, nodes]) => nodes),
       ),
+      ...(isCodeEditor ? [CodeNode, CodeHighlightNode] : []),
       HorizontalRuleNode,
       TableNode,
       TableCellNode,

package/dist/components/text-editor/toolbar/insert-link-button.svelte

@@ -220,7 +220,7 @@
       id="{id}-url"
       bind:value={anchorURL}
       flex
-      aria-label="URL"
+      aria-label={_('_sui.text_editor.url')}
       onkeydown={(event) => {
         onInputKeyDown(event);
       }}
@@ -234,6 +234,7 @@
         id="{id}-text"
         bind:value={anchorText}
         flex
+        aria-label={_('_sui.text_editor.text')}
         onkeydown={(event) => {
           onInputKeyDown(event);
         }}

package/dist/components/text-field/text-input.svelte

@@ -39,7 +39,7 @@
     readonly = false,
     required = false,
     invalid = false,
-    'aria-label': ariaLabel,
+    ariaLabel = undefined,
     children,
     oninput,
     ...restProps

package/dist/components/toolbar/toolbar.svelte

@@ -18,6 +18,7 @@
    * @property {'horizontal' | 'vertical'} [orientation] Orientation of the widget. An alias of the
    * `aria-orientation` attribute.
    * @property {'primary' | 'secondary'} [variant] The style variant of the toolbar.
+   * @property {string} [ariaLabel] The `aria-label` attribute on the wrapper element.
    * @property {Snippet} [children] Primary slot content.
    */
 
@@ -31,6 +32,7 @@
     disabled = false,
     orientation = 'horizontal',
     variant = undefined,
+    ariaLabel = undefined,
     children,
     ...restProps
     /* eslint-enable prefer-const */
@@ -45,6 +47,7 @@
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-orientation={orientation}
+  aria-label={ariaLabel}
 >
   <div role="none" class="inner" inert={disabled}>
     {@render children?.()}

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

@@ -31,6 +31,10 @@ declare const Toolbar: import("svelte").Component<{
      * The style variant of the toolbar.
      */
     variant?: "primary" | "secondary" | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -59,6 +63,10 @@ type Props = {
      * The style variant of the toolbar.
      */
     variant?: "primary" | "secondary" | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */

package/dist/components/util/group.svelte

@@ -14,6 +14,7 @@
    * @property {boolean} [hidden] Whether to hide the widget.
    * @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.
    */
 
@@ -25,6 +26,7 @@
     class: className,
     hidden = false,
     disabled = false,
+    ariaLabel = undefined,
     children,
     ...restProps
     /* eslint-enable prefer-const */
@@ -38,6 +40,7 @@
   {hidden}
   aria-hidden={hidden}
   aria-disabled={disabled}
+  aria-label={ariaLabel}
 >
   <div role="none" class="inner" inert={disabled}>
     {@render children?.()}

package/dist/components/util/group.svelte.d.ts

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

package/dist/locales/en.yaml

@@ -1,45 +1,85 @@
+# Dialog action button labels
 ok: OK
 cancel: Cancel
 close: Close
+
+# Button to clear content, e.g. search input or calendar date
 clear: Clear
+
+# Text editor dialog buttons for link/image insertion
 insert: Insert
 update: Update
 remove: Remove
+
+# Combobox dropdown toggle button aria-labels
 collapse: Collapse
 expand: Expand
+
+# Infobar/toast dismiss button label
 dismiss: Dismiss
+
+# Calendar component
 calendar:
+  # View switcher group aria-labels and navigation button aria-labels
   year: Year
   previous_decade: Previous Decade
   next_decade: Next Decade
   month: Month
   previous_month: Previous Month
   next_month: Next Month
+  # “Today” button label in footer
   today: Today
+
+# Split button component
 split_button:
+  # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
   x_options: "{$name} Options"
+  # Dropdown toggle aria-label
   more_options: More Options
+
+# Combobox component
 combobox:
+  # Placeholder when no option is selected
   select_an_option: Select an option…
+  # Filter input aria-label
   filter_options: Filter Options
+  # Empty state message when filter has no matches
   no_matching_options: No matching options found
+
+# Number input component
 number_input:
-  decrease: Decrease
+  # Spin button aria-labels for incrementing/decrementing the number value
   increase: Increase
+  decrease: Decrease
+
+# Password input component
 password_input:
+  # Visibility toggle button aria-labels
   show_password: Show Password
   hide_password: Hide Password
+
+# Secret input component (API keys, tokens, etc.)
 secret_input:
+  # Visibility toggle button aria-labels
   show_secret: Show Secret
   hide_secret: Hide Secret
+
+# Select tags component (multi-select)
 select_tags:
-  selected_options: Selected options
+  # Listbox aria-label
+  selected_options: Selected Options
+  # Remove button aria-label, e.g. “Remove Option 1”
   remove_x: "Remove {$name}"
+
+# Text editor component
 text_editor:
+  # Toolbar aria-labels
   text_editor: Text Editor
   code_editor: Code Editor
+  # Block style menu button and menu aria-labels
   text_style_options: Text Style Options
   show_text_style_options: Show Text Style Options
+  # Block style menu items
   paragraph: Paragraph
   heading_1: Heading 1
   heading_2: Heading 2
@@ -51,16 +91,23 @@ text_editor:
   numbered_list: Numbered List
   blockquote: Block Quote
   code_block: Code Block
+  # Inline style button aria-labels
   bold: Bold
   italic: Italic
   strikethrough: Strikethrough
   code: Code
   link: Link
+  # Link dialog title
   insert_link: Insert Link
   update_link: Update Link
+  # Link dialog input field labels
   text: Text
   url: URL
+  # Markdown mode toggle button aria-label
   edit_in_markdown: Edit in Markdown
-  converter_error: There was an error while enabling rich text mode. Please use the plain text editor instead.
+  # Error message when rich text conversion fails
+  converter_error: Unable to enable rich text mode. Please use the plain text editor instead.
+  # Language selector aria-label
   language: Language
+  # Plain text mode option in language selector
   plain_text: Plain Text

package/dist/locales/ja.yaml

@@ -1,45 +1,85 @@
+# Dialog action button labels
 ok: OK
 cancel: キャンセル
 close: 閉じる
+
+# Button to clear content, e.g. search input or calendar date
 clear: クリア
+
+# Text editor dialog buttons for link/image insertion
 insert: 挿入
 update: 更新
 remove: 削除
+
+# Combobox dropdown toggle button aria-labels
 collapse: 折り畳む
 expand: 広げる
+
+# Infobar/toast dismiss button label
 dismiss: 閉じる
+
+# Calendar component
 calendar:
+  # View switcher group aria-labels and navigation button aria-labels
   year: 年
   previous_decade: 前の 10 年
   next_decade: 次の 10 年
   month: 月
   previous_month: 前月
   next_month: 翌月
+  # "Today" button label in footer
   today: 今日
+
+# Split button component
 split_button:
+  # Wrapper aria-label, e.g. "Save Options" when primary button is "Save"
   x_options: "{$name} オプション"
+  # Dropdown toggle aria-label
   more_options: その他のオプション
+
+# Combobox component
 combobox:
+  # Placeholder when no option is selected
   select_an_option: オプションを選択…
+  # Filter input aria-label
   filter_options: オプションを絞り込み
+  # Empty state message when filter has no matches
   no_matching_options: 一致するオプションは見つかりませんでした
+
+# Number input component
 number_input:
-  decrease: 減らす
+  # Spin button aria-labels for incrementing/decrementing the number value
   increase: 増やす
+  decrease: 減らす
+
+# Password input component
 password_input:
+  # Visibility toggle button aria-labels
   show_password: パスワードを表示
   hide_password: パスワードを隠す
+
+# Secret input component (API keys, tokens, etc.)
 secret_input:
+  # Visibility toggle button aria-labels
   show_secret: シークレットを表示
   hide_secret: シークレットを隠す
+
+# Select tags component (multi-select)
 select_tags:
+  # Listbox aria-label
   selected_options: 選択済みのオプション
+  # Remove button aria-label, e.g. "Remove Option 1"
   remove_x: "{$name} を削除"
+
+# Text editor component
 text_editor:
+  # Toolbar aria-labels
   text_editor: テキストエディター
   code_editor: コードエディター
+  # Block style menu button and menu aria-labels
   text_style_options: テキストスタイルオプション
   show_text_style_options: テキストスタイルオプションを表示
+  # Block style menu items
   paragraph: 段落
   heading_1: 見出し 1
   heading_2: 見出し 2
@@ -51,16 +91,23 @@ text_editor:
   numbered_list: 番号付きリスト
   blockquote: ブロック引用
   code_block: コードブロック
+  # Inline style button aria-labels
   bold: 太字
   italic: 斜体
   strikethrough: 取り消し線
   code: コード
   link: リンク
+  # Link dialog title
   insert_link: リンクを挿入
   update_link: リンクを更新
+  # Link dialog input field labels
   text: テキスト
   url: URL
+  # Markdown mode toggle button aria-label
   edit_in_markdown: マークダウンで編集
-  converter_error: リッチテキストモードを有効化中に問題が発生しました。代わりにプレーンテキストエディターを使用してください。
+  # Error message when rich text conversion fails
+  converter_error: リッチテキストモードを有効にできませんでした。プレーンテキストエディターを使用してください。
+  # Language selector aria-label
   language: 言語
+  # Plain text mode option in language selector
   plain_text: プレーンテキスト

package/dist/typedefs.d.ts

@@ -397,6 +397,10 @@ export type ComboboxProps = {
      * Use `-1` to always hide the filter.
      */
     filterThreshold?: number | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -490,7 +494,7 @@ export type TextInputProps = {
     /**
      * `aria-label` attribute.
      */
-    "aria-label"?: string | undefined;
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */

package/dist/typedefs.js

@@ -139,6 +139,7 @@
  * @property {PopupPosition} [position] Where to show the dropdown menu.
  * @property {number} [filterThreshold] Number of items to start showing the filter. Default: `5`.
  * Use `-1` to always hide the filter.
+ * @property {string} [ariaLabel] The `aria-label` attribute on the wrapper element.
  * @property {Snippet} [children] Primary slot content.
  * @property {Snippet} [chevronIcon] Chevron icon slot content.
  * @property {(event: CustomEvent) => void} [onChange] Custom `change` event handler.
@@ -174,7 +175,7 @@
  * `aria-required` attribute.
  * @property {boolean} [invalid] Whether to mark the widget invalid. An alias of the `aria-invalid`
  * attribute.
- * @property {string} [aria-label] `aria-label` attribute.
+ * @property {string} [ariaLabel] `aria-label` attribute.
  * @property {Snippet} [children] Primary slot content.
  */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.41.3",
+  "version": "0.41.5",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -53,9 +53,9 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.69.1",
+    "@sveltejs/kit": "^2.69.2",
     "@sveltejs/package": "^2.5.8",
-    "@sveltejs/vite-plugin-svelte": "^7.1.4",
+    "@sveltejs/vite-plugin-svelte": "^7.2.0",
     "@vitest/coverage-v8": "^4.1.10",
     "cspell": "^10.0.1",
     "eslint": "^9.39.4",
@@ -77,7 +77,7 @@
     "stylelint-config-recommended-scss": "^17.0.1",
     "stylelint-scss": "^7.2.0",
     "svelte": "^5.56.4",
-    "svelte-check": "^4.7.1",
+    "svelte-check": "^4.7.2",
     "svelte-preprocess": "^6.0.5",
     "tslib": "^2.8.1",
     "vite": "^8.1.3",