npm - @sveltia/ui - Versions diffs - 0.2.0 → 0.2.2 - Mend

@sveltia/ui 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (107) hide show

package/package/components/composite/calendar.svelte +239 -0
package/package/components/composite/calendar.svelte.d.ts +27 -0
package/package/components/composite/checkbox-group.svelte +43 -0
package/package/components/composite/checkbox-group.svelte.d.ts +34 -0
package/package/components/composite/combobox.svelte +208 -0
package/package/components/composite/combobox.svelte.d.ts +47 -0
package/package/components/composite/disclosure.svelte +60 -0
package/package/components/composite/disclosure.svelte.d.ts +35 -0
package/package/components/composite/grid.svelte +24 -0
package/package/components/composite/grid.svelte.d.ts +31 -0
package/package/components/composite/listbox.svelte +63 -0
package/package/components/composite/listbox.svelte.d.ts +52 -0
package/package/components/composite/menu-item-group.svelte +31 -0
package/package/components/composite/menu-item-group.svelte.d.ts +33 -0
package/package/components/composite/menu.svelte +44 -0
package/package/components/composite/menu.svelte.d.ts +41 -0
package/package/components/composite/radio-button-group.svelte +45 -0
package/package/components/composite/radio-button-group.svelte.d.ts +36 -0
package/package/components/composite/select-button-group.svelte +71 -0
package/package/components/composite/select-button-group.svelte.d.ts +44 -0
package/package/components/composite/select.svelte +34 -0
package/package/components/composite/select.svelte.d.ts +38 -0
package/package/components/composite/tab-list.svelte +76 -0
package/package/components/composite/tab-list.svelte.d.ts +55 -0
package/package/components/core/button.svelte +222 -0
package/package/components/core/button.svelte.d.ts +109 -0
package/package/components/core/checkbox.svelte +114 -0
package/package/components/core/checkbox.svelte.d.ts +45 -0
package/package/components/core/dialog.svelte +288 -0
package/package/components/core/dialog.svelte.d.ts +73 -0
package/package/components/core/drawer.svelte +338 -0
package/package/components/core/drawer.svelte.d.ts +59 -0
package/package/components/core/grid-cell.svelte +14 -0
package/package/components/core/grid-cell.svelte.d.ts +29 -0
package/package/components/core/group.svelte +31 -0
package/package/components/core/group.svelte.d.ts +33 -0
package/package/components/core/icon.svelte +21 -0
package/package/components/core/icon.svelte.d.ts +27 -0
package/package/components/core/menu-button.svelte +57 -0
package/package/components/core/menu-button.svelte.d.ts +46 -0
package/package/components/core/menu-item-checkbox.svelte +24 -0
package/package/components/core/menu-item-checkbox.svelte.d.ts +34 -0
package/package/components/core/menu-item-radio.svelte +19 -0
package/package/components/core/menu-item-radio.svelte.d.ts +34 -0
package/package/components/core/menu-item.svelte +113 -0
package/package/components/core/menu-item.svelte.d.ts +44 -0
package/package/components/core/number-input.svelte +112 -0
package/package/components/core/number-input.svelte.d.ts +42 -0
package/package/components/core/option.svelte +65 -0
package/package/components/core/option.svelte.d.ts +60 -0
package/package/components/core/password-input.svelte +81 -0
package/package/components/core/password-input.svelte.d.ts +36 -0
package/package/components/core/radio-button.svelte +93 -0
package/package/components/core/radio-button.svelte.d.ts +37 -0
package/package/components/core/row-group.svelte +14 -0
package/package/components/core/row-group.svelte.d.ts +29 -0
package/package/components/core/row.svelte +14 -0
package/package/components/core/row.svelte.d.ts +33 -0
package/package/components/core/search-bar.svelte +91 -0
package/package/components/core/search-bar.svelte.d.ts +49 -0
package/package/components/core/select-button.svelte +31 -0
package/package/components/core/select-button.svelte.d.ts +52 -0
package/package/components/core/separator.svelte +28 -0
package/package/components/core/separator.svelte.d.ts +26 -0
package/package/components/core/slider.svelte +271 -0
package/package/components/core/slider.svelte.d.ts +51 -0
package/package/components/core/spacer.svelte +22 -0
package/package/components/core/spacer.svelte.d.ts +25 -0
package/package/components/core/switch.svelte +86 -0
package/package/components/core/switch.svelte.d.ts +37 -0
package/package/components/core/tab-panel.svelte +23 -0
package/package/components/core/tab-panel.svelte.d.ts +33 -0
package/package/components/core/tab.svelte +22 -0
package/package/components/core/tab.svelte.d.ts +45 -0
package/package/components/core/text-area.svelte +90 -0
package/package/components/core/text-area.svelte.d.ts +57 -0
package/package/components/core/text-input.svelte +146 -0
package/package/components/core/text-input.svelte.d.ts +71 -0
package/package/components/core/toolbar.svelte +74 -0
package/package/components/core/toolbar.svelte.d.ts +35 -0
package/package/components/editor/markdown.svelte +78 -0
package/package/components/editor/markdown.svelte.d.ts +25 -0
package/package/components/helpers/group.d.ts +37 -0
package/package/components/helpers/group.js +246 -0
package/package/components/helpers/popup.d.ts +31 -0
package/package/components/helpers/popup.js +165 -0
package/package/components/helpers/util.d.ts +1 -0
package/package/components/helpers/util.js +8 -0
package/package/components/util/app-shell.svelte +354 -0
package/package/components/util/app-shell.svelte.d.ts +38 -0
package/package/components/util/misc.d.ts +2 -0
package/package/components/util/misc.js +22 -0
package/package/components/util/popup.svelte +155 -0
package/package/components/util/popup.svelte.d.ts +53 -0
package/package/components/util/portal.svelte +34 -0
package/package/components/util/portal.svelte.d.ts +28 -0
package/package/index.d.ts +43 -0
package/package/index.js +68 -0
package/package/locales/en.d.ts +42 -0
package/package/locales/en.js +41 -0
package/package/locales/ja.d.ts +42 -0
package/package/locales/ja.js +41 -0
package/package/styles/core.scss +134 -0
package/package/styles/variables.scss +184 -0
package/package/typedef.d.ts +0 -0
package/package/typedef.js +0 -0
package/package.json +2 -3

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

@@ -0,0 +1,354 @@
+<!--
+  @component
+  Provide an application’s shell that makes the web app more like a native app. It also handles the
+  dark/light mode switching. This component has to be placed directly under `<body>` (or
+  `<div style="display:contents">` in a SvelteKit app).
+-->
+<script>
+  import { onMount } from 'svelte';
+  onMount(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const { dataset } = document.documentElement;
+    const applyTheme = () => {
+      if (dataset.autoTheming !== 'false') {
+        dataset.theme = mediaQuery.matches ? 'dark' : 'light';
+      }
+    };
+    applyTheme();
+    mediaQuery.onchange = () => {
+      applyTheme();
+    };
+  });
+</script>
+<div
+  class="sui app-shell"
+  on:dragover|preventDefault
+  on:drop|preventDefault
+  on:contextmenu={(event) => {
+    // Disable the native context menu
+    if (!event.target?.matches('input[type="text"], textarea')) {
+      event.preventDefault();
+    }
+  }}
+>
+  <slot />
+</div>
+<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]) {
+  --foreground-color-1-hsl: var(--base-hue) 5% 0%;
+  --foreground-color-2-hsl: var(--base-hue) 5% 20%;
+  --foreground-color-3-hsl: var(--base-hue) 5% 40%;
+  --foreground-color-4-hsl: var(--base-hue) 5% 60%;
+  --border-color-1-hsl: var(--base-hue) 5% 75%;
+  --border-color-2-hsl: var(--base-hue) 5% 80%;
+  --background-color-1-hsl: var(--base-hue) 5% 100%;
+  --background-color-2-hsl: var(--base-hue) 5% 98%;
+  --background-color-3-hsl: var(--base-hue) 5% 94%;
+  --background-color-4-hsl: var(--base-hue) 5% 90%;
+  --background-color-5-hsl: var(--base-hue) 5% 86%;
+  --shadow-color: var(--base-hue) 10% 0%;
+  --primary-accent-color: hsl(var(--base-hue) 80% 45%);
+  --primary-accent-color-lighter: hsl(var(--base-hue) 80% 40%);
+  --primary-accent-color-darker: hsl(var(--base-hue) 80% 50%);
+  --primary-accent-color-foreground: hsl(var(--base-hue) 10% 100%);
+  --danger-color-hue: 0;
+  --warning-color-hue: 40;
+  --success-color-hue: 100;
+  --info-color-hue: 220;
+  --alert-foreground-color-saturation: 88%;
+  --alert-foreground-color-lightness: 28%;
+  --alert-background-color-saturation: 68%;
+  --alert-background-color-lightness: 88%;
+  --alert-border-color-saturation: 48%;
+  --alert-border-color-lightness: 68%;
+}
+:global(:root[data-theme=dark]) {
+  --foreground-color-1-hsl: var(--base-hue) 10% 100%;
+  --foreground-color-2-hsl: var(--base-hue) 10% 80%;
+  --foreground-color-3-hsl: var(--base-hue) 10% 60%;
+  --foreground-color-4-hsl: var(--base-hue) 10% 40%;
+  --border-color-1-hsl: var(--base-hue) 10% 28%;
+  --border-color-2-hsl: var(--base-hue) 10% 24%;
+  --background-color-1-hsl: var(--base-hue) 10% 10%;
+  --background-color-2-hsl: var(--base-hue) 10% 12%;
+  --background-color-3-hsl: var(--base-hue) 10% 16%;
+  --background-color-4-hsl: var(--base-hue) 10% 20%;
+  --background-color-5-hsl: var(--base-hue) 10% 24%;
+  --shadow-color: var(--base-hue) 10% 0%;
+  --primary-accent-color: hsl(var(--base-hue) 100% 45%);
+  --primary-accent-color-lighter: hsl(var(--base-hue) 100% 55%);
+  --primary-accent-color-darker: hsl(var(--base-hue) 100% 35%);
+  --primary-accent-color-foreground: hsl(var(--base-hue) 10% 100%);
+  --danger-color-hue: 0;
+  --warning-color-hue: 40;
+  --success-color-hue: 100;
+  --info-color-hue: 220;
+  --alert-foreground-color-saturation: 48%;
+  --alert-foreground-color-lightness: 68%;
+  --alert-background-color-saturation: 88%;
+  --alert-background-color-lightness: 8%;
+  --alert-border-color-saturation: 38%;
+  --alert-border-color-lightness: 18%;
+}
+:global(:root) {
+  --base-hue: 210;
+  --highlight-foreground-color: hsl(var(--foreground-color-1-hsl));
+  --primary-foreground-color: hsl(var(--foreground-color-2-hsl));
+  --secondary-foreground-color: hsl(var(--foreground-color-3-hsl));
+  --tertiary-foreground-color: hsl(var(--foreground-color-3-hsl));
+  --disabled-foreground-color: hsl(var(--foreground-color-4-hsl));
+  --danger-foreground-color: hsl(
+    var(--danger-color-hue) var(--alert-foreground-color-saturation)
+      var(--alert-foreground-color-lightness)
+  );
+  --warning-foreground-color: hsl(
+    var(--warning-color-hue) var(--alert-foreground-color-saturation)
+      var(--alert-foreground-color-lightness)
+  );
+  --success-foreground-color: hsl(
+    var(--success-color-hue) var(--alert-foreground-color-saturation)
+      var(--alert-foreground-color-lightness)
+  );
+  --info-foreground-color: hsl(
+    var(--info-color-hue) var(--alert-foreground-color-saturation)
+      var(--alert-foreground-color-lightness)
+  );
+  --highlight-background-color: hsl(var(--background-color-5-hsl));
+  --content-background-color: hsl(var(--background-color-1-hsl));
+  --primary-background-color: hsl(var(--background-color-2-hsl));
+  --primary-background-color-translucent: hsl(var(--background-color-2-hsl) / 80%);
+  --secondary-background-color: hsl(var(--background-color-3-hsl));
+  --secondary-background-color-translucent: hsl(var(--background-color-3-hsl) / 80%);
+  --tertiary-background-color: hsl(var(--background-color-4-hsl));
+  --tertiary-background-color-translucent: hsl(var(--background-color-4-hsl) / 80%);
+  --control-background-color: hsl(var(--background-color-1-hsl));
+  --disabled-background-color: hsl(var(--background-color-4-hsl));
+  --danger-background-color: hsl(
+    var(--danger-color-hue) var(--alert-background-color-saturation)
+      var(--alert-background-color-lightness)
+  );
+  --warning-background-color: hsl(
+    var(--warning-color-hue) var(--alert-background-color-saturation)
+      var(--alert-background-color-lightness)
+  );
+  --success-background-color: hsl(
+    var(--success-color-hue) var(--alert-background-color-saturation)
+      var(--alert-background-color-lightness)
+  );
+  --info-background-color: hsl(
+    var(--info-color-hue) var(--alert-background-color-saturation)
+      var(--alert-background-color-lightness)
+  );
+  --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));
+  --danger-border-color: hsl(
+    var(--danger-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
+  );
+  --warning-border-color: hsl(
+    var(--warning-color-hue) var(--alert-border-color-saturation)
+      var(--alert-border-color-lightness)
+  );
+  --success-border-color: hsl(
+    var(--success-color-hue) var(--alert-border-color-saturation)
+      var(--alert-border-color-lightness)
+  );
+  --info-border-color: hsl(
+    var(--info-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
+  );
+  --popup-shadow-color: hsl(var(--shadow-color) / 40%);
+  --popup-backdrop-color: hsl(var(--shadow-color) / 40%);
+  --font-family--default: "Merriweather Sans", sans-serif;
+  --font-size--xxx-large: 24px;
+  --font-size--xx-large: 20px;
+  --font-size--x-large: 18px;
+  --font-size--large: 16px;
+  --font-size--default: 14px;
+  --font-size--small: 12px;
+  --font-size--x-small: 10px;
+  --font-weight--normal: 300;
+  --font-weight--bold: 600;
+  --font-family--monospace: "Noto Sans Mono", monospace;
+  --font-size--monospace: 13px;
+  --control--small--border-width: 1px;
+  --control--small--border-radius: 2px;
+  --control--small--height: 24px;
+  --control--medium--border-width: 1px;
+  --control--medium--border-radius: 4px;
+  --control--medium--height: 32px;
+  --control--large--border-width: 1px;
+  --control--large--border-radius: 8px;
+  --control--large--height: 40px;
+  --button--small--border-radius: var(--control--small--border-radius);
+  --button--small--height: var(--control--small--height);
+  --button--medium--border-radius: var(--control--medium--border-radius);
+  --button--medium--height: var(--control--medium--height);
+  --button--large--border-radius: var(--control--large--border-radius);
+  --button--large--height: var(--control--large--height);
+  --option--small--border-radius: var(--control--small--border-radius);
+  --option--small--height: var(--control--small--height);
+  --option--medium--border-radius: var(--control--medium--border-radius);
+  --option--medium--height: var(--control--medium--height);
+  --option--large--border-radius: var(--control--large--border-radius);
+  --option--large--height: var(--control--large--height);
+  --input--small--border-radius: var(--control--small--border-radius);
+  --input--small--height: var(--control--small--height);
+  --input--medium--border-radius: var(--control--medium--border-radius);
+  --input--medium--height: var(--control--medium--height);
+  --input--large--border-radius: var(--control--large--border-radius);
+  --input--large--height: var(--control--large--height);
+  --tab--small--height: var(--control--small--height);
+  --tab--medium--height: var(--control--medium--height);
+  --tab--large--height: var(--control--large--height);
+}
+:global(.material-symbols-outlined) {
+  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
+}
+:global(*) {
+  scroll-behavior: smooth;
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+}
+:global(:focus) {
+  z-index: 1;
+  outline-width: 0;
+}
+:global(:focus-visible) {
+  outline-offset: -2px;
+  outline-width: 2px !important;
+  outline-style: solid;
+  outline-color: hsl(var(--hue), 100%, 50%, 25%);
+}
+:global(h1),
+:global(h2),
+:global(h3),
+:global(h4),
+:global(h5),
+:global(h6) {
+  margin: 0;
+  font-weight: var(--font-weight--bold);
+}
+:global(strong) {
+  font-weight: var(--font-weight--bold);
+}
+:global(a) {
+  color: var(--primary-accent-color-lighter);
+  text-decoration: none;
+}
+:global(img),
+:global(svg),
+:global(iframe) {
+  vertical-align: top;
+}
+:global(button),
+:global(input),
+:global(textarea),
+:global(select),
+:global(option) {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}
+:global(p),
+:global(li) {
+  line-height: 1.75;
+}
+:global([role=grid]) {
+  display: table;
+  width: 100%;
+}
+:global([role=grid]) :global(.colgroup) {
+  display: table-column-group;
+}
+:global([role=grid]) :global(.colgroup) :global(.col) {
+  display: table-column;
+}
+:global(code),
+:global(pre) {
+  font-family: var(--font-family--monospace);
+}
+:global(pre) {
+  line-height: 1.5;
+  -webkit-user-select: text;
+  user-select: text;
+}
+:global(dialog) {
+  position: fixed;
+  inset: 0;
+  outline: 0;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+  color: inherit;
+  background: transparent;
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: none;
+  cursor: default;
+}
+:global(dialog::backdrop) {
+  background: transparent;
+}
+:global(.thead[role=rowgroup]) {
+  display: table-header-group;
+}
+:global(.tbody[role=rowgroup]) {
+  display: table-row-group;
+}
+:global([role=row]) {
+  display: table-row;
+}
+:global([role=columnheader]),
+:global([role=gridcell]) {
+  display: table-cell;
+}
+:global(.app-shell) {
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  color: var(--primary-foreground-color);
+  background-color: var(--primary-background-color);
+  font-family: var(--font-family--default);
+  font-size: var(--font-size--default);
+  font-weight: var(--font-weight--normal);
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: none;
+  overflow-anchor: none;
+  cursor: default;
+}</style>

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

@@ -0,0 +1,38 @@
+/** @typedef {typeof __propDef.props}  AppShellProps */
+/** @typedef {typeof __propDef.events}  AppShellEvents */
+/** @typedef {typeof __propDef.slots}  AppShellSlots */
+/**
+ * Provide an application’s shell that makes the web app more like a native app. It also handles the
+ * dark/light mode switching. This component has to be placed directly under `<body>` (or
+ * `<div style="display:contents">` in a SvelteKit app).
+ */
+export default class AppShell extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    dragover: DragEvent;
+    drop: DragEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type AppShellProps = typeof __propDef.props;
+export type AppShellEvents = typeof __propDef.events;
+export type AppShellSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        dragover: DragEvent;
+        drop: DragEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/util/misc.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export function isObject(input: any): boolean;
2	+ export function sleep(ms?: number): Promise<any>;

package/package/components/util/misc.js ADDED Viewed

@@ -0,0 +1,22 @@
+/**
+ * Check if the given input is a simple object.
+ *
+ * @param {*} input Input, probably an object.
+ * @returns {boolean} Result.
+ */
+export const isObject = (input) =>
+  input !== null && typeof input === 'object' && !Array.isArray(input);
+/**
+ * Return a simple `Promise` to resolve in the given time, making it easier to wait for a bit in the
+ * code, particularly while making sequential HTTP requests.
+ *
+ * @param {number} [ms] Milliseconds to wait.
+ * @returns {Promise} Nothing.
+ */
+export const sleep = (ms = 1000) =>
+  new Promise((resolve) => {
+    window.setTimeout(() => {
+      resolve();
+    }, ms);
+  });

package/package/components/util/popup.svelte ADDED Viewed

@@ -0,0 +1,155 @@
+<!--
+  @component
+  Generic popup helper.
+-->
+<svelte:options accessors={true} />
+<script>
+  import { onMount } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { activatePopup } from '../helpers/popup';
+  /** @type {(HTMLElement|undefined)} */
+  export let anchor = undefined;
+  /**
+   * Reference to the popup element.
+   * @type {(HTMLElement|undefined)}
+   */
+  export let dialog = undefined;
+  /**
+   * Reference to the content element.
+   * @type {(HTMLElement|undefined)}
+   */
+  export let content = undefined;
+  /**
+   * Where to show the dropdown menu.
+   * @type {PopupPosition}
+   */
+  export let position = 'bottom-left';
+  export let open = writable(false);
+  let showDialog = false;
+  let showContent = false;
+  let contentType;
+  let style = writable({
+    inset: undefined,
+    zIndex: undefined,
+    width: undefined,
+    height: undefined,
+  });
+  $: {
+    if (anchor && dialog) {
+      ({ open, style } = activatePopup(anchor, dialog, position));
+      contentType = anchor.getAttribute('aria-haspopup');
+    }
+  }
+  const openDialog = () => {
+    (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
+    showContent = true;
+    dialog.showModal();
+    window.requestAnimationFrame(() => {
+      showDialog = true;
+      window.requestAnimationFrame(() => {
+        (dialog.querySelector('[tabindex]') || dialog).focus();
+      });
+    });
+  };
+  const closeDialog = async () => {
+    showDialog = false;
+    await new Promise((resolve) => {
+      content.addEventListener('transitionend', () => resolve(), { once: true });
+    });
+    showContent = false;
+    dialog?.close();
+    dialog?.remove();
+  };
+  const toggleDialog = () => {
+    if (dialog) {
+      if ($open) {
+        openDialog();
+      } else {
+        closeDialog();
+      }
+    }
+  };
+  // Call the function only when the `$open` prop is changed
+  $: toggleDialog($open);
+  onMount(() => {
+    dialog.remove();
+    // onUnmount
+    return () => {
+      dialog?.close();
+      dialog?.remove();
+    };
+  });
+</script>
+<dialog class="sui popup" bind:this={dialog} class:open={showDialog} {...$$restProps}>
+  <div
+    bind:this={content}
+    class="content {contentType}"
+    style:inset={$style.inset}
+    style:z-index={$style.zIndex}
+    style:min-width={$style.width}
+    style:max-height={$style.height}
+  >
+    {#if showContent}
+      <slot />
+    {/if}
+  </div>
+</dialog>
+<style>.popup.open .content {
+  opacity: 1;
+  transform: translateY(2px);
+  transition-duration: 100ms;
+}
+.popup:not(.open) {
+  pointer-events: none;
+}
+.popup:not(.open) .content {
+  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-translucent);
+  backdrop-filter: blur(16px);
+  box-shadow: 0 8px 16px var(--popup-shadow-color);
+  will-change: opacity, transform;
+  transition-property: opacity, transform;
+}
+.content.listbox, .content.menu {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--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;
+}</style>

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

@@ -0,0 +1,53 @@
+/** @typedef {typeof __propDef.props}  PopupProps */
+/** @typedef {typeof __propDef.events}  PopupEvents */
+/** @typedef {typeof __propDef.slots}  PopupSlots */
+/** Generic popup helper. */
+export default class Popup extends SvelteComponentTyped<{
+    [x: string]: any;
+    dialog?: HTMLElement;
+    position?: any;
+    anchor?: HTMLElement;
+    content?: HTMLElement;
+    open?: import("svelte/store").Writable<boolean>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+    /**accessor*/
+    set anchor(arg: HTMLElement);
+    get anchor(): HTMLElement;
+    /**accessor*/
+    set dialog(arg: HTMLElement);
+    get dialog(): HTMLElement;
+    /**accessor*/
+    set content(arg: HTMLElement);
+    get content(): HTMLElement;
+    /**accessor*/
+    set position(arg: any);
+    get position(): any;
+    /**accessor*/
+    set open(arg: import("svelte/store").Writable<boolean>);
+    get open(): import("svelte/store").Writable<boolean>;
+}
+export type PopupProps = typeof __propDef.props;
+export type PopupEvents = typeof __propDef.events;
+export type PopupSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        dialog?: (HTMLElement | undefined);
+        position?: any;
+        anchor?: (HTMLElement | undefined);
+        content?: (HTMLElement | undefined);
+        open?: import("svelte/store").Writable<boolean>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/util/portal.svelte ADDED Viewed

@@ -0,0 +1,34 @@
+<!--
+  @component
+  @see https://github.com/sveltejs/svelte/issues/3088
+-->
+<script>
+  import { onDestroy, onMount } from 'svelte';
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+  export { className as class };
+  /** @type {HTMLElement} */
+  let ref;
+  onMount(() => {
+    document.body.appendChild(ref);
+  });
+  onDestroy(() => {
+    ref.remove();
+  });
+</script>
+<div class="sui portal {className}" bind:this={ref}>
+  <slot />
+</div>
+<style>.portal {
+  display: contents;
+}</style>

package/package/components/util/portal.svelte.d.ts ADDED Viewed

@@ -0,0 +1,28 @@
+/** @typedef {typeof __propDef.props}  PortalProps */
+/** @typedef {typeof __propDef.events}  PortalEvents */
+/** @typedef {typeof __propDef.slots}  PortalSlots */
+/** @see https://github.com/sveltejs/svelte/issues/3088 */
+export default class Portal extends SvelteComponentTyped<{
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type PortalProps = typeof __propDef.props;
+export type PortalEvents = typeof __propDef.events;
+export type PortalSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};