@sveltia/ui 0.4.0 → 0.5.0

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

@@ -69,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%;
@@ -98,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%;
@@ -117,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));
@@ -143,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.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.4.0",
+  "version": "0.5.0",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -23,39 +23,44 @@
     "test:unit": "vitest"
   },
   "dependencies": {
-    "svelte": "^4.0.0"
+    "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.5",
-    "@sveltejs/package": "^2.1.0",
+    "@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.1",
+    "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.4",
-    "svelte-i18n": "^3.6.0",
-    "svelte-migrate": "^1.2.4",
+    "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"
       ],