@dvcol/neo-svelte 1.1.0 → 1.1.2

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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)
+
+
+### Bug Fixes
+
+* **lint:** bump deps & fix errors ([b349483](https://github.com/dvcol/neo-svelte/commit/b3494830f2c91586c3b9983e6d016b0fa853c226))
+* **loading:** fix flex behavior ([6bbb288](https://github.com/dvcol/neo-svelte/commit/6bbb288c1e7dcfbd1575960801fdb67dd07c1d11))
+
 ## [1.1.0](https://github.com/dvcol/neo-svelte/compare/v1.0.1...v1.1.0) (2025-04-21)
 
 

package/dist/floating/portal/NeoPortalContainer.svelte

@@ -15,6 +15,11 @@
     id = `neo-portal-container-${getUUID()}`,
     scale = true,
 
+    // Flex
+    justify,
+    align,
+    flex,
+
     // Other Props
     ...rest
   }: NeoPortalContainerProps = $props();
@@ -39,6 +44,9 @@
   class:neo-portal-container={true}
   class:neo-scale={scale}
   class:neo-open={open}
+  style:flex
+  style:align-items={align}
+  style:justify-content={justify}
   {id}
   {...rest}
 >
@@ -49,6 +57,9 @@
   display: contents;
 }
 .neo-portal-container.neo-scale {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
   transition-timing-function: var(--neo-portail-container-exit-timing, ease);
   transition-duration: var(--neo-portail-container-exit-duration, 0.4s);
   transition-property: scale, translate;
@@ -74,8 +85,8 @@
   --neo-portail-container-enter-translate: calc(env(safe-area-inset-left) + 1rem);
 }
 .neo-portal-container.neo-scale.neo-open {
-  scale: var(--neo-portail-container-enter-scale, 0.98);
-  translate: var(--neo-portail-container-enter-translate, 0);
   transition-timing-function: var(--neo-portail-container-enter-timing, ease);
   transition-duration: var(--neo-portail-container-enter-duration, 0.4s);
+  scale: var(--neo-portail-container-enter-scale, 0.98);
+  translate: var(--neo-portail-container-enter-translate, 0);
 }</style>

package/dist/floating/portal/neo-portail-container.model.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLNeoBaseElement, HTMLRefProps } from '../../utils/html-element.utils.js';
+import type { HTMLFlexProps, HTMLNeoBaseElement, HTMLRefProps } from '../../utils/html-element.utils.js';
 export type NeoPortalContainerProps<Tag extends keyof HTMLElementTagNameMap = 'div'> = {
     /**
      * The HTML tag to use for the container.
@@ -9,4 +9,4 @@ export type NeoPortalContainerProps<Tag extends keyof HTMLElementTagNameMap = 'd
      * Whether to scale the container when a portal dialog is open.
      */
     scale?: boolean;
-} & HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]> & HTMLRefProps<HTMLElementTagNameMap[Tag]>;
+} & HTMLNeoBaseElement<HTMLElementTagNameMap[Tag]> & HTMLRefProps<HTMLElementTagNameMap[Tag]> & HTMLFlexProps;

package/dist/inputs/NeoNativeSelect.svelte

@@ -82,8 +82,8 @@
 {/snippet}
 
 {#snippet content()}
-  {#each items as { label, ...option }}
-    <option {...option} value={option.value}>{label ?? option.value}</option>
+  {#each items as { id, label, ...option }, i (id ?? i)}
+    <option {id} {...option} value={option.value}>{label ?? option.value}</option>
   {/each}
   {@render children?.()}
 {/snippet}

package/dist/inputs/NeoPin.svelte

@@ -409,9 +409,9 @@
         bind:value
         oninvalid={onInvalid}
       />
-      {#each { length: Number(groups) } as _, i}
+      {#each { length: Number(groups) } as _, i (i)}
         <div class="neo-pin-group">
-          {#each { length: Number(count) } as __, j}
+          {#each { length: Number(count) } as __, j (j)}
             <NeoInput
               bind:ref={refs[i][j]}
               bind:value={values[i][j]}

package/dist/inputs/NeoRange.svelte

@@ -516,7 +516,7 @@
               <!--   handle after   -->
             </span>
             {#if steps > 1}
-              {#each { length: (steps ?? 0) + 1 } as _, i}
+              {#each { length: (steps ?? 0) + 1 } as _, i (i)}
                 {#if showTick(i)}
                   {@const filled = isFilled(i)}
                   <div class="neo-range-tick" style:--neo-range-tick-index={i}>

package/dist/inputs/neo-select.model.d.ts

@@ -7,6 +7,7 @@ import type { NeoListItemOrSection, NeoListSelectedItem } from '../list/neo-list
 export type NeoNativeSelectOption<Value = unknown> = string | number | ({
     value: Value;
     label?: string | Snippet;
+    id?: string | number;
 } & HTMLOptionAttributes);
 export type NeoNativeSelectProps<Value = unknown> = {
     /**

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}
@@ -31,10 +43,9 @@
 
 <style>.neo-loading-matrix {
   display: flex;
+  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/dist/progress/NeoProgressBar.svelte

@@ -145,7 +145,7 @@
   {...containerRest}
 >
   <NeoProgress bind:ref bind:status bind:value bind:buffer {direction} {width} {height} {track} {...rest} />
-  {#each marks as position, index}
+  {#each marks as position, index (index)}
     {#if position !== undefined}
       <span bind:this={refs[index]} class="neo-progress-bar-mark" style:--neo-progress-bar-mark-position="{position}%">
         {#if typeof mark === 'function'}

package/dist/skeletons/NeoSkeletonText.svelte

@@ -104,9 +104,9 @@
     {/if}
 
     {#if paragraphs && lines}
-      {#each Array.from({ length: Number(paragraphs) }) as _, i}
+      {#each Array.from({ length: Number(paragraphs) }) as _, i (i)}
         <div class:neo-skeleton-text-paragraph={true} class:neo-alt={alt} class:neo-justify={justify} {...paragraphProps}>
-          {#each Array.from({ length: Number(Array.isArray(lines) ? lines[i] : lines) }) as __}
+          {#each Array.from({ length: Number(Array.isArray(lines) ? lines[i] : lines) }) as __, j (j)}
             <div class="neo-skeleton-text-line" class:neo-alt={alt}>&nbsp;</div>
           {/each}
         </div>

package/dist/text/NeoMark.svelte

@@ -24,7 +24,7 @@
 
 <svelte:element this={tag} class:neo-mark={true} {...rest}>
   {#if parts?.length && parts?.at(0)?.mark}
-    {#each parts as { token, mark }}{token}{#if mark}<mark>{mark}</mark>{/if}{/each}
+    {#each parts as { token, mark }, i (i)}{token}{#if mark}<mark>{mark}</mark>{/if}{/each}
   {:else}
     {value}
   {/if}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dvcol/neo-svelte",
   "type": "module",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Neomorphic ui library for svelte 5",
   "author": "dvcol",
   "license": "MIT",
@@ -184,7 +184,7 @@
   "devDependencies": {
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
-    "@dvcol/eslint-config": "^1.5.0",
+    "@dvcol/eslint-config": "^1.6.0",
     "@dvcol/stylelint-plugin-presets": "^2.1.2",
     "@dvcol/svelte-simple-router": "^1.11.2",
     "@prettier/plugin-xml": "^3.4.1",