@sveltia/ui 0.7.0 → 0.7.2

package/package/components/button/button.svelte

@@ -127,10 +127,24 @@
   on:select
 >
   <slot name="start-icon" />
-  {#if label}
-    <span class="label">{label}</span>
+  {#if variant === 'link'}
+    {#if label}
+      <span class="label">
+        {label}
+      </span>
+    {:else}
+      <span class="label">
+        <slot />
+      </span>
+    {/if}
+  {:else}
+    {#if label}
+      <span class="label">
+        {label}
+      </span>
+    {/if}
+    <slot />
   {/if}
-  <slot />
   <slot name="end-icon" />
 </button>
 
@@ -226,9 +240,16 @@ 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 {
+button:global(.link) :global(.label) {
+  line-height: var(--sui-line-height-compact);
+  white-space: normal;
+}
+button:global(.link):hover :global(.label), button:global(.link):focus :global(.label), button:global(.link):active :global(.label) {
   text-decoration: underline;
 }
 button:global(.small) {

package/package/components/checkbox/checkbox.svelte

@@ -164,7 +164,7 @@
   transition: all 200ms;
 }
 .checkbox :global(button) :global(.icon) {
-  font-size: calc(var(--sui-checkbox-height) - 4px);
+  font-size: calc(var(--sui-checkbox-height) - 2px);
 }
 .checkbox :global(button[aria-checked="true"]) {
   border-color: var(--sui-primary-accent-color);

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/switch/switch.svelte

@@ -132,7 +132,7 @@ span {
   align-items: center;
   border-width: 1.5px;
   border-style: solid;
-  border-color: var(--sui-control-border-color);
+  border-color: var(--sui-checkbox-border-color);
   border-radius: var(--sui-checkbox-height);
   background-color: var(--sui-control-background-color);
   transition: all 200ms;
@@ -142,7 +142,7 @@ span::before {
   width: calc(var(--sui-checkbox-height) - 6px);
   height: calc(var(--sui-checkbox-height) - 6px);
   border-radius: var(--sui-checkbox-height);
-  background-color: var(--sui-control-border-color);
+  background-color: var(--sui-checkbox-border-color);
   transition: all 200ms;
   content: "";
 }</style>

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/app-shell.svelte

@@ -96,7 +96,7 @@
   --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%;
   --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%;
   --sui-background-color-5-hsl: var(--sui-base-hue) 5% 74%;
-  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 65%;
+  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 54%;
   --sui-border-color-2-hsl: var(--sui-base-hue) 5% 74%;
   --sui-border-color-3-hsl: var(--sui-base-hue) 5% 70%;
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
@@ -129,7 +129,7 @@
   --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%;
   --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%;
   --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%;
-  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 35%;
+  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 46%;
   --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%;
   --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%;
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
@@ -248,7 +248,7 @@
   --sui-control-large-border-radius: calc(var(--sui-control-large-height) / 8);
   --sui-control-large-padding: 0 calc((var(--sui-control-large-height) / 3));
   --sui-control-large-height: 48px;
-  --sui-control-border-color: hsl(var(--sui-border-color-1-hsl));
+  --sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
   --sui-control-foreground-color: var(--sui-primary-foreground-color);
   --sui-control-background-color: hsl(var(--sui-background-color-4-hsl));
   --sui-control-font-family: var(--sui-font-family-default);
@@ -267,18 +267,18 @@
   --sui-button-background-color: var(--sui-control-background-color);
   --sui-checkbox-border-radius: var(--sui-control-medium-border-radius);
   --sui-checkbox-height: 20px;
-  --sui-checkbox-border-color: var(--sui-control-border-color);
+  --sui-checkbox-border-color: hsl(var(--sui-border-color-1-hsl));
   --sui-checkbox-background-color: var(--sui-control-background-color);
   --sui-option-border-radius: var(--sui-control-medium-border-radius);
   --sui-option-padding: var(--sui-control-medium-padding);
   --sui-option-height: var(--sui-control-medium-height);
   --sui-listbox-border-radius: var(--sui-control-medium-border-radius);
-  --sui-listbox-border-color: hsl(var(--sui-border-color-2-hsl));
+  --sui-listbox-border-color: var(--sui-control-border-color);
   --sui-listbox-foreground-color: var(--sui-control-foreground-color);
   --sui-listbox-background-color: hsl(var(--sui-background-color-1-hsl));
   --sui-textbox-border-radius: var(--sui-control-medium-border-radius);
   --sui-textbox-height: var(--sui-control-medium-height);
-  --sui-textbox-border-color: hsl(var(--sui-border-color-2-hsl));
+  --sui-textbox-border-color: var(--sui-control-border-color);
   --sui-textbox-foreground-color: var(--sui-control-foreground-color);
   --sui-textbox-background-color: hsl(var(--sui-background-color-1-hsl));
   --sui-textbox-font-family: var(--sui-font-family-default);

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/styles/variables.scss

@@ -10,7 +10,7 @@
   --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%; // secondary
   --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%; // tertiary/disabled
   --sui-background-color-5-hsl: var(--sui-base-hue) 5% 74%; // highlight
-  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 65%; // control
+  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 54%; // control
   --sui-border-color-2-hsl: var(--sui-base-hue) 5% 74%; // primary
   --sui-border-color-3-hsl: var(--sui-base-hue) 5% 70%; // secondary
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
@@ -45,7 +45,7 @@
   --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%; // secondary
   --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%; // tertiary/disabled
   --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%; // highlight
-  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 35%; // control
+  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 46%; // control
   --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%; // primary
   --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%; // secondary
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
@@ -173,7 +173,7 @@
   --sui-control-large-border-radius: calc(var(--sui-control-large-height) / 8);
   --sui-control-large-padding: 0 calc((var(--sui-control-large-height) / 3));
   --sui-control-large-height: 48px;
-  --sui-control-border-color: hsl(var(--sui-border-color-1-hsl));
+  --sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
   --sui-control-foreground-color: var(--sui-primary-foreground-color);
   --sui-control-background-color: hsl(var(--sui-background-color-4-hsl));
   --sui-control-font-family: var(--sui-font-family-default);
@@ -191,10 +191,10 @@
   --sui-button-large-height: var(--sui-control-large-height);
   --sui-button-border-color: var(--sui-control-border-color);
   --sui-button-background-color: var(--sui-control-background-color);
-  // Checkbox
+  // Checkbox, radio button, switch
   --sui-checkbox-border-radius: var(--sui-control-medium-border-radius);
   --sui-checkbox-height: 20px;
-  --sui-checkbox-border-color: var(--sui-control-border-color);
+  --sui-checkbox-border-color: hsl(var(--sui-border-color-1-hsl));
   --sui-checkbox-background-color: var(--sui-control-background-color);
   // Option & menu item
   --sui-option-border-radius: var(--sui-control-medium-border-radius);
@@ -202,13 +202,13 @@
   --sui-option-height: var(--sui-control-medium-height);
   // Listbox
   --sui-listbox-border-radius: var(--sui-control-medium-border-radius);
-  --sui-listbox-border-color: hsl(var(--sui-border-color-2-hsl));
+  --sui-listbox-border-color: var(--sui-control-border-color);
   --sui-listbox-foreground-color: var(--sui-control-foreground-color);
   --sui-listbox-background-color: hsl(var(--sui-background-color-1-hsl));
   // Textbox: singleline & multiline text fields
   --sui-textbox-border-radius: var(--sui-control-medium-border-radius);
   --sui-textbox-height: var(--sui-control-medium-height);
-  --sui-textbox-border-color: hsl(var(--sui-border-color-2-hsl));
+  --sui-textbox-border-color: var(--sui-control-border-color);
   --sui-textbox-foreground-color: var(--sui-control-foreground-color);
   --sui-textbox-background-color: hsl(var(--sui-background-color-1-hsl));
   --sui-textbox-font-family: var(--sui-font-family-default);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "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",