@sveltia/ui 0.3.2 → 0.5.0

package/package/components/text-field/search-bar.svelte.d.ts

@@ -7,11 +7,11 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search
  * @see https://w3c.github.io/aria/#search
  */
-export default class SearchBar extends SvelteComponentTyped<{
+export default class SearchBar extends SvelteComponent<{
     [x: string]: any;
+    class?: string;
     focus?: () => void;
     value?: string;
-    class?: string;
 }, {
     input: Event;
     keydown: KeyboardEvent;
@@ -32,13 +32,13 @@ export default class SearchBar extends SvelteComponentTyped<{
 export type SearchBarProps = typeof __propDef.props;
 export type SearchBarEvents = typeof __propDef.events;
 export type SearchBarSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        class?: string;
         focus?: () => void;
         value?: string;
-        class?: string;
     };
     events: {
         input: Event;

package/package/components/text-field/text-area.svelte.d.ts

@@ -6,11 +6,11 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
  * @see https://w3c.github.io/aria/#textbox
  */
-export default class TextArea extends SvelteComponentTyped<{
+export default class TextArea extends SvelteComponent<{
     [x: string]: any;
+    class?: string;
     name?: string;
     value?: string;
-    class?: string;
     element?: HTMLTextAreaElement;
     autoResize?: boolean;
 }, {
@@ -39,13 +39,13 @@ export default class TextArea extends SvelteComponentTyped<{
 export type TextAreaProps = typeof __propDef.props;
 export type TextAreaEvents = typeof __propDef.events;
 export type TextAreaSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        class?: string;
         name?: string;
         value?: string | null;
-        class?: string;
         element?: HTMLTextAreaElement | null;
         autoResize?: boolean;
     };

package/package/components/text-field/text-input.svelte.d.ts

@@ -6,12 +6,12 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text
  * @see https://w3c.github.io/aria/#textbox
  */
-export default class TextInput extends SvelteComponentTyped<{
+export default class TextInput extends SvelteComponent<{
     [x: string]: any;
-    disabled?: boolean;
+    class?: string;
     name?: string;
+    disabled?: boolean;
     value?: string | number;
-    class?: string;
     element?: HTMLInputElement;
     role?: "textbox" | "searchbox" | "combobox" | "spinbutton";
     readOnly?: boolean;
@@ -49,14 +49,14 @@ export default class TextInput extends SvelteComponentTyped<{
 export type TextInputProps = typeof __propDef.props;
 export type TextInputEvents = typeof __propDef.events;
 export type TextInputSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        disabled?: boolean;
+        class?: string;
         name?: string;
+        disabled?: boolean;
         value?: (string | number | undefined);
-        class?: string;
         element?: HTMLInputElement | null;
         role?: ('textbox' | 'searchbox' | 'combobox' | 'spinbutton');
         readOnly?: boolean;

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

@@ -6,7 +6,7 @@
  * @see https://w3c.github.io/aria/#toolbar
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/
  */
-export default class Toolbar extends SvelteComponentTyped<{
+export default class Toolbar extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     orientation?: "vertical" | "horizontal";
@@ -19,7 +19,7 @@ export default class Toolbar extends SvelteComponentTyped<{
 export type ToolbarProps = typeof __propDef.props;
 export type ToolbarEvents = typeof __propDef.events;
 export type ToolbarSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

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

@@ -33,6 +33,8 @@
 
 <div
   class="sui app-shell"
+  role="none"
+  {...$$restProps}
   on:dragover|preventDefault
   on:drop|preventDefault
   on:contextmenu={(event) => {
@@ -67,10 +69,10 @@
   --primary-accent-color-lighter: hsl(var(--base-hue) 80% 40%);
   --primary-accent-color-darker: hsl(var(--base-hue) 80% 50%);
   --primary-accent-color-foreground: hsl(var(--base-hue) 10% 100%);
-  --danger-color-hue: 0;
+  --error-color-hue: 0;
   --warning-color-hue: 40;
+  --info-color-hue: 210;
   --success-color-hue: 100;
-  --info-color-hue: 220;
   --alert-foreground-color-saturation: 88%;
   --alert-foreground-color-lightness: 28%;
   --alert-background-color-saturation: 68%;
@@ -96,10 +98,10 @@
   --primary-accent-color-lighter: hsl(var(--base-hue) 100% 55%);
   --primary-accent-color-darker: hsl(var(--base-hue) 100% 35%);
   --primary-accent-color-foreground: hsl(var(--base-hue) 10% 100%);
-  --danger-color-hue: 0;
+  --error-color-hue: 0;
   --warning-color-hue: 40;
+  --info-color-hue: 210;
   --success-color-hue: 100;
-  --info-color-hue: 220;
   --alert-foreground-color-saturation: 48%;
   --alert-foreground-color-lightness: 68%;
   --alert-background-color-saturation: 88%;
@@ -115,22 +117,22 @@
   --secondary-foreground-color: hsl(var(--foreground-color-3-hsl));
   --tertiary-foreground-color: hsl(var(--foreground-color-3-hsl));
   --disabled-foreground-color: hsl(var(--foreground-color-4-hsl));
-  --danger-foreground-color: hsl(
-    var(--danger-color-hue) var(--alert-foreground-color-saturation)
+  --error-foreground-color: hsl(
+    var(--error-color-hue) var(--alert-foreground-color-saturation)
       var(--alert-foreground-color-lightness)
   );
   --warning-foreground-color: hsl(
     var(--warning-color-hue) var(--alert-foreground-color-saturation)
       var(--alert-foreground-color-lightness)
   );
-  --success-foreground-color: hsl(
-    var(--success-color-hue) var(--alert-foreground-color-saturation)
-      var(--alert-foreground-color-lightness)
-  );
   --info-foreground-color: hsl(
     var(--info-color-hue) var(--alert-foreground-color-saturation)
       var(--alert-foreground-color-lightness)
   );
+  --success-foreground-color: hsl(
+    var(--success-color-hue) var(--alert-foreground-color-saturation)
+      var(--alert-foreground-color-lightness)
+  );
   --highlight-background-color: hsl(var(--background-color-5-hsl));
   --content-background-color: hsl(var(--background-color-1-hsl));
   --primary-background-color: hsl(var(--background-color-2-hsl));
@@ -141,40 +143,40 @@
   --tertiary-background-color-translucent: hsl(var(--background-color-4-hsl) / 80%);
   --control-background-color: hsl(var(--background-color-1-hsl));
   --disabled-background-color: hsl(var(--background-color-4-hsl));
-  --danger-background-color: hsl(
-    var(--danger-color-hue) var(--alert-background-color-saturation)
+  --error-background-color: hsl(
+    var(--error-color-hue) var(--alert-background-color-saturation)
       var(--alert-background-color-lightness)
   );
   --warning-background-color: hsl(
     var(--warning-color-hue) var(--alert-background-color-saturation)
       var(--alert-background-color-lightness)
   );
-  --success-background-color: hsl(
-    var(--success-color-hue) var(--alert-background-color-saturation)
-      var(--alert-background-color-lightness)
-  );
   --info-background-color: hsl(
     var(--info-color-hue) var(--alert-background-color-saturation)
       var(--alert-background-color-lightness)
   );
+  --success-background-color: hsl(
+    var(--success-color-hue) var(--alert-background-color-saturation)
+      var(--alert-background-color-lightness)
+  );
   --primary-border-color: hsl(var(--border-color-1-hsl));
   --secondary-border-color: hsl(var(--border-color-2-hsl));
   --control-border-color: hsl(var(--border-color-2-hsl));
   --checkbox-border-color: hsl(var(--foreground-color-3-hsl));
-  --danger-border-color: hsl(
-    var(--danger-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
+  --error-border-color: hsl(
+    var(--error-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
   );
   --warning-border-color: hsl(
     var(--warning-color-hue) var(--alert-border-color-saturation)
       var(--alert-border-color-lightness)
   );
+  --info-border-color: hsl(
+    var(--info-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
+  );
   --success-border-color: hsl(
     var(--success-color-hue) var(--alert-border-color-saturation)
       var(--alert-border-color-lightness)
   );
-  --info-border-color: hsl(
-    var(--info-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
-  );
   --popup-shadow-color: hsl(var(--shadow-color) / 40%);
   --popup-backdrop-color: hsl(var(--shadow-color) / 40%);
   --font-family--default: "Merriweather Sans", sans-serif;

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

@@ -6,8 +6,8 @@
  * dark/light mode switching. This component has to be placed directly under `<body>` (or
  * `<div style="display:contents">` in a SvelteKit app).
  */
-export default class AppShell extends SvelteComponentTyped<{
-    [x: string]: never;
+export default class AppShell extends SvelteComponent<{
+    [x: string]: any;
 }, {
     dragover: DragEvent;
     drop: DragEvent;
@@ -20,10 +20,10 @@ export default class AppShell extends SvelteComponentTyped<{
 export type AppShellProps = typeof __propDef.props;
 export type AppShellEvents = typeof __propDef.events;
 export type AppShellSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        [x: string]: any;
     };
     events: {
         dragover: DragEvent;

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

@@ -5,7 +5,7 @@
  * A generic group layout.
  * @see https://w3c.github.io/aria/#group
  */
-export default class Group extends SvelteComponentTyped<{
+export default class Group extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     ariaLabel?: string;
@@ -18,7 +18,7 @@ export default class Group extends SvelteComponentTyped<{
 export type GroupProps = typeof __propDef.props;
 export type GroupEvents = typeof __propDef.events;
 export type GroupSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

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/components/util/popup.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  PopupEvents */
 /** @typedef {typeof __propDef.slots}  PopupSlots */
 /** Generic popup helper. */
-export default class Popup extends SvelteComponentTyped<{
+export default class Popup extends SvelteComponent<{
     [x: string]: any;
     dialog?: HTMLDialogElement;
     position?: PopupPosition;
@@ -33,7 +33,7 @@ export default class Popup extends SvelteComponentTyped<{
 export type PopupProps = typeof __propDef.props;
 export type PopupEvents = typeof __propDef.events;
 export type PopupSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

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

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

package/package/index.d.ts

@@ -2,6 +2,7 @@ export function initLocales({ fallbackLocale, initialLocale }?: {
     fallbackLocale?: string;
     initialLocale?: string;
 }): void;
+export { default as Alert } from "./components/alert/alert.svelte";
 export { default as Button } from "./components/button/button.svelte";
 export { default as SelectButtonGroup } from "./components/button/select-button-group.svelte";
 export { default as SelectButton } from "./components/button/select-button.svelte";

package/package/index.js

@@ -29,6 +29,7 @@ export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}
 
 initLocales();
 
+export { default as Alert } from './components/alert/alert.svelte';
 export { default as Button } from './components/button/button.svelte';
 export { default as SelectButtonGroup } from './components/button/select-button-group.svelte';
 export { default as SelectButton } from './components/button/select-button.svelte';

package/package/styles/variables.scss

@@ -17,10 +17,10 @@
   --primary-accent-color-darker: hsl(var(--base-hue) 80% 50%);
   --primary-accent-color-foreground: hsl(var(--base-hue) 10% 100%); // white/inverted
   // Alerts
-  --danger-color-hue: 0;
+  --error-color-hue: 0;
   --warning-color-hue: 40;
+  --info-color-hue: 210;
   --success-color-hue: 100;
-  --info-color-hue: 220;
   --alert-foreground-color-saturation: 88%;
   --alert-foreground-color-lightness: 28%;
   --alert-background-color-saturation: 68%;
@@ -48,10 +48,10 @@
   --primary-accent-color-darker: hsl(var(--base-hue) 100% 35%);
   --primary-accent-color-foreground: hsl(var(--base-hue) 10% 100%); // white
   // Alerts
-  --danger-color-hue: 0;
+  --error-color-hue: 0;
   --warning-color-hue: 40;
+  --info-color-hue: 210;
   --success-color-hue: 100;
-  --info-color-hue: 220;
   --alert-foreground-color-saturation: 48%;
   --alert-foreground-color-lightness: 68%;
   --alert-background-color-saturation: 88%;
@@ -69,22 +69,22 @@
   --secondary-foreground-color: hsl(var(--foreground-color-3-hsl));
   --tertiary-foreground-color: hsl(var(--foreground-color-3-hsl));
   --disabled-foreground-color: hsl(var(--foreground-color-4-hsl));
-  --danger-foreground-color: hsl(
-    var(--danger-color-hue) var(--alert-foreground-color-saturation)
+  --error-foreground-color: hsl(
+    var(--error-color-hue) var(--alert-foreground-color-saturation)
       var(--alert-foreground-color-lightness)
   );
   --warning-foreground-color: hsl(
     var(--warning-color-hue) var(--alert-foreground-color-saturation)
       var(--alert-foreground-color-lightness)
   );
-  --success-foreground-color: hsl(
-    var(--success-color-hue) var(--alert-foreground-color-saturation)
-      var(--alert-foreground-color-lightness)
-  );
   --info-foreground-color: hsl(
     var(--info-color-hue) var(--alert-foreground-color-saturation)
       var(--alert-foreground-color-lightness)
   );
+  --success-foreground-color: hsl(
+    var(--success-color-hue) var(--alert-foreground-color-saturation)
+      var(--alert-foreground-color-lightness)
+  );
   // Background
   --highlight-background-color: hsl(var(--background-color-5-hsl));
   --content-background-color: hsl(var(--background-color-1-hsl));
@@ -96,41 +96,41 @@
   --tertiary-background-color-translucent: hsl(var(--background-color-4-hsl) / 80%);
   --control-background-color: hsl(var(--background-color-1-hsl));
   --disabled-background-color: hsl(var(--background-color-4-hsl));
-  --danger-background-color: hsl(
-    var(--danger-color-hue) var(--alert-background-color-saturation)
+  --error-background-color: hsl(
+    var(--error-color-hue) var(--alert-background-color-saturation)
       var(--alert-background-color-lightness)
   );
   --warning-background-color: hsl(
     var(--warning-color-hue) var(--alert-background-color-saturation)
       var(--alert-background-color-lightness)
   );
-  --success-background-color: hsl(
-    var(--success-color-hue) var(--alert-background-color-saturation)
-      var(--alert-background-color-lightness)
-  );
   --info-background-color: hsl(
     var(--info-color-hue) var(--alert-background-color-saturation)
       var(--alert-background-color-lightness)
   );
+  --success-background-color: hsl(
+    var(--success-color-hue) var(--alert-background-color-saturation)
+      var(--alert-background-color-lightness)
+  );
   // Borders
   --primary-border-color: hsl(var(--border-color-1-hsl));
   --secondary-border-color: hsl(var(--border-color-2-hsl));
   --control-border-color: hsl(var(--border-color-2-hsl));
   --checkbox-border-color: hsl(var(--foreground-color-3-hsl));
-  --danger-border-color: hsl(
-    var(--danger-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
+  --error-border-color: hsl(
+    var(--error-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
   );
   --warning-border-color: hsl(
     var(--warning-color-hue) var(--alert-border-color-saturation)
       var(--alert-border-color-lightness)
   );
+  --info-border-color: hsl(
+    var(--info-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
+  );
   --success-border-color: hsl(
     var(--success-color-hue) var(--alert-border-color-saturation)
       var(--alert-border-color-lightness)
   );
-  --info-border-color: hsl(
-    var(--info-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
-  );
   // Shadows
   --popup-shadow-color: hsl(var(--shadow-color) / 40%);
   --popup-backdrop-color: hsl(var(--shadow-color) / 40%);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.3.2",
+  "version": "0.5.0",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -22,40 +22,45 @@
     "test": "playwright test",
     "test:unit": "vitest"
   },
-  "peerDependencies": {
-    "svelte": "^3.55.1"
+  "dependencies": {
+    "svelte": "^4.0.5"
   },
   "devDependencies": {
-    "@playwright/test": "^1.35.1",
+    "@playwright/test": "^1.36.0",
     "@sveltejs/adapter-auto": "2.1.0",
-    "@sveltejs/kit": "1.20.4",
-    "@sveltejs/package": "^2.0.2",
+    "@sveltejs/kit": "^1.22.3",
+    "@sveltejs/package": "^2.2.0",
     "cspell": "^6.31.1",
-    "eslint": "^8.43.0",
+    "eslint": "^8.44.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.31.0",
+    "eslint-plugin-jsdoc": "^46.4.3",
+    "eslint-plugin-svelte": "^2.32.2",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.26",
     "postcss-html": "^1.5.0",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.1",
-    "sass": "^1.63.4",
-    "stylelint": "^15.8.0",
+    "sass": "^1.63.6",
+    "stylelint": "^15.10.1",
     "stylelint-config-recommended-scss": "^12.0.0",
     "stylelint-scss": "^5.0.1",
-    "svelte-check": "^3.4.3",
-    "svelte-i18n": "^3.6.0",
-    "svelte-migrate": "^1.2.1",
+    "svelte-check": "^3.4.6",
+    "svelte-i18n": "^3.7.0",
+    "svelte-migrate": "^1.2.6",
     "svelte-preprocess": "^5.0.4",
-    "tslib": "^2.5.3",
-    "vite": "^4.3.9",
-    "vitest": "^0.32.2"
+    "tslib": "^2.6.0",
+    "vite": "^4.4.3",
+    "vitest": "^0.33.0"
   },
   "exports": {
     "./package.json": "./package.json",
+    "./components/alert/alert.svelte": {
+      "types": "./package/components/alert/alert.svelte.d.ts",
+      "svelte": "./package/components/alert/alert.svelte",
+      "default": "./package/components/alert/alert.svelte"
+    },
     "./components/button/button.svelte": {
       "types": "./package/components/button/button.svelte.d.ts",
       "svelte": "./package/components/button/button.svelte",
@@ -339,6 +344,9 @@
   "svelte": "./package/index.js",
   "typesVersions": {
     ">4.0": {
+      "components/alert/alert.svelte": [
+        "./package/components/alert/alert.svelte.d.ts"
+      ],
       "components/button/button.svelte": [
         "./package/components/button/button.svelte.d.ts"
       ],