@sveltia/ui 0.15.16 → 0.17.0

package/package/typedefs.js

@@ -1,3 +1,205 @@
+/**
+ * @typedef {object} ButtonProps
+ * @property {HTMLButtonElement | undefined} [element] - Reference to the `<button>` element.
+ * @property {string} [class] - The `class` attribute on the `<button>` element.
+ * @property {'button' | 'submit' | 'reset'} [type] - The `type` attribute on the `<button>`
+ * element.
+ * @property {string} [role] - The `role` attribute on the `<button>` element.
+ * @property {string | undefined} [name] - The `name` attribute on the `<button>` element.
+ * @property {string | undefined} [value] - The `value` attribute on the `<button>` element.
+ * @property {boolean} [hidden] - Whether to hide the widget. An alias of the `aria-hidden`
+ * attribute.
+ * @property {boolean} [disabled] - Whether to disable the widget. An alias of the `aria-disabled`
+ * attribute.
+ * @property {boolean} [readonly] - Whether to make the widget read-only. An alias of the
+ * `aria-readonly` attribute used in certain roles, including `checkbox`, `listbox`, `slider` and
+ * `textbox`.
+ * @property {boolean | 'mixed' | undefined} [pressed] - Whether to mark the widget pressed. An
+ * alias of the `aria-pressed` attribute.
+ * @property {string | undefined} [keyShortcuts] - Keyboard shortcuts. An alias of the
+ * `aria-keyshortcuts` attribute. Accepts the special `Accel` key, which will be replaced with
+ * `Control` or `Meta` depending on the user’s operating system.
+ * @property {string} [label] - Text label displayed on the button.
+ * @property {'primary' | 'secondary' | 'tertiary' | 'ghost' | 'link' | undefined} [variant] - The
+ * style variant of the button.
+ * @property {'small' | 'medium' | 'large' | undefined} [size] - The size of the button.
+ * @property {boolean} [iconic] - Whether to only show an icon on the button and trim the padding.
+ * @property {boolean} [pill] - Whether to make the button rounded.
+ * @property {boolean} [flex] - Make the button width flexible.
+ * @property {PopupPosition} [popupPosition] - Where to show the dropdown menu.
+ * @property {boolean} [showPopupBackdrop] - Whether to show the backdrop for the popup.
+ * @property {import('svelte').Snippet} [children] - Primary slot content.
+ * @property {import('svelte').Snippet} [startIcon] - Start icon slot content.
+ * @property {import('svelte').Snippet} [endIcon] - End icon slot content.
+ * @property {import('svelte').Snippet} [popup] - Popup slot content.
+ * @property {(event: CustomEvent) => void} [onChange] - Custom `Change` event handler.
+ * @property {(event: CustomEvent) => void} [onSelect] - Custom `Select` event handler.
+ * @property {(event: CustomEvent) => void} [onToggle] - Custom `Toggle` event handler.
+ */
+
+/**
+ * @typedef {object} ModalProps
+ * @property {string} [class] - The `class` attribute on the content element.
+ * @property {'dialog' | 'alertdialog' | 'none'} [role] - The `role` attribute on the `<dialog>`
+ * element.
+ * @property {boolean} [open] - Whether to show the modal.
+ * @property {boolean} [showBackdrop] - Whether to show the backdrop.
+ * @property {boolean} [lightDismiss] - Whether to close the modal when the backdrop (outside of
+ * the modal) is clicked.
+ * @property {boolean} [escapeDismiss] - Whether to close the modal when the Escape key is pressed.
+ * @property {boolean} [keepContent] - Whether to keep the content in the DOM tree when the modal is
+ * not displayed.
+ * @property {HTMLDialogElement | undefined} [dialog] - A reference to the `<dialog>` element.
+ * @property {import('svelte').Snippet} [children] - Primary slot content.
+ * @property {import('svelte').Snippet} [extraContent] - Extra slot content.
+ * @property {(event: CustomEvent) => void} [onOpening] - Custom `Opening` event handler.
+ * @property {(event: CustomEvent) => void} [onOpen] - Custom `Open` event handler.
+ * @property {(event: CustomEvent) => void} [onOk] - Custom `Ok` event handler.
+ * @property {(event: CustomEvent) => void} [onCancel] - Custom `Cancel` event handler.
+ * @property {(event: CustomEvent) => void} [onClosing] - Custom `Closing` event handler.
+ * @property {(event: CustomEvent) => void} [onClose] - Custom `Close` event handler.
+ */
+
+/**
+ * @typedef {object} DialogProps
+ * @property {string} [title] - Text label displayed on the header. Required.
+ * @property {'dialog' | 'alertdialog'} [role] - The `role` attribute on the `<dialog>` element.
+ * @property {'small' | 'medium' | 'large' | 'x-large'} [size] - Width of the dialog.
+ * @property {string} [class] - The `class` attribute on the `<dialog>` element.
+ * @property {boolean} [open] - Whether to open the dialog.
+ * @property {boolean} [showClose] - Whether to show the Close button on the header.
+ * @property {boolean} [showOk] - Whether to show the OK button on the footer.
+ * @property {boolean} [showCancel] - Whether to show the Cancel button on the footer.
+ * @property {string} [okLabel] - Text label displayed on the OK button.
+ * @property {boolean} [okDisabled] - Whether to disable the OK button.
+ * @property {string} [cancelLabel] - Text label displayed on the Cancel button.
+ * @property {boolean} [cancelDisabled] - Whether to disable the Cancel button.
+ * @property {boolean} [lightDismiss] - Whether to close the modal when the backdrop (outside of the
+ * modal) is clicked.
+ * @property {string} [value] - Value entered on the textbox.
+ * @property {import('svelte').Snippet} [children] - Primary slot content.
+ * @property {import('svelte').Snippet} [header] - Header slot content.
+ * @property {import('svelte').Snippet} [headerExtra] - Header extra slot content.
+ * @property {import('svelte').Snippet} [footer] - Footer slot content.
+ * @property {import('svelte').Snippet} [footerExtra] - Footer extra slot content.
+ * @property {import('svelte').Snippet} [closeIcon] - Close icon slot content.
+ * @property {import('svelte').Snippet} [extraContent] - Extra content slot content.
+ */
+
+/**
+ * @typedef {object} MenuItemProps
+ * @property {string} [class] - The `class` attribute on the wrapper element.
+ * @property {'menuitem' | 'menuitemcheckbox' | 'menuitemradio'} [role] - The `role` attribute on
+ * the `<button>` element.
+ * @property {boolean} [hidden] - Whether to hide the widget. An alias of the `aria-hidden`
+ * attribute.
+ * @property {boolean} [disabled] - Whether to disable the widget. An alias of the `aria-disabled`
+ * attribute.
+ * @property {boolean} [checked] - Whether to check the widget. An alias of the `aria-checked`
+ * attribute.
+ * @property {string} [label] - Text label displayed on the item.
+ * @property {import('svelte').Snippet} [children] - Primary slot content.
+ * @property {import('svelte').Snippet} [startIcon] - Start icon slot content.
+ * @property {import('svelte').Snippet} [endIcon] - End icon slot content.
+ * @property {import('svelte').Snippet} [chevronIcon] - Chevron icon slot content.
+ * @property {import('svelte').Snippet} [items] - Items slot content.
+ * @property {(event: CustomEvent) => void} [onChange] - Custom `Change` event handler.
+ * @property {(event: CustomEvent) => void} [onSelect] - Custom `Select` event handler.
+ */
+
+/**
+ * @typedef {object} ComboboxProps
+ * @property {string} [class] - The `class` attribute on the wrapper element.
+ * @property {boolean} [hidden] - Whether to hide the widget.
+ * @property {boolean} [disabled] - Whether to disable the widget. An alias of the `aria-disabled`
+ * attribute.
+ * @property {boolean} [readonly] - Whether to make the widget read-only. An alias of the
+ * `aria-readonly` attribute.
+ * @property {boolean} [required] - Whether to mark the widget required. An alias of the
+ * `aria-required` attribute.
+ * @property {boolean} [invalid] - Whether to mark the widget invalid. An alias of the
+ * `aria-invalid` attribute.
+ * @property {string | undefined} [value] - Selected option’s value.
+ * @property {boolean} [editable] - Whether to make the `combobox` editable.
+ * @property {PopupPosition} [position] - Where to show the dropdown menu.
+ * @property {import('svelte').Snippet} [children] - Primary slot content.
+ * @property {import('svelte').Snippet} [chevronIcon] - Chevron icon slot content.
+ * @property {(event: CustomEvent) => void} [onChange] - Custom `change` event handler.
+ */
+
+/**
+ * @typedef {object} TextInputProps
+ * @property {string | undefined} [value] - Input value.
+ * @property {HTMLInputElement | undefined} [element] - Reference to the `<input>` element.
+ * @property {'textbox' | 'searchbox' | 'combobox' | 'spinbutton'} [role] - The `role` attribute on
+ * the `<input>` element.
+ * @property {string | undefined} [keyShortcuts] - Keyboard shortcuts. An alias of the
+ * `aria-keyshortcuts` attribute. Accepts the special `Accel` key, which will be replaced with
+ * `Control` or `Meta` depending on the user’s operating system.
+ * @property {string | undefined} [name] - The `name` attribute on the `<input>` element.
+ * @property {boolean} [showInlineLabel] - Whether to display `aria-label` over the `<input>`
+ * element if it’s empty, just like how the HTML `placeholder` attribute works.
+ * @property {'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'} [inputmode] - The
+ * `inputmode` attribute on the `<input>`.
+ * @property {boolean} [flex] - Make the text input container flexible.
+ * @property {string} [class] - The `class` attribute on the wrapper element.
+ * @property {boolean} [hidden] - Whether to hide the widget.
+ * @property {boolean} [disabled] - Whether to disable the widget. An alias of the `aria-disabled`
+ * attribute.
+ * @property {boolean} [readonly] - Whether to make the widget read-only. An alias of the
+ * `aria-readonly` attribute.
+ * @property {boolean} [required] - Whether to mark the widget required. An alias of the
+ * `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 {import('svelte').Snippet} [children] - Primary slot content.
+ * @property {(event: CustomEvent) => void} [onChange] - Custom `Change` event handler.
+ */
+
+/**
+ * @typedef {object} KeyboardEventHandlers
+ * @property {(event: KeyboardEvent) => void} [onkeydown] - `keydown` event handler.
+ * @property {(event: KeyboardEvent) => void} [onkeyup] - `keyup` event handler.
+ * @property {(event: KeyboardEvent) => void} [onkeypress] - `keypress` event handler.
+ */
+
+/**
+ * @typedef {object} MouseEventHandlers
+ * @property {(event: MouseEvent) => void} [onmousedown] - `mousedown` event handler.
+ * @property {(event: MouseEvent) => void} [onmouseup] - `mouseup` event handler.
+ * @property {(event: MouseEvent) => void} [onclick] - `click` event handler.
+ * @property {(event: MouseEvent) => void} [ondblclick] - `dblclick` event handler.
+ */
+
+/**
+ * @typedef {object} FocusEventHandlers
+ * @property {(event: FocusEvent) => void} [onfocus] - `focus` event handler.
+ * @property {(event: FocusEvent) => void} [onblur] - `blur` event handler.
+ */
+
+/**
+ * @typedef {object} DragEventHandlers
+ * @property {(event: DragEvent) => void} [ondragstart] - `dragstart` event handler.
+ * @property {(event: DragEvent) => void} [ondrag] - `drag` event handler.
+ * @property {(event: DragEvent) => void} [ondragenter] - `dragenter` event handler.
+ * @property {(event: DragEvent) => void} [ondragleave] - `dragleave` event handler.
+ * @property {(event: DragEvent) => void} [ondragover] - `dragover` event handler.
+ * @property {(event: DragEvent) => void} [ondrop] - `drop` event handler.
+ * @property {(event: DragEvent) => void} [ondragend] - `dragend` event handler.
+ */
+
+/**
+ * @typedef {KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers}
+ * CommonEventHandlers
+ */
+
+/**
+ * @typedef {object} InputEventHandlers
+ * @property {(event: Event) => void} [oninput] - `input` event handler.
+ * @property {(event: Event) => void} [onbeforeinput] - `beforeinput` event handler.
+ */
+
 /**
  * @typedef {('top-left' | 'top-right' | 'right-top' | 'right-bottom' | 'bottom-left' |
  * 'bottom-right'|'left-top'|'left-bottom')} PopupPosition

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.15.16",
+  "version": "0.17.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -42,36 +42,36 @@
     "lexical": "^0.17.1"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0"
+    "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.46.1",
+    "@playwright/test": "^1.47.1",
     "@sveltejs/adapter-auto": "^3.2.4",
-    "@sveltejs/kit": "^2.5.25",
-    "@sveltejs/package": "^2.3.4",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/package": "^2.3.5",
+    "@sveltejs/vite-plugin-svelte": "4.0.0-next.7",
     "cspell": "^8.14.2",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsdoc": "^50.2.2",
-    "eslint-plugin-svelte": "^2.43.0",
-    "postcss": "^8.4.44",
+    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-jsdoc": "^50.2.3",
+    "eslint-plugin-svelte": "^2.44.0",
+    "postcss": "^8.4.47",
     "postcss-html": "^1.7.0",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.6",
-    "sass": "^1.77.8",
+    "sass": "^1.78.0",
     "stylelint": "^16.9.0",
     "stylelint-config-recommended-scss": "^14.1.0",
-    "stylelint-scss": "^6.5.1",
-    "svelte": "^4.2.19",
-    "svelte-check": "^4.0.0",
+    "stylelint-scss": "^6.6.0",
+    "svelte": "5.0.0-next.246",
+    "svelte-check": "^4.0.2",
     "svelte-i18n": "^4.0.0",
     "svelte-preprocess": "^6.0.2",
     "tslib": "^2.7.0",
-    "vite": "^5.4.2",
-    "vitest": "^2.0.5"
+    "vite": "^5.4.5",
+    "vitest": "^2.1.1"
   },
   "exports": {
     ".": {
@@ -90,12 +90,5 @@
         "./package/index.d.ts"
       ]
     }
-  },
-  "pnpm": {
-    "auditConfig": {
-      "ignoreCves": [
-        "CVE-2024-4067"
-      ]
-    }
   }
 }

package/package/components/util/portal.svelte

@@ -1,36 +0,0 @@
-<!--
-  @component
-  @see https://github.com/sveltejs/svelte/issues/3088
--->
-<script>
-  import { onDestroy, onMount } from 'svelte';
-
-  /**
-   * CSS class name on the button.
-   * @type {string}
-   */
-  let className = '';
-
-  export { className as class };
-
-  /** @type {HTMLElement | undefined} */
-  let ref;
-
-  onMount(() => {
-    if (ref) {
-      document.body.appendChild(ref);
-    }
-  });
-
-  onDestroy(() => {
-    ref?.remove();
-  });
-</script>
-
-<div role="none" class="sui portal {className}" {...$$restProps} bind:this={ref}>
-  <slot />
-</div>
-
-<style>.portal {
-  display: contents;
-}</style>

package/package/components/util/portal.svelte.d.ts

@@ -1,32 +0,0 @@
-/** @typedef {typeof __propDef.props}  PortalProps */
-/** @typedef {typeof __propDef.events}  PortalEvents */
-/** @typedef {typeof __propDef.slots}  PortalSlots */
-/** @see https://github.com/sveltejs/svelte/issues/3088 */
-export default class Portal extends SvelteComponent<{
-    [x: string]: any;
-    class?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type PortalProps = typeof __propDef.props;
-export type PortalEvents = typeof __propDef.events;
-export type PortalSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};