@skeletonlabs/skeleton-svelte 1.0.0-next.9 → 1.1.0

package/dist/components/Tooltip/types.d.ts

@@ -0,0 +1,44 @@
+import type { Snippet } from 'svelte';
+import * as tooltip from '@zag-js/tooltip';
+export interface TooltipProps extends Omit<tooltip.Props, 'id'> {
+    /** Enable display of the popover arrow. */
+    arrow?: boolean;
+    /** Set z-index for the positioner. */
+    zIndex?: string;
+    /** Set base classes for the root element. */
+    base?: string;
+    /** Provide arbitrary classes for the root element. */
+    classes?: string;
+    /** Set base styles for the trigger. */
+    triggerBase?: string;
+    /** Set background styles for the trigger. */
+    triggerBackground?: string;
+    /** Provide arbitrary styles for the trigger. */
+    triggerClasses?: string;
+    /** Set the aria-label for the trigger. */
+    triggerAriaLabel?: string;
+    /** Set base classes for the positioner. */
+    positionerBase?: string;
+    /** Provide arbitrary classes for the positioner. */
+    positionerClasses?: string;
+    /** Set base styles for the content. */
+    contentBase?: string;
+    /** Set background styles for the content. */
+    contentBackground?: string;
+    /** Provide arbitrary styles for the content. */
+    contentClasses?: string;
+    /** Set base classes for the arrow. */
+    arrowBase?: string;
+    /** Set background classes for the arrow. */
+    arrowBackground?: string;
+    /** Provide arbitrary classes for the arrow. */
+    arrowClasses?: string;
+    /** Provide the template contents inside the trigger button. */
+    trigger?: Snippet;
+    /** Provide the template contents of the tooltip itself. */
+    content?: Snippet;
+    /** Handle the tooltip button hover event. */
+    onmouseover?: () => void;
+    /** Handle the tooltip button click event. */
+    onclick?: () => void;
+}

package/dist/components/Tooltip/types.js

@@ -0,0 +1 @@
+import * as tooltip from '@zag-js/tooltip';

package/dist/index.d.ts

@@ -5,11 +5,17 @@ export { default as FileUpload } from './components/FileUpload/FileUpload.svelte
 export { default as Pagination } from './components/Pagination/Pagination.svelte';
 export { default as Progress } from './components/Progress/Progress.svelte';
 export { default as ProgressRing } from './components/ProgressRing/ProgressRing.svelte';
-export { default as Nav } from './components/Nav/index.js';
+export { default as Navigation } from './components/Navigation/index.js';
 export { default as Segment } from './components/Segment/index.js';
 export { default as Slider } from './components/Slider/Slider.svelte';
 export { default as Switch } from './components/Switch/Switch.svelte';
-export { default as Tabs } from './components/Tab/index.js';
+export { default as Tabs } from './components/Tabs/index.js';
 export { default as TagsInput } from './components/TagsInput/TagsInput.svelte';
+export { default as Toaster } from './components/Toast/Toaster.svelte';
+export { createToaster } from './components/Toast/create-toaster.js';
 export { default as Rating } from './components/Rating/index.js';
 export type { FileUploadApi } from './components/FileUpload/types.js';
+export { default as Combobox } from './components/Combobox/Combobox.svelte';
+export { default as Popover } from './components/Popover/Popover.svelte';
+export { default as Tooltip } from './components/Tooltip/Tooltip.svelte';
+export { default as Modal } from './components/Modal/Modal.svelte';

package/dist/index.js

@@ -1,7 +1,7 @@
 // Exports for skeleton-svelte package
 // REMINDER
 // Do not export parent/child components. Use the dot-notation composition pattern:
-// https://next.skeleton.dev/docs/resources/contribute/components#dot-notation-syntax
+// https://skeleton.dev/docs/resources/contribute/components#dot-notation-syntax
 // (See Accordion, Nav, and Tabs for examples)
 // Components
 export { default as Accordion } from './components/Accordion/index.js';
@@ -11,10 +11,19 @@ export { default as FileUpload } from './components/FileUpload/FileUpload.svelte
 export { default as Pagination } from './components/Pagination/Pagination.svelte';
 export { default as Progress } from './components/Progress/Progress.svelte';
 export { default as ProgressRing } from './components/ProgressRing/ProgressRing.svelte';
-export { default as Nav } from './components/Nav/index.js';
+export { default as Navigation } from './components/Navigation/index.js';
 export { default as Segment } from './components/Segment/index.js';
 export { default as Slider } from './components/Slider/Slider.svelte';
 export { default as Switch } from './components/Switch/Switch.svelte';
-export { default as Tabs } from './components/Tab/index.js';
+export { default as Tabs } from './components/Tabs/index.js';
 export { default as TagsInput } from './components/TagsInput/TagsInput.svelte';
+export { default as Toaster } from './components/Toast/Toaster.svelte';
+export { createToaster } from './components/Toast/create-toaster.js';
 export { default as Rating } from './components/Rating/index.js';
+// Temporary Features ---
+// The following will be removed or replaced in the future.
+// Popvers
+export { default as Combobox } from './components/Combobox/Combobox.svelte';
+export { default as Popover } from './components/Popover/Popover.svelte';
+export { default as Tooltip } from './components/Tooltip/Tooltip.svelte';
+export { default as Modal } from './components/Modal/Modal.svelte';

package/dist/internal/create-context.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Create a context with a default value
+ * @param defaultValue The default value that will be returned if the context is not set
+ * @returns [set, get, key] The setter, getter and key for the context, the getter returns the default value if the context is not set
+ */
+export declare function createContext<T>(defaultValue: T): readonly [(value: T) => T, () => T, symbol];

package/dist/internal/create-context.js

@@ -5,8 +5,8 @@ import { getContext, setContext } from 'svelte';
  * @returns [set, get, key] The setter, getter and key for the context, the getter returns the default value if the context is not set
  */
 export function createContext(defaultValue) {
-    const key = Symbol();
-    const set = (value) => setContext(key, value);
-    const get = () => getContext(key) ?? defaultValue;
+    var key = Symbol();
+    var set = function (value) { return setContext(key, value); };
+    var get = function () { var _a; return (_a = getContext(key)) !== null && _a !== void 0 ? _a : defaultValue; };
     return [set, get, key];
 }

package/dist/internal/test-utils.d.ts

@@ -0,0 +1,3 @@
+import type { Snippet } from 'svelte';
+/** Use `mockSnippet(value)` to create `<span>{value}</span>` snippet content. */
+export declare function mockSnippet(key: string): Snippet<[]>;

package/dist/internal/test-utils.js

@@ -0,0 +1,9 @@
+import { createRawSnippet } from 'svelte';
+/** Use `mockSnippet(value)` to create `<span>{value}</span>` snippet content. */
+export function mockSnippet(key) {
+    return createRawSnippet(function () {
+        return {
+            render: function () { return "<span>".concat(key, "</span>"); }
+        };
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skeletonlabs/skeleton-svelte",
-  "version": "1.0.0-next.9",
+  "version": "1.1.0",
   "description": "The Svelte package for Skeleton.",
   "author": "endigo9740 <chris@skeletonlabs.dev>",
   "types": "./dist/index.d.ts",
@@ -13,67 +13,56 @@
   },
   "files": [
     "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*",
-    "./dist/**/*.svelte",
-    "./dist/**/*.js",
-    "./dist/**/*.d.ts",
-    "./dist/**/*.cjs",
-    "./dist/**/*.d.cts"
+    "!dist/**/*.test.*"
   ],
   "dependencies": {
-    "@zag-js/accordion": "^0.65.1",
-    "@zag-js/avatar": "^0.65.1",
-    "@zag-js/file-upload": "^0.65.1",
-    "@zag-js/pagination": "^0.65.1",
-    "@zag-js/progress": "^0.65.1",
-    "@zag-js/radio-group": "^0.65.1",
-    "@zag-js/rating-group": "^0.65.1",
-    "@zag-js/slider": "^0.65.1",
-    "@zag-js/svelte": "^0.65.1",
-    "@zag-js/switch": "^0.65.1",
-    "@zag-js/tabs": "^0.65.1",
-    "@zag-js/tags-input": "^0.65.1"
+    "@zag-js/accordion": "^1.7.0",
+    "@zag-js/avatar": "^1.7.0",
+    "@zag-js/combobox": "^1.7.0",
+    "@zag-js/dialog": "^1.7.0",
+    "@zag-js/file-upload": "^1.7.0",
+    "@zag-js/pagination": "^1.7.0",
+    "@zag-js/popover": "^1.7.0",
+    "@zag-js/progress": "^1.7.0",
+    "@zag-js/radio-group": "^1.7.0",
+    "@zag-js/rating-group": "^1.7.0",
+    "@zag-js/slider": "^1.7.0",
+    "@zag-js/svelte": "^1.7.0",
+    "@zag-js/switch": "^1.7.0",
+    "@zag-js/tabs": "^1.7.0",
+    "@zag-js/tags-input": "^1.7.0",
+    "@zag-js/toast": "^1.7.0",
+    "@zag-js/tooltip": "^1.7.0"
   },
   "peerDependencies": {
-    "svelte": "^5.0.0-next.193"
+    "svelte": "^5.20.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.45.3",
-    "@sveltejs/adapter-auto": "^3.2.2",
-    "@sveltejs/kit": "^2.5.18",
-    "@sveltejs/package": "^2.3.2",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
-    "@tailwindcss/forms": "^0.5.7",
-    "@testing-library/jest-dom": "^6.4.7",
-    "@testing-library/svelte": "^4.2.3",
-    "autoprefixer": "^10.4.19",
-    "jsdom": "^24.1.1",
-    "lucide-svelte": "^0.436.0",
-    "postcss": "^8.4.39",
-    "postcss-load-config": "^5.1.0",
-    "publint": "^0.1.16",
-    "svelte": "5.0.0-next.201",
-    "svelte-check": "^3.8.4",
-    "tailwindcss": "^3.4.6",
-    "tslib": "^2.6.3",
-    "typescript": "^5.5.4",
-    "vite": "^5.3.4",
-    "vitest": "^1.6.0",
-    "vite-plugin-tw-plugin-watcher": "0.0.1-next.0",
-    "@skeletonlabs/skeleton": "3.0.0-next.4"
+    "@sveltejs/adapter-auto": "^5.0.0",
+    "@sveltejs/kit": "^2.20.2",
+    "@sveltejs/package": "^2.3.10",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/vite": "^4.0.17",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/svelte": "^5.2.7",
+    "jsdom": "^26.0.0",
+    "publint": "^0.3.9",
+    "svelte": "^5.25.3",
+    "svelte-check": "^4.1.5",
+    "tailwindcss": "^4.0.17",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.4",
+    "vitest": "3.1.1",
+    "@skeletonlabs/skeleton": "3.1.2"
   },
   "type": "module",
   "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run package",
-    "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package && publint",
-    "package:watch": "svelte-package --watch",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "test": "pnpm run \"/test:/\"",
-    "test:unit": "vitest",
-    "sync": "svelte-kit sync"
+    "build": "svelte-package --input src --output dist",
+    "dev": "svelte-package --input src --output dist --watch",
+    "test": "vitest run",
+    "test:watch": "vitest run --watch",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
   }
 }

package/dist/components/Accordion/Accordion.svelte.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/Accordion/Accordion.svelte.spec.js

@@ -1,4 +0,0 @@
-import { it } from 'vitest';
-it('placeholder vitest test', ({ expect }) => {
-    expect(true).toBe(true);
-});

package/dist/components/Nav/NavBar.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">import { setNavigationContext } from "./context.js";
-let {
-  value = $bindable(""),
-  // Root
-  base = "h-full flex flex-col",
-  background = "preset-filled-surface-100-900",
-  width = "min-w-[320px] w-full",
-  height = "h-20",
-  padding = "p-1",
-  classes = "",
-  // Tiles
-  tilesBase = "flex-1 flex",
-  tilesFlexDirection = "",
-  tilesJustify = "justify-center",
-  tilesItems = "items-center",
-  tilesGap = "gap-1",
-  tilesClasses = "",
-  // Events
-  onchange,
-  // Snippets
-  children
-} = $props();
-function onSelectionHandler(id) {
-  value = id;
-  if (onchange) onchange(id);
-}
-setNavigationContext({
-  parent: "bar",
-  get value() {
-    return value;
-  },
-  expanded: false,
-  onSelectionHandler
-});
-</script>
-
-<!-- @component Provides a horizontal navigation interface. -->
-
-<aside class="{base} {background} {width} {height} {padding} {classes}" data-testid="nav-bar">
-	{#if children}
-		<nav class="{tilesBase} {tilesFlexDirection} {tilesJustify} {tilesItems} {tilesGap} {tilesClasses}">
-			{@render children()}
-		</nav>
-	{/if}
-</aside>

package/dist/components/Nav/NavBar.svelte.d.ts

@@ -1,17 +0,0 @@
-import type { NavBarProps } from './types.js';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports;
-    z_$$bindings?: Bindings;
-}
-/** Provides a horizontal navigation interface. */
-declare const NavBar: $$__sveltets_2_IsomorphicComponent<NavBarProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "value">;
-type NavBar = InstanceType<typeof NavBar>;
-export default NavBar;

package/dist/components/Nav/NavRail.svelte

@@ -1,79 +0,0 @@
-<script lang="ts">import { setNavigationContext } from "./context.js";
-let {
-  value = $bindable(""),
-  expanded = false,
-  // Root
-  base = "h-full flex flex-col",
-  background = "preset-filled-surface-100-900",
-  padding = "p-1",
-  width = "w-24",
-  widthExpanded = "w-64",
-  height = "h-full",
-  classes = "",
-  // Header
-  headerBase = "flex",
-  headerFlexDirection = "flex-col",
-  headerJustify = "justify-center",
-  headerItems = "items-center",
-  headerGap = "gap-1",
-  headerClasses = "",
-  // Tiles
-  tilesBase = "flex-1 flex",
-  tilesFlexDirection = "flex-col",
-  tilesJustify = "justify-center",
-  tilesItems = "items-center",
-  tilesGap = "gap-1",
-  tilesClasses = "",
-  // Footer
-  footerBase = "flex",
-  footerFlexDirection = "flex-col",
-  footerJustify = "justify-center",
-  footerItems = "items-center",
-  footerGap = "gap-1",
-  footerClasses = "",
-  // Events
-  onchange,
-  // Snippets
-  header,
-  tiles,
-  footer
-} = $props();
-function onSelectionHandler(id) {
-  value = id;
-  if (onchange) onchange(id);
-}
-setNavigationContext({
-  parent: "rail",
-  get value() {
-    return value;
-  },
-  get expanded() {
-    return expanded;
-  },
-  onSelectionHandler
-});
-let rxWidth = $derived(expanded ? widthExpanded : width);
-</script>
-
-<!-- @component Provides a vertical navigation interface. -->
-
-<aside class="{base} {background} {height} {padding} {rxWidth} {classes}" data-testid="nav-rail">
-	<!-- Header -->
-	{#if header}
-		<header class="{headerBase} {headerFlexDirection} {headerJustify} {headerItems} {headerGap} {headerClasses}">
-			{@render header()}
-		</header>
-	{/if}
-	<!-- Tiles -->
-	{#if tiles}
-		<nav class="{tilesBase} {tilesFlexDirection} {tilesJustify} {tilesItems} {tilesGap} {tilesClasses}">
-			{@render tiles()}
-		</nav>
-	{/if}
-	<!-- Footer -->
-	{#if footer}
-		<footer class="{footerBase} {footerFlexDirection} {footerJustify} {footerItems} {footerGap} {footerClasses}">
-			{@render footer()}
-		</footer>
-	{/if}
-</aside>

package/dist/components/Nav/NavRail.svelte.d.ts

@@ -1,17 +0,0 @@
-import type { NavRailProps } from './types.js';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports;
-    z_$$bindings?: Bindings;
-}
-/** Provides a vertical navigation interface. */
-declare const NavRail: $$__sveltets_2_IsomorphicComponent<NavRailProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "value">;
-type NavRail = InstanceType<typeof NavRail>;
-export default NavRail;

package/dist/components/Nav/NavTile.svelte

@@ -1,76 +0,0 @@
-<script lang="ts">import { getNavigationContext } from "./context.js";
-let {
-  id,
-  href,
-  target,
-  label,
-  labelExpanded,
-  title,
-  selected = false,
-  // Root
-  base = "flex items-center",
-  width = "w-full",
-  aspect = "aspect-square",
-  background = "",
-  hover = "hover:preset-filled-surface-50-950",
-  active = "preset-filled-primary-500",
-  padding = "p-2",
-  gap = "gap-1",
-  rounded = "rounded-container",
-  classes = "flex-col justify-center",
-  // Expanded
-  expandedPadding = "py-3 px-4",
-  expandedGap = "gap-4",
-  expandedClasses = "",
-  // Label (base)
-  labelBase = "type-scale-1",
-  labelClasses = "",
-  // Label (expanded)
-  labelExpandedBase = "",
-  labelExpandedClasses = "",
-  // Events
-  onclick,
-  // Snippets
-  children
-} = $props();
-const ctx = getNavigationContext();
-const element = $derived(href ? "a" : "button");
-const type = $derived(href ? void 0 : "button");
-const role = $derived(href ? void 0 : "button");
-const rxSize = $derived(ctx.parent === "bar" ? `h-full` : `${aspect}`);
-const classesCollapsed = $derived(`${rxSize} ${padding} ${gap} ${classes}`);
-const classesExtended = $derived(`${expandedPadding} ${expandedGap} ${expandedClasses}`);
-const rxMode = $derived(ctx.expanded ? classesExtended : classesCollapsed);
-const rxBackground = $derived(selected || ctx.value === id ? active : `${background} ${hover}`);
-function onClickHandler() {
-  if (onclick && !id) throw new Error("No ID was provided");
-  if (onclick && id) onclick(id);
-  if (ctx.onSelectionHandler && id) ctx.onSelectionHandler(id);
-}
-</script>
-
-<!-- @component An individual Navgiation component tile. -->
-
-<svelte:element
-	this={element}
-	class="{base} {width} {rounded} {rxBackground} {rxMode}"
-	{href}
-	{target}
-	{type}
-	{title}
-	{role}
-	onclick={onClickHandler}
-	tabindex="0"
-	data-testid="nav-tile"
->
-	<!-- Icon -->
-	{#if children}<div>{@render children()}</div>{/if}
-	<!-- Label (base) -->
-	{#if label && !ctx.expanded}
-		<div class="{labelBase} {labelClasses}">{label}</div>
-	{/if}
-	<!-- Label (expanded) -->
-	{#if labelExpanded && ctx.expanded}
-		<div class="{labelExpandedBase} {labelExpandedClasses}">{labelExpanded}</div>
-	{/if}
-</svelte:element>

package/dist/components/Nav/NavTile.svelte.d.ts

@@ -1,17 +0,0 @@
-import type { NavTileProps } from './types.js';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports;
-    z_$$bindings?: Bindings;
-}
-/** An individual Navgiation component tile. */
-declare const NavTile: $$__sveltets_2_IsomorphicComponent<NavTileProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type NavTile = InstanceType<typeof NavTile>;
-export default NavTile;

package/dist/components/Nav/context.js

@@ -1,7 +0,0 @@
-import { createContext } from '../../internal/create-context.js';
-export const [setNavigationContext, getNavigationContext, key] = createContext({
-    parent: 'none',
-    value: '',
-    expanded: false,
-    onSelectionHandler: () => { }
-});

package/dist/components/Tab/Tabs.svelte

@@ -1,65 +0,0 @@
-<script lang="ts">import * as tabs from "@zag-js/tabs";
-import { useMachine, normalizeProps } from "@zag-js/svelte";
-import { setTabContext } from "./context.js";
-import { useId } from "../../internal/use-id.js";
-let {
-  value = $bindable(""),
-  fluid = false,
-  // Root
-  base = "w-full",
-  classes = "",
-  // List
-  listBase = "flex",
-  listJustify = "justify-start",
-  listBorder = "border-b border-surface-200-800",
-  listMargin = "mb-4",
-  listGap = "gap-2",
-  listClasses = "",
-  // Content
-  contentBase = "",
-  contentClasses = "",
-  // Snippets
-  list,
-  content,
-  // Zag
-  ...zagProps
-} = $props();
-const [snapshot, send] = useMachine(
-  tabs.machine({
-    id: useId(),
-    onValueChange(details) {
-      value = details.value;
-    }
-  }),
-  {
-    context: {
-      ...zagProps,
-      get value() {
-        return value;
-      }
-    }
-  }
-);
-const api = $derived(tabs.connect(snapshot, send, normalizeProps));
-setTabContext({
-  get api() {
-    return api;
-  },
-  get fluid() {
-    return fluid;
-  }
-});
-</script>
-
-<!-- @component Use tabs to quickly switch between different views and pages. -->
-
-<div {...api.getRootProps()} class="{base} {classes}" data-testid="tabs">
-	<!-- List -->
-	<div {...api.getListProps()} class="{listBase} {listJustify} {listBorder} {listMargin} {listGap} {listClasses}" data-testid="tabs-list">
-		{@render list?.()}
-	</div>
-	<!-- Content -->
-	<div class="{contentBase} {contentClasses}" data-testid="tabs-content">
-		{@render content?.()}
-	</div>
-</div>

package/dist/components/Tab/Tabs.svelte.d.ts

@@ -1,17 +0,0 @@
-import type { TabsProps } from './types.js';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports;
-    z_$$bindings?: Bindings;
-}
-/** Use tabs to quickly switch between different views and pages. */
-declare const Tabs: $$__sveltets_2_IsomorphicComponent<TabsProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "value">;
-type Tabs = InstanceType<typeof Tabs>;
-export default Tabs;