@sveltia/ui 0.1.0 → 0.1.2

package/package/components/composite/combobox.svelte

@@ -47,7 +47,7 @@
   let inputComponent;
   /** @type {(Popup| undefined)} */
   let popupComponent;
-  let open = writable(false);
+  let isPopupOpen = writable(false);
 
   $: {
     dispatch('change', { target: inputComponent?.element, value });
@@ -92,12 +92,12 @@
     {disabled}
     class="ternary iconic"
     iconName="expand_more"
-    iconLabel={$open ? $_('sui._.collapse') : $_('sui._.expand')}
+    iconLabel={$isPopupOpen ? $_('sui._.collapse') : $_('sui._.expand')}
     on:click={(event) => {
       event.stopPropagation();
 
       if (!disabled) {
-        open.set(!$open);
+        $isPopupOpen = !$isPopupOpen;
       }
     }}
   />
@@ -105,7 +105,7 @@
 <Popup
   anchor={comboboxElement || inputComponent?.element}
   {position}
-  bind:open
+  bind:open={isPopupOpen}
   bind:this={popupComponent}
 >
   <Listbox

package/package/components/composite/tab-list.svelte

@@ -43,16 +43,16 @@
   align-items: center;
   border-color: var(--control-border-color);
 }
-.tab-list:global([aria-orientation="horizontal"]) {
+.tab-list[aria-orientation=horizontal] {
   gap: 16px;
   margin: 0 0 32px;
   border-width: 0 0 1px;
   padding: 0 16px;
 }
-.tab-list:global([aria-orientation="horizontal"]) :global(button) {
+.tab-list[aria-orientation=horizontal] :global(button) {
   border-width: 0 0 2px 0;
 }
-.tab-list:global([aria-orientation="vertical"]) {
+.tab-list[aria-orientation=vertical] {
   gap: 8px;
   flex-direction: column;
   margin: 0 32px 0 0;
@@ -60,7 +60,7 @@
   padding: 8px 0;
   width: 240px;
 }
-.tab-list:global([aria-orientation="vertical"]) :global(button) {
+.tab-list[aria-orientation=vertical] :global(button) {
   border-width: 0 2px 0 0;
   width: 100%;
 }

package/package/components/core/button.svelte

@@ -137,10 +137,10 @@ button > :global(*) {
 button:global(:not(:disabled):focus-visible) {
   z-index: 1;
 }
-button:global([hidden]) {
+button[hidden] {
   display: none !important;
 }
-button:global([disabled]) {
+button[disabled] {
   opacity: 0.4;
   cursor: default;
   pointer-events: none;
@@ -172,14 +172,14 @@ button:global(.secondary) {
   color: var(--highlight-foreground-color);
   background-color: var(--ternary-background-color);
 }
-button:global(.secondary):global([aria-pressed="true"]) {
+button:global(.secondary)[aria-pressed=true] {
   background-color: var(--primary-accent-color);
 }
 button:global(.ternary) {
   color: var(--primary-foreground-color);
   padding: 0 8px;
 }
-button:global(.ternary):global([aria-pressed="true"]) {
+button:global(.ternary)[aria-pressed=true] {
   background-color: var(--highlight-background-color);
 }
 button:global(.danger) {

package/package/components/core/dialog.svelte

@@ -48,13 +48,15 @@
   const dispatch = createEventDispatcher();
   /** @type {?HTMLDialogElement} */
   let dialog;
+  let showDialog = false;
   let showContent = false;
-  let showContentTimer = 0;
+  let closeDialogTimer = 0;
 
   $: {
     if (dialog) {
       if (open) {
-        window.clearTimeout(showContentTimer);
+        window.clearTimeout(closeDialogTimer);
+        (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
         showContent = true;
 
         if (modal) {
@@ -62,11 +64,17 @@
         } else {
           dialog.show();
         }
+
+        window.requestAnimationFrame(() => {
+          showDialog = true;
+        });
       } else {
-        dialog.close();
+        showDialog = false;
 
-        showContentTimer = window.setTimeout(() => {
+        closeDialogTimer = window.setTimeout(() => {
           showContent = false;
+          dialog?.close();
+          dialog?.remove();
         }, 500);
 
         if (dialog.returnValue === 'ok') {
@@ -83,8 +91,13 @@
   }
 
   onMount(() => {
-    // Avoid nested dialogs
-    (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
+    dialog.remove();
+
+    // onUnmount
+    return () => {
+      dialog?.close();
+      dialog?.remove();
+    };
   });
 </script>
 
@@ -92,6 +105,7 @@
 <dialog
   bind:this={dialog}
   class="sui dialog {className} {size}"
+  class:open={showDialog}
   on:click={({ target }) => {
     if (closeOnBackdropClick && target?.matches('dialog')) {
       dialog.returnValue = 'cancel';
@@ -177,25 +191,24 @@
   justify-content: center;
   align-items: center;
   background-color: var(--popup-backdrop-color);
-  backdrop-filter: blur(8px);
-  transition: all 200ms;
 }
-dialog:not([open]) {
-  opacity: 0;
+dialog.open form {
+  opacity: 1;
+  transform: scale(100%);
+  transition-duration: 100ms;
+}
+dialog:not(.open) {
   pointer-events: none !important;
 }
-dialog:not([open]) form {
+dialog:not(.open) form {
+  opacity: 0;
   transform: scale(90%);
+  pointer-events: none;
+  transition-duration: 200ms;
 }
-dialog:not([open]) :global(*) {
+dialog:not(.open) :global(*) {
   pointer-events: none !important;
 }
-dialog[open] {
-  opacity: 1;
-}
-dialog[open] form {
-  transform: scale(100%);
-}
 dialog :global(a),
 dialog :global(input),
 dialog :global(textarea),
@@ -207,9 +220,11 @@ dialog form {
   display: flex;
   flex-direction: column;
   border-radius: 4px;
-  background-color: var(--secondary-background-color);
+  background-color: var(--secondary-background-color-translucent);
+  backdrop-filter: blur(16px);
   box-shadow: 0 8px 16px var(--popup-shadow-color);
-  transition: all 200ms;
+  will-change: opacity, transform;
+  transition-property: opacity, transform;
 }
 dialog.small form {
   width: 400px;

package/package/components/core/menu-item.svelte

@@ -41,10 +41,10 @@
     bind:this={buttonComponent}
     on:click
     on:mouseenter={() => {
-      isPopupOpen.set(true);
+      $isPopupOpen = true;
     }}
     on:mouseleave={() => {
-      isPopupOpen.set(false);
+      $isPopupOpen = false;
     }}
   >
     {#if iconName}

package/package/components/core/number-input.svelte

@@ -18,6 +18,7 @@
   /** @type {(String|undefined)} */
   export let value = undefined;
 
+  export let disabled = false;
   export let min = undefined;
   export let max = undefined;
   export let step = 1;
@@ -45,6 +46,7 @@
   <TextInput
     bind:this={component}
     bind:value
+    {disabled}
     role="spinbutton"
     aria-valuenow={Number(value || 0)}
     aria-invalid={Number.isNaN(Number(value))}
@@ -67,7 +69,7 @@
   />
   <Button
     class="iconic"
-    disabled={Number.isNaN(Number(value))}
+    disabled={disabled || Number.isNaN(Number(value))}
     iconLabel={$_('sui.number_input.decrease')}
     iconName={'arrow_downward'}
     on:click={() => {
@@ -76,7 +78,7 @@
   />
   <Button
     class="iconic"
-    disabled={Number.isNaN(Number(value))}
+    disabled={disabled || Number.isNaN(Number(value))}
     iconLabel={$_('sui.number_input.increase')}
     iconName={'arrow_upward'}
     on:click={() => {

package/package/components/core/number-input.svelte.d.ts

@@ -5,6 +5,7 @@
 export default class NumberInput extends SvelteComponentTyped<{
     [x: string]: any;
     class?: string;
+    disabled?: boolean;
     value?: string;
     min?: any;
     max?: any;
@@ -24,6 +25,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
+        disabled?: boolean;
         value?: (string | undefined);
         min?: any;
         max?: any;

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

@@ -53,6 +53,7 @@
   --content-background-color: hsl(var(--background-color-1-hsl));
   --primary-background-color: hsl(var(--background-color-2-hsl));
   --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));
   --control-background-color: hsl(var(--background-color-1-hsl));
   --disabled-background-color: hsl(var(--background-color-4-hsl));
@@ -60,8 +61,8 @@
   --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));
-  --popup-shadow-color: hsl(var(--shadow-color) / 20%);
-  --popup-backdrop-color: hsl(var(--shadow-color) / 10%);
+  --popup-shadow-color: hsl(var(--shadow-color) / 40%);
+  --popup-backdrop-color: hsl(var(--shadow-color) / 40%);
   --default-font-family: "Merriweather Sans", sans-serif;
   --default-font-size: 13px;
   --default-font-weight-regular: 300;
@@ -278,5 +279,6 @@
   -webkit-user-select: none;
   user-select: none;
   touch-action: none;
+  overflow-anchor: none;
   cursor: default;
 }</style>

package/package/components/util/popup.svelte

@@ -26,8 +26,9 @@
 
   export let open = writable(false);
 
+  let showDialog = false;
   let showContent = false;
-  let showContentTimer = 0;
+  let closeDialogTimer = 0;
 
   let style = writable({
     inset: undefined,
@@ -45,27 +46,38 @@
   $: {
     if (dialog) {
       if ($open) {
-        window.clearTimeout(showContentTimer);
+        window.clearTimeout(closeDialogTimer);
+        (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
         showContent = true;
-
         dialog.showModal();
+
+        window.requestAnimationFrame(() => {
+          showDialog = true;
+        });
       } else {
-        showContentTimer = window.setTimeout(() => {
+        showDialog = false;
+
+        closeDialogTimer = window.setTimeout(() => {
           showContent = false;
+          dialog?.close();
+          dialog?.remove();
         }, 500);
-
-        dialog.close();
       }
     }
   }
 
   onMount(() => {
-    // Avoid nested dialogs
-    (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
+    dialog.remove();
+
+    // onUnmount
+    return () => {
+      dialog?.close();
+      dialog?.remove();
+    };
   });
 </script>
 
-<dialog class="sui popup" bind:this={dialog} class:open={$open}>
+<dialog class="sui popup" bind:this={dialog} class:open={showDialog}>
   <!-- Prevent the first item in the slot, e.g. a menu item, from being focused by adding `tabindex`
     to the container -->
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
@@ -83,8 +95,10 @@
   </div>
 </dialog>
 
-<style>.popup .content {
-  outline-width: 0 !important;
+<style>.popup.open .content {
+  opacity: 1;
+  transform: translateY(2px);
+  transition-duration: 100ms;
 }
 .popup:not(.open) {
   pointer-events: none;
@@ -93,18 +107,17 @@
   opacity: 0;
   transform: translateY(-8px);
   pointer-events: none;
+  transition-duration: 200ms;
 }
 
 .content {
   position: fixed;
   overflow-y: auto;
+  outline-width: 0 !important;
   color: var(--primary-foreground-color);
-  background-color: var(--secondary-background-color);
+  background-color: var(--secondary-background-color-translucent);
   backdrop-filter: blur(16px);
   box-shadow: 0 8px 16px var(--popup-shadow-color);
   will-change: opacity, transform;
-  transform: translateY(2px);
   transition-property: opacity, transform;
-  transition-duration: 200ms;
-  transition-delay: 100ms;
 }</style>

package/package/styles/variables.scss

@@ -13,6 +13,7 @@
   --content-background-color: hsl(var(--background-color-1-hsl));
   --primary-background-color: hsl(var(--background-color-2-hsl));
   --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));
   --control-background-color: hsl(var(--background-color-1-hsl));
   --disabled-background-color: hsl(var(--background-color-4-hsl));
@@ -22,8 +23,8 @@
   --secondary-border-color: hsl(var(--border-color-2-hsl));
   --control-border-color: hsl(var(--border-color-2-hsl));
   // Shadows
-  --popup-shadow-color: hsl(var(--shadow-color) / 20%);
-  --popup-backdrop-color: hsl(var(--shadow-color) / 10%);
+  --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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -8,6 +8,7 @@
     "build": "svelte-kit sync && svelte-package -o package",
     "build:watch": "svelte-kit sync && svelte-package -o package --watch",
     "preview": "vite preview",
+    "publish": "vite build && npm publish --access public",
     "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 .",
@@ -23,16 +24,16 @@
     "svelte": "^3.55.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.0",
-    "@babel/eslint-parser": "^7.19.1",
+    "@babel/core": "^7.21.3",
+    "@babel/eslint-parser": "^7.21.3",
     "@playwright/test": "^1.31.2",
     "@sveltejs/adapter-auto": "2.0.0",
-    "@sveltejs/kit": "1.9.3",
-    "@sveltejs/package": "^2.0.0",
-    "cspell": "^6.27.0",
-    "eslint": "^8.35.0",
+    "@sveltejs/kit": "1.11.0",
+    "@sveltejs/package": "^2.0.2",
+    "cspell": "^6.29.3",
+    "eslint": "^8.36.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint-config-prettier": "^8.7.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-svelte3": "^4.0.0",
     "npm-run-all": "^4.1.5",
@@ -40,17 +41,17 @@
     "postcss-html": "^1.5.0",
     "prettier": "^2.8.4",
     "prettier-plugin-svelte": "^2.9.0",
-    "sass": "^1.58.3",
+    "sass": "^1.59.3",
     "stylelint": "^15.2.0",
     "stylelint-config-recommended-scss": "^9.0.1",
-    "stylelint-scss": "^4.4.0",
-    "svelte-check": "^3.0.4",
+    "stylelint-scss": "^4.5.0",
+    "svelte-check": "^3.1.4",
     "svelte-i18n": "^3.6.0",
     "svelte-migrate": "^1.1.3",
-    "svelte-preprocess": "^5.0.1",
+    "svelte-preprocess": "^5.0.2",
     "tslib": "^2.5.0",
-    "vite": "^4.1.4",
-    "vitest": "^0.29.2"
+    "vite": "^4.2.0",
+    "vitest": "^0.29.3"
   },
   "exports": {
     "./package.json": "./package.json",