@sveltia/ui 0.19.2 → 0.20.0

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

@@ -1,4 +1,8 @@
 export default Alert;
+type Alert = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * Inline alert message.
  * @see https://w3c.github.io/aria/#alert
@@ -18,3 +22,17 @@ declare const Alert: import("svelte").Component<{
      */
     icon?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - Alert status.
+     */
+    status: "error" | "warning" | "info" | "success";
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Icon slot content.
+     */
+    icon?: import("svelte").Snippet<[]> | undefined;
+};

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

@@ -1,4 +1,8 @@
 export default ButtonGroup;
+type ButtonGroup = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 declare const ButtonGroup: import("svelte").Component<{
     /**
      * - The `class` attribute on the wrapper element.
@@ -9,3 +13,13 @@ declare const ButtonGroup: import("svelte").Component<{
      */
     children?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+};

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

@@ -1,4 +1,8 @@
 export default Button;
+type Button = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<ButtonProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Record<string, any>>): void;
+};
 /**
  * A generic button widget based on the HTML `<button>` element.
  * @see https://w3c.github.io/aria/#button

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

@@ -1,4 +1,8 @@
 export default SelectButtonGroup;
+type SelectButtonGroup = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * A variant of `<RadioGroup>`, looking like normal buttons.
  * @see https://w3c.github.io/aria/#radiogroup
@@ -42,3 +46,41 @@ declare const SelectButtonGroup: 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;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+};

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

@@ -1,4 +1,8 @@
 export default SelectButton;
+type SelectButton = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<ButtonProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>>): void;
+};
 /**
  * A variant of `<Radio>`, looking like a normal button.
  * @see https://w3c.github.io/aria/#radio
@@ -11,3 +15,10 @@ declare const SelectButton: import("svelte").Component<import("../../typedefs").
      */
     selected?: boolean | undefined;
 } & Record<string, any>, {}, "selected">;
+type Props = {
+    /**
+     * - Whether to select the widget. An alias of the `aria-checked`
+     * attribute. Because the UI is a button, we expose `selected` instead of `checked`.
+     */
+    selected?: boolean | undefined;
+};

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

@@ -1,4 +1,8 @@
 export default SplitButton;
+type SplitButton = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<ButtonProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>>): void;
+};
 /**
  * A combination of a normal `<Button>` (default action) and an arrow-only `<MenuButton>` (different
  * actions). For example, Microsoft Word has the Paste button along with the Keep Source Formatting,
@@ -24,3 +28,22 @@ declare const SplitButton: import("svelte").Component<import("../../typedefs").B
      */
     popup?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - Where to show the dropdown
+     * menu.
+     */
+    popupPosition?: import("../../typedefs").PopupPosition | undefined;
+    /**
+     * - Whether to show the backdrop for the popup.
+     */
+    showPopupBackdrop?: boolean | undefined;
+    /**
+     * - Chevron slot content.
+     */
+    chevronIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Popup slot content.
+     */
+    popup?: import("svelte").Snippet<[]> | undefined;
+};

package/package/components/calendar/calendar.svelte.d.ts

@@ -1,4 +1,8 @@
 export default Calendar;
+type Calendar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /** A calendar (date picker) widget. */
 declare const Calendar: import("svelte").Component<{
     /**
@@ -6,3 +10,9 @@ declare const Calendar: import("svelte").Component<{
      */
     value?: string | undefined;
 } & Record<string, any>, {}, "value">;
+type Props = {
+    /**
+     * - Date.
+     */
+    value?: string | undefined;
+};

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

@@ -1,4 +1,8 @@
 export default CheckboxGroup;
+type CheckboxGroup = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /** The layout container of `<Checkbox>`es. */
 declare const CheckboxGroup: import("svelte").Component<{
     /**
@@ -24,3 +28,27 @@ declare const CheckboxGroup: 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;
+    /**
+     * - Orientation of the widget.
+     */
+    orientation?: "vertical" | "horizontal" | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+};

package/package/components/checkbox/checkbox.svelte

@@ -148,6 +148,7 @@
   background-color: var(--sui-primary-accent-color-dark);
 }
 .checkbox :global(button) {
+  flex: none;
   align-items: center;
   justify-content: center;
   overflow: hidden;

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

@@ -1,4 +1,8 @@
 export default Checkbox;
+type Checkbox = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<ButtonProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & Props & Record<string, any>>): void;
+};
 /**
  * The equivalent of the HTML `<input type="checkbox">` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
@@ -38,3 +42,36 @@ declare const Checkbox: import("svelte").Component<import("../../typedefs").Butt
      */
     checkIcon?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "checked">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | 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 check the widget. An alias of the
+     * `aria-checked` attribute.
+     */
+    checked?: boolean | "mixed" | undefined;
+    /**
+     * - Text label displayed next to the checkbox.
+     */
+    label?: string | undefined;
+    /**
+     * - `aria-label` attribute.
+     */
+    "aria-label"?: string | undefined;
+    /**
+     * - Check icon slot content.
+     */
+    checkIcon?: import("svelte").Snippet<[]> | undefined;
+};

package/package/components/dialog/alert-dialog.svelte.d.ts

@@ -1,4 +1,8 @@
 export default AlertDialog;
+type AlertDialog = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<ModalProps & DialogProps & Record<string, any>>): void;
+};
 /**
  * A modal alert dialog. It only shows the OK button, just like `window.alert()`.
  * @see https://w3c.github.io/aria/#alertdialog

package/package/components/dialog/confirmation-dialog.svelte.d.ts

@@ -1,4 +1,8 @@
 export default ConfirmationDialog;
+type ConfirmationDialog = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<ModalProps & DialogProps & Record<string, any>>): void;
+};
 /**
  * A modal confirmation dialog. It shows the OK and Cancel buttons, just like `window.confirm()`.
  * @see https://w3c.github.io/aria/#alertdialog

package/package/components/dialog/dialog.svelte

@@ -6,6 +6,7 @@
 -->
 <script>
   import { generateElementId } from '@sveltia/utils/element';
+  import { sleep } from '@sveltia/utils/misc';
   import { _ } from 'svelte-i18n';
   import Button from '../button/button.svelte';
   import Spacer from '../divider/spacer.svelte';
@@ -59,7 +60,13 @@
 
   $effect(() => {
     if (open && content) {
-      /** @type {HTMLElement} */ (content.querySelector('input, button.primary'))?.focus();
+      (async () => {
+        await sleep(50);
+        /** @type {HTMLInputElement | HTMLButtonElement} */ (
+          content.querySelector('input, button.primary')
+        )?.focus();
+        /** @type {HTMLInputElement} */ (content.querySelector('input'))?.select();
+      })();
     }
   });
 </script>

package/package/components/dialog/dialog.svelte.d.ts

@@ -1,4 +1,8 @@
 export default Dialog;
+type Dialog = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<ModalProps & DialogProps & Record<string, any>>): void;
+};
 /**
  * A feedback dialog widget based on the HTML `<dialog>` element.
  * @see https://w3c.github.io/aria/#dialog

package/package/components/dialog/prompt-dialog.svelte.d.ts

@@ -1,4 +1,8 @@
 export default PromptDialog;
+type PromptDialog = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<ModalProps & DialogProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>>): void;
+};
 /**
  * A modal prompt dialog. It shows the OK and Cancel buttons as well as a textbox, just like
  * `window.prompt()`.
@@ -24,3 +28,21 @@ declare const PromptDialog: import("svelte").Component<import("../../typedefs").
      */
     input?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "value" | "open">;
+type Props = {
+    /**
+     * - Value entered on the textbox.
+     */
+    value?: string | undefined;
+    /**
+     * - Extra attributes for the `<TextInput>`.
+     */
+    textboxAttrs?: object | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Input slot content.
+     */
+    input?: import("svelte").Snippet<[]> | undefined;
+};

package/package/components/disclosure/disclosure.svelte.d.ts

@@ -1,4 +1,8 @@
 export default Disclosure;
+type Disclosure = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * A disclosure (expander) widget. The equivalent of the HTML `<details>` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
@@ -41,3 +45,40 @@ declare const Disclosure: import("svelte").Component<{
      */
     onChange?: ((event: CustomEvent) => void) | undefined;
 } & Record<string, any>, {}, "expanded">;
+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 show the content. An alias of the `aria-expanded`
+     * attribute.
+     */
+    expanded?: boolean | undefined;
+    /**
+     * - Text label displayed next to the expander.
+     */
+    label?: string | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Chevron slot content.
+     */
+    chevronIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Custom `Change` event handler.
+     */
+    onChange?: ((event: CustomEvent) => void) | undefined;
+};

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

@@ -1,4 +1,8 @@
 export default Divider;
+type Divider = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * A content divider with a visible vertical/horizontal line.
  * @see https://w3c.github.io/aria/#separator
@@ -19,3 +23,19 @@ declare const Divider: import("svelte").Component<{
      */
     orientation?: "vertical" | "horizontal" | 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;
+    /**
+     * - Orientation of the widget. An alias of the
+     * `aria-orientation` attribute.
+     */
+    orientation?: "vertical" | "horizontal" | undefined;
+};

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

@@ -1,4 +1,8 @@
 export default Spacer;
+type Spacer = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /** A content divider with no line. It can be flexible. */
 declare const Spacer: import("svelte").Component<{
     /**
@@ -10,3 +14,13 @@ declare const Spacer: import("svelte").Component<{
      */
     flex?: boolean | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to make the spacer flexible.
+     */
+    flex?: boolean | undefined;
+};

package/package/components/drawer/drawer.svelte.d.ts

@@ -1,4 +1,8 @@
 export default Drawer;
+type Drawer = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<ModalProps & Props & Record<string, any>>): void;
+};
 /**
  * A generic drawer widget based on the HTML `<dialog>` element.
  * @see https://w3c.github.io/aria/#dialog
@@ -55,3 +59,54 @@ declare const Drawer: import("svelte").Component<import("../../typedefs").ModalP
      */
     extraContent?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "open">;
+type Props = {
+    /**
+     * - The `class` attribute on the content element.
+     */
+    class?: string | undefined;
+    /**
+     * - Whether to open the drawer.
+     */
+    open?: boolean | undefined;
+    /**
+     * - Title text displayed on the header.
+     */
+    title?: string | undefined;
+    /**
+     * - Position of the drawer.
+     */
+    position?: "top" | "left" | "right" | "bottom" | undefined;
+    /**
+     * - Width or height of the
+     * drawer.
+     */
+    size?: "small" | "medium" | "large" | "x-large" | "full" | undefined;
+    /**
+     * - Whether to show the Close button.
+     */
+    showClose?: false | "inside" | "outside" | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Header slot content.
+     */
+    header?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Header extra slot content.
+     */
+    headerExtra?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Footer slot content.
+     */
+    footer?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Close icon slot content.
+     */
+    closeIcon?: import("svelte").Snippet<[]> | undefined;
+    /**
+     * - Extra content slot content.
+     */
+    extraContent?: import("svelte").Snippet<[]> | undefined;
+};

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

@@ -1,4 +1,8 @@
 export default GridBody;
+type GridBody = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * The interactive version of `<TableBody>`.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
@@ -18,3 +22,17 @@ declare const GridBody: import("svelte").Component<{
      */
     children?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Display label for the row group.
+     */
+    label?: string | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+};

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

@@ -1,4 +1,8 @@
 export default GridCell;
+type GridCell = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * The interactive version of `<TableCell>`.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
@@ -14,3 +18,13 @@ declare const GridCell: import("svelte").Component<{
      */
     children?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+};

package/package/components/grid/grid-col-header.svelte.d.ts

@@ -1,4 +1,8 @@
 export default GridColHeader;
+type GridColHeader = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * The interactive version of `<TableColHeader>`.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
@@ -14,3 +18,13 @@ declare const GridColHeader: import("svelte").Component<{
      */
     children?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+};

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

@@ -1,4 +1,8 @@
 export default GridFoot;
+type GridFoot = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * The interactive version of `<TableFoot>`.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot
@@ -14,3 +18,13 @@ declare const GridFoot: import("svelte").Component<{
      */
     children?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+};

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

@@ -1,4 +1,8 @@
 export default GridHead;
+type GridHead = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * The interactive version of `<TableThead>`.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
@@ -14,3 +18,13 @@ declare const GridHead: import("svelte").Component<{
      */
     children?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+};

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

@@ -1,4 +1,8 @@
 export default GridRowHeader;
+type GridRowHeader = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
 /**
  * The interactive version of `<TableRowHeader>`.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
@@ -14,3 +18,13 @@ declare const GridRowHeader: import("svelte").Component<{
      */
     children?: import("svelte").Snippet<[]> | undefined;
 } & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * - The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * - Primary slot content.
+     */
+    children?: import("svelte").Snippet<[]> | undefined;
+};