@sveltia/ui 0.19.3 → 0.20.1

package/package/components/grid/grid-row.svelte.d.ts

@@ -1,4 +1,8 @@
 export default GridRow;
+type GridRow = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * The interactive version of `<TableRow>`.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
@@ -27,3 +31,26 @@ declare const GridRow: import("svelte").Component<{
      */
     onSelect?: ((event: CustomEvent) => void) | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to select the widget. An alias of the `aria-selected`
+     * attribute.
+     */
+    selected?: boolean | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * - Custom `Select` event handler.
+     */
+    onSelect?: ((event: CustomEvent) => void) | undefined;
+};

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

@@ -1,4 +1,8 @@
 export default Grid;
+type Grid = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * The interactive version of `<Table>`.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
@@ -31,3 +35,30 @@ declare const Grid: import("svelte").Component<{
      */
     onChange?: ((event: CustomEvent) => void) | undefined;
 } & Record<string, any>, {}, "element">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to allow selecting more than one `<GridRow>` and/or
+     * `<GridCell>`. An alias of the `aria-multiselectable` attribute.
+     */
+    selected?: boolean | undefined;
+    /**
+     * - Whether to select a row by clicking on it.
+     */
+    clickToSelect?: boolean | undefined;
+    /**
+     * - A reference to the wrapper element.
+     */
+    element?: HTMLElement | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+};

package/package/components/icon/icon.svelte.d.ts

@@ -1,4 +1,8 @@
 export default Icon;
+type Icon = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * A Material Symbols icon.
  * @see https://developers.google.com/fonts/docs/material_symbols
@@ -13,3 +17,13 @@ declare const Icon: import("svelte").Component<{
      */
     name?: string | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the `span` element.
+     */
+    class?: string | undefined;
+    /**
+     * - Icon name, e.g. `search`, `expand_more`, `close`, etc.
+     */
+    name?: string | undefined;
+};

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

@@ -1,4 +1,8 @@
 export default Listbox;
+type Listbox = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>>): void;
+};
 /**
  * A list widget with selectable options. The equivalent of the HTML `<select multiple>` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
@@ -57,3 +61,55 @@ declare const Listbox: import("svelte").Component<import("../../typedefs").Keybo
      */
     onFilter?: ((event: CustomEvent) => void) | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to hide the widget. An alias of the `aria-hidden`
+     * attribute.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Whether to make the widget read-only. An alias of the
+     * `aria-readonly` attribute.
+     */
+    readonly?: boolean | undefined;
+    /**
+     * - Whether to mark the widget required. An alias of the
+     * `aria-required` attribute.
+     */
+    required?: boolean | undefined;
+    /**
+     * - Whether to mark the widget invalid. An alias of the
+     * `aria-invalid` attribute.
+     */
+    invalid?: boolean | undefined;
+    /**
+     * - Whether to allow selecting more than one `<Option>`. An alias
+     * of the `aria-multiselectable` attribute.
+     */
+    multiple?: boolean | undefined;
+    /**
+     * - Search terms to be used to filter the items.
+     */
+    searchTerms?: string | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * - Custom `Filter` event handler.
+     */
+    onFilter?: ((event: CustomEvent) => void) | undefined;
+};

package/package/components/listbox/option-group.svelte.d.ts

@@ -1,4 +1,8 @@
 export default OptionGroup;
+type OptionGroup = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * A group within a `<Listbox>`. The equivalent of the HTML `<optgroup>` element. It can contain one
  * or more `<Option>`s.
@@ -30,3 +34,27 @@ declare const OptionGroup: import("svelte").Component<{
      */
     children?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to hide the widget. An alias of the `aria-hidden`
+     * attribute.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - The group’s label to be displayed above the child `<Option>`s.
+     */
+    label?: string | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+};

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

@@ -1,4 +1,8 @@
 export default Option;
+type Option = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<ButtonProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>>): void;
+};
 /**
  * An option within the `<Listbox>` widget. The equivalent of the HTML `<option>` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
@@ -31,3 +35,30 @@ declare const Option: import("svelte").Component<import("../../typedefs").Button
      */
     checkIcon?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "hidden" | "selected">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to select the widget. An alias of the `aria-selected`
+     * attribute.
+     */
+    selected?: boolean | undefined;
+    /**
+     * - Text label displayed on the item.
+     */
+    label: string;
+    /**
+     * - The value to be searched.
+     */
+    searchValue?: string | undefined;
+    /**
+     * - Whether to wrap a long label.
+     */
+    wrap?: boolean | undefined;
+    /**
+     * - Check icon slot content.
+     */
+    checkIcon?: import("svelte").Snippet<[]> | undefined;
+};

package/package/components/menu/menu-button.svelte.d.ts

@@ -1,4 +1,10 @@
 export default MenuButton;
+type MenuButton = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<ButtonProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>>): void;
+} & {
+    focus: () => void;
+};
 /**
  * A button to open a `<Menu>` widget.
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
@@ -12,3 +18,10 @@ declare const MenuButton: import("svelte").Component<import("../../typedefs").Bu
 } & Record<string, any>, {
     focus: () => void;
 }, "">;
+type Props = {
+    /**
+     * - The base element of
+     * {@link popupPosition}. If omitted, this will be {@link buttonComponent}.
+     */
+    popupPositionBaseElement?: HTMLElement | undefined;
+};

package/package/components/menu/menu-item-checkbox.svelte.d.ts

@@ -1,4 +1,8 @@
 export default MenuItemCheckbox;
+type MenuItemCheckbox = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<ButtonProps & MenuItemProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Record<string, any>>): void;
+};
 /**
  * A menu item widget with a checkbox.
  * @see https://w3c.github.io/aria/#menuitemcheckbox

package/package/components/menu/menu-item-group.svelte.d.ts

@@ -1,4 +1,8 @@
 export default MenuItemGroup;
+type MenuItemGroup = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>>): void;
+};
 /** A menu item group. */
 declare const MenuItemGroup: import("svelte").Component<import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & {
     /**
@@ -20,3 +24,23 @@ declare const MenuItemGroup: import("svelte").Component<import("../../typedefs")
      */
     title?: string | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to hide the widget. An alias of the `aria-hidden`
+     * attribute.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Text label displayed above the group items.
+     */
+    title?: string | undefined;
+};

package/package/components/menu/menu-item-radio.svelte.d.ts

@@ -1,4 +1,8 @@
 export default MenuItemRadio;
+type MenuItemRadio = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<ButtonProps & MenuItemProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Record<string, any>>): void;
+};
 /**
  * A menu item widget with a radio. Only one item can be selected within the parent `<Menu>` or
  * `<MenuItemGroup>` component.

package/package/components/menu/menu-item.svelte.d.ts

@@ -1,4 +1,8 @@
 export default MenuItem;
+type MenuItem = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<ButtonProps & MenuItemProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Record<string, any>>): void;
+};
 /**
  * A menu item widget.
  * @see https://w3c.github.io/aria/#menuitem

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

@@ -1,4 +1,8 @@
 export default Menu;
+type Menu = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * A menu widget.
  * @see https://w3c.github.io/aria/#menu
@@ -28,3 +32,27 @@ declare const Menu: import("svelte").Component<{
      */
     onChange?: ((event: CustomEvent) => void) | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to hide the widget. An alias of the `aria-hidden`
+     * attribute.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+};

package/package/components/progressbar/progressbar.svelte

@@ -0,0 +1,54 @@
+<!--
+  @component
+  A progressbar widget.
+  @see https://w3c.github.io/aria/#progressbar
+-->
+<script>
+  /**
+   * @typedef {object} Props
+   * @property {string} [class] - The `class` attribute on the wrapper element.
+   * @property {number} now - The `aria-valuenow` attribute on the wrapper element.
+   * @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.
+   */
+
+  /**
+   * @type {Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    class: className,
+    now = 0,
+    min = 0,
+    max = 100,
+    text,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
+</script>
+
+<div
+  {...restProps}
+  role="progressbar"
+  class="sui progressbar {className}"
+  aria-valuenow={now}
+  aria-valuemin={min}
+  aria-valuemax={max}
+  aria-valuetext={text}
+>
+  <div role="none" style:width="{now}%"></div>
+</div>
+
+<style>.progressbar {
+  overflow: hidden;
+  border-radius: var(--sui-progressbar-border-radius, 16px);
+  width: var(--sui-progressbar-width, 240px);
+  height: var(--sui-progressbar-height, 8px);
+  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>

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

@@ -0,0 +1,53 @@
+export default Progressbar;
+type Progressbar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
+/**
+ * A progressbar widget.
+ * @see https://w3c.github.io/aria/#progressbar
+ */
+declare const Progressbar: import("svelte").Component<{
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - The `aria-valuenow` attribute on the wrapper element.
+     */
+    now: number;
+    /**
+     * - The `aria-valuemin` attribute on the wrapper element.
+     */
+    min?: number | undefined;
+    /**
+     * - The `aria-valuemax` attribute on the wrapper element.
+     */
+    max?: number | undefined;
+    /**
+     * - The `aria-valuetext` attribute on the wrapper element.
+     */
+    text?: string | undefined;
+} & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - The `aria-valuenow` attribute on the wrapper element.
+     */
+    now: number;
+    /**
+     * - The `aria-valuemin` attribute on the wrapper element.
+     */
+    min?: number | undefined;
+    /**
+     * - The `aria-valuemax` attribute on the wrapper element.
+     */
+    max?: number | undefined;
+    /**
+     * - The `aria-valuetext` attribute on the wrapper element.
+     */
+    text?: string | undefined;
+};

package/package/components/radio/radio-group.svelte.d.ts

@@ -1,4 +1,8 @@
 export default RadioGroup;
+type RadioGroup = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * The container of `<Radio>`s.
  * @see https://w3c.github.io/aria/#radiogroup
@@ -47,3 +51,46 @@ declare const RadioGroup: import("svelte").Component<{
      */
     onChange?: ((event: CustomEvent) => void) | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to hide the widget.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Whether to make the widget read-only. An alias of the
+     * `aria-readonly` attribute.
+     */
+    readonly?: boolean | undefined;
+    /**
+     * - Whether to mark the widget required. An alias of the
+     * `aria-required` attribute.
+     */
+    required?: boolean | undefined;
+    /**
+     * - Whether to mark the widget invalid. An alias of the
+     * `aria-invalid` attribute.
+     */
+    invalid?: boolean | undefined;
+    /**
+     * - Orientation of the widget. An alias of the
+     * `aria-orientation` attribute.
+     */
+    orientation?: "vertical" | "horizontal" | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+};

package/package/components/radio/radio.svelte.d.ts

@@ -1,4 +1,8 @@
 export default Radio;
+type Radio = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * The equivalent of the HTML `<input type="radio">` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
@@ -53,3 +57,51 @@ declare const Radio: import("svelte").Component<{
      */
     onSelect?: ((event: CustomEvent) => void) | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to hide the widget.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Whether to check the widget. An alias of the `aria-checked`
+     * attribute.
+     */
+    checked?: boolean | undefined;
+    /**
+     * - The `name` attribute on the `<button>` element.
+     */
+    name?: string | undefined;
+    /**
+     * - The `value` attribute on the `<button>` element.
+     */
+    value?: string | undefined;
+    /**
+     * - Text label displayed next to the checkbox.
+     */
+    label?: string | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Default slot content.
+     */
+    default?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * - Custom `Select` event handler.
+     */
+    onSelect?: ((event: CustomEvent) => void) | undefined;
+};

package/package/components/select/combobox.svelte.d.ts

@@ -1,4 +1,8 @@
 export default Combobox;
+type Combobox = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<ComboboxProps & TextInputProps & Record<string, any>>): void;
+};
 /**
  * A variant of the `<Select>` widget with an auto-complete text input field.
  * @see https://w3c.github.io/aria/#combobox

package/package/components/select/select-tags.svelte.d.ts

@@ -1,4 +1,8 @@
 export default SelectTags;
+type SelectTags = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 declare const SelectTags: import("svelte").Component<{
     /**
      * - Available
@@ -58,3 +62,62 @@ declare const SelectTags: import("svelte").Component<{
      */
     onRemoveValue?: ((event: CustomEvent) => void) | undefined;
 } & Record<string, any>, {}, "values">;
+type Props = {
+    /**
+     * - Available
+     * options.
+     */
+    options: {
+        label: string;
+        value: string;
+        searchValue?: string;
+    }[];
+    /**
+     * - Selected option values.
+     */
+    values?: string[] | undefined;
+    /**
+     * - Maximum number of selectable options.
+     */
+    max?: number | undefined;
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to hide the widget.
+     */
+    hidden?: boolean | undefined;
+    /**
+     * - Whether to disable the widget. An alias of the `aria-disabled`
+     * attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * - Whether to make the widget read-only. An alias of the
+     * `aria-readonly` attribute.
+     */
+    readonly?: boolean | undefined;
+    /**
+     * - Whether to mark the widget required. An alias of the
+     * `aria-required` attribute.
+     */
+    required?: boolean | undefined;
+    /**
+     * - Whether to mark the widget invalid. An alias of the
+     * `aria-invalid` attribute.
+     */
+    invalid?: boolean | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `AddValue` event handler.
+     */
+    onAddValue?: ((event: CustomEvent) => void) | undefined;
+    /**
+     * - Custom `RemoveValue` event handler.
+     */
+    onRemoveValue?: ((event: CustomEvent) => void) | undefined;
+};

package/package/components/select/select.svelte.d.ts

@@ -1,4 +1,8 @@
 export default Select;
+type Select = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<ComboboxProps & Record<string, any>>): void;
+};
 /**
  * A select-only variant of `<Combobox>`. The equivalent of the HTML `<select>` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select