@dvcol/neo-svelte 1.1.2 → 1.2.0

package/dist/styles/animation.scss

@@ -94,3 +94,79 @@
     }
   }
 }
+
+@mixin spin-in($scale: var(--neo-scale-target, 0.9)) {
+  @keyframes neo-spin-in {
+    0% {
+      --neo-rotation: -90deg;
+
+      animation-timing-function: ease-in-out;
+    }
+
+    20% {
+      --neo-scale: #{$scale};
+      --neo-rotation: -90deg;
+    }
+
+    85% {
+      --neo-scale: #{$scale};
+      --neo-rotation: 0deg;
+
+      animation-timing-function: ease-in-out;
+    }
+
+    100% {
+      --neo-rotation: 0deg;
+    }
+  }
+}
+
+@mixin spin-out($scale: var(--neo-scale-target, 0.9)) {
+  @keyframes neo-spin-out {
+    0% {
+      --neo-rotation: 0deg;
+
+      animation-timing-function: ease-in-out;
+    }
+
+    20% {
+      --neo-scale: #{$scale};
+      --neo-rotation: 0deg;
+    }
+
+    85% {
+      --neo-scale: #{$scale};
+      --neo-rotation: 90deg;
+
+      animation-timing-function: ease-in-out;
+    }
+
+    100% {
+      --neo-rotation: 90deg;
+    }
+  }
+}
+
+@mixin time-in($start: -0.1, $end: 1.1) {
+  @keyframes neo-time-in {
+    0% {
+      --neo-time: #{$start};
+    }
+
+    100% {
+      --neo-time: #{$end};
+    }
+  }
+}
+
+@mixin circle-in($circle-x: 50%, $circle-y: 0%, $size: 120%) {
+  @keyframes circle-in {
+    from {
+      clip-path: circle(0% at #{$circle-x} #{$circle-y});
+    }
+
+    to {
+      clip-path: circle(#{$size} at #{$circle-x} #{$circle-y});
+    }
+  }
+}

package/dist/styles/common/colors.scss

@@ -7,6 +7,7 @@
   --neo-black: oklch(0% 0 0deg);
   --neo-grey: oklch(from var(--neo-black) calc(l + 0.29) c calc(h + 266));
   --neo-grey-dark: oklch(from var(--neo-grey) calc(l + 0.1) c h);
+  --neo-grey-light: oklch(from var(--neo-grey) calc(l + 0.2) c h);
   --neo-blue: oklch(50% 0.302 264.206deg);
   --neo-blue-dark: oklch(from var(--neo-blue) calc(l + 0.35) c h);
   --neo-purple-light: oklch(from var(--neo-purple) calc(l + 0.35) c h);
@@ -39,9 +40,10 @@
   // Text
   --neo-text-color: var(--neo-grey-dark);
   --neo-text-color-inverse: var(--neo-white-soft);
+  --neo-text-color-highlight: oklch(from currentcolor calc(l - 0.15) c h);
   --neo-text-color-secondary: color-mix(in srgb, currentcolor, white 20%);
   --neo-text-color-secondary-hover: color-mix(in srgb, currentcolor, white 10%);
-  --neo-text-color-highlight: oklch(from currentcolor calc(l - 0.15) c h);
+  --neo-text-color-secondary-highlight: color-mix(in srgb, var(--neo-text-color-highlight), white 10%);
   --neo-text-color-active: color-mix(in srgb, currentcolor, white 10%);
   --neo-text-color-hover: oklch(from currentcolor calc(l + 0.075) c h);
   --neo-text-color-hover-active: color-mix(in srgb, var(--neo-text-color-hover), white 10%);
@@ -65,7 +67,9 @@
 
   // Background
   --neo-background-color: var(--neo-white-soft);
+  --neo-background-color-hover: oklch(from var(--neo-background-color) calc(l - 0.01) c h);
   --neo-background-color-tinted: color-mix(in srgb, var(--neo-background-color), currentcolor 2%);
+  --neo-background-color-tinted-hover: color-mix(in srgb, var(--neo-background-color), currentcolor 3%);
   --neo-background-color-secondary: color-mix(in srgb, var(--neo-background-color), black 5%);
   --neo-background-color-secondary-hover: color-mix(in srgb, var(--neo-background-color), black 8%);
   --neo-background-color-backdrop: color-mix(in srgb, transparent, var(--neo-background-color) 20%);
@@ -89,7 +93,9 @@
 
   // Background
   --neo-glass-background-color: color-mix(in srgb, transparent, currentcolor 1%);
+  --neo-glass-background-color-hover: color-mix(in srgb, transparent, currentcolor 2%);
   --neo-glass-background-color-tinted: color-mix(in srgb, transparent, currentcolor 5%);
+  --neo-glass-background-color-tinted-hover: color-mix(in srgb, transparent, currentcolor 4%);
 
   // Shadow
   --neo-glass-shadow-color-light: oklch(from var(--neo-shadow-color-light) l c h / 60%);
@@ -97,7 +103,7 @@
 
   // Border
   --neo-filled-border-color: var(--neo-shadow-color-light);
-  --neo-glass-border-color: color-mix(in srgb, var(--neo-shadow-color-light), currentcolor 5%);
+  --neo-glass-border-color: color-mix(in srgb, oklch(from var(--neo-shadow-color-light) l c h / 10%), currentcolor 5%);
   --neo-glass-border-color-flat: color-mix(in srgb, var(--neo-glass-shadow-color-dark), currentcolor 10%);
   --neo-glass-border-color-flat-highlight: color-mix(in srgb, var(--neo-glass-shadow-color-dark), currentcolor 30%);
 
@@ -123,9 +129,10 @@
   // Text
   --neo-dark-text-color: var(--neo-white-soft);
   --neo-dark-text-color-inverse: var(--neo-grey);
+  --neo-dark-text-color-highlight: oklch(from currentcolor calc(l + 0.15) c h);
   --neo-dark-text-color-secondary: color-mix(in srgb, currentcolor, black 20%);
   --neo-dark-text-color-secondary-hover: color-mix(in srgb, currentcolor, black 10%);
-  --neo-dark-text-color-highlight: oklch(from currentcolor calc(l + 0.15) c h);
+  --neo-dark-text-color-secondary-highlight: color-mix(in srgb, var(--neo-dark-text-color-highlight), black 20%);
   --neo-dark-text-color-active: color-mix(in srgb, currentcolor, black 10%);
   --neo-dark-text-color-hover: oklch(from currentcolor calc(l - 0.075) c h);
   --neo-dark-text-color-hover-active: color-mix(in srgb, var(--neo-dark-text-color-hover), black 10%);
@@ -146,6 +153,7 @@
 
   // Background
   --neo-dark-background-color: var(--neo-grey);
+  --neo-dark-background-color-hover: oklch(from var(--neo-dark-background-color) calc(l - 0.005) c h);
   --neo-dark-background-color-secondary: color-mix(in srgb, var(--neo-dark-background-color), white 5%);
   --neo-dark-background-color-secondary-hover: color-mix(in srgb, var(--neo-dark-background-color), white 8%);
   --neo-dark-background-color-backdrop: color-mix(in srgb, transparent, var(--neo-background-color) 20%);
@@ -165,16 +173,13 @@
    ** glass colors **
    ******************/
 
-  // Background
-  --neo-dark-glass-background-color: color-mix(in srgb, currentcolor, transparent 99%);
-
   // Shadow
   --neo-dark-glass-shadow-color-light: oklch(from var(--neo-dark-shadow-color-light) l c h / 60%);
   --neo-dark-glass-shadow-color-dark: oklch(from var(--neo-black) l c h / 18%);
 
   // Border
   --neo-dark-filled-border-color: var(--neo-dark-shadow-color-light);
-  --neo-dark-glass-border-color: color-mix(in srgb, oklch(from var(--neo-dark-shadow-color-light) l c h / 5%), currentcolor 5%);
+  --neo-dark-glass-border-color: color-mix(in srgb, oklch(from var(--neo-dark-shadow-color-light) l c h / 10%), currentcolor 5%);
   --neo-dark-glass-border-color-flat: color-mix(in srgb, var(--neo-dark-glass-shadow-color-light), currentcolor 10%);
   --neo-dark-glass-border-color-flat-highlight: color-mix(in srgb, var(--neo-dark-glass-shadow-color-light), currentcolor 30%);
 
@@ -204,9 +209,10 @@
   // Text
   --neo-text-color: var(--neo-dark-text-color);
   --neo-text-color-inverse: var(--neo-dark-text-color-inverse);
+  --neo-text-color-highlight: var(--neo-dark-text-color-highlight);
   --neo-text-color-secondary: var(--neo-dark-text-color-secondary);
   --neo-text-color-secondary-hover: var(--neo-dark-text-color-secondary-hover);
-  --neo-text-color-highlight: var(--neo-dark-text-color-highlight);
+  --neo-text-color-secondary-highlight: var(--neo-dark-text-color-secondary-highlight);
   --neo-text-color-active: var(--neo-dark-text-color-active);
   --neo-text-color-hover: var(--neo-dark-text-color-hover);
   --neo-text-color-hover-active: var(--neo-dark-text-color-hover-active);
@@ -226,6 +232,7 @@
 
   // Background
   --neo-background-color: var(--neo-dark-background-color);
+  --neo-background-color-hover: var(--neo-dark-background-color-hover);
   --neo-background-color-secondary: var(--neo-dark-background-color-secondary);
   --neo-background-color-secondary-hover: var(--neo-dark-background-color-secondary-hover);
   --neo-background-color-backdrop: var(--neo-dark-background-color-backdrop);
@@ -253,7 +260,6 @@
   --neo-glass-border-color-flat-highlight: var(--neo-dark-glass-border-color-flat-highlight);
 
   // Background
-  --neo-glass-background-color: var(--neo-dark-glass-background-color);
   --neo-glass-shadow-color-light: var(--neo-dark-glass-shadow-color-light);
   --neo-glass-shadow-color-dark: var(--neo-dark-glass-shadow-color-dark);
 

package/dist/styles/common/properties.css

@@ -27,3 +27,21 @@
   initial-value: transparent;
   inherits: true;
 }
+
+@property --neo-rotation {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+@property --neo-scale {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --neo-time {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}

package/dist/styles/common/spacing.scss

@@ -6,15 +6,19 @@
   --neo-border-radius-xs: 0.25rem;
   --neo-border-radius-sm: 0.375rem;
   --neo-border-radius: 0.5rem;
-  --neo-border-radius-md: 1rem;
-  --neo-border-radius-lg: 2rem;
+  --neo-border-radius-md: 0.75rem;
+  --neo-border-radius-lg: 1rem;
+  --neo-border-radius-xl: 1.5rem;
+  --neo-border-radius-xxl: 2rem;
+  --neo-border-radius-3xl: 3rem;
 
   /* Outline */
   --neo-outline-offset-width: -1px;
 
   /* Gap */
-  --neo-gap-tiny: 0.25rem;
-  --neo-gap-xxxs: 0.3125rem;
+  --neo-gap-5xs: 0.125rem;
+  --neo-gap-4xs: 0.25rem;
+  --neo-gap-3xs: 0.3125rem;
   --neo-gap-xxs: 0.5rem;
   --neo-gap-xs: 0.625rem;
   --neo-gap-sm: 0.75rem;

package/dist/styles/common/typography.scss

@@ -2,7 +2,7 @@
   /* Default font stack */
   --neo-font-family: -apple-system, ui-sans-serif, system-ui, 'Segoe UI', ui-rounded, sans-serif;
 
-  /* font variables */
+  /* font sizes */
   --neo-font-size-xxs: 0.625rem;
   --neo-font-size-xs: 0.75rem;
   --neo-font-size-sm: 0.875rem;
@@ -11,7 +11,17 @@
   --neo-font-size-lg: 1.25rem;
   --neo-font-size-xl: 1.5rem;
   --neo-font-size-xxl: 1.875rem;
-  --neo-font-size-xxxl: 2.125rem;
+  --neo-font-size-3xl: 2.125rem;
+
+  /* font weight */
+  --neo-font-weight-xxs: 100;
+  --neo-font-weight-xs: 200;
+  --neo-font-weight-sm: 300;
+  --neo-font-weight: normal;
+  --neo-font-weight-md: 500;
+  --neo-font-weight-lg: 600;
+  --neo-font-weight-xl: 700;
+  --neo-font-weight-xxl: 800;
 
   /* Line height */
   --neo-line-height-xxs: 0.75rem;
@@ -32,7 +42,7 @@
   }
 
   h1 {
-    font-size: var(--neo-h1-font-size, var(--neo-font-size-xxxl));
+    font-size: var(--neo-h1-font-size, var(--neo-font-size-3xl));
     line-height: var(--neo-h1-line-height, 1);
   }
 

package/dist/styles/common/utils.scss

@@ -9,8 +9,8 @@
   --neo-blur-1: blur(4px);
   --neo-blur-2: blur(6px);
   --neo-blur-3: blur(8px);
-  --neo-blur-4: blur(12px);
-  --neo-blur-5: blur(16px);
+  --neo-blur-4: blur(16px);
+  --neo-blur-5: blur(32px);
 
   /* Saturation */
   --neo-saturate-0: saturate(1);

package/dist/styles/mixin.scss

@@ -190,6 +190,7 @@
   border-color: $color;
   opacity: $start;
   transition:
+    border-radius calc($delay / 3) ease,
     background-color $delay ease,
     color calc($delay / 3) ease,
     border-color $delay ease,
@@ -368,6 +369,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: $word-break;
+  overflow-wrap: anywhere;
 }
 
 @mixin transition-container($area: transition, $width: 100%) {
@@ -387,15 +389,19 @@
   $background-color: --neo-floating-bg-color,
   $border-color: --neo-floating-border-color,
   $border-radius: --neo-floating-border-radius,
+  $border-radius-rounded: --neo-floating-border-radius-rounded,
   $box-shadow: --neo-floating-box-shadow,
+  $default-box-shadow: --neo-glass-box-shadow-raised-1,
   $backdrop-filter: --neo-floating-backdrop-filter,
+  $default-filter: --neo-blur-3,
   $z-index: --neo-floating-z-index,
+  $base-z-index: --neo-z-index-layer-ui,
   $elevation: --neo-floating-elevation,
+  $transition: true,
   $borderless: false,
   $tinted: false,
   $filled: false
 ) {
-  z-index: var($z-index, calc(var(--neo-z-index-layer-ui, 1000) + var($elevation, 1)));
   color: var($color, inherit);
   background-color: var($background-color, var(--neo-glass-background-color));
   border: var(--neo-border-width, 1px) solid var($border-color, var(--neo-glass-background-color));
@@ -405,17 +411,24 @@
   );
   border-radius: var($border-radius, var(--neo-border-radius));
   outline: none;
-  box-shadow: var($box-shadow, var(--neo-glass-box-shadow-raised-1));
-  backdrop-filter: var($backdrop-filter, var(--neo-blur-3));
-  transition:
-    box-shadow 0.3s ease-out,
-    backdrop-filter 0.3s ease,
-    border-radius 0.3s ease,
-    border-color 0.3s ease,
-    padding 0.3s ease;
+  box-shadow: var($box-shadow, var($default-box-shadow));
+  backdrop-filter: var($backdrop-filter, var($default-filter));
+
+  @if $transition {
+    transition:
+      box-shadow 0.3s ease-out,
+      backdrop-filter 0.3s ease,
+      border-radius 0.3s ease,
+      border-color 0.3s ease,
+      padding 0.3s ease;
+  }
+
+  @if $z-index {
+    z-index: var($z-index, calc(var($base-z-index, 1000) + var($elevation, 1)));
+  }
 
   @if $padding {
-    padding: var($padding, var(--neo-gap-xxxs) var(--neo-gap-xs));
+    padding: var($padding, var(--neo-gap-3xs) var(--neo-gap-xs));
   }
 
   @if $tinted {
@@ -452,7 +465,90 @@
       padding: var($padding, var(--neo-gap-xs) var(--neo-gap));
     }
 
-    border-radius: var($border-radius, var(--neo-border-radius-lg));
+    border-radius: var($border-radius, var($border-radius-rounded, var(--neo-border-radius-xxl)));
+  }
+}
+
+@mixin fixed(
+  $margin: --neo-floating-margin,
+  $margin-top: --neo-floating-margin-top,
+  $margin-bottom: --neo-floating-margin-bottom,
+  $margin-left: --neo-floating-margin-left,
+  $margin-right: --neo-floating-margin-right,
+  $margin-default: var(--neo-gap),
+  $align-items: false
+) {
+  position: fixed;
+  margin: var($margin, $margin-default);
+
+  @if $align-items {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &[data-placement='center'] {
+    inset: 0;
+    margin: var($margin, auto);
+  }
+
+  &[data-placement^='top'],
+  &[data-placement='right-start'],
+  &[data-placement='left-start'] {
+    top: 0;
+    bottom: auto;
+  }
+
+  &[data-placement^='bottom'],
+  &[data-placement='right-end'],
+  &[data-placement='left-end'] {
+    top: auto;
+    bottom: 0;
+  }
+
+  &[data-placement^='left'],
+  &[data-placement='bottom-start'],
+  &[data-placement='top-start'] {
+    right: auto;
+    left: 0;
+
+    @if $align-items {
+      align-items: start;
+    }
+  }
+
+  &[data-placement^='right'],
+  &[data-placement='bottom-end'],
+  &[data-placement='top-end'] {
+    right: 0;
+    left: auto;
+
+    @if $align-items {
+      align-items: end;
+    }
+  }
+
+  &[data-placement='right'],
+  &[data-placement='left'] {
+    top: 0;
+    bottom: 0;
+    margin-top: var($margin-top, auto);
+    margin-bottom: var($margin-bottom, auto);
+  }
+
+  &[data-placement='top'],
+  &[data-placement='bottom'] {
+    right: 0;
+    left: 0;
+    margin-right: var($margin-right, auto);
+    margin-left: var($margin-left, auto);
+  }
+
+  @if $align-items {
+    &[data-placement='top'],
+    &[data-placement='bottom'],
+    &[data-placement='center'] {
+      align-items: center;
+    }
   }
 }
 
@@ -636,3 +732,21 @@
     }
   }
 }
+
+/// Shared autofill styles for input/textarea elements.
+/// @param {string} $color-var - CSS variable for the text color (e.g. --neo-input-text-color).
+/// @param {bool} $stroke - Whether to include -webkit-text-stroke-color.
+@mixin autofill($color-var: --neo-input-text-color, $stroke: false) {
+  color: var(#{$color-var}, var(--neo-text-color, inherit)) !important;
+  text-decoration: none;
+  background-clip: text;
+  box-shadow: none;
+  appearance: none;
+  text-decoration-color: inherit;
+  caret-color: var(#{$color-var}, var(--neo-text-color, inherit));
+  -webkit-text-fill-color: var(#{$color-var}, var(--neo-text-color, inherit));
+
+  @if $stroke {
+    -webkit-text-stroke-color: var(#{$color-var}, var(--neo-text-color, inherit));
+  }
+}

package/dist/styles/theme.scss

@@ -1,3 +1,4 @@
+// Import common styles
 @use './common/colors' as colors;
 @use './common/easing' as easing;
 @use './common/typography' as typography;
@@ -6,6 +7,9 @@
 @use './common/utils' as utils;
 @use './common/properties';
 
+// Import transition styles
+@use './transition' as transition;
+
 @mixin theme($root: neo-theme-root) {
   [#{$root}] {
     color: var(--neo-text-color);
@@ -39,6 +43,22 @@
       }
     }
 
+    &[neo-transition='neo-spin'] {
+      @include transition.spin-transition;
+    }
+
+    &[neo-transition='neo-wave'] {
+      @include transition.wave-transition;
+    }
+
+    &[neo-transition='neo-circle'] {
+      @include transition.circle-transition;
+    }
+
+    &[neo-in-flight='true'] {
+      cursor: not-allowed;
+    }
+
     /* override semantic color if dark mode is enabled */
     &[neo-theme='dark'] {
       @include colors.dark-theme;

package/dist/styles/transition.scss

@@ -0,0 +1,101 @@
+@use './animation' as animation;
+
+@mixin spin-transition(
+  $target: root,
+  $scale: var(--neo-spin-transition-target, 0.9),
+  $speed: var(--neo-spin-transition-speed, 2s),
+  $easing: var(
+      --neo-spin-transition-easing,
+      linear(0, 0.324 9.1%, 0.584 18.6%, 0.782 28.6%, 0.858 33.8%, 0.92 39.2%, 0.997 49.5%, 1.021 55.1%, 1.033 61%, 1.035 71.7%, 1)
+    ),
+  $backdrop: var(--neo-spin-transition-backdrop, var(--neo-grey-light, #60605e))
+) {
+  &::view-transition {
+    background: $backdrop;
+  }
+
+  &::view-transition-image-pair(#{$target}) {
+    transform-origin: 50% 50% 100vw;
+    transform-style: preserve-3d;
+    perspective: 2500px;
+    perspective-origin: center;
+    filter: drop-shadow(0 0 6px hsl(165deg 11% 3%)) drop-shadow(0 0 25px hsl(165deg 11% 3% / 50%));
+  }
+
+  &::view-transition-old(#{$target}),
+  &::view-transition-new(#{$target}) {
+    transform: translateZ(-50vw) scale(var(--neo-scale)) rotateY(var(--neo-rotation)) translateZ(50vw);
+    transform-origin: 50% 50% 0;
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+    animation: $speed $easing;
+  }
+
+  &::view-transition-old(#{$target}) {
+    animation-name: neo-spin-out;
+  }
+
+  &::view-transition-new(#{$target}) {
+    animation-name: neo-spin-in;
+  }
+
+  @include animation.spin-in($scale);
+  @include animation.spin-out($scale);
+}
+
+@mixin wave-transition($target: root, $waviness: var(--neo-waviness, 1.75)) {
+  --neo-frequency: calc(#{$waviness} * 3.14); // 3.14 is pi
+  --neo-time: 0;
+
+  &::view-transition-old(#{$target}) {
+    animation: none;
+  }
+
+  &::view-transition-new(#{$target}) {
+    animation: 2s ease-in both neo-time-in;
+    clip-path: polygon(
+      0% 0%,
+      0% calc(sin((0 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      4% calc(sin((0.04 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      8% calc(sin((0.08 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      12% calc(sin((0.12 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      16% calc(sin((0.16 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      20% calc(sin((0.2 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      24% calc(sin((0.24 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      28% calc(sin((0.28 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      32% calc(sin((0.32 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      36% calc(sin((0.36 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      40% calc(sin((0.4 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      44% calc(sin((0.44 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      48% calc(sin((0.48 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      52% calc(sin((0.52 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      56% calc(sin((0.56 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      60% calc(sin((0.6 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      64% calc(sin((0.64 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      68% calc(sin((0.68 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      72% calc(sin((0.72 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      76% calc(sin((0.76 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      80% calc(sin((0.8 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      84% calc(sin((0.84 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      88% calc(sin((0.88 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      92% calc(sin((0.92 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      96% calc(sin((0.96 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      100% calc(sin((1 + var(--neo-time)) * var(--neo-frequency) * 0.8) * 6% + 100% * var(--neo-time)),
+      100% 0%
+    );
+  }
+
+  @include animation.time-in;
+}
+
+@mixin circle-transition($target: root) {
+  &::view-transition-old(#{$target}) {
+    animation-delay: 1s;
+  }
+
+  &::view-transition-new(#{$target}) {
+    animation: 1s ease-in-out circle-in;
+  }
+
+  @include animation.circle-in(var(--neo-transition-trigger-x, 50%), var(--neo-transition-trigger-y, 0%));
+}

package/dist/text/NeoEllipsis.svelte

@@ -26,4 +26,5 @@
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
+  overflow-wrap: anywhere;
 }</style>

package/dist/text/NeoHtml.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Config } from 'dompurify';
+
+  import purify from 'dompurify';
+
+  import { Logger } from '../utils/logger.utils.js';
+
+  const {
+    html,
+    ...options
+  }: Config & { html?: string } = $props();
+
+  const content = $derived.by(() => {
+    if (!html) return;
+    try {
+      return purify.sanitize(html, options);
+    } catch (error) {
+      Logger.error('Failed to sanitize HTML content', error);
+    }
+  });
+</script>
+
+{#if content}
+  <!-- eslint-disable-next-line - svelte/no-at-html-tags  -->
+  {@html content}
+{/if}

package/dist/text/NeoHtml.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Config } from 'dompurify';
+type $$ComponentProps = Config & {
+    html?: string;
+};
+declare const NeoHtml: import("svelte").Component<$$ComponentProps, {}, "">;
+type NeoHtml = ReturnType<typeof NeoHtml>;
+export default NeoHtml;