@dvcol/neo-svelte 1.1.1 → 1.1.2

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.1.2](https://github.com/dvcol/neo-svelte/compare/v1.1.1...v1.1.2) (2025-04-21)
+
+
+### Bug Fixes
+
+* **nav:** fix snippet when exported ([bda737c](https://github.com/dvcol/neo-svelte/commit/bda737c4fc9fd206e28253fee559fd02a9528642))
+
 ### [1.1.1](https://github.com/dvcol/neo-svelte/compare/v1.1.0...v1.1.1) (2025-04-21)
 
 

package/dist/loading/NeoLazy.svelte

@@ -3,10 +3,10 @@
 
   import NeoSuspense from './NeoSuspense.svelte';
 
-  const { component, props: _props, loading, error, children }: NeoLazyProps = $props();
+  const { component, props: _props, children, ...rest }: NeoLazyProps = $props();
 </script>
 
-<NeoSuspense promise={component} {loading} {error}>
+<NeoSuspense promise={component} {...rest}>
   {#snippet result(Component)}
     <Component {..._props}>
       {@render children?.()}

package/dist/loading/NeoLoadingMatrix.svelte

@@ -5,9 +5,18 @@
   import { toSize } from '../utils/style.utils.js';
 
   const {
+    // State
     tag = 'div',
+
+    // Size
     width: _width,
     height: _height,
+
+    // Flex
+    flex,
+    align,
+    justify,
+
     ...rest
   }: NeoLoadingMatrixProps = $props();
 
@@ -18,6 +27,9 @@
 <svelte:element
   this={tag}
   class:neo-loading-matrix={true}
+  style:flex
+  style:align-items={align}
+  style:justify-content={justify}
   style:--neo-loader-width={width?.absolute}
   style:--neo-loader-max-width={width?.max}
   style:--neo-loader-min-width={width?.min}
@@ -34,8 +46,6 @@
   flex: 1 1 auto;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100%;
   opacity: 1;
   transition: opacity 1s ease-in 0.2s;
 }

package/dist/loading/NeoSuspense.svelte

@@ -6,7 +6,7 @@
 
   import NeoLoadingMatrix from './NeoLoadingMatrix.svelte';
 
-  const { promise, delay = 500, loading, result, error, children }: NeoSuspenseProps = $props();
+  const { promise, delay = 500, loading, result, error, children, matrixProps }: NeoSuspenseProps = $props();
 
   let showLoading = $state(!delay);
 
@@ -19,10 +19,10 @@
 
 {#await promise}
   {#if showLoading}
-    {#if loading}
+    {#if loading && typeof loading === 'function'}
       {@render loading(promise)}
-    {:else}
-      <NeoLoadingMatrix />
+    {:else if loading !== false}
+      <NeoLoadingMatrix {...matrixProps} />
     {/if}
   {/if}
 {:then resolved}

package/dist/loading/neo-lazy.model.d.ts

@@ -1,11 +1,20 @@
 import type { Component, Snippet } from 'svelte';
 import type { NeoSuspenseProps } from './neo-suspense.model.js';
 export type NeoLazyProps<Props extends Record<string, any> = object, Exports extends Record<string, any> = object, Bindings extends keyof Props | '' = string> = {
+    /**
+     * The component to lazy load.
+     */
     component: Promise<{
         default: Component<Props, Exports, Bindings>;
     }>;
+    /**
+     * Optional props to pass to the component.
+     */
     props?: Record<string, any>;
+    /**
+     * Children to render once the component is loaded.
+     */
     children?: Snippet;
-} & Pick<NeoSuspenseProps<{
+} & Omit<NeoSuspenseProps<{
     default: Component<Props, Exports, Bindings>;
-}>, 'loading' | 'error'>;
+}>, 'promise'>;

package/dist/loading/neo-loading-matrix.model.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLNeoBaseElement } from '../utils/html-element.utils.js';
+import type { HTMLFlexProps, HTMLNeoBaseElement } from '../utils/html-element.utils.js';
 import type { SizeInput } from '../utils/style.utils.js';
 export type NeoLoadingMatrixProps<Tag extends keyof HTMLElementTagNameMap = 'div'> = {
     /**
@@ -15,4 +15,4 @@ export type NeoLoadingMatrixProps<Tag extends keyof HTMLElementTagNameMap = 'div
      * Size constraints for the loader icon.
      */
     height?: SizeInput<'height'>;
-} & HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]>;
+} & HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]> & HTMLFlexProps;

package/dist/loading/neo-suspense.model.d.ts

@@ -1,9 +1,38 @@
+import type { NeoLoadingMatrixProps } from '../index.js';
 import type { Snippet } from 'svelte';
 export interface NeoSuspenseProps<R = any, E = any> {
+    /**
+     * The promise to await.
+     */
     promise: Promise<R>;
+    /**
+     * Optional delay before showing the loading state.
+     */
     delay?: number;
-    loading?: Snippet<[Promise<R>]>;
-    result?: Snippet<[R]>;
+    /**
+     * Optional loading snippet to show while the promise is pending.
+     */
+    loading?: Snippet<[Promise<R>]> | false;
+    /**
+     * Optional component to show when the promise is rejected.
+     */
     error?: Snippet<[E]>;
+    /**
+     * Optional component to show when the promise is resolved.
+     * If none is provided, the `children` prop will be used.
+     *
+     * @see {@link children}
+     */
+    result?: Snippet<[R]>;
+    /**
+     * Optional component to show when the promise is resolved.
+     * If `result` is not provided, this will be used instead.
+     * @see {@link result}
+     */
     children?: Snippet;
+    /**
+     * Optional props to pass to the default loading component if no `loading` prop is provided.
+     * @see {@link loading}
+     */
+    matrixProps?: NeoLoadingMatrixProps;
 }

package/dist/nav/NeoTabs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { NeoTabContextPositions, NeoTabsContext } from './neo-tabs-context.svelte.js';
+  import type { NeoTabContextPositions } from './neo-tabs-context.svelte.js';
   import type { NeoTabsProps, OnChange } from './neo-tabs.model.js';
 
   import { toStyle } from '@dvcol/common-utils/common/class';
@@ -124,43 +124,39 @@
   <IconAdd class="neo-tabs-add" />
 {/snippet}
 
-{#snippet tabs(ctx: NeoTabsContext = context.state)}
-  <svelte:element
-    this={containerTag}
-    bind:this={ref}
-    class:neo-tabs={true}
-    class:neo-inset={(elevation ?? 0) < 0}
-    class:neo-add={add}
-    class:neo-line={line}
-    class:neo-pill={pill}
-    class:neo-slide={slide}
-    class:neo-translate={translate}
-    class:neo-vertical={rest.vertical}
-    class:neo-rounded={rest.rounded}
-    class:neo-dim={dim}
-    style:--neo-tabs-slide-box-shadow={slideShadow}
-    {...containerRest}
-    use:useFn={useProps}
-    out:outFn={outProps}
-    in:inFn={inProps}
-    {style}
-  >
-    <NeoButtonGroup role="tablist" {pressed} {elevation} {...rest} class={['neo-tabs-group', rest.class]}>
-      {@render children?.(ctx)}
-      {#if add}
-        <div transition:transition={shortFreezeTransition}>
-          <NeoButton aria-label="Add new tab" onclick={onadd} {icon} />
-        </div>
-      {/if}
-    </NeoButtonGroup>
-  </svelte:element>
-{/snippet}
-
 {#if before}
   {@render panes?.(context.state)}
 {/if}
 
-{@render tabs()}
+<svelte:element
+  this={containerTag}
+  bind:this={ref}
+  class:neo-tabs={true}
+  class:neo-inset={(elevation ?? 0) < 0}
+  class:neo-add={add}
+  class:neo-line={line}
+  class:neo-pill={pill}
+  class:neo-slide={slide}
+  class:neo-translate={translate}
+  class:neo-vertical={rest.vertical}
+  class:neo-rounded={rest.rounded}
+  class:neo-dim={dim}
+  style:--neo-tabs-slide-box-shadow={slideShadow}
+  {...containerRest}
+  use:useFn={useProps}
+  out:outFn={outProps}
+  in:inFn={inProps}
+  {style}
+>
+  <NeoButtonGroup role="tablist" {pressed} {elevation} {...rest} class={['neo-tabs-group', rest.class]}>
+    {@render children?.(context.state)}
+    {#if add}
+      <div transition:transition={shortFreezeTransition}>
+        <NeoButton aria-label="Add new tab" onclick={onadd} {icon} />
+      </div>
+    {/if}
+  </NeoButtonGroup>
+</svelte:element>
 
 {#if !before}
   {@render panes?.(context.state)}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dvcol/neo-svelte",
   "type": "module",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Neomorphic ui library for svelte 5",
   "author": "dvcol",
   "license": "MIT",