@sveltia/ui 0.1.5 → 0.2.1

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

@@ -2,30 +2,46 @@
 /** @typedef {typeof __propDef.events}  PopupEvents */
 /** @typedef {typeof __propDef.slots}  PopupSlots */
 /** Generic popup helper. */
-export default class Popup {
+export default class Popup extends SvelteComponentTyped<{
+    [x: string]: any;
+    dialog?: HTMLElement;
+    position?: any;
+    anchor?: HTMLElement;
+    content?: HTMLElement;
+    open?: import("svelte/store").Writable<boolean>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
     /**accessor*/
-    set anchor(arg: any);
-    get anchor(): any;
+    set anchor(arg: HTMLElement);
+    get anchor(): HTMLElement;
     /**accessor*/
-    set dialog(arg: any);
-    get dialog(): any;
+    set dialog(arg: HTMLElement);
+    get dialog(): HTMLElement;
+    /**accessor*/
+    set content(arg: HTMLElement);
+    get content(): HTMLElement;
     /**accessor*/
     set position(arg: any);
     get position(): any;
     /**accessor*/
-    set open(arg: any);
-    get open(): any;
+    set open(arg: import("svelte/store").Writable<boolean>);
+    get open(): import("svelte/store").Writable<boolean>;
 }
 export type PopupProps = typeof __propDef.props;
 export type PopupEvents = typeof __propDef.events;
 export type PopupSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
         dialog?: (HTMLElement | undefined);
         position?: any;
         anchor?: (HTMLElement | undefined);
-        open?: any;
+        content?: (HTMLElement | undefined);
+        open?: import("svelte/store").Writable<boolean>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

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

package/package/index.d.ts

@@ -1,3 +1,4 @@
+export function initLocales({ fallbackLocale, initialLocale }?: object): void;
 export { default as Calendar } from "./components/composite/calendar.svelte";
 export { default as CheckboxGroup } from "./components/composite/checkbox-group.svelte";
 export { default as Combobox } from "./components/composite/combobox.svelte";
@@ -13,6 +14,7 @@ export { default as TabList } from "./components/composite/tab-list.svelte";
 export { default as Button } from "./components/core/button.svelte";
 export { default as Checkbox } from "./components/core/checkbox.svelte";
 export { default as Dialog } from "./components/core/dialog.svelte";
+export { default as Drawer } from "./components/core/drawer.svelte";
 export { default as GridCell } from "./components/core/grid-cell.svelte";
 export { default as Group } from "./components/core/group.svelte";
 export { default as Icon } from "./components/core/icon.svelte";

package/package/index.js

@@ -2,10 +2,11 @@ import { addMessages, init } from 'svelte-i18n';
 
 /**
  * Load strings and initialize the locales.
+ * @param {object} [init] Initialize options.
  * @see https://github.com/kaisermann/svelte-i18n/blob/main/docs/Getting%20Started.md
  * @see https://vitejs.dev/guide/features.html#glob-import
  */
-const initLocales = () => {
+export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}) => {
   const modules = import.meta.glob('./locales/*.js', { eager: true });
 
   Object.entries(modules).forEach(([path, { strings }]) => {
@@ -16,13 +17,11 @@ const initLocales = () => {
   });
 
   init({
-    fallbackLocale: 'en',
-    initialLocale: 'en',
+    fallbackLocale,
+    initialLocale,
   });
 };
 
-initLocales();
-
 export { default as Calendar } from './components/composite/calendar.svelte';
 export { default as CheckboxGroup } from './components/composite/checkbox-group.svelte';
 export { default as Combobox } from './components/composite/combobox.svelte';
@@ -38,6 +37,7 @@ export { default as TabList } from './components/composite/tab-list.svelte';
 export { default as Button } from './components/core/button.svelte';
 export { default as Checkbox } from './components/core/checkbox.svelte';
 export { default as Dialog } from './components/core/dialog.svelte';
+export { default as Drawer } from './components/core/drawer.svelte';
 export { default as GridCell } from './components/core/grid-cell.svelte';
 export { default as Group } from './components/core/group.svelte';
 export { default as Icon } from './components/core/icon.svelte';

package/package/styles/core.scss

@@ -36,11 +36,11 @@ h4,
 h5,
 h6 {
   margin: 0;
-  font-weight: var(--default-font-weight-bold);
+  font-weight: var(--font-weight--bold);
 }
 
 strong {
-  font-weight: var(--default-font-weight-bold);
+  font-weight: var(--font-weight--bold);
 }
 
 a {
@@ -84,7 +84,7 @@ li {
 
 code,
 pre {
-  font-family: var(--monospace-font-family);
+  font-family: var(--font-family--monospace);
 }
 
 pre {

package/package/styles/variables.scss

@@ -1,37 +1,151 @@
+:root[data-theme="light"] {
+  --foreground-color-1-hsl: var(--base-hue) 5% 0%; // highlight
+  --foreground-color-2-hsl: var(--base-hue) 5% 20%; // primary
+  --foreground-color-3-hsl: var(--base-hue) 5% 40%; // secondary
+  --foreground-color-4-hsl: var(--base-hue) 5% 60%; // tertiary
+  --border-color-1-hsl: var(--base-hue) 5% 75%; // primary
+  --border-color-2-hsl: var(--base-hue) 5% 80%; // secondary/input
+  --background-color-1-hsl: var(--base-hue) 5% 100%; // content/input
+  --background-color-2-hsl: var(--base-hue) 5% 98%; // primary
+  --background-color-3-hsl: var(--base-hue) 5% 94%; // secondary
+  --background-color-4-hsl: var(--base-hue) 5% 90%; // tertiary/disabled
+  --background-color-5-hsl: var(--base-hue) 5% 86%; // highlight
+  --shadow-color: var(--base-hue) 10% 0%;
+  // Accents
+  --primary-accent-color: hsl(var(--base-hue) 80% 45%);
+  --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%); // white/inverted
+  // Alerts
+  --danger-color-hue: 0;
+  --warning-color-hue: 40;
+  --success-color-hue: 100;
+  --info-color-hue: 220;
+  --alert-foreground-color-saturation: 88%;
+  --alert-foreground-color-lightness: 28%;
+  --alert-background-color-saturation: 68%;
+  --alert-background-color-lightness: 88%;
+  --alert-border-color-saturation: 48%;
+  --alert-border-color-lightness: 68%;
+}
+
+:root[data-theme="dark"] {
+  --foreground-color-1-hsl: var(--base-hue) 10% 100%; // highlight
+  --foreground-color-2-hsl: var(--base-hue) 10% 80%; // primary
+  --foreground-color-3-hsl: var(--base-hue) 10% 60%; // secondary
+  --foreground-color-4-hsl: var(--base-hue) 10% 40%; // tertiary
+  --border-color-1-hsl: var(--base-hue) 10% 25%; // primary
+  --border-color-2-hsl: var(--base-hue) 10% 20%; // secondary/input
+  --background-color-1-hsl: var(--base-hue) 10% 10%; // content/input
+  --background-color-2-hsl: var(--base-hue) 10% 12%; // primary
+  --background-color-3-hsl: var(--base-hue) 10% 16%; // secondary
+  --background-color-4-hsl: var(--base-hue) 10% 20%; // tertiary/disabled
+  --background-color-5-hsl: var(--base-hue) 10% 24%; // highlight
+  --shadow-color: var(--base-hue) 10% 0%;
+  // Accents
+  --primary-accent-color: hsl(var(--base-hue) 100% 45%); // 4.57 AA w/ #FFF foreground color
+  --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%); // white
+  // Alerts
+  --danger-color-hue: 0;
+  --warning-color-hue: 40;
+  --success-color-hue: 100;
+  --info-color-hue: 220;
+  --alert-foreground-color-saturation: 48%;
+  --alert-foreground-color-lightness: 68%;
+  --alert-background-color-saturation: 88%;
+  --alert-background-color-lightness: 8%;
+  --alert-border-color-saturation: 38%;
+  --alert-border-color-lightness: 18%;
+}
+
 :root {
-  // Base HSL
-  --hue: 210;
+  // Base HSL values
+  --base-hue: 210;
   // Foreground
   --highlight-foreground-color: hsl(var(--foreground-color-1-hsl));
   --primary-foreground-color: hsl(var(--foreground-color-2-hsl));
   --secondary-foreground-color: hsl(var(--foreground-color-3-hsl));
-  --ternary-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));
+  --danger-foreground-color: hsl(
+    var(--danger-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)
+  );
   // Background
   --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));
+  --primary-background-color-translucent: hsl(var(--background-color-2-hsl) / 80%);
   --secondary-background-color: hsl(var(--background-color-3-hsl));
-  --secondary-background-color-translucent: hsl(var(--background-color-3-hsl) / 88%);
-  --ternary-background-color: hsl(var(--background-color-4-hsl));
+  --secondary-background-color-translucent: hsl(var(--background-color-3-hsl) / 80%);
+  --tertiary-background-color: hsl(var(--background-color-4-hsl));
+  --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));
+  --danger-background-color: hsl(
+    var(--danger-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)
+  );
   // 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));
+  --danger-border-color: hsl(
+    var(--danger-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)
+  );
+  --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%);
   // Fonts
-  --default-font-family: "Merriweather Sans", sans-serif;
-  --default-font-size: 13px;
-  --default-font-weight-regular: 300;
-  --default-font-weight-bold: 600;
-  --monospace-font-family: "Noto Sans Mono", monospace;
-  --monospace-font-size: 13px;
+  --font-family--default: "Merriweather Sans", sans-serif;
+  --font-size--xxx-large: 24px;
+  --font-size--xx-large: 20px;
+  --font-size--x-large: 18px;
+  --font-size--large: 16px;
+  --font-size--default: 14px;
+  --font-size--small: 12px;
+  --font-size--x-small: 10px;
+  --font-weight--normal: 300;
+  --font-weight--bold: 600;
+  --font-family--monospace: "Noto Sans Mono", monospace;
+  --font-size--monospace: 13px;
   // Controls
   --control--small--border-width: 1px;
   --control--small--border-radius: 2px;
@@ -68,47 +182,3 @@
   --tab--medium--height: var(--control--medium--height);
   --tab--large--height: var(--control--large--height);
 }
-
-:root[data-theme="light"] {
-  --foreground-color-1-hsl: var(--hue) 5% 0%; // highlight
-  --foreground-color-2-hsl: var(--hue) 5% 20%; // primary
-  --foreground-color-3-hsl: var(--hue) 5% 40%; // secondary
-  --foreground-color-4-hsl: var(--hue) 5% 60%; // ternary
-  --border-color-1-hsl: var(--hue) 5% 75%; // primary
-  --border-color-2-hsl: var(--hue) 5% 80%; // secondary/input
-  --background-color-1-hsl: var(--hue) 5% 100%; // content
-  --background-color-2-hsl: var(--hue) 5% 98%; // primary
-  --background-color-3-hsl: var(--hue) 5% 96%; // secondary/ternary
-  --background-color-4-hsl: var(--hue) 5% 94%; // disabled
-  --background-color-5-hsl: var(--hue) 5% 80%; // highlight
-  --shadow-color: var(--hue) 10% 0%;
-  // Accents
-  --primary-accent-color: hsl(var(--hue) 80% 45%);
-  --primary-accent-color-lighter: hsl(var(--hue) 80% 40%);
-  --primary-accent-color-darker: hsl(var(--hue) 80% 50%);
-  --primary-accent-color-foreground: hsl(var(--hue) 10% 100%); // white/inverted
-  // States
-  --danger-color: 0 68% 42%; // firebrick
-}
-
-:root[data-theme="dark"] {
-  --foreground-color-1-hsl: var(--hue) 10% 100%; // highlight
-  --foreground-color-2-hsl: var(--hue) 10% 80%; // primary
-  --foreground-color-3-hsl: var(--hue) 10% 60%; // secondary
-  --foreground-color-4-hsl: var(--hue) 10% 40%; // ternary
-  --border-color-1-hsl: var(--hue) 10% 25%; // primary
-  --border-color-2-hsl: var(--hue) 10% 20%; // secondary/input
-  --background-color-1-hsl: var(--hue) 10% 8%; // content
-  --background-color-2-hsl: var(--hue) 10% 10%; // primary
-  --background-color-3-hsl: var(--hue) 10% 12%; // secondary/ternary
-  --background-color-4-hsl: var(--hue) 10% 14%; // disabled
-  --background-color-5-hsl: var(--hue) 10% 18%; // highlight
-  --shadow-color: var(--hue) 10% 0%;
-  // Accents
-  --primary-accent-color: hsl(var(--hue) 100% 45%); // 4.57 AA w/ #FFF foreground color
-  --primary-accent-color-lighter: hsl(var(--hue) 100% 50%);
-  --primary-accent-color-darker: hsl(var(--hue) 100% 40%);
-  --primary-accent-color-foreground: hsl(var(--hue) 10% 100%); // white
-  // States
-  --danger-color: 0 68% 42%; // firebrick
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.1.5",
+  "version": "0.2.1",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -11,7 +11,7 @@
     "build": "svelte-kit sync && svelte-package -o package",
     "build:watch": "svelte-kit sync && svelte-package -o package --watch",
     "preview": "vite preview",
-    "prepublishOnly": "vite build",
+    "prepublishOnly": "npm run build",
     "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
     "format": "prettier --plugin-search-dir . --write .",
@@ -29,32 +29,32 @@
   "devDependencies": {
     "@babel/core": "^7.21.4",
     "@babel/eslint-parser": "^7.21.3",
-    "@playwright/test": "^1.32.2",
+    "@playwright/test": "^1.32.3",
     "@sveltejs/adapter-auto": "2.0.0",
-    "@sveltejs/kit": "1.15.2",
+    "@sveltejs/kit": "1.15.7",
     "@sveltejs/package": "^2.0.2",
     "cspell": "^6.31.1",
-    "eslint": "^8.38.0",
+    "eslint": "^8.39.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-svelte3": "^4.0.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.23",
     "postcss-html": "^1.5.0",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.0",
-    "sass": "^1.61.0",
-    "stylelint": "^15.4.0",
-    "stylelint-config-recommended-scss": "^9.0.1",
+    "sass": "^1.62.0",
+    "stylelint": "^15.6.0",
+    "stylelint-config-recommended-scss": "^10.0.0",
     "stylelint-scss": "^4.6.0",
     "svelte-check": "^3.2.0",
     "svelte-i18n": "^3.6.0",
     "svelte-migrate": "^1.1.3",
     "svelte-preprocess": "^5.0.3",
     "tslib": "^2.5.0",
-    "vite": "^4.2.1",
-    "vitest": "^0.30.0"
+    "vite": "^4.3.1",
+    "vitest": "^0.30.1"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -133,6 +133,11 @@
       "svelte": "./package/components/core/dialog.svelte",
       "default": "./package/components/core/dialog.svelte"
     },
+    "./components/core/drawer.svelte": {
+      "types": "./package/components/core/drawer.svelte.d.ts",
+      "svelte": "./package/components/core/drawer.svelte",
+      "default": "./package/components/core/drawer.svelte"
+    },
     "./components/core/grid-cell.svelte": {
       "types": "./package/components/core/grid-cell.svelte.d.ts",
       "svelte": "./package/components/core/grid-cell.svelte",
@@ -312,7 +317,6 @@
   "files": [
     "package"
   ],
-  "svelte": "./package/index.js",
   "typesVersions": {
     ">4.0": {
       "components/composite/calendar.svelte": [
@@ -360,6 +364,9 @@
       "components/core/dialog.svelte": [
         "./package/components/core/dialog.svelte.d.ts"
       ],
+      "components/core/drawer.svelte": [
+        "./package/components/core/drawer.svelte.d.ts"
+      ],
       "components/core/grid-cell.svelte": [
         "./package/components/core/grid-cell.svelte.d.ts"
       ],
@@ -408,6 +415,9 @@
       "components/core/separator.svelte": [
         "./package/components/core/separator.svelte.d.ts"
       ],
+      "components/core/slider.svelte": [
+        "./package/components/core/slider.svelte.d.ts"
+      ],
       "components/core/spacer.svelte": [
         "./package/components/core/spacer.svelte.d.ts"
       ],