@dvcol/neo-svelte 1.1.2 → 1.2.0

package/dist/nav/NeoTab.svelte

@@ -1,4 +1,6 @@
-<script lang="ts">
+<script lang="ts" generics="Id extends TabId, Value = any">
+  import type { TabId } from '../index.js';
+
   import type { NeoTabProps } from './neo-tab.model.js';
 
   import { getUUID } from '@dvcol/common-utils/common/string';
@@ -7,7 +9,7 @@
   import { tick } from 'svelte';
 
   import NeoButton from '../buttons/NeoButton.svelte';
-  import IconClose from '../icons/IconClose.svelte';
+  import NeoIconClose from '../icons/NeoIconClose.svelte';
   import { getTabContext } from './neo-tabs-context.svelte.js';
   import { toAction, toActionProps } from '../utils/action.utils.js';
   import { shortDuration, shortFreezeTransition } from '../utils/transition.utils.js';
@@ -19,8 +21,9 @@
     // States
     ref = $bindable(),
     tag = 'div',
-    tabId = getUUID(),
+    tabId = `neo-tab-${getUUID()}` as Id,
     value,
+    register = true,
 
     // styles
     close,
@@ -32,9 +35,9 @@
     // Other props
     tabProps,
     ...rest
-  }: NeoTabProps = $props();
+  }: NeoTabProps<Id, Value> = $props();
 
-  const context = getTabContext();
+  const context = getTabContext<Id, Value>();
   const pane = $derived(context?.getPane(tabId)?.toString());
   const active = $derived(context?.active === tabId);
   const disabled = $derived(rest.disabled || (rest.disabled !== false && context?.state?.disabled));
@@ -45,7 +48,7 @@
   });
   const slide = $derived(context?.state?.slide);
 
-  const onClick: NeoTabProps['onclick'] = (e) => {
+  const onClick: NeoTabProps<Id, Value>['onclick'] = (e) => {
     context?.onChange(tabId);
     onclick?.(e);
   };
@@ -64,11 +67,11 @@
 
   watch(
     () => {
-      if (!ref) return;
-      context?.register(tabId, { ref, value });
-      return () => context?.remove(tabId);
+      if (!ref || !register) return;
+      context?.register(tabId, { ref, value }, register === 'force');
+      return () => register && context?.remove(tabId);
     },
-    () => ref,
+    () => [ref, register],
   );
 
   const onClose = (e: MouseEvent) => {
@@ -82,6 +85,10 @@
   const useProps = $derived(toActionProps(tabProps?.use));
 </script>
 
+{#snippet innerChildren()}
+  {@render children?.({ active, tabId, value })}
+{/snippet}
+
 <svelte:element
   this={tag}
   bind:this={ref}
@@ -103,13 +110,11 @@
     toggle
     checked={active}
     onclick={onClick}
-    empty={!children}
     {...rest}
     {disabled}
     class={['neo-tab-button', rest.class]}
-  >
-    {@render children?.({ active, tabId, value })}
-  </NeoButton>
+    children={children ? innerChildren : undefined}
+  />
   {#if closeable}
     <button
       type="button"
@@ -119,7 +124,7 @@
       transition:width={{ duration: skip ? 0 : shortDuration }}
       onclick={onClose}
     >
-      <IconClose class="neo-icon-close" size="1rem" />
+      <NeoIconClose class="neo-icon-close" size="1rem" />
     </button>
   {/if}
 </svelte:element>

package/dist/nav/NeoTab.svelte.d.ts

@@ -1,4 +1,19 @@
+import type { TabId } from '../index.js';
 import type { NeoTabProps } from './neo-tab.model.js';
-declare const NeoTab: import("svelte").Component<NeoTabProps, {}, "ref">;
-type NeoTab = ReturnType<typeof NeoTab>;
+declare class __sveltets_Render<Id extends TabId, Value = any> {
+    props(): NeoTabProps<Id, Value>;
+    events(): {};
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Id extends TabId, Value = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Id, Value>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Id, Value>['props']>, ReturnType<__sveltets_Render<Id, Value>['events']>, ReturnType<__sveltets_Render<Id, Value>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Id, Value>['bindings']>;
+    } & ReturnType<__sveltets_Render<Id, Value>['exports']>;
+    <Id extends TabId, Value = any>(internal: unknown, props: ReturnType<__sveltets_Render<Id, Value>['props']> & {}): ReturnType<__sveltets_Render<Id, Value>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const NeoTab: $$IsomorphicComponent;
+type NeoTab<Id extends TabId, Value = any> = InstanceType<typeof NeoTab<Id, Value>>;
 export default NeoTab;

package/dist/nav/NeoTabPanel.svelte

@@ -1,4 +1,6 @@
-<script lang="ts">
+<script lang="ts" generics="Id extends TabId, Value = any">
+  import type { TabId } from '../index.js';
+
   import type { NeoTabPanelProps } from './neo-tab-panel.model.js';
 
   import { emptyTransition } from '@dvcol/svelte-utils/transition';
@@ -29,9 +31,9 @@
 
     // Other props
     ...rest
-  }: NeoTabPanelProps = $props();
+  }: NeoTabPanelProps<Id, Value> = $props();
 
-  const context = getTabContext();
+  const context = getTabContext<Id, Value>();
   const active = $derived(context?.active === tabId);
   const orientation = $derived(context?.state?.vertical ? 'y' : 'x');
 
@@ -53,7 +55,7 @@
     toTransitionProps(outAction ?? transitionAction, animated ? { [orientation]: `${100 * direction}%`, duration: 600 } : undefined),
   );
 
-  const paneId = $derived(tabId ? `neo-tab-panel-${String(tabId)}` : undefined);
+  const paneId = $derived(tabId ? `neo-tab-panel-${String(tabId)}` as Id : undefined);
   $effect.pre(() => {
     untrack(() => {
       if (!tabId || !paneId) return;
@@ -70,7 +72,7 @@
   <svelte:element
     this={tag}
     role="tabpanel"
-    id={paneId}
+    id={paneId?.toString()}
     aria-labelledby={tabId ? `neo-tab-${String(tabId)}` : undefined}
     data-tab-id={tabId ?? (empty ? 'empty' : undefined)}
     bind:this={ref}

package/dist/nav/NeoTabPanel.svelte.d.ts

@@ -1,4 +1,19 @@
+import type { TabId } from '../index.js';
 import type { NeoTabPanelProps } from './neo-tab-panel.model.js';
-declare const NeoTabPanel: import("svelte").Component<NeoTabPanelProps, {}, "ref">;
-type NeoTabPanel = ReturnType<typeof NeoTabPanel>;
+declare class __sveltets_Render<Id extends TabId, Value = any> {
+    props(): NeoTabPanelProps<Id, Value>;
+    events(): {};
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Id extends TabId, Value = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Id, Value>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Id, Value>['props']>, ReturnType<__sveltets_Render<Id, Value>['events']>, ReturnType<__sveltets_Render<Id, Value>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Id, Value>['bindings']>;
+    } & ReturnType<__sveltets_Render<Id, Value>['exports']>;
+    <Id extends TabId, Value = any>(internal: unknown, props: ReturnType<__sveltets_Render<Id, Value>['props']> & {}): ReturnType<__sveltets_Render<Id, Value>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const NeoTabPanel: $$IsomorphicComponent;
+type NeoTabPanel<Id extends TabId, Value = any> = InstanceType<typeof NeoTabPanel<Id, Value>>;
 export default NeoTabPanel;

package/dist/nav/NeoTabs.svelte

@@ -1,6 +1,6 @@
-<script lang="ts">
+<script lang="ts" generics="Id extends TabId, Value = any">
   import type { NeoTabContextPositions } from './neo-tabs-context.svelte.js';
-  import type { NeoTabsProps, OnChange } from './neo-tabs.model.js';
+  import type { NeoTabsProps, OnChange, TabId } from './neo-tabs.model.js';
 
   import { toStyle } from '@dvcol/common-utils/common/class';
   import { height, width } from '@dvcol/svelte-utils/transition';
@@ -8,9 +8,10 @@
 
   import NeoButton from '../buttons/NeoButton.svelte';
   import NeoButtonGroup from '../buttons/NeoButtonGroup.svelte';
-  import IconAdd from '../icons/IconAdd.svelte';
+  import NeoIconAdd from '../icons/NeoIconAdd.svelte';
   import { setTabContext } from './neo-tabs-context.svelte.js';
   import { toAction, toActionProps, toTransition, toTransitionProps } from '../utils/action.utils.js';
+  import { computeBorderRadius } from '../utils/border.utils.js';
   import { coerce, computeShadowElevation, getDefaultElevation, getDefaultSlideElevation } from '../utils/shadow.utils.js';
   import { shortFreezeTransition } from '../utils/transition.utils.js';
 
@@ -25,6 +26,10 @@
     value = $bindable(),
     disabled,
 
+    // Group Props
+    offsetWidth = $bindable(),
+    offsetHeight = $bindable(),
+
     // Styles
     before,
     toggle,
@@ -48,7 +53,7 @@
     // Other props
     containerProps,
     ...rest
-  }: NeoTabsProps = $props();
+  }: NeoTabsProps<Id, Value> = $props();
 
   const { tag: containerTag = 'div', ...containerRest } = $derived(containerProps ?? {});
 
@@ -56,17 +61,17 @@
   const slideElevation = $derived(coerce(_slideElevation ?? getDefaultSlideElevation(elevation)));
 
   // reflect context active to component
-  const onChange: OnChange = (_tabId, _new, _old) => {
+  const onChange: OnChange<Id, Value> = (_tabId, _new, _old) => {
     active = _tabId;
     value = _new;
     onchange?.(_tabId, _new, _old);
   };
 
-  const context = setTabContext({ onChange, onClose: onclose });
+  export const context = setTabContext<Id, Value>({ onChange, onClose: onclose });
   const transition = $derived(rest.vertical ? height : width);
 
   // Function to compute the transform
-  function transform({ oldTab, newTab }: NeoTabContextPositions) {
+  function transform({ oldTab, newTab }: NeoTabContextPositions<Id>) {
     if (!newTab) return;
     if (!oldTab) return;
 
@@ -121,11 +126,11 @@
 </script>
 
 {#snippet icon()}
-  <IconAdd class="neo-tabs-add" />
+  <NeoIconAdd class="neo-tabs-add" />
 {/snippet}
 
 {#if before}
-  {@render panes?.(context.state)}
+  {@render panes?.(context.state, context)}
 {/if}
 
 <svelte:element
@@ -142,14 +147,15 @@
   class:neo-rounded={rest.rounded}
   class:neo-dim={dim}
   style:--neo-tabs-slide-box-shadow={slideShadow}
+  style:--neo-tab-border-radius={computeBorderRadius(rest.rounded)}
   {...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)}
+  <NeoButtonGroup bind:offsetWidth bind:offsetHeight role="tablist" {pressed} {elevation} {...rest} class={['neo-tabs-group', rest.class]}>
+    {@render children?.(context.state, context)}
     {#if add}
       <div transition:transition={shortFreezeTransition}>
         <NeoButton aria-label="Add new tab" onclick={onadd} {icon} />
@@ -159,7 +165,7 @@
 </svelte:element>
 
 {#if !before}
-  {@render panes?.(context.state)}
+  {@render panes?.(context.state, context)}
 {/if}
 
 <style>.neo-tabs {
@@ -197,7 +203,7 @@
   height: 0;
   max-height: var(--neo-tab-max-height);
   margin-left: 0.3rem;
-  transition: box-shadow 0.3s ease-out, height 0.3s var(--neo-transition-bezier);
+  transition: height 0.3s var(--neo-transition-bezier);
   margin-block: 0.5rem;
 }
 .neo-tabs.neo-vertical.neo-line :global(> .neo-tabs-group .neo-tab.neo-active::before) {
@@ -228,7 +234,6 @@
   border-radius: var(--neo-tab-border-radius, var(--neo-border-radius));
   box-shadow: var(--neo-box-shadow-flat);
   backface-visibility: hidden;
-  transition: box-shadow 0.3s ease-out;
   content: "";
   pointer-events: none;
   inset: 0;
@@ -250,7 +255,7 @@
   max-width: var(--neo-tab-max-width);
   height: 2px;
   margin-bottom: 0.125rem;
-  transition: box-shadow 0.3s ease-out, height 0.3s var(--neo-transition-bezier);
+  transition: height 0.3s var(--neo-transition-bezier);
   margin-inline: 0.75rem;
 }
 .neo-tabs.neo-slide.neo-line:not(.neo-vertical) :global(> .neo-tabs-group .neo-tab.neo-active::before) {
@@ -259,7 +264,6 @@
 .neo-tabs.neo-slide.neo-pill:not(.neo-line) :global(> .neo-tabs-group .neo-tab::before) {
   --neo-tabs-slide-box-shadow: var(--neo-box-shadow-flat);
   z-index: var(--neo-z-index-behind, -1) !important;
-  transition: box-shadow 0.3s ease-out, background-color 0.3s linear;
 }
 .neo-tabs.neo-slide.neo-pill:not(.neo-line) :global(> .neo-tabs-group .neo-tab.neo-active::before) {
   background-color: var(--neo-tab-bg-color, var(--neo-background-color-secondary));
@@ -300,5 +304,5 @@
   }
 }
 .neo-tabs.neo-slide.neo-rounded :global(> .neo-tabs-group .neo-tab::before) {
-  border-radius: var(--neo-tab-border-radius, var(--neo-border-radius-lg));
+  border-radius: var(--neo-tab-border-radius, var(--neo-border-radius-xxl));
 }</style>

package/dist/nav/NeoTabs.svelte.d.ts

@@ -1,4 +1,20 @@
-import type { NeoTabsProps } from './neo-tabs.model.js';
-declare const NeoTabs: import("svelte").Component<NeoTabsProps, {}, "ref" | "value" | "active">;
-type NeoTabs = ReturnType<typeof NeoTabs>;
+import type { NeoTabsProps, TabId } from './neo-tabs.model.js';
+declare class __sveltets_Render<Id extends TabId, Value = any> {
+    props(): NeoTabsProps<Id, Value>;
+    events(): {};
+    slots(): {};
+    bindings(): "value" | "ref" | "active" | "offsetHeight" | "offsetWidth";
+    exports(): {
+        context: import("./neo-tabs-context.svelte.js").NeoTabContext<Id, Value>;
+    };
+}
+interface $$IsomorphicComponent {
+    new <Id extends TabId, Value = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Id, Value>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Id, Value>['props']>, ReturnType<__sveltets_Render<Id, Value>['events']>, ReturnType<__sveltets_Render<Id, Value>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Id, Value>['bindings']>;
+    } & ReturnType<__sveltets_Render<Id, Value>['exports']>;
+    <Id extends TabId, Value = any>(internal: unknown, props: ReturnType<__sveltets_Render<Id, Value>['props']> & {}): ReturnType<__sveltets_Render<Id, Value>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const NeoTabs: $$IsomorphicComponent;
+type NeoTabs<Id extends TabId, Value = any> = InstanceType<typeof NeoTabs<Id, Value>>;
 export default NeoTabs;

package/dist/nav/NeoTabsCard.svelte

@@ -1,4 +1,6 @@
-<script lang="ts">
+<script lang="ts" generics="Id extends TabId, Value = any">
+  import type { TabId } from '../index.js';
+
   import type { NeoTabsCardProps } from './neo-tabs-card.model.js';
 
   import NeoCard from '../cards/NeoCard.svelte';
@@ -19,9 +21,9 @@
     // Other props
     containerProps,
     ...rest
-  }: NeoTabsCardProps = $props();
+  }: NeoTabsCardProps<Id, Value> = $props();
 
-  const context = getTabContext();
+  const context = getTabContext<Id, Value>();
   const borderless = $derived(context?.state?.borderless);
   const elevation = $derived(context?.state?.elevation);
   const pressed = $derived(context?.state?.pressed);

package/dist/nav/NeoTabsCard.svelte.d.ts

@@ -1,4 +1,19 @@
+import type { TabId } from '../index.js';
 import type { NeoTabsCardProps } from './neo-tabs-card.model.js';
-declare const NeoTabsCard: import("svelte").Component<NeoTabsCardProps, {}, "ref">;
-type NeoTabsCard = ReturnType<typeof NeoTabsCard>;
+declare class __sveltets_Render<Id extends TabId, Value = any> {
+    props(): NeoTabsCardProps<Id, Value>;
+    events(): {};
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Id extends TabId, Value = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Id, Value>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Id, Value>['props']>, ReturnType<__sveltets_Render<Id, Value>['events']>, ReturnType<__sveltets_Render<Id, Value>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Id, Value>['bindings']>;
+    } & ReturnType<__sveltets_Render<Id, Value>['exports']>;
+    <Id extends TabId, Value = any>(internal: unknown, props: ReturnType<__sveltets_Render<Id, Value>['props']> & {}): ReturnType<__sveltets_Render<Id, Value>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const NeoTabsCard: $$IsomorphicComponent;
+type NeoTabsCard<Id extends TabId, Value = any> = InstanceType<typeof NeoTabsCard<Id, Value>>;
 export default NeoTabsCard;

package/dist/nav/NeoTabsRow.svelte

@@ -0,0 +1,225 @@
+<script lang="ts" generics="Id extends TabId, Value = any">
+  import type { NeoMenuItem } from '../floating/menu/neo-menu-list-item.model.js';
+  import type { TabId } from './neo-tab.model.js';
+  import type { NeoTabContext, NeoTabsContext } from './neo-tabs-context.svelte.js';
+  import type { NeoTabRowItem, NeoTabsRowProps } from './neo-tabs-row.model.js';
+
+  import { getUUID } from '@dvcol/common-utils/common/string';
+  import { watch } from '@dvcol/svelte-utils/watch';
+  import { tick } from 'svelte';
+  import { innerHeight, innerWidth } from 'svelte/reactivity/window';
+
+  import NeoButton from '../buttons/NeoButton.svelte';
+  import NeoMenu from '../floating/menu/NeoMenu.svelte';
+  import NeoIconBouncingDots from '../icons/NeoIconBouncingDots.svelte';
+  import { isTabRowDivider } from './neo-tabs-row.model.js';
+  import NeoTab from './NeoTab.svelte';
+  import NeoTabDivider from './NeoTabDivider.svelte';
+  import NeoTabs from './NeoTabs.svelte';
+
+  let {
+    // Snippets
+    children: innerChildren,
+    collapsed,
+
+    // State
+    tabs = [],
+    threshold = $bindable(0),
+
+    // Tabs props
+    ref = $bindable(),
+    active = $bindable(),
+    value = $bindable(),
+    offsetWidth = $bindable(),
+    offsetHeight = $bindable(),
+    vertical,
+
+    // Button props
+    hovered = $bindable(false),
+    focused = $bindable(false),
+
+    // Events
+    ontabfocus,
+    ontabhover,
+
+    // Other props
+    menuProps,
+    iconProps,
+    tabProps,
+    collapseProps,
+    ...rest
+  }: NeoTabsRowProps<Id, Value> = $props();
+
+  function tabRowItemToMenuItem(item: NeoTabRowItem<Id, Value>, next?: NeoTabRowItem<Id, Value>): NeoMenuItem<Value> | undefined {
+    if (isTabRowDivider(item)) return undefined;
+    return {
+      id: item.tabId ?? `neo-tab-${getUUID()}`,
+      label: item.label,
+      value: item.value!,
+      before: item.icon,
+      reverse: item.reverse,
+      disabled: item.disabled,
+      readonly: item.readonly,
+      color: item.color,
+      href: item.href,
+      onclick: item.onclick,
+      divider: {
+        bottom: next && isTabRowDivider(next),
+      },
+      ...item.menuProps,
+      buttonProps: {
+        get checked() {
+          return item.tabId === active;
+        },
+        ...item.menuProps?.buttonProps,
+        onfocus: (e) => {
+          item.menuProps?.buttonProps?.onfocus?.(e);
+          ontabfocus?.(e, {
+            tabId: item.tabId ?? tabProps?.tabId,
+            value: item.value ?? tabProps?.value,
+          });
+        },
+        onpointerenter: (e) => {
+          item.menuProps?.buttonProps?.onpointerenter?.(e);
+          ontabhover?.(e, {
+            tabId: item.tabId ?? tabProps?.tabId,
+            value: item.value ?? tabProps?.value,
+          });
+        },
+      },
+    } satisfies NeoMenuItem<Value>;
+  }
+
+  const visible = $derived(threshold ? tabs?.slice(0, -threshold) : tabs);
+  const hidden = $derived(threshold ? tabs?.slice(-threshold) : []);
+  const items = $derived(
+    hidden?.map((t, i, arr) => tabRowItemToMenuItem(t, arr[i + 1]))
+      .filter(Boolean) as NeoMenuItem[],
+  );
+
+  const isOverflown = (el?: Element) => {
+    if (!el || !tabs?.length) return false;
+    if (vertical) return el.scrollHeight > el.clientHeight;
+    return el.scrollWidth > el.clientWidth;
+  };
+
+  let instance = $state<{ context: NeoTabContext<Id, Value> }>();
+  let menu = $state<HTMLElement>();
+
+  watch(
+    () => {
+      if (!instance?.context) return;
+      hidden?.forEach((item) => {
+        if (isTabRowDivider(item) || item.tabId === undefined) return;
+        instance?.context?.register(item.tabId, { ref: menu, value: item.value }, true);
+      });
+      return () => hidden?.forEach((item) => {
+        if (isTabRowDivider(item) || item.tabId === undefined) return;
+        instance?.context?.remove(item.tabId, false);
+      });
+    },
+    () => [instance?.context, hidden],
+  );
+
+  const onSelect = (item: NeoMenuItem, ctx: NeoTabContext<Id, Value>) => {
+    if (item?.id === undefined) return;
+    ctx.onChange(item.id as Id);
+  };
+
+  const activeMenu = $derived(items.some(t => t.id === active));
+
+  const autoSize = async (el = ref?.firstElementChild) => {
+    threshold = 0;
+    await tick();
+    if (!el || !tabs?.length) return;
+    while (threshold < tabs.length && isOverflown(el)) {
+      threshold += 1;
+      await tick();
+    }
+  };
+
+  watch(
+    () => {
+      void autoSize();
+    },
+    () => [
+      vertical,
+      offsetWidth,
+      offsetHeight,
+      innerWidth.current,
+      innerHeight.current,
+    ],
+  );
+</script>
+
+<NeoTabs bind:this={instance} bind:ref bind:active bind:value bind:offsetWidth bind:offsetHeight nowrap {vertical} {...rest}>
+  {#snippet children(ctx: NeoTabsContext<Id, Value>, context: NeoTabContext<Id, Value>)}
+
+    {@render innerChildren?.(ctx, { items, threshold, menuProps, collapseProps, iconProps })}
+
+    {#each visible as _props, index ((isTabRowDivider(_props) ? _props.id : _props.tabId) ?? index)}
+      {#if (isTabRowDivider(_props))}
+        <NeoTabDivider vertical={!vertical} {..._props} />
+      {:else}
+        {@const { menuProps: _, label: __, icon: ___, ...tabItemProps } = _props}
+        <NeoTab
+          register="force"
+          {...tabProps}
+          {...tabItemProps}
+          onfocus={(e) => {
+            tabProps?.onfocus?.(e);
+            _props?.onfocus?.(e);
+            ontabfocus?.(e, {
+              tabId: _props?.tabId ?? tabProps?.tabId,
+              value: _props?.value ?? tabProps?.value,
+            });
+          }}
+          onpointerenter={(e) => {
+            tabProps?.onpointerenter?.(e);
+            _props?.onpointerenter?.(e);
+            ontabhover?.(e, {
+              tabId: _props?.tabId ?? tabProps?.tabId,
+              value: _props?.value ?? tabProps?.value,
+            });
+          }}
+        />
+      {/if}
+    {/each}
+
+    {#if items?.length && collapsed}
+      {@render collapsed(ctx, { items, threshold, menuProps, collapseProps, iconProps })}
+    {:else if items?.length}
+      <div bind:this={menu} class="neo-tab neo-tabs-row-collapse" class:neo-vertical={vertical} class:neo-active={activeMenu}>
+        <NeoMenu {items} openOnClick onSelect={item => onSelect(item, context)} {...menuProps}>
+          <NeoButton
+            bind:hovered
+            bind:focused
+            toggle
+            checked={activeMenu}
+            disabled={rest.disabled}
+            {...collapseProps}
+            class={['neo-tab-button', collapseProps?.class]}
+          >
+            {#snippet icon()}
+              <NeoIconBouncingDots bounce={hovered || focused} {...iconProps} />
+            {/snippet}
+          </NeoButton>
+        </NeoMenu>
+      </div>
+    {/if}
+  {/snippet}
+</NeoTabs>
+
+<style>.neo-tabs-row-collapse {
+  display: inline-flex;
+}
+.neo-tabs-row-collapse.neo-vertical {
+  width: 100%;
+}
+.neo-tabs-row-collapse :global(> .neo-tooltip-trigger) {
+  width: 100%;
+  height: 100%;
+}
+.neo-tabs-row-collapse :global(> .neo-tooltip-trigger) :global(svg) {
+  margin-inline: 0.25rem;
+}</style>

package/dist/nav/NeoTabsRow.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { TabId } from './neo-tab.model.js';
+import type { NeoTabsRowProps } from './neo-tabs-row.model.js';
+declare class __sveltets_Render<Id extends TabId, Value = any> {
+    props(): NeoTabsRowProps<Id, Value>;
+    events(): {};
+    slots(): {};
+    bindings(): "value" | "ref" | "active" | "hovered" | "focused" | "offsetHeight" | "offsetWidth" | "threshold";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Id extends TabId, Value = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Id, Value>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Id, Value>['props']>, ReturnType<__sveltets_Render<Id, Value>['events']>, ReturnType<__sveltets_Render<Id, Value>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Id, Value>['bindings']>;
+    } & ReturnType<__sveltets_Render<Id, Value>['exports']>;
+    <Id extends TabId, Value = any>(internal: unknown, props: ReturnType<__sveltets_Render<Id, Value>['props']> & {}): ReturnType<__sveltets_Render<Id, Value>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const NeoTabsRow: $$IsomorphicComponent;
+type NeoTabsRow<Id extends TabId, Value = any> = InstanceType<typeof NeoTabsRow<Id, Value>>;
+export default NeoTabsRow;

package/dist/nav/index.d.ts

@@ -3,7 +3,9 @@ export { default as NeoTabDivider } from './NeoTabDivider.svelte';
 export { default as NeoTabPanel } from './NeoTabPanel.svelte';
 export { default as NeoTabs } from './NeoTabs.svelte';
 export { default as NeoTabsCard } from './NeoTabsCard.svelte';
+export { default as NeoTabsRow } from './NeoTabsRow.svelte';
 export type * from './neo-tab-panel.model.js';
 export type * from './neo-tab.model.js';
 export type * from './neo-tabs-card.model.js';
+export type * from './neo-tabs-row.model.js';
 export type * from './neo-tabs.model.js';

package/dist/nav/index.js

@@ -3,3 +3,4 @@ export { default as NeoTabDivider } from './NeoTabDivider.svelte';
 export { default as NeoTabPanel } from './NeoTabPanel.svelte';
 export { default as NeoTabs } from './NeoTabs.svelte';
 export { default as NeoTabsCard } from './NeoTabsCard.svelte';
+export { default as NeoTabsRow } from './NeoTabsRow.svelte';

package/dist/nav/neo-tab-panel.model.d.ts

@@ -3,15 +3,15 @@ import type { TabId } from './neo-tab.model.js';
 import type { NeoTabsContext } from './neo-tabs-context.svelte.js';
 import type { HTMLTransitionProps } from '../utils/action.utils.js';
 import type { HTMLNeoBaseElement, HTMLRefProps } from '../utils/html-element.utils.js';
-export type NeoTabPanelProps<Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'div'> = {
+export type NeoTabPanelProps<Id extends TabId, Value = unknown, Tag extends keyof HTMLElementTagNameMap = 'div'> = {
     /**
      * Snippet to display as the tab content.
      */
-    children?: Snippet<[NeoTabsContext<Value> | undefined]>;
+    children?: Snippet<[NeoTabsContext<Id, Value> | undefined]>;
     /**
      * The tab id to associate with this panel.
      */
-    tabId?: TabId;
+    tabId?: Id;
     /**
      * If `true`, the pane will appear when no other tabs are active.
      */