@sveltia/ui 0.8.3 → 0.10.0

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

@@ -7,6 +7,12 @@
 <script>
   import { onMount } from 'svelte';
 
+  /**
+   * Orientation of the app shell’s children.
+   * @type {'horizontal' | 'vertical' | undefined}
+   */
+  export let orientation = undefined;
+
   const stylesheets = [
     // https://fonts.google.com/share?selection.family=Merriweather%20Sans:ital,wght@0,300;0,600;1,300%7CNoto%20Sans%20Mono
     'https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300&family=Noto+Sans+Mono&display=swap',
@@ -15,7 +21,7 @@
     'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block',
   ];
 
-  /** @type {HTMLElement} */
+  /** @type {HTMLElement | undefined} */
   let fontLoader;
 
   onMount(() => {
@@ -23,7 +29,7 @@
     const { dataset } = document.documentElement;
 
     /**
-     *
+     * Apply the Dark or Light theme.
      */
     const applyTheme = () => {
       if (dataset.autoTheming !== 'false') {
@@ -33,9 +39,7 @@
 
     applyTheme();
 
-    /**
-     *
-     */
+    // eslint-disable-next-line jsdoc/require-jsdoc
     mediaQuery.onchange = () => {
       applyTheme();
     };
@@ -65,7 +69,7 @@
 
 <div
   role="none"
-  class="sui app-shell"
+  class="sui app-shell {orientation ?? ''}"
   {...$$restProps}
   on:dragover|preventDefault
   on:drop|preventDefault
@@ -84,74 +88,6 @@
 
 <style global>@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300&family=Noto+Sans+Mono&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
-:global(:root[data-theme=light]),
-:global(:host[data-theme=light]) {
-  --sui-foreground-color-1-hsl: var(--sui-base-hue) 5% 5%;
-  --sui-foreground-color-2-hsl: var(--sui-base-hue) 5% 25%;
-  --sui-foreground-color-3-hsl: var(--sui-base-hue) 5% 35%;
-  --sui-foreground-color-4-hsl: var(--sui-base-hue) 5% 45%;
-  --sui-foreground-color-5-hsl: var(--sui-base-hue) 5% 65%;
-  --sui-background-color-1-hsl: var(--sui-base-hue) 5% 100%;
-  --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%;
-  --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% 50%;
-  --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%;
-  --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
-  --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 45%);
-  --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 40%);
-  --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 80% 35%);
-  --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%);
-  --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
-  --sui-error-color-hue: 0;
-  --sui-warning-color-hue: 40;
-  --sui-info-color-hue: 210;
-  --sui-success-color-hue: 100;
-  --sui-alert-foreground-color-saturation: 85%;
-  --sui-alert-foreground-color-lightness: 25%;
-  --sui-alert-background-color-saturation: 65%;
-  --sui-alert-background-color-lightness: 90%;
-  --sui-alert-border-color-saturation: 48%;
-  --sui-alert-border-color-lightness: 68%;
-}
-
-:global(:root[data-theme=dark]),
-:global(:host[data-theme=dark]) {
-  --sui-foreground-color-1-hsl: var(--sui-base-hue) 10% 95%;
-  --sui-foreground-color-2-hsl: var(--sui-base-hue) 10% 75%;
-  --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 65%;
-  --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 55%;
-  --sui-foreground-color-5-hsl: var(--sui-base-hue) 10% 35%;
-  --sui-background-color-1-hsl: var(--sui-base-hue) 10% 10%;
-  --sui-background-color-2-hsl: var(--sui-base-hue) 10% 12%;
-  --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% 50%;
-  --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%;
-  --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 100% 60%);
-  --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 100% 45%);
-  --sui-primary-accent-color: hsl(var(--sui-base-hue) 100% 40%);
-  --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 100% 35%);
-  --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%);
-  --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
-  --sui-error-color-hue: 0;
-  --sui-warning-color-hue: 40;
-  --sui-info-color-hue: 210;
-  --sui-success-color-hue: 100;
-  --sui-alert-foreground-color-saturation: 85%;
-  --sui-alert-foreground-color-lightness: 75%;
-  --sui-alert-background-color-saturation: 40%;
-  --sui-alert-background-color-lightness: 10%;
-  --sui-alert-border-color-saturation: 38%;
-  --sui-alert-border-color-lightness: 18%;
-}
-
 :global(:root),
 :global(:host) {
   --sui-base-hue: 210;
@@ -290,6 +226,7 @@
   --sui-textbox-singleline-line-height: var(--sui-line-height-compact);
   --sui-textbox-multiline-min-width: 480px;
   --sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
+  --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);
@@ -319,6 +256,146 @@
     --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
   }
 }
+:global(:root[data-theme=light]),
+:global(:host[data-theme=light]) {
+  color-scheme: light;
+  --sui-foreground-color-1-hsl: var(--sui-base-hue) 5% 5%;
+  --sui-foreground-color-2-hsl: var(--sui-base-hue) 5% 25%;
+  --sui-foreground-color-3-hsl: var(--sui-base-hue) 5% 35%;
+  --sui-foreground-color-4-hsl: var(--sui-base-hue) 5% 45%;
+  --sui-foreground-color-5-hsl: var(--sui-base-hue) 5% 65%;
+  --sui-background-color-1-hsl: var(--sui-base-hue) 5% 100%;
+  --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%;
+  --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% 50%;
+  --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%;
+  --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
+  --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 45%);
+  --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 40%);
+  --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 80% 35%);
+  --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%);
+  --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
+  --sui-error-color-hue: 0;
+  --sui-warning-color-hue: 40;
+  --sui-info-color-hue: 210;
+  --sui-success-color-hue: 100;
+  --sui-alert-foreground-color-saturation: 85%;
+  --sui-alert-foreground-color-lightness: 25%;
+  --sui-alert-background-color-saturation: 65%;
+  --sui-alert-background-color-lightness: 90%;
+  --sui-alert-border-color-saturation: 48%;
+  --sui-alert-border-color-lightness: 68%;
+}
+:global(:root[data-theme=dark]),
+:global(:host[data-theme=dark]) {
+  color-scheme: dark;
+  --sui-foreground-color-1-hsl: var(--sui-base-hue) 10% 95%;
+  --sui-foreground-color-2-hsl: var(--sui-base-hue) 10% 75%;
+  --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 65%;
+  --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 55%;
+  --sui-foreground-color-5-hsl: var(--sui-base-hue) 10% 35%;
+  --sui-background-color-1-hsl: var(--sui-base-hue) 10% 10%;
+  --sui-background-color-2-hsl: var(--sui-base-hue) 10% 12%;
+  --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% 50%;
+  --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%;
+  --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 100% 60%);
+  --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 100% 45%);
+  --sui-primary-accent-color: hsl(var(--sui-base-hue) 100% 40%);
+  --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 100% 35%);
+  --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%);
+  --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
+  --sui-error-color-hue: 0;
+  --sui-warning-color-hue: 40;
+  --sui-info-color-hue: 210;
+  --sui-success-color-hue: 100;
+  --sui-alert-foreground-color-saturation: 85%;
+  --sui-alert-foreground-color-lightness: 75%;
+  --sui-alert-background-color-saturation: 40%;
+  --sui-alert-background-color-lightness: 10%;
+  --sui-alert-border-color-saturation: 38%;
+  --sui-alert-border-color-lightness: 18%;
+}
+@media (prefers-color-scheme: light) {
+  :global(:root:not([data-theme])),
+  :global(:host:not([data-theme])) {
+    color-scheme: light;
+    --sui-foreground-color-1-hsl: var(--sui-base-hue) 5% 5%;
+    --sui-foreground-color-2-hsl: var(--sui-base-hue) 5% 25%;
+    --sui-foreground-color-3-hsl: var(--sui-base-hue) 5% 35%;
+    --sui-foreground-color-4-hsl: var(--sui-base-hue) 5% 45%;
+    --sui-foreground-color-5-hsl: var(--sui-base-hue) 5% 65%;
+    --sui-background-color-1-hsl: var(--sui-base-hue) 5% 100%;
+    --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%;
+    --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% 50%;
+    --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%;
+    --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
+    --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 45%);
+    --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 40%);
+    --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 80% 35%);
+    --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%);
+    --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
+    --sui-error-color-hue: 0;
+    --sui-warning-color-hue: 40;
+    --sui-info-color-hue: 210;
+    --sui-success-color-hue: 100;
+    --sui-alert-foreground-color-saturation: 85%;
+    --sui-alert-foreground-color-lightness: 25%;
+    --sui-alert-background-color-saturation: 65%;
+    --sui-alert-background-color-lightness: 90%;
+    --sui-alert-border-color-saturation: 48%;
+    --sui-alert-border-color-lightness: 68%;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  :global(:root:not([data-theme])),
+  :global(:host:not([data-theme])) {
+    color-scheme: dark;
+    --sui-foreground-color-1-hsl: var(--sui-base-hue) 10% 95%;
+    --sui-foreground-color-2-hsl: var(--sui-base-hue) 10% 75%;
+    --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 65%;
+    --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 55%;
+    --sui-foreground-color-5-hsl: var(--sui-base-hue) 10% 35%;
+    --sui-background-color-1-hsl: var(--sui-base-hue) 10% 10%;
+    --sui-background-color-2-hsl: var(--sui-base-hue) 10% 12%;
+    --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% 50%;
+    --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%;
+    --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 100% 60%);
+    --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 100% 45%);
+    --sui-primary-accent-color: hsl(var(--sui-base-hue) 100% 40%);
+    --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 100% 35%);
+    --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%);
+    --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
+    --sui-error-color-hue: 0;
+    --sui-warning-color-hue: 40;
+    --sui-info-color-hue: 210;
+    --sui-success-color-hue: 100;
+    --sui-alert-foreground-color-saturation: 85%;
+    --sui-alert-foreground-color-lightness: 75%;
+    --sui-alert-background-color-saturation: 40%;
+    --sui-alert-background-color-lightness: 10%;
+    --sui-alert-border-color-saturation: 38%;
+    --sui-alert-border-color-lightness: 18%;
+  }
+}
 
 :global(.material-symbols-outlined) {
   font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
@@ -342,6 +419,7 @@
   :global(*),
   :global(::before),
   :global(::after) {
+    scroll-behavior: auto;
     transition-duration: 1ms !important;
   }
 }
@@ -446,4 +524,14 @@
   user-select: none;
   touch-action: none;
   cursor: default;
+}
+:global(.app-shell.horizontal) {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+}
+:global(.app-shell.vertical) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }</style>

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

@@ -8,6 +8,7 @@
  */
 export default class AppShell extends SvelteComponent<{
     [x: string]: any;
+    orientation?: "vertical" | "horizontal" | undefined;
 }, {
     dragover: DragEvent;
     drop: DragEvent;
@@ -24,6 +25,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        orientation?: 'horizontal' | 'vertical' | undefined;
     };
     events: {
         dragover: DragEvent;

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

@@ -7,9 +7,9 @@
  */
 export default class Group extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    disabled?: boolean;
-    hidden?: boolean;
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -23,8 +23,8 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        disabled?: boolean;
+        class?: string | undefined;
+        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
     };
     events: {

package/package/components/util/modal.svelte

@@ -45,14 +45,18 @@
   export let keepContent = false;
   /**
    * A reference to the `<dialog>` element.
-   * @type {HTMLDialogElement}
+   * @type {HTMLDialogElement | undefined}
    */
   export let dialog = undefined;
   /**
    * Close the modal.
-   * @param {string} returnValue Return value to be used for `<dialog>`.
+   * @param {string} returnValue - Return value to be used for `<dialog>`.
    */
   export const close = (returnValue) => {
+    if (!dialog) {
+      return;
+    }
+
     dialog.returnValue = returnValue;
     open = false;
   };
@@ -69,7 +73,8 @@
   const waitForTransition = async () =>
     new Promise((resolve) => {
       /**
-       * @param {TransitionEvent} event `transition` event.
+       * Transition event listener.
+       * @param {TransitionEvent} event - `transition` event.
        */
       const listener = (event) => {
         if (event.target === dialog) {
@@ -78,13 +83,17 @@
         }
       };
 
-      dialog.addEventListener('transitionend', listener);
+      dialog?.addEventListener('transitionend', listener);
     });
 
   /**
    * Show the modal.
    */
   const openDialog = async () => {
+    if (!dialog) {
+      return;
+    }
+
     dispatch('opening');
     (document.querySelector('.sui.app-shell') ?? document.body).appendChild(dialog);
     showContent = true;
@@ -102,6 +111,10 @@
    * Hide the modal.
    */
   const closeDialog = async () => {
+    if (!dialog) {
+      return;
+    }
+
     dispatch('closing');
     setActiveClass = false;
     setOpenClass = false;
@@ -110,12 +123,12 @@
     dialog.close();
     dialog.remove();
 
-    if (['ok', 'cancel'].includes(dialog?.returnValue)) {
+    if (['ok', 'cancel'].includes(dialog.returnValue)) {
       dispatch(dialog?.returnValue);
     }
 
-    dispatch('close', dialog?.returnValue);
-    dialog.returnValue = undefined;
+    dispatch('close', dialog.returnValue);
+    dialog.returnValue = '';
   };
 
   /**
@@ -138,7 +151,7 @@
   }
 
   onMount(() => {
-    dialog.remove();
+    dialog?.remove();
 
     // onUnmount
     return () => {
@@ -157,7 +170,11 @@
   {...$$restProps}
   bind:this={dialog}
   on:click={({ target }) => {
-    if (lightDismiss && /** @type {HTMLElement?} */ (target)?.matches('dialog')) {
+    if (
+      dialog &&
+      lightDismiss &&
+      /** @type {HTMLElement | undefined} */ (target)?.matches('dialog')
+    ) {
       dialog.returnValue = 'cancel';
       open = false;
     }

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

@@ -4,15 +4,15 @@
 /** A generic modal top-layer helper based on the HTML `<dialog>` element. */
 export default class Modal extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    close?: (returnValue: string) => void;
-    dialog?: HTMLDialogElement;
-    role?: "dialog" | "none" | "alertdialog";
-    open?: boolean;
-    showBackdrop?: boolean;
-    lightDismiss?: boolean;
-    escapeDismiss?: boolean;
-    keepContent?: boolean;
+    class?: string | undefined;
+    close?: ((returnValue: string) => void) | undefined;
+    dialog?: HTMLDialogElement | undefined;
+    role?: "dialog" | "none" | "alertdialog" | undefined;
+    open?: boolean | undefined;
+    showBackdrop?: boolean | undefined;
+    lightDismiss?: boolean | undefined;
+    escapeDismiss?: boolean | undefined;
+    keepContent?: boolean | undefined;
 }, {
     opening: CustomEvent<any>;
     open: CustomEvent<any>;
@@ -26,29 +26,29 @@ export default class Modal extends SvelteComponent<{
 }> {
     get close(): (returnValue: string) => void;
     /**accessor*/
-    set class(arg: string);
-    get class(): string;
+    set class(arg: string | undefined);
+    get class(): string | undefined;
     /**accessor*/
-    set role(arg: "dialog" | "none" | "alertdialog");
-    get role(): "dialog" | "none" | "alertdialog";
+    set role(arg: "dialog" | "none" | "alertdialog" | undefined);
+    get role(): "dialog" | "none" | "alertdialog" | undefined;
     /**accessor*/
-    set open(arg: boolean);
-    get open(): boolean;
+    set open(arg: boolean | undefined);
+    get open(): boolean | undefined;
     /**accessor*/
-    set showBackdrop(arg: boolean);
-    get showBackdrop(): boolean;
+    set showBackdrop(arg: boolean | undefined);
+    get showBackdrop(): boolean | undefined;
     /**accessor*/
-    set lightDismiss(arg: boolean);
-    get lightDismiss(): boolean;
+    set lightDismiss(arg: boolean | undefined);
+    get lightDismiss(): boolean | undefined;
     /**accessor*/
-    set escapeDismiss(arg: boolean);
-    get escapeDismiss(): boolean;
+    set escapeDismiss(arg: boolean | undefined);
+    get escapeDismiss(): boolean | undefined;
     /**accessor*/
-    set keepContent(arg: boolean);
-    get keepContent(): boolean;
+    set keepContent(arg: boolean | undefined);
+    get keepContent(): boolean | undefined;
     /**accessor*/
-    set dialog(arg: HTMLDialogElement);
-    get dialog(): HTMLDialogElement;
+    set dialog(arg: HTMLDialogElement | undefined);
+    get dialog(): HTMLDialogElement | undefined;
 }
 export type ModalProps = typeof __propDef.props;
 export type ModalEvents = typeof __propDef.events;
@@ -57,15 +57,15 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        close?: (returnValue: string) => void;
-        dialog?: HTMLDialogElement;
-        role?: 'dialog' | 'alertdialog' | 'none';
-        open?: boolean;
-        showBackdrop?: boolean;
-        lightDismiss?: boolean;
-        escapeDismiss?: boolean;
-        keepContent?: boolean;
+        class?: string | undefined;
+        close?: ((returnValue: string) => void) | undefined;
+        dialog?: HTMLDialogElement | undefined;
+        role?: "dialog" | "none" | "alertdialog" | undefined;
+        open?: boolean | undefined;
+        showBackdrop?: boolean | undefined;
+        lightDismiss?: boolean | undefined;
+        escapeDismiss?: boolean | undefined;
+        keepContent?: boolean | undefined;
     };
     events: {
         opening: CustomEvent<any>;

package/package/components/util/popup.svelte

@@ -22,14 +22,19 @@
    * @type {import('svelte/store').Writable<boolean>}
    */
   export let open = writable(false);
+  /**
+   * Whether to show the backdrop.
+   * @type {boolean}
+   */
+  export let showBackdrop = false;
   /**
    * A reference to the anchor element that opens the popup. Typically a `<button>`.
-   * @type {HTMLElement}
+   * @type {HTMLElement | undefined}
    */
   export let anchor;
   /**
    * A reference to the content element.
-   * @type {HTMLElement}
+   * @type {HTMLElement | undefined}
    */
   export let content = undefined;
   /**
@@ -37,6 +42,11 @@
    * @type {PopupPosition}
    */
   export let position = 'bottom-left';
+  /**
+   * The base element of {@link position}. If omitted, this will be {@link anchor}.
+   * @type {HTMLElement | undefined}
+   */
+  export let positionBaseElement = undefined;
   /**
    * Whether to show the popup at the center of the screen on mobile/tablet and ignore the defined
    * dropdown `position`.
@@ -57,7 +67,7 @@
   /**
    * The type of the content displayed in the popup, defined with the `aria-haspopup` attribute on
    * the anchor element.
-   * @type {string}
+   * @type {string | undefined}
    * @see https://w3c.github.io/aria/#aria-haspopup
    */
   let contentType;
@@ -74,8 +84,8 @@
 
   $: {
     if (anchor && modal?.dialog) {
-      ({ open, style } = activatePopup(anchor, modal.dialog, position));
-      contentType = anchor.getAttribute('aria-haspopup');
+      ({ open, style } = activatePopup(anchor, modal.dialog, position, positionBaseElement));
+      contentType = anchor.getAttribute('aria-haspopup') ?? undefined;
     }
   }
 
@@ -90,7 +100,7 @@
   role="none"
   class="popup"
   bind:open={$open}
-  showBackdrop={touch}
+  showBackdrop={showBackdrop ?? touch}
   lightDismiss={true}
   keepContent={true}
   bind:this={modal}
@@ -104,6 +114,10 @@
   on:open={async () => {
     await sleep(100);
 
+    if (!content) {
+      return;
+    }
+
     const target = /** @type {HTMLElement} */ (
       content.querySelector('[tabindex]:not([aria-disabled="true"])')
     );
@@ -131,7 +145,44 @@
   </div>
 </Modal>
 
-<style>.content.touch {
+<style>.content {
+  position: absolute;
+  overflow-y: auto;
+  outline-width: 0 !important;
+  color: var(--sui-primary-foreground-color);
+  background-color: var(--sui-secondary-background-color-translucent);
+  box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
+  -webkit-backdrop-filter: blur(16px);
+  backdrop-filter: blur(16px);
+  transition-property: opacity, transform;
+}
+.content.menu {
+  border-width: var(--sui-menu-border-width, 1px);
+  border-style: var(--sui-menu-border-style, solid);
+  border-color: var(--sui-menu-border-width, var(--sui-secondary-border-color));
+  border-radius: var(--sui-menu-border-radius, 4px);
+  padding: var(--sui-menu-padding, 4px);
+}
+.content.menu :global(.sui.menu) {
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  background-color: transparent;
+}
+.content.listbox {
+  border-width: var(--sui-listbox-border-width, 1px);
+  border-style: var(--sui-listbox-border-style, solid);
+  border-color: var(--sui-listbox-border-width, var(--sui-secondary-border-color));
+  border-radius: var(--sui-listbox-border-radius, 4px);
+  padding: var(--sui-listbox-padding, 4px);
+}
+.content.listbox :global(.sui.listbox) {
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  background-color: transparent;
+}
+.content.touch {
   position: static;
   border-width: 0 !important;
   border-radius: 4px !important;
@@ -159,29 +210,4 @@
   transition-duration: 300ms;
   opacity: 0;
   transform: translateY(-8px);
-}
-
-.content {
-  position: absolute;
-  overflow-y: auto;
-  outline-width: 0 !important;
-  color: var(--sui-primary-foreground-color);
-  background-color: var(--sui-secondary-background-color-translucent);
-  box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
-  -webkit-backdrop-filter: blur(16px);
-  backdrop-filter: blur(16px);
-  transition-property: opacity, transform;
-}
-.content.listbox, .content.menu {
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--sui-secondary-border-color);
-  border-radius: 4px;
-}
-.content.listbox :global(.sui.listbox),
-.content.listbox :global(.sui.menu), .content.menu :global(.sui.listbox),
-.content.menu :global(.sui.menu) {
-  border-width: 0;
-  border-radius: 0;
-  background-color: transparent;
 }</style>