@dvcol/neo-svelte 0.1.2 → 0.1.4

package/dist/nav/NeoTabs.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { toStyle } from '@dvcol/common-utils/common/class';
   import { height, width } from '@dvcol/svelte-utils/transition';
 
   import { untrack } from 'svelte';
@@ -13,6 +14,7 @@
   import { setTabContext } from './neo-tabs-context.svelte.js';
 
   import { toAction, toActionProps, toTransition, toTransitionProps } from '../utils/action.utils.js';
+  import { computeShadowElevation } from '../utils/shadow.utils.js';
 
   /* eslint-disable prefer-const -- necessary for binding checked */
   let {
@@ -30,8 +32,9 @@
     toggle,
     close,
     add,
-    slide,
     line,
+    slide = true,
+    slideElevation = -2,
 
     // Events
     onchange,
@@ -73,7 +76,7 @@
     translate = transform(context.position);
   });
 
-  const style = $derived([containerProps?.style, translate].filter(Boolean).join('; '));
+  const style = $derived(toStyle(containerProps?.style, translate));
 
   // reflect component active to context
   $effect(() => {
@@ -91,15 +94,20 @@
       toggle,
       add,
       close,
+
+      // Groups
+      borderless: rest.borderless,
+      elevation: rest.elevation,
+      pressed: rest.pressed,
+      convex: rest.convex,
       glass: rest.glass,
-      inset: rest.inset,
-      shallow: rest.shallow,
+      start: rest.start,
       vertical: rest.vertical,
-      flat: rest.flat,
-      text: rest.text,
     });
   });
 
+  const slideShadow = $derived(computeShadowElevation(slideElevation, { glass: rest.glass }));
+
   const inFn = $derived(toTransition(containerProps?.in ?? containerProps?.transition));
   const inProps = $derived(toTransitionProps(containerProps?.in ?? containerProps?.transition));
   const outFn = $derived(toTransition(containerProps?.out ?? containerProps?.transition));
@@ -118,15 +126,14 @@
     this={containerTag}
     bind:this={ref}
     class:neo-tabs={true}
-    class:add
-    class:line
-    class:slide
-    class:translate
-    class:flat={rest.flat}
-    class:text={rest.text}
-    class:vertical={rest.vertical}
-    class:rounded={rest.rounded}
-    class:shallow={rest.shallow}
+    class:neo-inset={(rest?.elevation ?? 0) < 0}
+    class:neo-add={add}
+    class:neo-line={line}
+    class:neo-slide={slide}
+    class:neo-translate={translate}
+    class:neo-vertical={rest.vertical}
+    class:neo-rounded={rest.rounded}
+    style:--neo-tabs-slide-box-shadow={slideShadow}
     {...containerProps}
     use:useFn={useProps}
     out:outFn={outProps}
@@ -162,33 +169,34 @@
 .neo-tabs :global(.neo-tabs-add) {
   min-width: 1rem;
 }
-.neo-tabs.vertical :global(.neo-tab) {
+.neo-tabs.neo-vertical :global(.neo-tab) {
   position: relative;
   width: 100%;
   min-width: max-content;
 }
-.neo-tabs.vertical :global(.neo-tab .neo-button) {
+.neo-tabs.neo-vertical :global(.neo-tab .neo-button) {
   justify-content: flex-start;
 }
-.neo-tabs.vertical :global(.neo-tab-close .icon-close) {
+.neo-tabs.neo-vertical :global(.neo-tab-close .neo-icon-close) {
   position: absolute;
   top: calc(50% - 0.5rem);
 }
-.neo-tabs.vertical :global(.neo-tab-close:not(.reverse) .icon-close) {
+.neo-tabs.neo-vertical :global(.neo-tab-close:not(.neo-reverse) .neo-icon-close) {
   right: 0.75rem;
 }
-.neo-tabs.vertical :global(.neo-tab-close.reverse .icon-close) {
+.neo-tabs.neo-vertical :global(.neo-tab-close.neo-reverse .neo-icon-close) {
   left: 0.75rem;
 }
-.neo-tabs.vertical.add :global(.neo-button-group) {
+.neo-tabs.neo-vertical.neo-add :global(.neo-button-group) {
   padding-bottom: 0.5rem;
 }
-.neo-tabs.vertical.line :global(.neo-tab::before) {
+.neo-tabs.neo-vertical.neo-line :global(.neo-tab::before) {
   --neo-tab-width: 2px;
   --neo-tab-old-width: 2px;
   --neo-tab-old-max-height: calc(var(--neo-tab-old-height, 100%) - 1rem);
   --neo-tab-max-height: calc(var(--neo-tab-height, 100%) - 1rem);
   top: 0;
+  box-sizing: border-box;
   width: 2px;
   height: 0;
   max-height: var(--neo-tab-max-height);
@@ -196,29 +204,31 @@
   transition: box-shadow 0.3s ease, height 0.3s var(--neo-transition-bezier);
   margin-block: 0.5rem;
 }
-.neo-tabs.vertical.line :global(.neo-tab.active::before) {
+.neo-tabs.neo-vertical.neo-line :global(.neo-tab.neo-active::before) {
   height: var(--neo-tab-height, 100%);
 }
-.neo-tabs.add:not(.vertical) :global(.neo-button-group) {
+.neo-tabs.neo-add:not(.neo-vertical) :global(.neo-button-group) {
   padding-right: 0.5rem;
 }
-.neo-tabs.slide {
+.neo-tabs.neo-slide {
   --neo-tab-width: 100%;
   --neo-tab-height: 100%;
 }
-.neo-tabs.slide :global(.neo-tab .neo-button) {
+.neo-tabs.neo-slide :global(.neo-tab .neo-button) {
   box-shadow: var(--neo-box-shadow-flat) !important;
 }
-.neo-tabs.slide :global(.neo-tab) {
+.neo-tabs.neo-slide :global(.neo-tab .neo-button:hover) {
+  color: var(--neo-tabs-text-color-hover, var(--neo-text-color-hover));
+  transition: opacity 0.3s ease, color 0.1s ease, background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease, border-radius 0.3s ease, box-shadow 0.15s ease-out;
+}
+.neo-tabs.neo-slide :global(.neo-tab) {
   position: relative;
 }
-.neo-tabs.slide :global(.neo-tab::before) {
+.neo-tabs.neo-slide :global(.neo-tab::before) {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset: 0;
   z-index: var(--neo-z-index-in-front, 1);
-  width: var(--neo-tab-width, 100%);
-  height: var(--neo-tab-height, 100%);
+  box-sizing: border-box;
   border: var(--neo-border-width, 1px) var(--neo-tab-border-color, transparent) solid;
   border-radius: var(--neo-tab-border-radius, var(--neo-border-radius));
   box-shadow: var(--neo-box-shadow-flat);
@@ -227,13 +237,13 @@
   content: "";
   pointer-events: none;
 }
-.neo-tabs.slide.line :global(.neo-tab.active::before) {
+.neo-tabs.neo-slide.neo-line :global(.neo-tab.neo-active::before) {
   top: unset;
   bottom: 0;
   background-color: var(--neo-color-primary, var(--neo-text-color));
   box-shadow: var(--neo-box-shadow-flat);
 }
-.neo-tabs.slide.line:not(.vertical) :global(.neo-tab::before) {
+.neo-tabs.neo-slide.neo-line:not(.neo-vertical) :global(.neo-tab::before) {
   --neo-tab-height: 2px;
   --neo-tab-old-height: 2px;
   --neo-tab-old-max-width: calc(var(--neo-tab-old-width, 100%) - 1.5rem);
@@ -245,13 +255,13 @@
   transition: box-shadow 0.3s ease, width 0.3s var(--neo-transition-bezier);
   margin-inline: 0.75rem;
 }
-.neo-tabs.slide.line:not(.vertical) :global(.neo-tab.active::before) {
+.neo-tabs.neo-slide.neo-line:not(.neo-vertical) :global(.neo-tab.neo-active::before) {
   width: var(--neo-tab-width, 100%);
 }
-.neo-tabs.slide :global(.neo-tab.active::before) {
-  box-shadow: var(--neo-box-shadow-inset-3);
+.neo-tabs.neo-slide :global(.neo-tab.neo-active::before) {
+  box-shadow: var(--neo-tabs-slide-box-shadow, var(--neo-box-shadow-inset-2));
 }
-.neo-tabs.slide.translate :global(.neo-tab.active::before) {
+.neo-tabs.neo-slide.neo-translate :global(.neo-tab.neo-active::before) {
   animation: slide 0.6s var(--neo-transition-bezier) forwards;
 }
 @keyframes slide {
@@ -260,7 +270,7 @@
     max-width: var(--neo-tab-old-max-width);
     height: var(--neo-tab-old-height, var(--neo-tab-height, 100%));
     max-height: var(--neo-tab-old-max-height);
-    box-shadow: var(--neo-box-shadow-inset-3);
+    box-shadow: var(--neo-tabs-slide-box-shadow, var(--neo-box-shadow-inset-2));
     transform: var(--neo-tabs-transform);
   }
   100% {
@@ -268,7 +278,7 @@
     max-width: var(--neo-tab-max-width);
     height: var(--neo-tab-height, 100%);
     max-height: var(--neo-tab-max-height);
-    box-shadow: var(--neo-box-shadow-inset-3);
+    box-shadow: var(--neo-tabs-slide-box-shadow, var(--neo-box-shadow-inset-2));
     transform: translate(0, 0);
   }
 }
@@ -280,9 +290,6 @@
     box-shadow: var(--neo-box-shadow-inset-3);
   }
 }
-.neo-tabs.slide.shallow {
-  --neo-box-shadow-inset-3: var(--neo-box-shadow-inset-2);
-}
-.neo-tabs.slide.rounded :global(.neo-button-group .neo-tab::before) {
+.neo-tabs.neo-slide.neo-rounded :global(.neo-button-group .neo-tab::before) {
   border-radius: var(--neo-tab-border-radius, var(--neo-border-radius-lg));
 }</style>

package/dist/nav/NeoTabsCard.svelte

@@ -22,23 +22,21 @@
   /* eslint-enable prefer-const */
 
   const context = getTabContext();
-  const glass = $derived(context?.glass);
-  const borderless = $derived(context?.text);
-
-  const elevation = $derived.by(() => {
-    if (context?.flat) return 0;
-    if (context?.inset) return context?.shallow ? -1 : -2;
-    return context?.shallow ? 1 : 2;
-  });
+  const borderless = $derived(context?.state?.borderless);
+  const elevation = $derived(context?.state?.elevation);
+  const pressed = $derived(context?.state?.pressed);
+  const convex = $derived(context?.state?.convex);
+  const glass = $derived(context?.state?.glass);
+  const start = $derived(context?.state?.start);
 
   $effect.pre(() => {
     setTabsCardContext({ animate });
   });
 </script>
 
-<NeoCard bind:ref {elevation} {borderless} {glass} {...rest}>
+<NeoCard bind:ref {borderless} {elevation} {pressed} {convex} {glass} {start} {...rest}>
   {#if animate}
-    <NeoTransitionContainer {...containerProps}>
+    <NeoTransitionContainer overflowX="hidden" {...containerProps}>
       {@render children?.(context?.state)}
     </NeoTransitionContainer>
   {:else}

package/dist/nav/neo-tabs-context.svelte.d.ts

@@ -19,6 +19,7 @@ type NeoTabContextOptions = {
     disabled?: boolean;
     /**
      * Whether to animate the tab transition.
+     * @default true
      */
     slide?: boolean;
     /**
@@ -33,7 +34,7 @@ type NeoTabContextOptions = {
      * Add a close button to each tab.
      */
     close?: boolean;
-} & Pick<NeoButtonGroupProps, 'vertical' | 'shallow' | 'inset' | 'glass' | 'flat' | 'text'>;
+} & Pick<NeoButtonGroupProps, 'elevation' | 'pressed' | 'convex' | 'borderless' | 'glass' | 'start' | 'vertical'>;
 export type NeoTabsContext<T = unknown> = NeoTabContextOptions & {
     /**
      * The active tab ID.
@@ -53,17 +54,7 @@ export declare class NeoTabContext<T = unknown> {
     get active(): TabId | undefined;
     get value(): NeoTabContextValue<T> | undefined;
     get previous(): NeoTabContextValue<T> | undefined;
-    get disabled(): boolean | undefined;
-    get slide(): boolean | undefined;
-    get toggle(): boolean | undefined;
-    get close(): boolean | undefined;
-    get shallow(): boolean | undefined;
-    get inset(): boolean | undefined;
-    get glass(): boolean | undefined;
-    get vertical(): boolean | undefined;
     get position(): NeoTabContextPositions;
-    get text(): boolean | undefined;
-    get flat(): boolean | undefined;
     get state(): NeoTabsContext;
     constructor({ onChange, onClose }?: NeoTabContextCallbacks<T>);
     getValue(tabId?: TabId): NeoTabContextValue<T> | undefined;

package/dist/nav/neo-tabs-context.svelte.js

@@ -19,54 +19,14 @@ export class NeoTabContext {
     get previous() {
         return this.getValue(this.#previous);
     }
-    get disabled() {
-        return this.#options?.disabled;
-    }
-    get slide() {
-        return this.#options?.slide;
-    }
-    get toggle() {
-        return this.#options?.toggle;
-    }
-    get close() {
-        return this.#options?.close;
-    }
-    get shallow() {
-        return this.#options?.shallow;
-    }
-    get inset() {
-        return this.#options?.inset;
-    }
-    get glass() {
-        return this.#options?.glass;
-    }
-    get vertical() {
-        return this.#options?.vertical;
-    }
     get position() {
         return this.#position;
     }
-    get text() {
-        return this.#options?.text;
-    }
-    get flat() {
-        return this.text || this.#options?.flat;
-    }
     get state() {
         return {
             ...this.#options,
             active: this.active,
             value: this.value,
-            slide: this.slide,
-            close: this.close,
-            toggle: this.toggle,
-            inset: this.inset,
-            glass: this.glass,
-            shallow: this.shallow,
-            vertical: this.vertical,
-            disabled: this.disabled,
-            flat: this.flat,
-            text: this.text,
         };
     }
     constructor({ onChange, onClose } = {}) {
@@ -116,7 +76,7 @@ export class NeoTabContext {
     }
     onChange(tabId, emit = true) {
         if (tabId === this.#active) {
-            if (this.#active && this.toggle)
+            if (this.#active && this.state?.toggle)
                 this.onChange();
             return;
         }

package/dist/nav/neo-tabs.model.d.ts

@@ -4,6 +4,7 @@ import type { NeoTabProps, TabId } from './neo-tab.model.js';
 import type { NeoTabsContext } from './neo-tabs-context.svelte.js';
 import type { HTMLActionProps } from '../utils/action.utils.js';
 import type { HTMLNeoBaseElement, HTMLRefProps } from '../utils/html-element.utils.js';
+import type { ShadowElevation } from '../utils/shadow.utils.js';
 export type NeoTabContextValue<T = unknown> = {
     index: number;
     value?: T;
@@ -11,6 +12,7 @@ export type NeoTabContextValue<T = unknown> = {
 };
 export type OnChange<T = unknown> = (tabId?: TabId, newValue?: NeoTabContextValue<T>, oldValue?: NeoTabContextValue) => unknown;
 export type OnClose<T = unknown> = (tabId?: TabId, value?: NeoTabContextValue<T>) => unknown;
+export type NeoTabsSlideElevation = ShadowElevation;
 export type NeoTabsContainerProps = HTMLNeoBaseElement & HTMLActionProps;
 export type NeoTabsProps<T = unknown> = {
     /**
@@ -36,6 +38,10 @@ export type NeoTabsProps<T = unknown> = {
      * @default false
      */
     before?: boolean;
+    /**
+     * Whether to animate the tab transition.
+     */
+    slideElevation?: NeoTabsSlideElevation;
     /**
      * Event handler that fires when the active tab changes.
      */