@dvcol/neo-svelte 0.1.2 → 0.1.4

package/dist/styles/common/spacing.scss

@@ -1,13 +1,17 @@
-[neo-theme-root] {
+@mixin spacing() {
   /* Borders */
   --neo-border-width: 1px;
+  --neo-border-width-md: 2px;
+  --neo-border-width-lg: 4px;
+  --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;
 
   /* Gap */
   --neo-gap-xxs: 0.5rem;
-  --neo-gap-xs: 0.615rem;
+  --neo-gap-xs: 0.625rem;
   --neo-gap-sm: 0.75rem;
   --neo-gap: 1rem;
   --neo-gap-md: 1.25rem;
@@ -22,6 +26,6 @@
   --neo-line-height: 1.5rem;
 
   /* Margin */
-  --neo-shadow-margin: 0.6rem;
+  --neo-shadow-margin: 0.625rem;
   --neo-shadow-margin-lg: 1.125rem;
 }

package/dist/styles/common/typography.scss

@@ -1,4 +1,4 @@
-[neo-theme-root] {
+@mixin typography {
   /* Default font stack */
   --neo-font-family: 'Nunito Sans', ui-rounded, sans-serif;
 

package/dist/styles/common/utils.scss

@@ -1,4 +1,4 @@
-[neo-theme-root] {
+@mixin utils() {
   /* Transforms */
   --neo-transition-bezier: cubic-bezier(0.4, 0, 0.2, 1);
   --neo-transition-skeleton: cubic-bezier(0.4, 0, 0.6, 1);

package/dist/styles/common/z-index.scss

@@ -1,4 +1,4 @@
-[neo-theme-root] {
+@mixin z-index() {
   --neo-z-index-behind: -1;
   --neo-z-index-default: 0;
   --neo-z-index-in-front: 1;

package/dist/styles/mixin.scss

@@ -106,25 +106,29 @@
 }
 
 @mixin border-rotate(
-  $background-color: var(--neo-background-color),
-  $border-color: var(--neo-border-color-primary),
-  $border-width: 1px,
-  $speed: 3s,
-  $easing: linear,
-  $transition: (
-    1s --neo-source-color,
-    1s --neo-target-color,
-  )
+  $source-color: var(--neo-rotate-source-color, transparent),
+  $target-color: var(--neo-rotate-target-color, var(--neo-color-primary-50)),
+  $border-width: var(--neo-border-width, 1px),
+  $speed: var(--neo-rotate-speed, 4s),
+  $easing: var(--neo-rotate-easing, linear)
 ) {
-  --neo-source-color: #{$background-color};
-  --neo-target-color: #{$border-color};
-
-  background:
-    linear-gradient($background-color, $background-color) padding-box,
-    conic-gradient(from var(--neo-angle), var(--neo-source-color), var(--neo-target-color)) border-box;
+  position: relative;
   border: $border-width solid transparent;
-  transition: $transition;
-  animation: $speed rotate $easing infinite;
+  border-radius: 2rem;
+
+  &::before {
+    position: absolute;
+    inset: 0;
+    padding: $border-width;
+    background: conic-gradient(from var(--neo-angle), #{$source-color} 20%, #{$target-color} 80%);
+    border-radius: inherit;
+    animation: $speed rotate $easing infinite;
+    content: '';
+    mask:
+      conic-gradient(black 0 0) content-box exclude,
+      conic-gradient(black 0 0);
+    pointer-events: none;
+  }
 
   &.filled {
     --neo-source-color: var(--neo-target-color);
@@ -138,18 +142,29 @@
 }
 
 @mixin border-progress(
-  $background-color: var(--neo-background-color),
-  $border-color: var(--neo-border-color-primary),
+  $border-color: var(--neo-progress-border-color, var(--neo-color-primary-50)),
   $border-width: 1px,
   $transition: --neo-progress,
-  $speed: 2s,
-  $easing: var(--neo-transition-bezier)
+  $speed: var(--neo-rotate-speed, 4s),
+  $easing: var(--neo-rotate-easing, linear)
 ) {
-  background:
-    linear-gradient($background-color, $background-color) padding-box,
-    conic-gradient($border-color, $border-color var(--neo-progress), transparent var(--neo-progress)) border-box;
+  position: relative;
   border: $border-width solid transparent;
-  transition: $transition $speed $easing;
+  border-radius: 2rem;
+
+  &::before {
+    position: absolute;
+    inset: 0;
+    padding: $border-width;
+    background: conic-gradient($border-color, $border-color var(--neo-progress), transparent var(--neo-progress));
+    border-radius: inherit;
+    transition: $transition $speed $easing;
+    content: '';
+    mask:
+      conic-gradient(black 0 0) content-box exclude,
+      conic-gradient(black 0 0);
+    pointer-events: none;
+  }
 }
 
 @mixin skeleton(
@@ -186,7 +201,7 @@
 
 @mixin scrollbar(
   $gutter: stable,
-  $width: var(--neo-scrollbar-width, 0.45rem),
+  $width: var(--neo-scrollbar-width, 0.375rem),
   $thumb-color: var(--neo-scrollbar-color),
   $thumb-border-radius: var(--neo-border-radius),
   $button-height: var(--neo-scrollbar-button-height, 2px)
@@ -219,7 +234,45 @@
   }
 
   &::-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;
   }
 }
+
+@mixin fade-scroll($fade-height: 1rem) {
+  mask-image: linear-gradient(to top, transparent, transparent $fade-height, black $fade-height, black calc(100% - #{$fade-height}), transparent),
+    linear-gradient(to bottom, transparent, transparent $fade-height, black $fade-height, black calc(100% - #{$fade-height}), transparent);
+}
+
+@mixin glass() {
+  /** Box Shadows raised */
+  --neo-box-shadow-raised-5: var(--neo-glass-box-shadow-raised-5);
+  --neo-box-shadow-raised-4: var(--neo-glass-box-shadow-raised-4);
+  --neo-box-shadow-raised-3: var(--neo-glass-box-shadow-raised-3);
+  --neo-box-shadow-raised-2: var(--neo-glass-box-shadow-raised-2);
+  --neo-box-shadow-raised-1: var(--neo-glass-box-shadow-raised-1);
+
+  /** Box Shadows inset */
+  --neo-box-shadow-inset-1: var(--neo-glass-box-shadow-inset-1);
+  --neo-box-shadow-inset-2: var(--neo-glass-box-shadow-inset-2);
+  --neo-box-shadow-inset-3: var(--neo-glass-box-shadow-inset-3);
+  --neo-box-shadow-inset-4: var(--neo-glass-box-shadow-inset-4);
+  --neo-box-shadow-inset-5: var(--neo-glass-box-shadow-inset-5);
+
+  /** Box Shadows pressed */
+  --neo-box-shadow-pressed-1: var(--neo-glass-box-shadow-pressed-1);
+  --neo-box-shadow-pressed-2: var(--neo-glass-box-shadow-pressed-2);
+  --neo-box-shadow-pressed-3: var(--neo-glass-box-shadow-pressed-3);
+  --neo-box-shadow-pressed-4: var(--neo-glass-box-shadow-pressed-4);
+  --neo-box-shadow-pressed-5: var(--neo-glass-box-shadow-pressed-5);
+
+  /** Box Shadows convex */
+  --neo-box-shadow-convex-1: var(--neo-glass-box-shadow-convex-1);
+  --neo-box-shadow-convex-2: var(--neo-glass-box-shadow-convex-2);
+  --neo-box-shadow-convex-3: var(--neo-glass-box-shadow-convex-3);
+  --neo-box-shadow-convex-4: var(--neo-glass-box-shadow-convex-4);
+  --neo-box-shadow-convex-5: var(--neo-glass-box-shadow-convex-5);
+
+  /** Skeleton color */
+  --neo-skeleton-color: var(--neo-glass-skeleton-color);
+}

package/dist/styles/reset.scss

@@ -1,4 +1,4 @@
-[neo-reset] {
+@mixin reset() {
   /*
     Use a more-intuitive box-sizing model.
   */
@@ -17,6 +17,7 @@
 
   /* Global defaults */
   :host,
+  &:root,
   html {
     /* Default to dark mode */
     color-scheme: dark light;
@@ -81,3 +82,9 @@
     }
   }
 }
+
+@mixin nested($root: neo-reset) {
+  [#{$root}] {
+    @include reset;
+  }
+}

package/dist/styles/theme.scss

@@ -1,22 +1,45 @@
-@use 'src/lib/styles/common/z-index';
-@use 'src/lib/styles/common/colors';
-@use 'src/lib/styles/common/typography';
-@use 'src/lib/styles/common/shadows';
-@use 'src/lib/styles/common/spacing';
-@use 'src/lib/styles/common/utils';
+@use 'src/lib/styles/common/z-index' as z-index;
+@use 'src/lib/styles/common/colors' as colors;
+@use 'src/lib/styles/common/typography' as typography;
+@use 'src/lib/styles/common/shadows' as shadows;
+@use 'src/lib/styles/common/filters' as filters;
+@use 'src/lib/styles/common/spacing' as spacing;
+@use 'src/lib/styles/common/utils' as utils;
 @use 'src/lib/styles/common/properties';
 
-[neo-theme-root] {
-  color: var(--neo-text-color);
-  font-family: var(--neo-font-family), sans-serif;
-  line-height: var(--neo-line-height);
-  background-color: var(--neo-background-color);
+@mixin theme($root: neo-theme-root) {
+  [#{$root}] {
+    color: var(--neo-text-color);
+    font-family: var(--neo-font-family), sans-serif;
+    line-height: var(--neo-line-height);
+    background-color: var(--neo-background-color);
 
-  /* touch highlight */
-  -webkit-tap-highlight-color: transparent;
+    /* touch highlight */
+    -webkit-tap-highlight-color: transparent;
 
-  /* cursor highlight */
-  *::selection {
-    background-color: var(--neo-text-highlight-color);
+    @include utils.utils;
+    @include z-index.z-index;
+    @include typography.typography;
+    @include spacing.spacing;
+    @include filters.filters;
+    @include colors.colors;
+    @include shadows.shadows;
+
+    /* cursor highlight */
+    *::selection {
+      background-color: var(--neo-text-highlight-color);
+    }
+
+    /* override semantic color if dark mode is enabled */
+    &[neo-theme='dark'] {
+      @include colors.dark-theme;
+    }
+
+    /* apply dark mode if not overridden */
+    @media (prefers-color-scheme: dark) {
+      &:not([neo-theme='light']) {
+        @include colors.dark-theme;
+      }
+    }
   }
 }

package/dist/utils/html-element.utils.d.ts

@@ -20,3 +20,6 @@ export type HTMLFlexProps = {
      */
     justify?: 'center' | 'start' | 'end' | 'between' | 'around' | 'evenly' | CSSStyleDeclaration['justifyContent'];
 };
+export type SvelteEvent<E extends Event = Event, T extends EventTarget = any> = E & {
+    currentTarget?: EventTarget & T;
+};

package/dist/utils/regex.utils.d.ts

@@ -0,0 +1,3 @@
+export declare const HexColorRegexString = "^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$";
+export declare const HexColorRegex: RegExp;
+export declare const ArrowPrefix: RegExp;

package/dist/utils/regex.utils.js

@@ -0,0 +1,3 @@
+export const HexColorRegexString = '^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$';
+export const HexColorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+export const ArrowPrefix = /^Arrow/;

package/dist/utils/shadow.utils.d.ts

@@ -1,8 +1,35 @@
 export declare const MaxShadowElevation = 5;
 export declare const MinShadowElevation = -5;
 export declare const DefaultShadowElevation = 3;
+export declare const DefaultShadowPressedElevation = -2;
+export declare const DefaultShadowHoverElevation = -1;
+export declare const DefaultShadowHoverPressedElevation = 0;
+export declare const DefaultSaturation = 3;
 export declare const ShadowElevations: readonly [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5];
 export type ShadowElevation = (typeof ShadowElevations)[number];
-export declare const computeShadowElevation: (elevation: number | ShadowElevation, glass?: boolean) => string;
-export declare const computeHoverShadowElevation: (elevation: number | ShadowElevation, hover?: number | ShadowElevation, glass?: boolean) => string | undefined;
-export declare const computeGlassFilter: (elevation: number | ShadowElevation, glass?: boolean) => string | undefined;
+export type ShadowModifier = {
+    glass?: boolean;
+    convex?: boolean;
+    pressed?: boolean;
+};
+export declare const ShadowFlatRegex: RegExp;
+export declare const getDefaultElevation: (pressed?: boolean) => 3 | -2;
+export declare const getDefaultHoverElevation: (pressed?: boolean) => 0 | -1;
+export declare const isShadowFlat: (shadow: string) => boolean;
+export declare const computeElevation: (elevation: number | ShadowElevation, { min, max }?: {
+    min?: ShadowElevation;
+    max?: ShadowElevation;
+}) => number;
+export declare const computeShadowElevation: (elevation: number | ShadowElevation, { glass, convex, pressed }?: ShadowModifier, minMax?: {
+    min?: ShadowElevation;
+    max?: ShadowElevation;
+}) => string;
+export declare const computeHoverShadowElevation: (elevation: number | ShadowElevation, hover?: number | ShadowElevation, options?: ShadowModifier, minMax?: {
+    min?: ShadowElevation;
+    max?: ShadowElevation;
+}) => string | undefined;
+export declare const computeGlassFilter: (elevation: number | ShadowElevation, glass?: boolean, { max, saturation }?: {
+    max?: ShadowElevation;
+    saturation?: number;
+}) => string | undefined;
+export declare const computeButtonShadows: (elevation: number | ShadowElevation, text?: boolean) => string | undefined;

package/dist/utils/shadow.utils.js

@@ -1,26 +1,53 @@
 export const MaxShadowElevation = 5;
 export const MinShadowElevation = -5;
 export const DefaultShadowElevation = 3;
+export const DefaultShadowPressedElevation = -2;
+export const DefaultShadowHoverElevation = -1;
+export const DefaultShadowHoverPressedElevation = 0;
+export const DefaultSaturation = 3;
 export const ShadowElevations = [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5];
-export const computeShadowElevation = (elevation, glass) => {
+export const ShadowFlatRegex = /^.*flat\)?;?$/;
+export const getDefaultElevation = (pressed) => (pressed ? DefaultShadowPressedElevation : DefaultShadowElevation);
+export const getDefaultHoverElevation = (pressed) => (pressed ? DefaultShadowHoverPressedElevation : DefaultShadowHoverElevation);
+export const isShadowFlat = (shadow) => ShadowFlatRegex.test(shadow);
+export const computeElevation = (elevation, { min = MinShadowElevation, max = MaxShadowElevation } = {}) => {
+    if (elevation < min)
+        return min;
+    if (elevation > max)
+        return max;
+    return elevation;
+};
+export const computeShadowElevation = (elevation, { glass, convex, pressed } = {}, minMax = {}) => {
+    const raided = convex ? 'convex' : 'raised';
+    const inset = pressed ? 'pressed' : 'inset';
     let shadow = `var(--neo-${glass ? 'glass-' : ''}box-shadow-`;
-    if (!elevation)
-        return `${shadow}flat`;
-    shadow += elevation < 0 ? 'inset' : 'raised';
-    return `${shadow}-${Math.trunc(Math.abs(elevation))})`;
+    const level = computeElevation(elevation, minMax);
+    if (!level)
+        return `${shadow}flat)`;
+    shadow += level < 0 ? inset : raided;
+    return `${shadow}-${Math.trunc(Math.abs(level))})`;
 };
-export const computeHoverShadowElevation = (elevation, hover, glass) => {
+export const computeHoverShadowElevation = (elevation, hover, options, minMax = {}) => {
     if (!hover)
         return;
-    let level = elevation + hover;
-    if (level < -4)
-        level = -4;
-    if (level > 4)
-        level = 4;
-    return computeShadowElevation(level, glass);
+    return computeShadowElevation(elevation + hover, options, minMax);
 };
-export const computeGlassFilter = (elevation, glass) => {
+export const computeGlassFilter = (elevation, glass, { max = MaxShadowElevation, saturation = DefaultSaturation } = {}) => {
     if (!glass)
         return;
-    return `var(--neo-blur-${Math.min(Math.max(Math.abs(elevation + 2), 2), MaxShadowElevation)}) var(--neo-saturate-3)`;
+    const _elevation = Math.abs(elevation);
+    if (_elevation > max)
+        return `var(--neo-blur-${max}) var(--neo-saturate-${saturation})`;
+    return `var(--neo-blur-${Math.abs(_elevation)}) var(--neo-saturate-${saturation})`;
+};
+export const computeButtonShadows = (elevation, text) => {
+    if (text)
+        return;
+    return `
+      --neo-btn-box-shadow: var(--neo-box-shadow-raised-${Math.min(Math.abs(elevation), 3)});
+      --neo-btn-box-shadow-hover: var(--neo-box-shadow-raised-${Math.min(Math.max(Math.abs(elevation) - 1, 1), 2)});
+      --neo-btn-box-shadow-focus: var(--neo-box-shadow-raised-${Math.min(Math.max(Math.abs(elevation) - 1, 1), 2)});
+      --neo-btn-box-shadow-active: var(--neo-box-shadow-pressed-${Math.min(Math.max(Math.abs(elevation) - 1, 1), 2)});
+      --neo-btn-box-shadow-focus-active: var(--neo-box-shadow-pressed-${Math.min(Math.max(Math.abs(elevation) - 1, 1), 2)});
+      `;
 };

package/dist/utils/transition.utils.d.ts

@@ -1,5 +1,9 @@
+import { type FadeParams } from 'svelte/transition';
 import type { TransitionProps } from '@dvcol/svelte-utils/transition';
+import type { TransitionWithProps } from './action.utils.js';
 export declare const defaultTransitionDuration = 300;
 export declare const enterFreezeTransition: TransitionProps;
 export declare const enterDefaultTransition: TransitionProps;
 export declare const leaveDefaultTransition: TransitionProps;
+export declare const enterDefaultFadeTransition: TransitionWithProps<FadeParams>;
+export declare const leaveDefaultFadeTransition: TransitionWithProps<FadeParams>;

package/dist/utils/transition.utils.js

@@ -1,3 +1,4 @@
+import { fade } from 'svelte/transition';
 export const defaultTransitionDuration = 300;
 export const enterFreezeTransition = {
     duration: defaultTransitionDuration,
@@ -5,4 +6,12 @@ export const enterFreezeTransition = {
     css: `overflow: hidden; white-space: nowrap`,
 };
 export const enterDefaultTransition = { duration: 200 };
-export const leaveDefaultTransition = { delay: 200, duration: 200 };
+export const leaveDefaultTransition = { delay: 200, duration: 100 };
+export const enterDefaultFadeTransition = {
+    use: fade,
+    props: enterDefaultTransition,
+};
+export const leaveDefaultFadeTransition = {
+    use: fade,
+    props: leaveDefaultTransition,
+};

package/dist/utils/utils.svelte.d.ts

@@ -0,0 +1,6 @@
+export declare const doubleBind: <T = unknown, E = unknown>({ outer, inner, input, output, }: {
+    outer: () => T;
+    inner: () => T;
+    input: () => E;
+    output: () => E;
+}) => void;

package/dist/utils/utils.svelte.js

@@ -0,0 +1,13 @@
+import { watch } from '@dvcol/svelte-utils/watch';
+export const doubleBind = ({ outer, inner, input, output, }) => {
+    watch(outer, () => {
+        if (outer() === inner())
+            return;
+        input();
+    });
+    watch(inner, () => {
+        if (outer() === inner())
+            return;
+        output();
+    });
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dvcol/neo-svelte",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Neomorphic ui library for svelte 5",
   "homepage": "https://github.com/dvcol/neo-svelte",
   "bugs": "https://github.com/dvcol/neo-svelte/issues",
@@ -82,9 +82,10 @@
     "svelte": ">=5"
   },
   "dependencies": {
-    "@dvcol/common-utils": "^1.18.3",
-    "@dvcol/svelte-utils": "^1.3.0",
-    "svelte": "^5.1.9",
+    "@dvcol/common-utils": "^1.19.0",
+    "@dvcol/svelte-utils": "^1.4.0",
+    "@skeletonlabs/floating-ui-svelte": "^0.3.1",
+    "svelte": "^5.16.0",
     "vite": "^5.4.10"
   },
   "devDependencies": {
@@ -92,13 +93,13 @@
     "@commitlint/config-conventional": "^19.4.1",
     "@dvcol/eslint-plugin-presets": "^1.3.11",
     "@dvcol/stylelint-plugin-presets": "^2.1.2",
-    "@dvcol/svelte-simple-router": "^1.7.3",
-    "@sveltejs/adapter-auto": "^3.2.5",
-    "@sveltejs/kit": "^2.7.4",
+    "@dvcol/svelte-simple-router": "^1.9.0",
+    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/kit": "^2.15.0",
     "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.4",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/svelte": "^5.2.4",
+    "@testing-library/svelte": "^5.2.6",
     "@testing-library/user-event": "^14.5.2",
     "@tsconfig/node22": "^22.0.0",
     "@tsconfig/svelte": "^5.0.4",
@@ -115,7 +116,7 @@
     "eslint-plugin-jsonc": "^2.16.0",
     "eslint-plugin-markdown": "^3.0.1",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-svelte": "^2.44.1",
+    "eslint-plugin-svelte": "^2.46.1",
     "eslint-plugin-vitest": "^0.4.1",
     "eslint-plugin-yml": "^1.14.0",
     "extract-changelog-release": "^1.0.2",
@@ -129,12 +130,12 @@
     "postcss": "^8.4.45",
     "postcss-syntax": "^0.36.2",
     "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.6",
+    "prettier-plugin-svelte": "^3.3.2",
     "publint": "^0.2.0",
     "sass": "^1.77.8",
     "standard-version": "^9.5.0",
     "stylelint": "^16.9.0",
-    "svelte-check": "^4.0.5",
+    "svelte-check": "^4.1.1",
     "svelte-preprocess": "^6.0.3",
     "typescript": "^5.5.4",
     "vite": "^5.4.10",