@sveltia/ui 0.3.1 → 0.4.0

package/package/components/calendar/calendar.svelte

@@ -55,8 +55,7 @@
       aria-haspopup="dialog"
     >
       <Icon slot="end-icon" name="arrow_drop_down" />
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <div slot="popup" class="popup-inner" on:click|stopPropagation>
+      <div slot="popup" class="popup-inner" role="none" on:click|stopPropagation>
         <div role="group" aria-label={$_('_sui.calendar.year')}>
           <div class="header">
             <Button

package/package/components/checkbox/checkbox.svelte

@@ -47,12 +47,13 @@
   <input type="hidden" {name} {value} />
 {/if}
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <span
   class="sui checkbox {className}"
   class:checked
   class:indeterminate
   class:disabled
+  role="none"
+  {...$$restProps}
   on:click|preventDefault|stopPropagation={(event) => {
     if (!(/** @type {HTMLElement} */ (event.target).matches('button'))) {
       buttonComponent.element.click();

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

@@ -8,6 +8,7 @@
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
  */
 export default class Checkbox extends SvelteComponentTyped<{
+    [x: string]: any;
     label?: string;
     disabled?: boolean;
     name?: string;
@@ -29,6 +30,7 @@ export type CheckboxSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         label?: string | null;
         disabled?: boolean;
         name?: string;

package/package/components/dialog/dialog.svelte

@@ -126,11 +126,12 @@
   });
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <dialog
   bind:this={dialog}
   class="sui dialog {className} {size}"
   class:open={showDialog}
+  {...$$restProps}
   on:click={({ target }) => {
     if (closeOnBackdropClick && /** @type {HTMLElement?} */ (target)?.matches('dialog')) {
       dialog.returnValue = 'cancel';

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

@@ -7,6 +7,7 @@
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
  */
 export default class Dialog extends SvelteComponentTyped<{
+    [x: string]: any;
     title?: string;
     open?: boolean;
     class?: string;
@@ -41,6 +42,7 @@ export type DialogSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         title?: string;
         open?: boolean;
         class?: string;

package/package/components/disclosure/disclosure.svelte

@@ -24,7 +24,13 @@
   const id = getRandomId('disclosure');
 </script>
 
-<div class="sui disclosure {className}" {id} role="group" aria-labelledby="{id}-header">
+<div
+  class="sui disclosure {className}"
+  {id}
+  role="group"
+  aria-labelledby="{id}-header"
+  {...$$restProps}
+>
   <Button
     class="header"
     id="{id}-header"

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

@@ -7,6 +7,7 @@
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
  */
 export default class Disclosure extends SvelteComponentTyped<{
+    [x: string]: any;
     label?: string;
     class?: string;
     expanded?: boolean;
@@ -22,6 +23,7 @@ export type DisclosureSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         label?: string;
         class?: string;
         expanded?: boolean;

package/package/components/divider/divider.svelte

@@ -16,7 +16,12 @@
   export { className as class };
 </script>
 
-<div role="separator" class="sui divider {className}" aria-orientation={orientation} />
+<div
+  role="separator"
+  class="sui divider {className}"
+  aria-orientation={orientation}
+  {...$$restProps}
+/>
 
 <style>.divider {
   flex: none;

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

@@ -6,6 +6,7 @@
  * @see https://w3c.github.io/aria/#separator
  */
 export default class Divider extends SvelteComponentTyped<{
+    [x: string]: any;
     class?: string;
     orientation?: "vertical" | "horizontal";
 }, {
@@ -18,6 +19,7 @@ export type DividerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         class?: string;
         orientation?: ('horizontal' | 'vertical');
     };

package/package/components/divider/spacer.svelte

@@ -15,7 +15,7 @@
   export let flex = false;
 </script>
 
-<div class="sui spacer {className}" class:flex />
+<div class="sui spacer {className}" class:flex {...$$restProps} />
 
 <style>.spacer.flex {
   flex: auto;

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

@@ -3,6 +3,7 @@
 /** @typedef {typeof __propDef.slots}  SpacerSlots */
 /** A content divider with no line. It can be flexible. */
 export default class Spacer extends SvelteComponentTyped<{
+    [x: string]: any;
     class?: string;
     flex?: boolean;
 }, {
@@ -15,6 +16,7 @@ export type SpacerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         class?: string;
         flex?: boolean;
     };

package/package/components/drawer/drawer.svelte

@@ -128,11 +128,12 @@
   });
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <dialog
   bind:this={dialog}
   class="sui dialog {className} {size} {position} {orientation}"
   class:open={showDialog}
+  {...$$restProps}
   on:click={({ target }) => {
     if (closeOnBackdropClick && /** @type {HTMLElement?} */ (target)?.matches('dialog')) {
       dialog.returnValue = 'cancel';

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

@@ -7,6 +7,7 @@
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
  */
 export default class Drawer extends SvelteComponentTyped<{
+    [x: string]: any;
     title?: string;
     position?: "top" | "right" | "bottom" | "left";
     open?: boolean;
@@ -34,6 +35,7 @@ export type DrawerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         title?: string;
         position?: ('top' | 'right' | 'bottom' | 'left');
         open?: boolean;

package/package/components/icon/icon.svelte

@@ -21,6 +21,7 @@
   class="sui icon material-symbols-outlined {className}"
   aria-label={label || undefined}
   aria-hidden={label ? undefined : true}
+  {...$$restProps}
 >
   {name}
 </span>

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

@@ -6,6 +6,7 @@
  * @see https://developers.google.com/fonts/docs/material_symbols
  */
 export default class Icon extends SvelteComponentTyped<{
+    [x: string]: any;
     label?: string;
     name?: string;
     class?: string;
@@ -19,6 +20,7 @@ export type IconSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         label?: string;
         name?: string;
         class?: string;

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

@@ -27,6 +27,7 @@
   tabindex="-1"
   role="radiogroup"
   aria-orientation={orientation}
+  {...$$restProps}
   bind:this={element}
   on:select
   use:activateGroup

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

@@ -7,6 +7,7 @@
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
  */
 export default class RadioGroup extends SvelteComponentTyped<{
+    [x: string]: any;
     class?: string;
     element?: HTMLElement;
     orientation?: "vertical" | "horizontal";
@@ -24,6 +25,7 @@ export type RadioGroupSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         class?: string;
         element?: HTMLElement | null;
         orientation?: ('horizontal' | 'vertical');

package/package/components/radio/radio.svelte

@@ -42,9 +42,10 @@
   <input type="hidden" {name} {value} />
 {/if}
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <span
   class="sui radio {className}"
+  role="none"
+  {...$$restProps}
   on:click={(event) => {
     if (!(/** @type {HTMLElement} */ (event.target).matches('button'))) {
       buttonComponent.element.click();

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

@@ -8,6 +8,7 @@
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
  */
 export default class Radio extends SvelteComponentTyped<{
+    [x: string]: any;
     label?: string;
     disabled?: boolean;
     name?: string;
@@ -26,6 +27,7 @@ export type RadioSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         label?: string | null;
         disabled?: boolean;
         name?: string;

package/package/components/select/combobox.svelte

@@ -54,7 +54,7 @@
   let isPopupOpen = writable(false);
 </script>
 
-<div class="sui combobox {className}">
+<div class="sui combobox {className}" {...$$restProps}>
   {#if readOnly}
     <div
       class:selected={value !== undefined}

package/package/components/slider/slider.svelte

@@ -215,11 +215,15 @@
   }}
 />
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="sui slider {className}" on:click|preventDefault|stopPropagation>
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  class="sui slider {className}"
+  role="none"
+  {...$$restProps}
+  on:click|preventDefault|stopPropagation
+>
   <div
     class="base"
+    role="none"
     bind:this={base}
     on:click|preventDefault|stopPropagation={(event) => {
       onClick(event);

package/package/components/slider/slider.svelte.d.ts

@@ -10,6 +10,7 @@
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/
  */
 export default class Slider extends SvelteComponentTyped<{
+    [x: string]: any;
     value?: number;
     class?: string;
     sliderLabel?: string;
@@ -32,6 +33,7 @@ export type SliderSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         value?: number;
         class?: string;
         sliderLabel?: string;

package/package/components/switch/switch.svelte

@@ -26,6 +26,7 @@
   role="switch"
   aria-disabled={disabled}
   aria-checked={checked}
+  {...$$restProps}
   on:click={() => {
     checked = !checked;
   }}

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

@@ -7,6 +7,7 @@
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/switch/
  */
 export default class Switch extends SvelteComponentTyped<{
+    [x: string]: any;
     label?: string;
     disabled?: boolean;
     class?: string;
@@ -23,6 +24,7 @@ export type SwitchSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         label?: string;
         disabled?: boolean;
         class?: string;

package/package/components/util/app-shell.svelte

@@ -33,11 +33,16 @@
 
 <div
   class="sui app-shell"
+  role="none"
+  {...$$restProps}
   on:dragover|preventDefault
   on:drop|preventDefault
   on:contextmenu={(event) => {
-    // Disable the native context menu
-    if (!(/** @type {HTMLElement} */ (event.target)?.matches('input[type="text"], textarea'))) {
+    // Enable the native context menu only in the developer mode or on text fields
+    if (
+      !document.documentElement.matches('[data-env="dev"]') &&
+      !(/** @type {HTMLElement} */ (event.target)?.matches('input[type="text"], textarea'))
+    ) {
       event.preventDefault();
     }
   }}

package/package/components/util/popup.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="svelte" />
 export function activatePopup(...args: any[]): Popup;
 /**
  * Implement the popup handler.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -22,37 +22,37 @@
     "test": "playwright test",
     "test:unit": "vitest"
   },
-  "peerDependencies": {
-    "svelte": "^3.55.1"
+  "dependencies": {
+    "svelte": "^4.0.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.35.0",
+    "@playwright/test": "^1.35.1",
     "@sveltejs/adapter-auto": "2.1.0",
-    "@sveltejs/kit": "1.20.2",
-    "@sveltejs/package": "^2.0.2",
+    "@sveltejs/kit": "^1.20.5",
+    "@sveltejs/package": "^2.1.0",
     "cspell": "^6.31.1",
-    "eslint": "^8.42.0",
+    "eslint": "^8.43.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsdoc": "^46.2.6",
-    "eslint-plugin-svelte": "^2.30.0",
+    "eslint-plugin-svelte": "^2.31.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.24",
     "postcss-html": "^1.5.0",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.1",
-    "sass": "^1.63.3",
-    "stylelint": "^15.7.0",
+    "sass": "^1.63.4",
+    "stylelint": "^15.8.0",
     "stylelint-config-recommended-scss": "^12.0.0",
     "stylelint-scss": "^5.0.1",
-    "svelte-check": "^3.4.3",
+    "svelte-check": "^3.4.4",
     "svelte-i18n": "^3.6.0",
-    "svelte-migrate": "^1.2.1",
+    "svelte-migrate": "^1.2.4",
     "svelte-preprocess": "^5.0.4",
     "tslib": "^2.5.3",
     "vite": "^4.3.9",
-    "vitest": "^0.32.0"
+    "vitest": "^0.32.2"
   },
   "exports": {
     "./package.json": "./package.json",