kosui 0.0.26 → 0.0.28

package/dist/slider/slider.svelte

@@ -0,0 +1,227 @@
+<script lang="ts" module>
+  import {
+    COLORS,
+    RADII,
+    SIZES,
+    type Color,
+    type ColorProp,
+    type Radius,
+    type RadiusProp,
+    type Size,
+    type SizeProp,
+  } from "../base.js";
+  import { mergeProps } from "../merge-props.js";
+  import {
+    setSliderContext,
+    SliderContext,
+    SliderHandle,
+    SliderHandleLabel,
+    SliderHandleLabelArrow,
+    SliderMark,
+    SliderMarkDot,
+    SliderMarkLabel,
+    type SliderHandleLabelArrowProps,
+    type SliderHandleLabelProps,
+    type SliderHandleProps,
+    type SliderMarkDotProps,
+    type SliderMarkLabelProps,
+    type SliderMarkProps,
+  } from "./index.js";
+  import type { ClassName } from "../utils.js";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+
+  export const SLIDER_COLORS = COLORS;
+  export type SliderColor = Color;
+  export type SliderColorProp = ColorProp;
+
+  export const SLIDER_SIZES = SIZES;
+  export type SliderSize = Size;
+  export type SliderSizeProp = SizeProp;
+
+  export const SLIDER_RADII = RADII;
+  export type SliderRadius = Radius;
+  export type SliderRadiusProp = RadiusProp;
+
+  export type Mark = {
+    value: number;
+    label?: string;
+  };
+
+  export type SliderProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    marks?: Mark[];
+    disabled?: boolean;
+    label?: (value: number) => string;
+    labelAlwaysOn?: boolean;
+    inverted?: boolean;
+    restrictToMarks?: boolean;
+    onChange?: (value: number) => void;
+    onChangeEnd?: (value: number) => void;
+    sliderHandle?: Snippet<[SliderHandleProps]>;
+    sliderHandleLabel?: Snippet<[SliderHandleLabelProps]>;
+    sliderHandleLabelArrow?: Snippet<[SliderHandleLabelArrowProps]>;
+    sliderMark?: Snippet<[SliderMarkProps]>;
+    sliderMarkDot?: Snippet<[SliderMarkDotProps]>;
+    sliderMarkLabel?: Snippet<[SliderMarkLabelProps]>;
+  } & ClassName &
+    SliderColorProp &
+    SliderSizeProp &
+    SliderRadiusProp &
+    HTMLAttributes<HTMLDivElement>;
+</script>
+
+<script lang="ts">
+  let {
+    value = $bindable(0),
+    min = 0,
+    max = 100,
+    step = 1,
+    marks = [],
+    disabled = false,
+    label = (val: number) => val.toString(),
+    labelAlwaysOn = false,
+    inverted = false,
+    restrictToMarks = false,
+    onChange,
+    onChangeEnd,
+    sliderHandle = defaultSliderHandle,
+    sliderHandleLabel = defaultSliderHandleLabel,
+    sliderHandleLabelArrow = defaultSliderHandleLabelArrow,
+    sliderMark = defaultSliderMark,
+    sliderMarkDot = defaultSliderMarkDot,
+    sliderMarkLabel = defaultSliderMarkLabel,
+    class: className,
+    color = "primary",
+    size = "md",
+    radius = "xl",
+    ...restProps
+  }: SliderProps = $props();
+
+  const ctx = setSliderContext(
+    new SliderContext(
+      () => value,
+      (newValue) => (value = newValue),
+      () => min,
+      () => max,
+      () => step,
+      () => marks,
+      () => disabled,
+      label,
+      () => labelAlwaysOn,
+      () => inverted,
+      () => restrictToMarks,
+      () => color,
+      () => size,
+      () => radius,
+      onChange,
+      onChangeEnd,
+      sliderHandle,
+      sliderHandleLabel,
+      sliderHandleLabelArrow,
+      sliderMark,
+      sliderMarkDot,
+      sliderMarkLabel,
+    ),
+  );
+</script>
+
+{#snippet defaultSliderHandle(props: SliderHandleProps)}
+  <SliderHandle {...props} />
+{/snippet}
+
+{#snippet defaultSliderHandleLabel(props: SliderHandleLabelProps)}
+  <SliderHandleLabel {...props} />
+{/snippet}
+
+{#snippet defaultSliderHandleLabelArrow(props: SliderHandleLabelArrowProps)}
+  <SliderHandleLabelArrow {...props} />
+{/snippet}
+
+{#snippet defaultSliderMark(props: SliderMarkProps)}
+  <SliderMark {...props} />
+{/snippet}
+
+{#snippet defaultSliderMarkDot(props: SliderMarkDotProps)}
+  <SliderMarkDot {...props} />
+{/snippet}
+
+{#snippet defaultSliderMarkLabel(props: SliderMarkLabelProps)}
+  <SliderMarkLabel {...props} />
+{/snippet}
+
+<!-- Track -->
+<div
+  bind:this={ctx.sliderEl}
+  class={twMerge(
+    "relative w-full cursor-pointer touch-none bg-m3-surface-container-highest select-none",
+
+    ctx.disabled && "cursor-not-allowed opacity-50",
+
+    ctx.radius === "xs" && "rounded-xs",
+    ctx.radius === "sm" && "rounded-sm",
+    ctx.radius === "md" && "rounded-lg",
+    ctx.radius === "lg" && "rounded-2xl",
+    ctx.radius === "xl" && "rounded-4xl",
+
+    ctx.size === "xs" && "my-2.5 h-0.5",
+    ctx.size === "sm" && "my-3 h-1",
+    ctx.size === "md" && "my-3.5 h-2",
+    ctx.size === "lg" && "my-4 h-3",
+    ctx.size === "xl" && "my-4.5 h-4",
+
+    className,
+  )}
+  {...mergeProps(restProps, {
+    role: "slider",
+    tabindex: ctx.disabled ? -1 : 0,
+    "aria-valuenow": ctx.value,
+    "aria-valuemin": ctx.min,
+    "aria-valuemax": ctx.max,
+    "aria-disabled": ctx.disabled,
+    onpointerdown: ctx.pointerDown,
+    onpointermove: ctx.pointerMove,
+    onpointerup: ctx.pointerUp,
+    onkeydown: ctx.keyDown,
+    onfocus: ctx.focus,
+    onblur: ctx.blur,
+  })}
+>
+  <!-- Filled track -->
+  <div
+    class={twMerge(
+      "absolute top-1/2 h-full -translate-y-1/2 transition-all",
+
+      ctx.color === "primary" && "bg-m3-primary",
+      ctx.color === "secondary" && "bg-m3-secondary",
+      ctx.color === "tertiary" && "bg-m3-tertiary",
+      ctx.color === "error" && "bg-m3-error",
+
+      ctx.radius === "xs" && "rounded-xs",
+      ctx.radius === "sm" && "rounded-sm",
+      ctx.radius === "md" && "rounded-lg",
+      ctx.radius === "lg" && "rounded-2xl",
+      ctx.radius === "xl" && "rounded-4xl",
+    )}
+    style={ctx.inverted
+      ? `right: 0; width: ${100 - ctx.position}%`
+      : `left: 0; width: ${ctx.position}%`}
+  ></div>
+
+  <!-- Marks -->
+  {#each marks as { value, label } (value)}
+    {@render ctx.markRenderer({ value, label })}
+  {/each}
+
+  <!-- Handle -->
+  <div
+    class="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 transition-all"
+    style={`left: ${ctx.position}%`}
+  >
+    {@render ctx.handleRenderer({})}
+  </div>
+</div>

package/dist/slider/slider.svelte.d.ts

@@ -0,0 +1,41 @@
+import { type Color, type ColorProp, type Radius, type RadiusProp, type Size, type SizeProp } from "../base.js";
+import { type SliderHandleLabelArrowProps, type SliderHandleLabelProps, type SliderHandleProps, type SliderMarkDotProps, type SliderMarkLabelProps, type SliderMarkProps } from "./index.js";
+import type { ClassName } from "../utils.js";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export declare const SLIDER_COLORS: readonly ["primary", "secondary", "tertiary", "error", "inherit"];
+export type SliderColor = Color;
+export type SliderColorProp = ColorProp;
+export declare const SLIDER_SIZES: readonly ["xs", "sm", "md", "lg", "xl", "inherit"];
+export type SliderSize = Size;
+export type SliderSizeProp = SizeProp;
+export declare const SLIDER_RADII: readonly ["xs", "sm", "md", "lg", "xl", "inherit"];
+export type SliderRadius = Radius;
+export type SliderRadiusProp = RadiusProp;
+export type Mark = {
+    value: number;
+    label?: string;
+};
+export type SliderProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    marks?: Mark[];
+    disabled?: boolean;
+    label?: (value: number) => string;
+    labelAlwaysOn?: boolean;
+    inverted?: boolean;
+    restrictToMarks?: boolean;
+    onChange?: (value: number) => void;
+    onChangeEnd?: (value: number) => void;
+    sliderHandle?: Snippet<[SliderHandleProps]>;
+    sliderHandleLabel?: Snippet<[SliderHandleLabelProps]>;
+    sliderHandleLabelArrow?: Snippet<[SliderHandleLabelArrowProps]>;
+    sliderMark?: Snippet<[SliderMarkProps]>;
+    sliderMarkDot?: Snippet<[SliderMarkDotProps]>;
+    sliderMarkLabel?: Snippet<[SliderMarkLabelProps]>;
+} & ClassName & SliderColorProp & SliderSizeProp & SliderRadiusProp & HTMLAttributes<HTMLDivElement>;
+declare const Slider: import("svelte").Component<SliderProps, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/switch/index.d.ts

@@ -1 +1,2 @@
+export { default as SwitchThumb, type SwitchThumbProps, } from "./switch-thumb.svelte";
 export { default as Switch, SWITCH_COLORS, SWITCH_RADII, SWITCH_SIZES, type SwitchColor, type SwitchColorProp, type SwitchProps, type SwitchRadius, type SwitchRadiusProp, type SwitchSize, type SwitchSizeProp, } from "./switch.svelte";

package/dist/switch/index.js

@@ -1 +1,2 @@
+export { default as SwitchThumb, } from "./switch-thumb.svelte";
 export { default as Switch, SWITCH_COLORS, SWITCH_RADII, SWITCH_SIZES, } from "./switch.svelte";

package/dist/switch/switch-thumb.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+  import type {
+    SwitchColorProp,
+    SwitchRadiusProp,
+    SwitchSizeProp,
+  } from "./index.js";
+  import type { ClassName } from "../utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+
+  export type SwitchThumbProps = {} & ClassName &
+    SwitchColorProp &
+    SwitchSizeProp &
+    SwitchRadiusProp &
+    HTMLAttributes<HTMLDivElement>;
+</script>
+
+<script lang="ts">
+  let {
+    class: className,
+    color = "primary",
+    size = "sm",
+    radius = "xl",
+    ...restProps
+  }: SwitchThumbProps = $props();
+</script>
+
+<div
+  class={twMerge(
+    "absolute top-0.5 left-0.5 shadow-sm transition-all",
+
+    color === "primary" && "bg-m3-on-primary",
+    color === "secondary" && "bg-m3-on-secondary",
+    color === "tertiary" && "bg-m3-on-tertiary",
+    color === "error" && "bg-m3-on-error",
+
+    size === "xs" && "size-3 group-aria-checked:translate-x-4",
+    size === "sm" && "size-4 group-aria-checked:translate-x-5",
+    size === "md" && "size-5 group-aria-checked:translate-x-6",
+    size === "lg" && "size-6 group-aria-checked:translate-x-7",
+    size === "xl" && "size-7 group-aria-checked:translate-x-8",
+
+    radius === "xs" && "rounded-xs",
+    radius === "sm" && "rounded-sm",
+    radius === "md" && "rounded-lg",
+    radius === "lg" && "rounded-2xl",
+    radius === "xl" && "rounded-4xl",
+
+    className,
+  )}
+  {...restProps}
+></div>

package/dist/switch/switch-thumb.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SwitchColorProp, SwitchRadiusProp, SwitchSizeProp } from "./index.js";
+import type { ClassName } from "../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+export type SwitchThumbProps = {} & ClassName & SwitchColorProp & SwitchSizeProp & SwitchRadiusProp & HTMLAttributes<HTMLDivElement>;
+declare const SwitchThumb: import("svelte").Component<SwitchThumbProps, {}, "">;
+type SwitchThumb = ReturnType<typeof SwitchThumb>;
+export default SwitchThumb;

package/dist/switch/switch.svelte

@@ -1,6 +1,4 @@
 <script lang="ts" module>
-  import type { HTMLButtonAttributes } from "svelte/elements";
-  import { twMerge } from "tailwind-merge";
   import {
     COLORS,
     RADII,
@@ -11,9 +9,13 @@
     type RadiusProp,
     type Size,
     type SizeProp,
-  } from "../base";
-  import { mergeProps } from "../merge-props";
-  import type { ClassName } from "../utils";
+  } from "../base.js";
+  import { mergeProps } from "../merge-props.js";
+  import { SwitchThumb, type SwitchThumbProps } from "./index.js";
+  import type { ClassName } from "../utils.js";
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
 
   export const SWITCH_COLORS = COLORS;
   export type SwitchColor = Color;
@@ -29,16 +31,18 @@
 
   export type SwitchProps = {
     checked?: boolean;
+    thumb?: Snippet<[SwitchThumbProps]>;
   } & ClassName &
+    SwitchColorProp &
     SwitchSizeProp &
     SwitchRadiusProp &
-    SwitchColorProp &
     HTMLButtonAttributes;
 </script>
 
 <script lang="ts">
   let {
     checked = $bindable(false),
+    thumb = defaultThumb,
     class: className,
     color = "primary",
     size = "sm",
@@ -47,6 +51,10 @@
   }: SwitchProps = $props();
 </script>
 
+{#snippet defaultThumb(props: SwitchThumbProps)}
+  <SwitchThumb {...props} />
+{/snippet}
+
 <button
   type="button"
   role="switch"
@@ -79,27 +87,5 @@
   )}
   {...mergeProps(restProps, { onclick: () => (checked = !checked) })}
 >
-  <!-- Thumb -->
-  <div
-    class={twMerge(
-      "absolute top-0.5 left-0.5 shadow-sm transition-all",
-
-      color === "primary" && "bg-m3-on-primary",
-      color === "secondary" && "bg-m3-on-secondary",
-      color === "tertiary" && "bg-m3-on-tertiary",
-      color === "error" && "bg-m3-on-error",
-
-      size === "xs" && "size-3 group-aria-checked:translate-x-4",
-      size === "sm" && "size-4 group-aria-checked:translate-x-5",
-      size === "md" && "size-5 group-aria-checked:translate-x-6",
-      size === "lg" && "size-6 group-aria-checked:translate-x-7",
-      size === "xl" && "size-7 group-aria-checked:translate-x-8",
-
-      radius === "xs" && "rounded-xs",
-      radius === "sm" && "rounded-sm",
-      radius === "md" && "rounded-lg",
-      radius === "lg" && "rounded-2xl",
-      radius === "xl" && "rounded-4xl",
-    )}
-  ></div>
+  {@render thumb({ color, size, radius })}
 </button>

package/dist/switch/switch.svelte.d.ts

@@ -1,6 +1,8 @@
+import { type Color, type ColorProp, type Radius, type RadiusProp, type Size, type SizeProp } from "../base.js";
+import { type SwitchThumbProps } from "./index.js";
+import type { ClassName } from "../utils.js";
+import type { Snippet } from "svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
-import { type Color, type ColorProp, type Radius, type RadiusProp, type Size, type SizeProp } from "../base";
-import type { ClassName } from "../utils";
 export declare const SWITCH_COLORS: readonly ["primary", "secondary", "tertiary", "error", "inherit"];
 export type SwitchColor = Color;
 export type SwitchColorProp = ColorProp;
@@ -12,7 +14,8 @@ export type SwitchRadius = Radius;
 export type SwitchRadiusProp = RadiusProp;
 export type SwitchProps = {
     checked?: boolean;
-} & ClassName & SwitchSizeProp & SwitchRadiusProp & SwitchColorProp & HTMLButtonAttributes;
+    thumb?: Snippet<[SwitchThumbProps]>;
+} & ClassName & SwitchColorProp & SwitchSizeProp & SwitchRadiusProp & HTMLButtonAttributes;
 declare const Switch: import("svelte").Component<SwitchProps, {}, "checked">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/textarea/textarea.svelte

@@ -9,8 +9,8 @@
     type RadiusProp,
     type Size,
     type SizeProp,
-  } from "..";
-  import { type ClassName } from "../utils";
+  } from "../base.js";
+  import type { ClassName } from "../utils.js";
   import type { HTMLTextareaAttributes } from "svelte/elements";
   import { twMerge } from "tailwind-merge";
 

package/dist/textarea/textarea.svelte.d.ts

@@ -1,5 +1,5 @@
-import { type Color, type ColorProp, type Radius, type RadiusProp, type Size, type SizeProp } from "..";
-import { type ClassName } from "../utils";
+import { type Color, type ColorProp, type Radius, type RadiusProp, type Size, type SizeProp } from "../base.js";
+import type { ClassName } from "../utils.js";
 import type { HTMLTextareaAttributes } from "svelte/elements";
 export declare const TEXTAREA_VARIANTS: readonly ["outlined", "filled", "inherit"];
 export type TextareaVariant = (typeof TEXTAREA_VARIANTS)[number];

package/dist/toggle/index.d.ts

@@ -1,2 +1,3 @@
-export { default as ToggleButton } from "./toggle-button.svelte";
-export { default as ToggleGroup } from "./toggle-group.svelte";
+export { default as ToggleButton, type ToggleButtonProps, } from "./toggle-button.svelte";
+export { getToggleContext, setToggleContext, ToggleContext, } from "./toggle-context.svelte.js";
+export { default as ToggleGroup, type ToggleGroupProps, } from "./toggle-group.svelte";

package/dist/toggle/index.js

@@ -1,2 +1,3 @@
-export { default as ToggleButton } from "./toggle-button.svelte";
-export { default as ToggleGroup } from "./toggle-group.svelte";
+export { default as ToggleButton, } from "./toggle-button.svelte";
+export { getToggleContext, setToggleContext, ToggleContext, } from "./toggle-context.svelte.js";
+export { default as ToggleGroup, } from "./toggle-group.svelte";

package/dist/toggle/toggle-button.svelte

@@ -1,11 +1,11 @@
 <script module lang="ts">
+  import type { Variants } from "../base.js";
+  import { mergeProps } from "../merge-props.js";
+  import { getToggleContext } from "./index.js";
+  import { noop, type ClassName, type ElementRef } from "../utils.js";
   import type { Snippet } from "svelte";
   import type { HTMLButtonAttributes } from "svelte/elements";
   import { twMerge } from "tailwind-merge";
-  import { type Variants } from "../base";
-  import { mergeProps } from "../merge-props";
-  import { noop, type ClassName, type ElementRef } from "../utils";
-  import { getToggleContext } from "./toggle-context.svelte";
 
   export type ToggleButtonProps<T> = {
     value: T;

package/dist/toggle/toggle-button.svelte.d.ts

@@ -1,7 +1,7 @@
+import type { Variants } from "../base.js";
+import { type ClassName, type ElementRef } from "../utils.js";
 import type { Snippet } from "svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
-import { type Variants } from "../base";
-import { type ClassName, type ElementRef } from "../utils";
 export type ToggleButtonProps<T> = {
     value: T;
     children: Snippet;

package/dist/toggle/toggle-group.svelte

@@ -1,9 +1,9 @@
 <script module lang="ts">
-  import { type Snippet } from "svelte";
+  import { setToggleContext, ToggleContext } from "./index.js";
+  import { noop, type ClassName, type ElementRef } from "../utils.js";
+  import type { Snippet } from "svelte";
   import type { HTMLAttributes } from "svelte/elements";
   import { twMerge } from "tailwind-merge";
-  import { noop, type ClassName, type ElementRef } from "../utils";
-  import { setToggleContext, ToggleContext } from "./toggle-context.svelte";
 
   export type ToggleGroupProps<T> = {
     value?: T;

package/dist/toggle/toggle-group.svelte.d.ts

@@ -1,6 +1,6 @@
-import { type Snippet } from "svelte";
+import { type ClassName, type ElementRef } from "../utils.js";
+import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-import { type ClassName, type ElementRef } from "../utils";
 export type ToggleGroupProps<T> = {
     value?: T;
     onChange?: (value?: T) => void;

package/dist/tooltip/tooltip.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" module>
-  import { type Snippet } from "svelte";
+  import { Popover, type PopoverProps } from "../popover/index.js";
+  import type { ClassName } from "../utils.js";
+  import type { Snippet } from "svelte";
   import { twMerge } from "tailwind-merge";
-  import { Popover, type PopoverProps } from "../popover";
-  import type { ClassName } from "../utils";
 
   export type TooltipTriggerProps = {
     ref: (el: HTMLElement) => void;
@@ -36,8 +36,9 @@
     ...restProps
   }: TooltipProps = $props();
 
-  const isTouchDevice =
-    "ontouchstart" in window || navigator.maxTouchPoints > 0;
+  function isTouchDevice() {
+    return "ontouchstart" in window || navigator.maxTouchPoints > 0;
+  }
 
   let timeout: number;
 
@@ -64,7 +65,7 @@
       }
     : {
         ref: (ref) => (anchorEl = ref),
-        onmouseenter: () => !isTouchDevice && show(),
+        onmouseenter: () => !isTouchDevice() && show(),
         onmouseleave: () => hide(),
         ontouchstart: () => show(delay),
         ontouchend: () => cancel(),

package/dist/tooltip/tooltip.svelte.d.ts

@@ -1,6 +1,6 @@
-import { type Snippet } from "svelte";
-import { type PopoverProps } from "../popover";
-import type { ClassName } from "../utils";
+import { type PopoverProps } from "../popover/index.js";
+import type { ClassName } from "../utils.js";
+import type { Snippet } from "svelte";
 export type TooltipTriggerProps = {
     ref: (el: HTMLElement) => void;
     onclick?: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kosui",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.2",
-    "@lucide/svelte": "^0.539.0",
+    "@lucide/svelte": "^0.542.0",
     "marked": "^16.1.1"
   },
   "peerDependencies": {
@@ -39,7 +39,7 @@
     "@eslint/compat": "^1.2.5",
     "@eslint/js": "^9.18.0",
     "@playwright/test": "^1.49.1",
-    "@sveltejs/adapter-auto": "^6.0.0",
+    "@sveltejs/adapter-static": "^3.0.9",
     "@sveltejs/kit": "^2.22.0",
     "@sveltejs/package": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^6.0.0",
@@ -51,6 +51,8 @@
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-svelte": "^3.0.0",
     "globals": "^16.0.0",
+    "highlight.js": "^11.11.1",
+    "highlight.svelte": "^0.1.3",
     "jsdom": "^26.1.0",
     "postcss": "^8.5.6",
     "prettier": "^3.4.2",
@@ -77,9 +79,9 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "format": "prettier --write .",
     "lint": "prettier --check . && eslint .",
-    "test:unit": "vitest",
-    "test": "pnpm test:unit -- --run && pnpm test:e2e",
+    "test:unit": "vitest run",
     "test:e2e": "playwright test",
+    "test": "pnpm run \"/^(build|check|lint|test:unit)$/\"",
     "ci:publish": "changeset publish"
   }
 }