@dvcol/neo-svelte 0.1.2 → 0.1.4

package/dist/cards/NeoCard.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
+  import type { FocusEventHandler, MouseEventHandler } from 'svelte/elements';
   import type { NeoCardContext, NeoCardProps } from './neo-card.model.js';
 
   import NeoButton from '../buttons/NeoButton.svelte';
   import NeoDivider from '../divider/NeoDivider.svelte';
   import IconClose from '../icons/IconClose.svelte';
   import { toAction, toActionProps, toTransition, toTransitionProps } from '../utils/action.utils.js';
-  import { computeGlassFilter, computeHoverShadowElevation, computeShadowElevation } from '../utils/shadow.utils.js';
+  import {
+    computeGlassFilter,
+    computeHoverShadowElevation,
+    computeShadowElevation,
+    getDefaultElevation,
+    isShadowFlat,
+  } from '../utils/shadow.utils.js';
 
   /* eslint-disable prefer-const -- necessary for binding checked */
   let {
@@ -18,11 +25,16 @@
 
     // States
     ref = $bindable(),
+    hovered = $bindable(false),
+    focused = $bindable(false),
     tag = 'div',
     close,
+    disabled,
 
     // Styles
-    elevation = 3,
+    pressed,
+    convex,
+    elevation = getDefaultElevation(pressed),
     hover = 0,
     borderless,
     rounded,
@@ -30,6 +42,7 @@
     segmented,
     cover,
     start,
+    skeleton,
     horizontal,
 
     // Flex
@@ -47,6 +60,10 @@
 
     // Events
     onClose,
+    onfocusin,
+    onfocusout,
+    onmouseenter,
+    onmouseleave,
 
     // Other props
     contentTag = 'div',
@@ -59,30 +76,54 @@
     actionProps,
     mediaTag = 'div',
     mediaProps,
+    closeProps,
     ...rest
   }: NeoCardProps = $props();
   /* eslint-enable prefer-const */
 
-  const filter = $derived.by(() => computeGlassFilter(elevation, glass));
+  const filter = $derived(computeGlassFilter(elevation, glass));
 
-  const boxShadow = $derived.by(() => computeShadowElevation(elevation, glass));
+  const boxShadow = $derived(computeShadowElevation(elevation, { glass, pressed, convex }));
   const hoverElevation = $derived(elevation + hover);
-  const hoverShadow = $derived.by(() => computeHoverShadowElevation(elevation, hover, glass) ?? boxShadow);
+  const hoverShadow = $derived(computeHoverShadowElevation(elevation, hover, { glass, pressed, convex }) ?? boxShadow);
 
-  const hoverFlat = $derived(boxShadow.endsWith('flat') && !hoverShadow.endsWith('flat'));
-  const flatHover = $derived(hoverShadow.endsWith('flat') && !boxShadow.endsWith('flat'));
+  const hoverFlat = $derived(isShadowFlat(boxShadow) && !isShadowFlat(hoverShadow));
+  const flatHover = $derived(isShadowFlat(hoverShadow) && !isShadowFlat(boxShadow));
 
   const segments = $derived([content, header, action, footer, media, close].filter(Boolean).length > 1);
 
+  const onMouseEnter: MouseEventHandler<HTMLDivElement> = e => {
+    hovered = true;
+    onmouseenter?.(e);
+  };
+
+  const onMouseLeave: MouseEventHandler<HTMLDivElement> = e => {
+    hovered = false;
+    onmouseleave?.(e);
+  };
+
+  const onFocusIn: FocusEventHandler<HTMLInputElement> = e => {
+    focused = true;
+    onfocusin?.(e);
+  };
+
+  const onFocusOut: FocusEventHandler<HTMLInputElement> = e => {
+    focused = false;
+    onfocusout?.(e);
+  };
+
   const context: NeoCardContext = $derived({
     elevation,
     hover,
+    hovered,
+    disabled,
     borderless,
     rounded,
     glass,
     segmented,
     cover,
     start,
+    skeleton,
     horizontal,
     close,
     onClose,
@@ -100,7 +141,7 @@
 {#snippet closeBtn()}
   {#if close}
     <div class="neo-card-close">
-      <NeoButton aria-label="Close card" rounded text onclick={onClose}>
+      <NeoButton aria-label="Close card" rounded text onclick={onClose} {...closeProps}>
         {#snippet icon()}
           <IconClose />
         {/snippet}
@@ -119,21 +160,28 @@
 
 <svelte:element
   this={tag}
+  role="none"
   bind:this={ref}
   class:neo-card={true}
-  class:horizontal
-  class:borderless
-  class:segmented={segmented === true}
-  class:segments
-  class:image={media && !segments}
-  class:rounded
-  class:hover
-  class:start
-  class:raised={elevation > 3}
-  class:flat={!elevation}
-  class:hover-flat={hoverFlat}
-  class:flat-hover={flatHover}
-  class:glass
+  class:neo-horizontal={horizontal}
+  class:neo-borderless={borderless}
+  class:neo-segmented={segmented === true}
+  class:neo-segments={segments}
+  class:neo-image={media && !segments}
+  class:neo-rounded={rounded}
+  class:neo-disabled={disabled}
+  class:neo-skeleton={skeleton}
+  class:neo-pressed={pressed}
+  class:neo-convex={convex}
+  class:neo-hover={hover}
+  class:neo-hovered={hovered}
+  class:neo-start={start}
+  class:neo-raised={elevation > 3 || hoverElevation > 3}
+  class:neo-inset={elevation < -3 || hoverElevation < -3}
+  class:neo-flat={!elevation}
+  class:neo-hover-flat={hoverFlat}
+  class:neo-flat-hover={flatHover}
+  class:neo-glass={glass}
   style:--neo-card-hover-shadow={hoverShadow}
   style:--neo-card-box-shadow={boxShadow}
   style:--neo-card-glass-blur={filter}
@@ -144,14 +192,18 @@
   out:outFn={outProps}
   in:inFn={inProps}
   {...rest}
+  onmouseenter={onMouseEnter}
+  onmouseleave={onMouseLeave}
+  onfocusin={onFocusIn}
+  onfocusout={onFocusOut}
 >
   {#if media}
     <svelte:element
       this={mediaTag}
       class:neo-card-segment={true}
       class:neo-card-media={true}
-      class:cover
-      class:inset={elevation < 0 || hoverElevation < 0}
+      class:neo-cover={cover}
+      class:neo-inset={elevation < 0 || hoverElevation < 0}
       {...mediaProps}
     >
       {@render media?.(context)}
@@ -193,63 +245,72 @@
 </svelte:element>
 
 <style>.neo-card {
-  --neo-card-full-spacing: var(--neo-card-spacing, 1.5rem);
-  --neo-card-half-spacing: calc(var(--neo-card-spacing, 1.5rem) / 2);
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   width: fit-content;
-  margin: var(--neo-shadow-margin, 0.6rem);
-  padding: var(--neo-card-full-spacing);
+  margin: var(--neo-card-margin, var(--neo-shadow-margin, 0.625rem));
+  padding: var(--neo-card-spacing, 1.5rem);
   color: var(--neo-card-text-color, inherit);
   background-color: var(--neo-card-bg-color, transparent);
-  border: var(--neo-border-width, 1px) var(--neo-card-border-color, transparent) solid;
+  border: var(--neo-card-border-width, var(--neo-border-width, 1px)) var(--neo-card-border-color, transparent) solid;
   border-radius: var(--neo-card-border-radius, var(--neo-border-radius));
   box-shadow: var(--neo-card-box-shadow, var(--neo-box-shadow-flat));
   transition: margin 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease-out;
 }
-.neo-card.borderless {
+.neo-card-content {
+  flex: 1 1 auto;
+}
+.neo-card.neo-borderless {
   border-color: transparent !important;
 }
-.neo-card.raised {
+.neo-card.neo-disabled {
+  box-shadow: var(--neo-box-shadow-flat) !important;
+  opacity: var(--neo-card-opacity-disabled, var(--neo-opacity-disabled));
+}
+.neo-card.neo-disabled:not(.neo-borderless) {
+  border-color: var(--neo-card-border-color-disabled, var(--neo-border-color-disabled)) !important;
+}
+.neo-card.neo-inset.neo-pressed, .neo-card.neo-raised:not(.neo-convex) {
   margin: var(--neo-shadow-margin-lg, 1.125rem);
 }
-.neo-card.hover.flat-hover:hover, .neo-card.flat:not(.borderless, .hover-flat:hover) {
+.neo-card.neo-hover.neo-flat-hover.neo-hovered, .neo-card.neo-hover.neo-flat-hover:hover, .neo-card.neo-hover.neo-flat-hover:focus-within, .neo-card.neo-flat:not(.neo-borderless, .neo-hover-flat:hover, .neo-hover-flat.neo-hovered, .neo-hover-flat:focus-within) {
   border-color: var(--neo-card-border-color, var(--neo-border-color));
 }
-.neo-card.hover:hover {
+.neo-card:focus-within, .neo-card.neo-hover:hover, .neo-card.neo-hover.neo-hovered {
   box-shadow: var(--neo-card-hover-shadow, var(--neo-card-box-shadow));
 }
 .neo-card .neo-card-divider {
-  margin: 0.5rem calc(var(--neo-card-full-spacing) - 0.25rem);
+  margin: 0.5rem calc(var(--neo-card-spacing, 1.5rem) - 0.25rem);
 }
 .neo-card .neo-card-segment {
   transition: border-radius 0.3s ease;
 }
 .neo-card .neo-card-segment:not(.neo-card-media) {
-  padding: var(--neo-card-half-spacing) var(--neo-card-full-spacing);
+  padding: calc(var(--neo-card-spacing, 1.5rem) / 2) var(--neo-card-spacing, 1.5rem);
 }
 .neo-card .neo-card-segment:not(.neo-card-media):first-child {
-  padding: var(--neo-card-full-spacing) var(--neo-card-full-spacing) var(--neo-card-half-spacing);
+  padding: var(--neo-card-spacing, 1.5rem) var(--neo-card-spacing, 1.5rem) calc(var(--neo-card-spacing, 1.5rem) / 2);
   border-radius: var(--neo-card-border-radius, var(--neo-border-radius)) var(--neo-card-border-radius, var(--neo-border-radius)) 0 0;
 }
 .neo-card .neo-card-segment:not(.neo-card-media):last-child {
-  padding: var(--neo-card-half-spacing) var(--neo-card-full-spacing) var(--neo-card-full-spacing);
+  padding: calc(var(--neo-card-spacing, 1.5rem) / 2) var(--neo-card-spacing, 1.5rem) var(--neo-card-spacing, 1.5rem);
   border-radius: 0 0 var(--neo-card-border-radius, var(--neo-border-radius)) var(--neo-card-border-radius, var(--neo-border-radius));
 }
 .neo-card .neo-card-media {
-  margin: var(--neo-card-full-spacing);
+  margin: var(--neo-card-spacing, 1.5rem);
   overflow: hidden;
   border-radius: var(--neo-card-border-radius, var(--neo-border-radius));
+  scrollbar-gutter: auto;
 }
-.neo-card .neo-card-media.cover:not(.inset) {
+.neo-card .neo-card-media.neo-cover:not(.neo-inset) {
   padding: 0;
 }
-.neo-card .neo-card-media.cover:not(.inset):not(:only-child) {
-  margin: 0 0 var(--neo-card-full-spacing);
+.neo-card .neo-card-media.neo-cover:not(.neo-inset):not(:only-child) {
+  margin: 0 0 var(--neo-card-spacing, 1.5rem);
   border-radius: var(--neo-card-border-radius, var(--neo-border-radius)) var(--neo-card-border-radius, var(--neo-border-radius)) 0 0;
 }
-.neo-card .neo-card-media.cover:not(.inset) :global(.neo-skeleton-media) {
+.neo-card .neo-card-media.neo-cover:not(.neo-inset) :global(.neo-skeleton-media) {
   border-radius: 0;
 }
 .neo-card .neo-card-action,
@@ -271,87 +332,129 @@
 .neo-card:focus-within .neo-card-close, .neo-card:focus .neo-card-close, .neo-card:hover .neo-card-close {
   opacity: 1;
 }
-.neo-card.image {
+.neo-card.neo-image {
   padding: 0;
 }
-.neo-card.image .neo-card-media.cover:not(.inset) {
+.neo-card.neo-image .neo-card-media.neo-cover:not(.neo-inset) {
   margin: 0;
 }
-.neo-card.segments {
+.neo-card.neo-segments {
   padding: 0;
 }
-.neo-card.segmented .neo-card-segment:not(.neo-card-media) {
-  padding: var(--neo-card-full-spacing);
+.neo-card.neo-segmented .neo-card-segment:not(.neo-card-media) {
+  padding: var(--neo-card-spacing, 1.5rem);
 }
-.neo-card.segmented .neo-card-segment:not(.neo-card-media, :last-child) {
+.neo-card.neo-segmented .neo-card-segment:not(.neo-card-media, :last-child) {
   border-bottom: var(--neo-border-width, 1px) solid var(--neo-card-border-color, var(--neo-border-color));
 }
-.neo-card.glass {
+.neo-card.neo-glass {
   --neo-skeleton-color: var(--neo-glass-skeleton-color);
+  --neo-border-color: var(--neo-glass-border-color);
   background-color: var(--neo-card-bg-color, var(--neo-glass-background-color));
   border-color: var(--neo-card-border-color, var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color) var(--neo-glass-left-border-color));
-  backdrop-filter: var(--neo-card-glass-blur, var(--neo-blur-4) var(--neo-saturate-2));
+  backdrop-filter: var(--neo-card-glass-blur, var(--neo-blur-3) var(--neo-saturate-2));
 }
 @starting-style {
-  .neo-card.start {
+  .neo-card.neo-start {
     box-shadow: var(--neo-box-shadow-flat);
   }
-  .neo-card.start:not(.borderless) {
+  .neo-card.neo-start:not(.neo-borderless) {
     border-color: var(--neo-card-border-color, var(--neo-border-color));
   }
 }
-.neo-card.horizontal {
+.neo-card.neo-horizontal {
   flex-direction: row;
 }
-.neo-card.horizontal .neo-card-action {
+.neo-card.neo-horizontal .neo-card-action {
   flex-direction: column;
 }
-.neo-card.horizontal .neo-card-close {
+.neo-card.neo-horizontal .neo-card-close {
   align-self: flex-end;
   margin-bottom: auto;
 }
-.neo-card.horizontal .neo-card-media.cover:not(.inset, :only-child) {
-  margin: 0 var(--neo-card-full-spacing) 0 0;
+.neo-card.neo-horizontal .neo-card-media.neo-cover:not(.neo-inset, :only-child) {
+  margin: 0 var(--neo-card-spacing, 1.5rem) 0 0;
   border-radius: var(--neo-card-border-radius, var(--neo-border-radius)) 0 0 var(--neo-card-border-radius, var(--neo-border-radius));
 }
-.neo-card.horizontal .neo-card-segment:not(.neo-card-media) {
-  padding: var(--neo-card-full-spacing) var(--neo-card-half-spacing);
+.neo-card.neo-horizontal .neo-card-segment:not(.neo-card-media) {
+  padding: var(--neo-card-spacing, 1.5rem) calc(var(--neo-card-spacing, 1.5rem) / 2);
 }
-.neo-card.horizontal .neo-card-segment:not(.neo-card-media):first-child {
-  padding: var(--neo-card-full-spacing) var(--neo-card-half-spacing) var(--neo-card-full-spacing) var(--neo-card-full-spacing);
+.neo-card.neo-horizontal .neo-card-segment:not(.neo-card-media):first-child {
+  padding: var(--neo-card-spacing, 1.5rem) calc(var(--neo-card-spacing, 1.5rem) / 2) var(--neo-card-spacing, 1.5rem) var(--neo-card-spacing, 1.5rem);
   border-radius: var(--neo-card-border-radius, var(--neo-border-radius)) 0 0 var(--neo-card-border-radius, var(--neo-border-radius));
 }
-.neo-card.horizontal .neo-card-segment:not(.neo-card-media):last-child {
-  padding: var(--neo-card-full-spacing) var(--neo-card-full-spacing) var(--neo-card-full-spacing) var(--neo-card-half-spacing);
+.neo-card.neo-horizontal .neo-card-segment:not(.neo-card-media):last-child {
+  padding: var(--neo-card-spacing, 1.5rem) var(--neo-card-spacing, 1.5rem) var(--neo-card-spacing, 1.5rem) calc(var(--neo-card-spacing, 1.5rem) / 2);
   border-radius: 0 var(--neo-card-border-radius, var(--neo-border-radius)) var(--neo-card-border-radius, var(--neo-border-radius)) 0;
 }
-.neo-card.rounded {
+.neo-card.neo-rounded {
   border-radius: var(--neo-card-border-radius, var(--neo-border-radius-lg));
 }
-.neo-card.rounded .neo-card-media {
+.neo-card.neo-rounded .neo-card-media {
   border-radius: var(--neo-card-border-radius, var(--neo-border-radius-md));
 }
-.neo-card.rounded .neo-card-media.cover:not(.inset) {
+.neo-card.neo-rounded .neo-card-media.neo-cover:not(.neo-inset) {
   border-radius: var(--neo-card-border-radius, var(--neo-border-radius-lg));
 }
-.neo-card.rounded .neo-card-media.cover:not(.inset):not(:only-child) {
+.neo-card.neo-rounded .neo-card-media.neo-cover:not(.neo-inset):not(:only-child) {
   border-radius: var(--neo-card-border-radius, var(--neo-border-radius-lg)) var(--neo-card-border-radius, var(--neo-border-radius-lg)) 0 0;
 }
-.neo-card.rounded .neo-card-segment:not(.neo-card-media):first-child {
+.neo-card.neo-rounded .neo-card-segment:not(.neo-card-media):first-child {
   border-radius: var(--neo-card-border-radius, var(--neo-border-radius-lg)) var(--neo-card-border-radius, var(--neo-border-radius-lg)) 0 0;
 }
-.neo-card.rounded .neo-card-segment:not(.neo-card-media):last-child {
+.neo-card.neo-rounded .neo-card-segment:not(.neo-card-media):last-child {
   border-radius: 0 0 var(--neo-card-border-radius, var(--neo-border-radius-lg)) var(--neo-card-border-radius, var(--neo-border-radius-lg));
 }
-.neo-card.rounded.horizontal .neo-card-segment:not(.neo-card-media):first-child {
+.neo-card.neo-rounded.neo-horizontal .neo-card-segment:not(.neo-card-media):first-child {
   border-radius: var(--neo-card-border-radius, var(--neo-border-radius-lg)) 0 0 var(--neo-card-border-radius, var(--neo-border-radius-lg));
 }
-.neo-card.rounded.horizontal .neo-card-segment:not(.neo-card-media):last-child {
+.neo-card.neo-rounded.neo-horizontal .neo-card-segment:not(.neo-card-media):last-child {
   border-radius: 0 var(--neo-card-border-radius, var(--neo-border-radius-lg)) var(--neo-card-border-radius, var(--neo-border-radius-lg)) 0;
 }
-.neo-card.rounded.horizontal .neo-card-media.cover:not(.inset, :only-child) {
+.neo-card.neo-rounded.neo-horizontal .neo-card-media.neo-cover:not(.neo-inset, :only-child) {
   border-radius: var(--neo-card-border-radius, var(--neo-border-radius-lg)) 0 0 var(--neo-card-border-radius, var(--neo-border-radius-lg));
 }
+.neo-card.neo-skeleton {
+  box-shadow: var(--neo-box-shadow-flat);
+  pointer-events: none;
+  --neo-skeleton-color-start: var(--neo-skeleton-color);
+  --neo-skeleton-color-end: oklch(from var(--neo-skeleton-color) calc(l - var(--neo-skeleton-color-step, 0.05)) c h);
+  color: var(--neo-skeleton-color-start);
+  background-color: var(--neo-skeleton-color-start);
+  border-color: var(--neo-skeleton-color-start);
+  transition: background-color 1s ease, color 1s ease, border-color 1s ease;
+  animation: skeleton 3s var(--neo-transition-skeleton) infinite;
+  animation-delay: 1s;
+}
+.neo-card.neo-skeleton::before, .neo-card.neo-skeleton::after,
+.neo-card.neo-skeleton :global(> *::before),
+.neo-card.neo-skeleton :global(> *::after),
+.neo-card.neo-skeleton :global(> *) {
+  visibility: hidden;
+  pointer-events: none;
+}
+@keyframes skeleton {
+  0% {
+    color: var(--neo-skeleton-color-start);
+    background-color: var(--neo-skeleton-color-start);
+    border-color: var(--neo-skeleton-color-start);
+  }
+  40% {
+    color: var(--neo-skeleton-color-end);
+    background-color: var(--neo-skeleton-color-end);
+    border-color: var(--neo-skeleton-color-end);
+  }
+  80% {
+    color: var(--neo-skeleton-color-start);
+    background-color: var(--neo-skeleton-color-start);
+    border-color: var(--neo-skeleton-color-start);
+  }
+  100% {
+    color: var(--neo-skeleton-color-start);
+    background-color: var(--neo-skeleton-color-start);
+    border-color: var(--neo-skeleton-color-start);
+  }
+}
 
 .neo-card,
 .neo-card-media,
@@ -367,7 +470,7 @@
 .neo-card-content::-webkit-scrollbar,
 .neo-card-action::-webkit-scrollbar,
 .neo-card-footer::-webkit-scrollbar {
-  width: var(--neo-scrollbar-width, 0.45rem);
+  width: var(--neo-scrollbar-width, 0.375rem);
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -408,6 +511,6 @@
 .neo-card-content::-webkit-resizer,
 .neo-card-action::-webkit-resizer,
 .neo-card-footer::-webkit-resizer {
-  background: url("~/assets/neo-icon-resizer-bottom-right.svg") no-repeat bottom;
+  background: url("../assets/neo-icon-resizer-bottom-right.svg") no-repeat bottom;
   background-clip: border-box;
 }</style>

package/dist/cards/NeoCard.svelte.d.ts

@@ -14,6 +14,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const NeoCard: $$__sveltets_2_IsomorphicComponent<NeoCardProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
+}, {}, {}, "ref" | "hovered" | "focused">;
 type NeoCard = InstanceType<typeof NeoCard>;
 export default NeoCard;

package/dist/cards/neo-card.model.d.ts

@@ -11,10 +11,30 @@ export type NeoCardContext = {
      */
     elevation?: NeoCardElevation;
     /**
-     * Weather to increase/decrease the elevation when hovered.
+     * Weather to increase/decrease the elevation when hovered/focused.
      * @default 0
      */
     hover?: number;
+    /**
+     * If the card is currently hovered.
+     */
+    hovered?: boolean;
+    /**
+     * If the card has focus within.
+     */
+    focused?: boolean;
+    /**
+     * If true, the card will be displayed as a flat card and hover will be ignored.
+     */
+    disabled?: boolean;
+    /**
+     * If true, negative elevation (< 0) will be displayed as pressed instead of inset.
+     */
+    pressed?: boolean;
+    /**
+     * If true, positive elevation (> 0) will be displayed as convex instead of raised.
+     */
+    convex?: boolean;
     /**
      * By default, cards with no elevation will display a border.
      * If this is `true`, the card will never display a border.
@@ -42,6 +62,10 @@ export type NeoCardContext = {
      * @see [@starting-style](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style) for browser support
      */
     start?: boolean;
+    /**
+     * If true, the card will be disabled and a loading skeleton will be displayed instead of the text.
+     */
+    skeleton?: boolean;
     /**
      * If true, the card will be displayed as a horizontal card.
      */
@@ -126,4 +150,8 @@ export type NeoCardProps = {
      * Props for the card media.
      */
     mediaProps?: HTMLNeoBaseElement;
+    /**
+     * Props for the close button.
+     */
+    closeProps?: NeoButtonProps;
 } & NeoCardContext & HTMLNeoBaseElement & HTMLFlexProps & HTMLActionProps & HTMLRefProps;

package/dist/containers/NeoTransitionContainer.svelte

@@ -9,7 +9,9 @@
     tag = 'div',
 
     // Styles
-    overflow = 'hidden',
+    overflow,
+    overflowX,
+    overflowY,
     width,
     height,
 
@@ -18,7 +20,16 @@
   }: NeoTransitionContainerProps = $props();
 </script>
 
-<svelte:element this={tag} class:neo-transition-container={true} style:overflow-x={overflow} style:width style:height {...rest}>
+<svelte:element
+  this={tag}
+  class:neo-transition-container={true}
+  style:overflow
+  style:overflow-x={overflowX}
+  style:overflow-y={overflowY}
+  style:width
+  style:height
+  {...rest}
+>
   {@render children?.()}
 </svelte:element>
 

package/dist/containers/neo-transition-container.model.d.ts

@@ -10,10 +10,18 @@ export type NeoTransitionContainerProps = {
      * @default 'div'
      */
     tag?: keyof HTMLElementTagNameMap;
+    /**
+     * Overflow style (overflow-x).
+     */
+    overflow?: CSSStyleDeclaration['overflow'];
     /**
      * Horizontal overflow style (overflow-x).
      */
-    overflow?: CSSStyleDeclaration['overflowX'];
+    overflowX?: CSSStyleDeclaration['overflowX'];
+    /**
+     * Vertical overflow style (overflow-x).
+     */
+    overflowY?: CSSStyleDeclaration['overflowY'];
     /**
      * Width of the container.
      */

package/dist/divider/NeoDivider.svelte

@@ -5,16 +5,16 @@
 
   const { elevation = -1, vertical = false, height, width, ...rest }: NeoDividerProps = $props();
 
-  const boxShadow = $derived.by(() => computeShadowElevation(elevation));
+  const boxShadow = $derived(computeShadowElevation(elevation));
 </script>
 
 <div
   role="separator"
   aria-orientation={vertical ? 'vertical' : 'horizontal'}
   class:neo-divider={true}
-  class:vertical
-  class:inset={elevation < 0}
-  class:flat={!elevation}
+  class:neo-vertical={vertical}
+  class:neo-inset={elevation < 0}
+  class:neo-flat={!elevation}
   style:--neo-divider-height={height}
   style:--neo-divider-width={width}
   style:--neo-divider-box-shadow={boxShadow}
@@ -24,24 +24,24 @@
 </div>
 
 <style>.neo-divider {
-  width: calc(var(--neo-divider-width, 100%) - var(--neo-shadow-margin, 0.6rem) * 2);
+  width: calc(var(--neo-divider-width, 100%) - var(--neo-shadow-margin, 0.625rem) * 2);
   height: max(4px, var(--neo-divider-height, 4px));
-  margin: var(--neo-shadow-margin, 0.6rem);
+  margin: var(--neo-shadow-margin, 0.625rem);
   border-radius: var(--neo-divider-border-radius, var(--neo-border-radius-lg));
   box-shadow: var(--neo-divider-box-shadow, var(--neo-box-shadow-raised-2));
 }
-.neo-divider.inset {
+.neo-divider.neo-inset {
   height: max(6px, var(--neo-divider-height, 6px));
   box-shadow: var(--neo-divider-box-shadow, var(--neo-box-shadow-inset-2));
 }
-.neo-divider.vertical {
+.neo-divider.neo-vertical {
   width: var(--neo-divider-height, 4px);
-  height: calc(var(--neo-divider-height, 100%) - var(--neo-shadow-margin, 0.6rem) * 2);
+  height: calc(var(--neo-divider-height, 100%) - var(--neo-shadow-margin, 0.625rem) * 2);
 }
-.neo-divider.vertical.inset {
+.neo-divider.neo-vertical.neo-inset {
   width: max(6px, var(--neo-divider-width, 6px));
 }
-.neo-divider.flat {
+.neo-divider.neo-flat {
   background-color: var(--neo-divider-color, var(--neo-border-color));
   box-shadow: none;
 }</style>

package/dist/icons/IconAccount.svelte

@@ -1,5 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props}>
-  <g fill="none" stroke="currentColor" stroke-dasharray="28" stroke-dashoffset="28" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props} style:scale={$$props.scale} scale={undefined}>
+  <g
+    fill="none"
+    stroke="currentColor"
+    stroke-dasharray="28"
+    stroke-dashoffset="28"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width={$$props.stroke ?? 1.5}
+  >
     <path d="M4 21v-1c0 -3.31 2.69 -6 6 -6h4c3.31 0 6 2.69 6 6v1">
       <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.4s" values="28;0" />
     </path>

package/dist/icons/IconAdd.svelte

@@ -1,5 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props}>
-  <g fill="none" stroke="currentColor" stroke-dasharray="16" stroke-dashoffset="16" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props} style:scale={$$props.scale} scale={undefined}>
+  <g
+    fill="none"
+    stroke="currentColor"
+    stroke-dasharray="16"
+    stroke-dashoffset="16"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width={$$props.stroke ?? 1.5}
+  >
     <path d="M5 12h14">
       <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.4s" values="16;0" />
     </path>

package/dist/icons/IconAlert.svelte

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props}>
-  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props} style:scale={$$props.scale} scale={undefined}>
+  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width={$$props.stroke ?? 1.5}>
     <path
       stroke-dasharray="64"
       stroke-dashoffset="64"