@sveltia/ui 0.8.3 → 0.10.0

package/package/services/util.js

@@ -1,21 +1,21 @@
 /**
  * Get a random ID that can be used for elements.
- * @param {string} [prefix] Prefix to be added to the ID, e.g. `popup`.
- * @param {number} [length] Number of characters to be used in the ID.
+ * @param {string} [prefix] - Prefix to be added to the ID, e.g. `popup`.
+ * @param {number} [length] - Number of characters to be used in the ID.
  * @returns {string} Generated ID.
  */
 export const getRandomId = (prefix = 'e', length = 7) =>
   [
     prefix,
     new Array(length)
-      .fill()
+      .fill(0)
       .map(() => '0123456789abcdef'[Math.floor(Math.random() * 12)])
       .join(''),
   ].join('-');
 
 /**
  * Check if the given input is a simple object.
- * @param {*} input Input, probably an object.
+ * @param {*} input - Input, probably an object.
  * @returns {boolean} Result.
  */
 export const isObject = (input) =>
@@ -24,7 +24,7 @@ export const isObject = (input) =>
 /**
  * Return a simple `Promise` to resolve in the given time, making it easier to wait for a bit in the
  * code, particularly while making sequential HTTP requests.
- * @param {number} [ms] Milliseconds to wait.
+ * @param {number} [ms] - Milliseconds to wait.
  * @returns {Promise<void>} Nothing.
  */
 export const sleep = (ms = 1000) =>

package/package/styles/core.scss

@@ -29,6 +29,7 @@
   vertical-align: top;
 
   @media (prefers-reduced-motion) {
+    scroll-behavior: auto;
     // Disable transition but make sure the `transitionend` event works
     transition-duration: 1ms !important;
   }

package/package/styles/variables.scss

@@ -1,5 +1,5 @@
-:root[data-theme="light"],
-:host[data-theme="light"] {
+@mixin light-theme {
+  color-scheme: light;
   --sui-foreground-color-1-hsl: var(--sui-base-hue) 5% 5%; // highlight
   --sui-foreground-color-2-hsl: var(--sui-base-hue) 5% 25%; // primary
   --sui-foreground-color-3-hsl: var(--sui-base-hue) 5% 35%; // secondary
@@ -34,8 +34,8 @@
   --sui-alert-border-color-lightness: 68%;
 }
 
-:root[data-theme="dark"],
-:host[data-theme="dark"] {
+@mixin dark-theme {
+  color-scheme: dark;
   --sui-foreground-color-1-hsl: var(--sui-base-hue) 10% 95%; // highlight
   --sui-foreground-color-2-hsl: var(--sui-base-hue) 10% 75%; // primary
   --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 65%; // secondary
@@ -222,6 +222,7 @@
   --sui-textbox-multiline-min-width: 480px;
   --sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
   // Tab
+  --sui-tab-height: var(--sui-control-medium-height);
   --sui-tab-small-height: var(--sui-control-small-height);
   --sui-tab-medium-height: var(--sui-control-medium-height);
   --sui-tab-large-height: var(--sui-control-large-height);
@@ -249,4 +250,23 @@
     --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
     --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
   }
+
+  &[data-theme="light"] {
+    @include light-theme;
+  }
+
+  &[data-theme="dark"] {
+    @include dark-theme;
+  }
+
+  // Follow the system appearance setting when the `data-theme` attribute is not set (yet)
+  &:not([data-theme]) {
+    @media (prefers-color-scheme: light) {
+      @include light-theme;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      @include dark-theme;
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.8.3",
+  "version": "0.10.0",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -23,36 +23,36 @@
     "test:unit": "vitest"
   },
   "dependencies": {
-    "svelte": "^4.2.6"
+    "svelte": "^4.2.8"
   },
   "devDependencies": {
-    "@playwright/test": "^1.40.0",
-    "@sveltejs/adapter-auto": "2.1.1",
-    "@sveltejs/kit": "^1.27.6",
-    "@sveltejs/package": "^2.2.2",
-    "cspell": "^8.0.0",
-    "eslint": "^8.54.0",
+    "@playwright/test": "^1.40.1",
+    "@sveltejs/adapter-auto": "^3.1.0",
+    "@sveltejs/kit": "^2.3.2",
+    "@sveltejs/package": "^2.2.5",
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "cspell": "^8.3.2",
+    "eslint": "^8.56.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-jsdoc": "^46.9.0",
-    "eslint-plugin-svelte": "^2.35.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsdoc": "^48.0.2",
+    "eslint-plugin-svelte": "^2.35.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.31",
-    "postcss-html": "^1.5.0",
-    "prettier": "^3.1.0",
-    "prettier-plugin-svelte": "^3.1.0",
-    "sass": "^1.69.5",
-    "stylelint": "^15.11.0",
-    "stylelint-config-recommended-scss": "^13.1.0",
-    "stylelint-scss": "^5.3.1",
-    "svelte-check": "^3.6.0",
+    "postcss": "^8.4.33",
+    "postcss-html": "^1.6.0",
+    "prettier": "^3.2.2",
+    "prettier-plugin-svelte": "^3.1.2",
+    "sass": "^1.69.7",
+    "stylelint": "^16.1.0",
+    "stylelint-config-recommended-scss": "^14.0.0",
+    "stylelint-scss": "^6.0.0",
+    "svelte-check": "^3.6.3",
     "svelte-i18n": "^4.0.0",
-    "svelte-migrate": "^1.2.7",
-    "svelte-preprocess": "^5.1.0",
+    "svelte-preprocess": "^5.1.3",
     "tslib": "^2.6.2",
-    "vite": "^4.5.0",
-    "vitest": "^0.34.6"
+    "vite": "^5.0.11",
+    "vitest": "^1.2.0"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -76,6 +76,11 @@
       "svelte": "./package/components/button/select-button.svelte",
       "default": "./package/components/button/select-button.svelte"
     },
+    "./components/button/split-button.svelte": {
+      "types": "./package/components/button/split-button.svelte.d.ts",
+      "svelte": "./package/components/button/split-button.svelte",
+      "default": "./package/components/button/split-button.svelte"
+    },
     "./components/calendar/calendar.svelte": {
       "types": "./package/components/calendar/calendar.svelte.d.ts",
       "svelte": "./package/components/calendar/calendar.svelte",
@@ -291,6 +296,11 @@
       "svelte": "./package/components/table/table.svelte",
       "default": "./package/components/table/table.svelte"
     },
+    "./components/tabs/tab-box.svelte": {
+      "types": "./package/components/tabs/tab-box.svelte.d.ts",
+      "svelte": "./package/components/tabs/tab-box.svelte",
+      "default": "./package/components/tabs/tab-box.svelte"
+    },
     "./components/tabs/tab-list.svelte": {
       "types": "./package/components/tabs/tab-list.svelte.d.ts",
       "svelte": "./package/components/tabs/tab-list.svelte",
@@ -301,6 +311,11 @@
       "svelte": "./package/components/tabs/tab-panel.svelte",
       "default": "./package/components/tabs/tab-panel.svelte"
     },
+    "./components/tabs/tab-panels.svelte": {
+      "types": "./package/components/tabs/tab-panels.svelte.d.ts",
+      "svelte": "./package/components/tabs/tab-panels.svelte",
+      "default": "./package/components/tabs/tab-panels.svelte"
+    },
     "./components/tabs/tab.svelte": {
       "types": "./package/components/tabs/tab.svelte.d.ts",
       "svelte": "./package/components/tabs/tab.svelte",
@@ -425,6 +440,9 @@
       "components/button/select-button.svelte": [
         "./package/components/button/select-button.svelte.d.ts"
       ],
+      "components/button/split-button.svelte": [
+        "./package/components/button/split-button.svelte.d.ts"
+      ],
       "components/calendar/calendar.svelte": [
         "./package/components/calendar/calendar.svelte.d.ts"
       ],
@@ -554,12 +572,18 @@
       "components/table/table.svelte": [
         "./package/components/table/table.svelte.d.ts"
       ],
+      "components/tabs/tab-box.svelte": [
+        "./package/components/tabs/tab-box.svelte.d.ts"
+      ],
       "components/tabs/tab-list.svelte": [
         "./package/components/tabs/tab-list.svelte.d.ts"
       ],
       "components/tabs/tab-panel.svelte": [
         "./package/components/tabs/tab-panel.svelte.d.ts"
       ],
+      "components/tabs/tab-panels.svelte": [
+        "./package/components/tabs/tab-panels.svelte.d.ts"
+      ],
       "components/tabs/tab.svelte": [
         "./package/components/tabs/tab.svelte.d.ts"
       ],