feat(tabs): adds animated tab card wrapper

demo/components/DemoTabs.svelte

@@ -7,7 +7,7 @@
   import { useButtonState } from '../utils/use-button-state.svelte';
 
   import type { TabId } from '~/nav/neo-tab.model';
-  import type { NeoTabsProps } from '~/nav/neo-tabs.model.js';
+  import type { NeoTabContextValue, NeoTabsProps } from '~/nav/neo-tabs.model.js';
 
   import NeoButton from '~/buttons/NeoButton.svelte';
   import NeoButtonGroup from '~/buttons/NeoButtonGroup.svelte';
@@ -37,9 +37,9 @@
   let active: unknown | undefined = $state('button');
   let value: unknown | undefined = $state('button');
 
-  const onChange = (id?: TabId, _value?: unknown) => {
+  const onChange = (id?: TabId, context?: NeoTabContextValue) => {
     active = id;
-    value = _value;
+    value = context?.value;
   };
 
   const onClear = () => onChange();

demo/components/DemoTabsPanels.svelte

@@ -1,21 +1,18 @@
 <script lang="ts">
   import { randomHex } from '@dvcol/common-utils/common/crypto';
 
-  import { fade } from 'svelte/transition';
-
   import SphereBackdrop from '../utils/SphereBackdrop.svelte';
 
   import type { TabId } from '~/nav/neo-tab.model.js';
   import type { NeoTabsProps } from '~/nav/neo-tabs.model.js';
 
   import NeoButton from '~/buttons/NeoButton.svelte';
   import NeoButtonGroup from '~/buttons/NeoButtonGroup.svelte';
-  import NeoCard from '~/cards/NeoCard.svelte';
-  import TransitionContainer from '~/container/TransitionContainer.svelte';
   import IconAccount from '~/icons/IconAccount.svelte';
   import NeoTab from '~/nav/NeoTab.svelte';
   import NeoTabPane from '~/nav/NeoTabPane.svelte';
   import NeoTabs from '~/nav/NeoTabs.svelte';
+  import NeoTabsCard from '~/nav/NeoTabsCard.svelte';
 
   const added = $state([
     { text: `Added ${randomHex(1)}-0`, tabId: crypto.randomUUID() },
@@ -26,6 +23,7 @@
     if (index === -1) return;
     added.splice(index, 1);
   };
+
   const onadd = () => {
     added.push({ text: `Added ${randomHex(1)}-${added.length + 1}`, tabId: crypto.randomUUID() });
   };
@@ -40,6 +38,7 @@
     close: true,
     add: true,
     slide: true,
+    inset: false,
     shallow: false,
     toggle: true,
     before: false,
@@ -55,6 +54,7 @@
   <div class="column">
     <NeoButtonGroup>
       <NeoButton toggle bind:checked={options.disabled}>Disabled</NeoButton>
+      <NeoButton toggle bind:checked={options.inset}>Inset</NeoButton>
       <NeoButton toggle bind:checked={options.shallow}>Shallow</NeoButton>
       <NeoButton toggle bind:checked={options.before}>Before</NeoButton>
       <NeoButton toggle bind:checked={options.vertical}>Vertical</NeoButton>
@@ -79,43 +79,35 @@
 {/snippet}
 
 {#snippet content(word)}
-  <div class="panel" in:fade={{ delay: 400 }} out:fade>
-    <div>{Array.from({ length: 10 }, () => word).join(' ')}</div>
-    <div>{Array.from({ length: 10 }, () => word).join(' ')}</div>
-    <div>{Array.from({ length: 10 }, () => word).join(' ')}</div>
-    <div>{Array.from({ length: 10 }, () => word).join(' ')}</div>
-    <div>{Array.from({ length: 10 }, () => word).join(' ')}</div>
-  </div>
+  <p>{Array.from({ length: 50 }, () => word).join(' ')}</p>
 {/snippet}
 
 {#snippet panes()}
-  <NeoCard>
-    <TransitionContainer>
-      <NeoTabPane empty>
-        {@render content('Empty')}
-      </NeoTabPane>
-      <NeoTabPane tabId="button">
-        {@render content('Button')}
-      </NeoTabPane>
-      <NeoTabPane tabId="icon">
-        {@render content('Icon')}
-      </NeoTabPane>
-      <NeoTabPane tabId="reversed">
-        {@render content('Reversed')}
+  <NeoTabsCard class="panel">
+    <NeoTabPane empty>
+      {@render content('Empty')}
+    </NeoTabPane>
+    <NeoTabPane tabId="button">
+      {@render content('Button')}
+    </NeoTabPane>
+    <NeoTabPane tabId="icon">
+      {@render content('Icon')}
+    </NeoTabPane>
+    <NeoTabPane tabId="reversed">
+      {@render content('Reversed')}
+    </NeoTabPane>
+
+    {#each added as { text, tabId } (tabId)}
+      <NeoTabPane {tabId}>
+        {@render content(text)}
       </NeoTabPane>
-
-      {#each added as { text, tabId } (tabId)}
-        <NeoTabPane {tabId}>
-          {@render content(text)}
-        </NeoTabPane>
-      {/each}
-    </TransitionContainer>
-  </NeoCard>
+    {/each}
+  </NeoTabsCard>
 {/snippet}
 
 {#snippet group(props: NeoTabsProps = {})}
-  <div class="column">
-    <NeoTabs {panes} {active} {onclose} {onadd} {...options} {...props}>
+  <div class="column" class:vertical={options.vertical}>
+    <NeoTabs {panes} {active} {onclose} {onadd} {onchange} {...options} {...props}>
       {@render tabs()}
     </NeoTabs>
   </div>
@@ -138,8 +130,27 @@
 <style lang="scss">
   @use 'src/lib/styles/common/flex' as flex;
 
+  .content {
+    flex: 0 1 37.5rem;
+    max-width: 37.5rem;
+  }
+
+  :global(.panel) {
+    min-width: 34rem;
+    min-height: 20rem;
+  }
+
   .column {
     @include flex.column($center: true, $gap: var(--neo-gap-lg));
+
+    &.vertical {
+      flex-direction: row;
+
+      :global(.panel) {
+        min-width: 28.5rem;
+        min-height: 24rem;
+      }
+    }
   }
 
   .row {
@@ -149,14 +160,4 @@
     justify-content: center;
     margin: 2rem 0;
   }
-
-  .content {
-    flex: 0 1 37.5rem;
-    max-width: 37.5rem;
-  }
-
-  .panel {
-    min-width: 37.5rem;
-    min-height: 15rem;
-  }
 </style>

src/lib/buttons/NeoButtonGroup.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { NeoButtonGroup } from '~/buttons/neo-button-group.model.js';
+  import type { NeoButtonGroupProps } from '~/buttons/neo-button-group.model.js';
 
   import { toAction, toActionProps, toTransition, toTransitionProps } from '~/utils/action.utils.js';
 
@@ -42,7 +42,7 @@
 
     // Other props
     ...rest
-  }: NeoButtonGroup = $props();
+  }: NeoButtonGroupProps = $props();
   /* eslint-enable prefer-const */
 
   const inFn = $derived(toTransition(inAction ?? transitionAction));
@@ -96,11 +96,14 @@
 
 <style lang="scss">
   @use 'src/lib/styles/mixin' as mixin;
-  @use 'src/lib/styles/common/flex' as flex;
 
   .neo-button-group {
-    @include flex.row($flex: 0 1 auto, $center: true, $gap: var(--neo-btn-grp-gap, 0.25rem));
-
+    display: inline-flex;
+    flex: 0 1 auto;
+    flex-flow: row wrap;
+    gap: var(--neo-btn-grp-gap, 0.25rem);
+    align-items: center;
+    justify-content: center;
     box-sizing: border-box;
     width: fit-content;
     margin: var(--neo-shadow-margin, 0.25rem);

src/lib/buttons/neo-button-group.model.ts

@@ -61,9 +61,9 @@ export type NeoButtonGroupContext = {
   vertical?: boolean;
 };
 
-export type NeoButtonGroup = {
+export type NeoButtonGroupProps = {
   /**
-   * Optional snippet to display as the button content.
+   * Snippet to display as the button content.
    */
   children?: Snippet<[NeoButtonGroupContext]>;
 

src/lib/buttons/neo-button.model.ts

@@ -7,7 +7,7 @@ export type NeoButtonProps = {
   // Snippets
 
   /**
-   * Optional snippet to display as the button content.
+   * Snippet to display as the button content.
    */
   children?: Snippet;
   /**

src/lib/cards/NeoCard.svelte

@@ -58,7 +58,6 @@
 <svelte:element
   this={tag}
   bind:this={ref}
-  class="neo-card"
   class:borderless
   class:glass
   class:flat={!elevation}
@@ -70,14 +69,14 @@
   in:inFn={inProps}
   {...rest}
   {style}
+  class={['neo-card', rest.class].filter(Boolean).join(' ')}
 >
   {@render children?.()}
 </svelte:element>
 
 <style lang="scss">
   .neo-card {
     display: flex;
-    flex-direction: column;
     box-sizing: border-box;
     width: calc(100% - var(--neo-shadow-margin, 0.25rem) * 2);
     margin: var(--neo-shadow-margin, 0.25rem);

src/lib/container/NeoTransitionContainer.model.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import type { HTMLNeoBaseElement } from '~/utils/html-element.utils.js';
+
+export type NeoTransitionContainerProps = {
+  // Snippets
+  /**
+   * Snippet to display as the container content.
+   */
+  children?: Snippet;
+
+  // States
+  /**
+   * The HTML tag to use for the container.
+   * @default 'div'
+   */
+  tag?: keyof HTMLElementTagNameMap;
+
+  // Styles
+
+  /**
+   * Overflow style.
+   */
+  overflow: CSSStyleDeclaration['overflow'];
+} & HTMLNeoBaseElement;

src/lib/container/NeoTransitionContainer.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { NeoTransitionContainerProps } from '~/container/NeoTransitionContainer.model.js';
+
+  const {
+    // Snippets
+    children,
+
+    // States
+    tag = 'div',
+
+    // Styles
+    overflow = 'hidden',
+
+    // Other props
+    ...rest
+  }: NeoTransitionContainerProps = $props();
+</script>
+
+<svelte:element this={tag} class="neo-transition-container" style:overflow {...rest}>
+  {@render children?.()}
+</svelte:element>
+
+<style lang="scss">
+  .neo-transition-container {
+    display: grid;
+    grid-template-areas: 'transition';
+
+    :global(> *) {
+      grid-area: transition;
+    }
+  }
+</style>

src/lib/nav/NeoTab.svelte

@@ -38,7 +38,7 @@
   const context = getTabContext();
   const active = $derived(context?.active === tabId);
   const disabled = $derived(rest.disabled || (rest.disabled !== false && context?.disabled));
-  const closeable = $derived(close || (close !== false && context?.closeable));
+  const closeable = $derived(close || (close !== false && context?.close));
   const transition = $derived(context?.vertical ? height : width);
   const slide = $derived(context?.slide);
 
@@ -56,16 +56,18 @@
 
   $effect(() => {
     waitForTick();
-    if (!ref) return;
-    untrack(() => context?.register(tabId, ref!, value));
+    untrack(() => {
+      if (!ref) return;
+      context?.register(tabId, { ref, value });
+    });
     return () => context?.remove(tabId);
   });
 
   const onClose = (e: MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    onclose?.(tabId, value, ref);
-    context?.onClose(tabId, value, ref);
+    onclose?.(tabId);
+    context?.onClose(tabId);
   };
 
   const useFn = $derived(toAction(tabProps?.use));
@@ -102,6 +104,8 @@
 
 <style lang="scss">
   .neo-tab {
+    display: flex;
+
     :global(.neo-button:active),
     :global(.neo-button.pressed),
     :global(.neo-button:focus-visible),
@@ -112,6 +116,10 @@
       }
     }
 
+    :global(.neo-button .icon-close:focus-visible) {
+      transition: none;
+    }
+
     &.slide {
       :global(.neo-button:active .icon-close),
       :global(.neo-button.pressed .icon-close) {