@sveltia/ui 0.10.3 → 0.10.5

package/package/components/dialog/dialog.svelte

@@ -110,6 +110,7 @@
   on:closing
   on:close
 >
+  <slot name="extra-content" slot="extra-content" />
   <div role="none" class="content {className} {size}">
     {#if title || showClose || $$slots.header || $$slots['header-extra']}
       <div role="none" class="header">
@@ -183,6 +184,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
   border-radius: var(--sui-dialog-content-border-radius, 4px);
   max-width: calc(100dvw - var(--sui-dialog-content-margin, 16px) * 2);
   background-color: var(--sui-dialog-content-background-color, var(--sui-secondary-background-color-translucent));
@@ -200,8 +202,8 @@
   transform: scale(90%);
 }
 .content.small {
-  width: var(--sui-dialog-small-content-width, 400px);
-  max-height: var(--sui-dialog-small-content-max-height, 400px);
+  width: var(--sui-dialog-small-content-width, var(--sui-dialog-content-width, 400px));
+  max-height: var(--sui-dialog-small-content-max-height, var(--sui-dialog-content-max-height, 400px));
 }
 @media (max-height: 400px) {
   .content.small {
@@ -209,8 +211,8 @@
   }
 }
 .content.medium {
-  width: var(--sui-dialog-medium-content-width, 600px);
-  max-height: var(--sui-dialog-medium-content-max-height, 600px);
+  width: var(--sui-dialog-medium-content-width, var(--sui-dialog-content-width, 600px));
+  max-height: var(--sui-dialog-medium-content-max-height, var(--sui-dialog-content-max-height, 600px));
 }
 @media (max-height: 600px) {
   .content.medium {
@@ -218,8 +220,8 @@
   }
 }
 .content.large {
-  width: var(--sui-dialog-large-content-width, 800px);
-  max-height: var(--sui-dialog-large-content-max-height, 800px);
+  width: var(--sui-dialog-large-content-width, var(--sui-dialog-content-width, 800px));
+  max-height: var(--sui-dialog-large-content-max-height, var(--sui-dialog-content-max-height, 800px));
 }
 @media (max-height: 800px) {
   .content.large {
@@ -227,8 +229,8 @@
   }
 }
 .content.x-large {
-  width: var(--sui-dialog-x-large-content-width, 1000px);
-  max-height: var(--sui-dialog-x-large-content-max-height, 1000px);
+  width: var(--sui-dialog-x-large-content-width, var(--sui-dialog-content-width, 1000px));
+  max-height: var(--sui-dialog-x-large-content-max-height, var(--sui-dialog-content-max-height, 1000px));
 }
 @media (max-height: 1000px) {
   .content.x-large {

package/package/components/dialog/dialog.svelte.d.ts

@@ -31,6 +31,9 @@ export default class Dialog extends SvelteComponent<{
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
+    'extra-content': {
+        slot: string;
+    };
     header: {};
     'header-extra': {};
     'close-icon': {
@@ -73,6 +76,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        'extra-content': {
+            slot: string;
+        };
         header: {};
         'header-extra': {};
         'close-icon': {

package/package/components/drawer/drawer.svelte

@@ -84,6 +84,7 @@
   on:closing
   on:close
 >
+  <slot name="extra-content" slot="extra-content" />
   <div role="none" class="content {className} {size} {position} {orientation}">
     <div role="none" class="extra-control">
       {#if showClose === 'outside'}
@@ -149,6 +150,7 @@
   position: absolute;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
   max-width: 100dvw;
   max-height: 100dvh;
   background-color: var(--sui-secondary-background-color-translucent);
@@ -171,11 +173,11 @@
   transition-duration: 300ms;
 }
 .content.right {
-  inset: 0 0 0 auto;
+  inset: var(--sui-drawer-right-content-inset, 0 0 0 auto);
   border-radius: var(--sui-drawer-right-content-border-radius, var(--sui-drawer-content-border-radius, 4px 0 0 4px));
 }
 .content.right.full {
-  border-radius: var(--sui-drawer-right-full-content-border-radius, 0);
+  border-radius: var(--sui-drawer-right-full-content-border-radius, var(--sui-drawer-right-content-border-radius, 0));
 }
 .content.right .extra-control {
   inset: 0 100% auto auto;
@@ -184,11 +186,11 @@
   transform: translateX(105%);
 }
 .content.left {
-  inset: 0 auto 0 0;
+  inset: var(--sui-drawer-left-content-inset, 0 auto 0 0);
   border-radius: var(--sui-drawer-left-content-border-radius, var(--sui-drawer-content-border-radius, 0 4px 4px 0));
 }
 .content.left.full {
-  border-radius: var(--sui-drawer-left-full-content-border-radius, 0);
+  border-radius: var(--sui-drawer-left-full-content-border-radius, var(--sui-drawer-left-content-border-radius, 0));
 }
 .content.left .extra-control {
   inset: 0 auto auto 100%;
@@ -196,24 +198,28 @@
 :global(dialog:not(.open)) .content.left {
   transform: translateX(-105%);
 }
-.content.vertical {
-  max-width: var(--sui-drawer-vertical-max-width, calc(100dvw - 56px));
-  height: var(--sui-drawer-vertical-height, 100dvh);
-}
 :global(dialog.open) .content.vertical {
   transform: translateX(0%);
 }
 .content.vertical.small {
-  width: var(--sui-drawer-vertical-small-width, 400px);
+  width: var(--sui-drawer-vertical-small-width, var(--sui-drawer-vertical-width, 400px));
+  max-width: var(--sui-drawer-vertical-small-max-width, var(--sui-drawer-vertical-max-width, calc(100dvw - 56px)));
+  height: var(--sui-drawer-vertical-small-height, var(--sui-drawer-vertical-height, 100dvh));
 }
 .content.vertical.medium {
-  width: var(--sui-drawer-vertical-medium-width, 600px);
+  width: var(--sui-drawer-vertical-medium-width, var(--sui-drawer-vertical-width, 600px));
+  max-width: var(--sui-drawer-vertical-medium-max-width, var(--sui-drawer-vertical-max-width, calc(100dvw - 56px)));
+  height: var(--sui-drawer-vertical-medium-height, var(--sui-drawer-vertical-height, 100dvh));
 }
 .content.vertical.large {
-  width: var(--sui-drawer-vertical-large-width, 800px);
+  width: var(--sui-drawer-vertical-large-width, var(--sui-drawer-vertical-width, 800px));
+  max-width: var(--sui-drawer-vertical-large-max-width, var(--sui-drawer-vertical-max-width, calc(100dvw - 56px)));
+  height: var(--sui-drawer-vertical-large-height, var(--sui-drawer-vertical-height, 100dvh));
 }
 .content.vertical.x-large {
-  width: var(--sui-drawer-vertical-x-large-width, 1000px);
+  width: var(--sui-drawer-vertical-x-large-width, var(--sui-drawer-vertical-width, 1000px));
+  max-width: var(--sui-drawer-vertical-x-large-max-width, var(--sui-drawer-vertical-max-width, calc(100dvw - 56px)));
+  height: var(--sui-drawer-vertical-x-large-height, var(--sui-drawer-vertical-height, 100dvh));
 }
 .content.vertical.full {
   width: 100dvw;
@@ -221,11 +227,11 @@
   height: 100dvh;
 }
 .content.top {
-  inset: 0 0 auto 0;
+  inset: var(--sui-drawer-top-content-inset, 0 0 auto 0);
   border-radius: var(--sui-drawer-top-content-border-radius, var(--sui-drawer-content-border-radius, 0 0 4px 4px));
 }
 .content.top.full {
-  border-radius: var(--sui-drawer-top-full-content-border-radius, 0);
+  border-radius: var(--sui-drawer-top-full-content-border-radius, var(--sui-drawer-top-content-border-radius, 0));
 }
 .content.top .extra-control {
   inset: 100% 0 auto auto;
@@ -234,11 +240,11 @@
   transform: translateY(-105%);
 }
 .content.bottom {
-  inset: auto 0 0 0;
+  inset: var(--sui-drawer-bottom-content-inset, auto 0 0 0);
   border-radius: var(--sui-drawer-bottom-content-border-radius, var(--sui-drawer-content-border-radius, 4px 4px 0 0));
 }
 .content.bottom.full {
-  border-radius: var(--sui-drawer-bottom-full-content-border-radius, 0);
+  border-radius: var(--sui-drawer-bottom-full-content-border-radius, var(--sui-drawer-bottom-content-border-radius, 0));
 }
 .content.bottom .extra-control {
   inset: auto 0 100% auto;
@@ -246,24 +252,28 @@
 :global(dialog:not(.open)) .content.bottom {
   transform: translateY(105%);
 }
-.content.horizontal {
-  width: var(--sui-drawer-horizontal-width, 100dvw);
-  max-height: var(--sui-drawer-horizontal-max-height, calc(100dvh - 56px));
-}
 :global(dialog.open) .content.horizontal {
   transform: translateY(0%);
 }
 .content.horizontal.small {
-  height: var(--sui-drawer-horizontal-small-height, 400px);
+  width: var(--sui-drawer-horizontal-small-width, var(--sui-drawer-horizontal-width, 100dvw));
+  height: var(--sui-drawer-horizontal-small-height, var(--sui-drawer-horizontal-height, 400px));
+  max-height: var(--sui-drawer-horizontal-small-max-height, var(--sui-drawer-horizontal-max-height, calc(100dvh - 56px)));
 }
 .content.horizontal.medium {
-  height: var(--sui-drawer-horizontal-medium-height, 600px);
+  width: var(--sui-drawer-horizontal-medium-width, var(--sui-drawer-horizontal-width, 100dvw));
+  height: var(--sui-drawer-horizontal-medium-height, var(--sui-drawer-horizontal-height, 600px));
+  max-height: var(--sui-drawer-horizontal-medium-max-height, var(--sui-drawer-horizontal-max-height, calc(100dvh - 56px)));
 }
 .content.horizontal.large {
-  height: var(--sui-drawer-horizontal-large-height, 800px);
+  width: var(--sui-drawer-horizontal-large-width, var(--sui-drawer-horizontal-width, 100dvw));
+  height: var(--sui-drawer-horizontal-large-height, var(--sui-drawer-horizontal-height, 800px));
+  max-height: var(--sui-drawer-horizontal-large-max-height, var(--sui-drawer-horizontal-max-height, calc(100dvh - 56px)));
 }
 .content.horizontal.x-large {
-  height: var(--sui-drawer-horizontal-x-large-height, 1000px);
+  width: var(--sui-drawer-horizontal-x-large-width, var(--sui-drawer-horizontal-width, 100dvw));
+  height: var(--sui-drawer-horizontal-x-large-height, var(--sui-drawer-horizontal-height, 1000px));
+  max-height: var(--sui-drawer-horizontal-x-large-max-height, var(--sui-drawer-horizontal-max-height, calc(100dvh - 56px)));
 }
 .content.horizontal.full {
   width: 100dvw;

package/package/components/drawer/drawer.svelte.d.ts

@@ -26,6 +26,9 @@ export default class Drawer extends SvelteComponent<{
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
+    'extra-content': {
+        slot: string;
+    };
     'close-button': {
         slot: string;
     };
@@ -62,6 +65,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        'extra-content': {
+            slot: string;
+        };
         'close-button': {
             slot: string;
         };

package/package/components/util/modal.svelte

@@ -6,6 +6,7 @@
 
 <script>
   import { createEventDispatcher, onMount } from 'svelte';
+  import { sleep } from '../../services/util';
 
   /**
    * The `class` attribute on the `<dialog>` element.
@@ -98,13 +99,11 @@
     (document.querySelector('.sui.app-shell') ?? document.body).appendChild(dialog);
     showContent = true;
     dialog.showModal();
-
-    window.requestAnimationFrame(async () => {
-      dispatch('open');
-      setOpenClass = true;
-      await waitForTransition();
-      setActiveClass = true;
-    });
+    dispatch('open');
+    await sleep(100);
+    setOpenClass = true;
+    await waitForTransition();
+    setActiveClass = true;
   };
 
   /**
@@ -186,7 +185,7 @@
     }
   }}
 >
-  <slot name="always-show" />
+  <slot name="extra-content" />
   {#if showContent || keepContent}
     <slot />
   {/if}

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

@@ -21,7 +21,7 @@ export default class Modal extends SvelteComponent<{
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
-    'always-show': {};
+    'extra-content': {};
     default: {};
 }> {
     get close(): (returnValue: string) => void;
@@ -76,7 +76,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        'always-show': {};
+        'extra-content': {};
         default: {};
     };
 };

package/package/components/util/popup.svelte

@@ -130,6 +130,7 @@
     }
   }}
 >
+  <slot name="extra-content" slot="extra-content" />
   <div
     role="none"
     class="content {className} {contentType}"

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

@@ -22,6 +22,9 @@ export default class Popup extends SvelteComponent<{
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
+    'extra-content': {
+        slot: string;
+    };
     default: {};
 }> {
     /**accessor*/
@@ -76,6 +79,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        'extra-content': {
+            slot: string;
+        };
         default: {};
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.10.3",
+  "version": "0.10.5",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -23,13 +23,13 @@
     "test:unit": "vitest"
   },
   "dependencies": {
-    "svelte": "^4.2.8"
+    "svelte": "^4.2.9"
   },
   "devDependencies": {
-    "@playwright/test": "^1.40.1",
-    "@sveltejs/adapter-auto": "^3.1.0",
-    "@sveltejs/kit": "^2.3.2",
-    "@sveltejs/package": "^2.2.5",
+    "@playwright/test": "^1.41.1",
+    "@sveltejs/adapter-auto": "^3.1.1",
+    "@sveltejs/kit": "^2.4.1",
+    "@sveltejs/package": "^2.2.6",
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "cspell": "^8.3.2",
     "eslint": "^8.56.0",
@@ -41,18 +41,18 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.33",
     "postcss-html": "^1.6.0",
-    "prettier": "^3.2.2",
+    "prettier": "^3.2.4",
     "prettier-plugin-svelte": "^3.1.2",
-    "sass": "^1.69.7",
-    "stylelint": "^16.1.0",
+    "sass": "^1.70.0",
+    "stylelint": "^16.2.0",
     "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-scss": "^6.0.0",
     "svelte-check": "^3.6.3",
     "svelte-i18n": "^4.0.0",
     "svelte-preprocess": "^5.1.3",
     "tslib": "^2.6.2",
-    "vite": "^5.0.11",
-    "vitest": "^1.2.0"
+    "vite": "^5.0.12",
+    "vitest": "^1.2.1"
   },
   "exports": {
     "./package.json": "./package.json",