@sveltia/ui 0.7.0 → 0.7.1

package/package/components/button/button.svelte

@@ -226,6 +226,9 @@ button:global(.ghost)[aria-pressed=true] {
 }
 button:global(.link) {
   outline: 0;
+  border-radius: 0 !important;
+  padding: 0 !important;
+  height: auto !important;
   color: var(--sui-primary-accent-color-text);
 }
 button:global(.link):hover, button:global(.link):focus, button:global(.link):active {

package/package/components/dialog/dialog.svelte

@@ -59,7 +59,7 @@
    *
    */
   const openDialog = async () => {
-    (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
+    (document.querySelector('.sui.app-shell') ?? document.body).appendChild(dialog);
     showContent = true;
 
     if (modal) {

package/package/components/drawer/drawer.svelte

@@ -66,7 +66,7 @@
    *
    */
   const openDialog = async () => {
-    (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
+    (document.querySelector('.sui.app-shell') ?? document.body).appendChild(dialog);
     showContent = true;
     dialog.showModal();
 

package/package/components/select/combobox.svelte

@@ -138,7 +138,7 @@
 <Popup
   id="{id}-popup"
   class="combobox"
-  anchor={comboboxElement || inputComponent?.element}
+  anchor={comboboxElement ?? inputComponent?.element}
   {position}
   touchOptimized={true}
   bind:open={isPopupOpen}

package/package/components/toast/toast.svelte

@@ -13,6 +13,7 @@
    */
   export let show = false;
   /**
+   * Duration to automatically hide the toast. Use `0` to hide it manually from the consumer.
    * @type {number}
    */
   export let duration = 5000;
@@ -43,7 +44,7 @@
     } else {
       popover = popoverBase;
       popover.classList.add('enabled');
-      document.body.appendChild(popover);
+      (document.querySelector('.sui.app-shell') ?? document.body).appendChild(popover);
 
       // Move the element to top layer
       if (popover.showPopover) {
@@ -64,7 +65,7 @@
   }
 
   $: {
-    if (show) {
+    if (show && duration) {
       window.setTimeout(() => {
         show = false;
       }, duration);
@@ -82,38 +83,38 @@
   </Alert>
 </div>
 
-<style>
-  .toast-base {
-    position: fixed;
-    inset: 0;
-    z-index: 99999;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    align-items: flex-end;
-    gap: 8px;
-    margin: 0;
-    border: 0;
-    padding: 16px;
-    width: 100vw;
-    height: 100vh;
-    background-color: transparent;
-    pointer-events: none;
-    -webkit-user-select: none;
-    user-select: none;
-  }
-
-  .toast {
-    position: absolute;
-    inset: auto 16px 16px auto;
-    box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
-    opacity: 1;
-    transition-duration: 250ms;
-    will-change: opacity;
+<style>.toast-base {
+  position: fixed;
+  inset: 0;
+  z-index: 99999;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-end;
+  gap: 8px;
+  margin: 0;
+  border: 0;
+  padding: 16px;
+  width: 100vw;
+  height: 100vh;
+  background-color: transparent;
+  font-family: var(--sui-font-family-default);
+  font-size: var(--sui-font-size-default);
+  font-weight: var(--sui-font-weight-normal);
+  pointer-events: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
 
-    &[hidden] {
-      display: block;
-      opacity: 0;
-    }
-  }
-</style>
+.toast {
+  position: absolute;
+  inset: auto 16px 16px auto;
+  box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
+  opacity: 1;
+  transition-duration: 250ms;
+  will-change: opacity;
+}
+.toast[hidden] {
+  display: block;
+  opacity: 0;
+}</style>

package/package/components/util/popup.svelte

@@ -71,7 +71,7 @@
    *
    */
   const openDialog = () => {
-    (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
+    (document.querySelector('.sui.app-shell') ?? document.body).appendChild(dialog);
     showContent = true;
     dialog.showModal();
 

package/package/services/group.js

@@ -68,7 +68,7 @@ class Group {
 
     this.orientation = this.grid
       ? 'horizontal'
-      : this.parent.getAttribute('aria-orientation') || orientation;
+      : this.parent.getAttribute('aria-orientation') ?? orientation;
     this.childRoles = childRoles;
     this.childSelectedAttr = childSelectedAttr;
     this.focusChild = focusChild;
@@ -208,7 +208,7 @@ class Group {
 
     const currentTarget = (() => {
       if (!this.focusChild) {
-        return activeMembers.find((member) => member.matches('.focused')) || activeMembers[0];
+        return activeMembers.find((member) => member.matches('.focused')) ?? activeMembers[0];
       }
 
       if (target.matches(this.selector)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -27,16 +27,16 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.39.0",
-    "@sveltejs/adapter-auto": "2.1.0",
-    "@sveltejs/kit": "^1.27.2",
+    "@sveltejs/adapter-auto": "2.1.1",
+    "@sveltejs/kit": "^1.27.3",
     "@sveltejs/package": "^2.2.2",
     "cspell": "^7.3.8",
-    "eslint": "^8.52.0",
+    "eslint": "^8.53.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jsdoc": "^46.8.2",
-    "eslint-plugin-svelte": "^2.34.0",
+    "eslint-plugin-svelte": "^2.34.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.31",
     "postcss-html": "^1.5.0",
@@ -44,7 +44,7 @@
     "prettier-plugin-svelte": "^3.0.3",
     "sass": "^1.69.5",
     "stylelint": "^15.11.0",
-    "stylelint-config-recommended-scss": "^13.0.0",
+    "stylelint-config-recommended-scss": "^13.1.0",
     "stylelint-scss": "^5.3.0",
     "svelte-check": "^3.5.2",
     "svelte-i18n": "^4.0.0",