kosui 0.0.27 → 0.0.29

package/dist/markdown/markdown-token.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getMarkdownContext, MarkdownTokens } from "./index.js";
-  import { type MarkedToken } from "marked";
+  import type { MarkedToken } from "marked";
 
   export type MarkdownTokenProps = {
     token: MarkedToken;

package/dist/markdown/markdown-token.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type MarkedToken } from "marked";
+import type { MarkedToken } from "marked";
 export type MarkdownTokenProps = {
     token: MarkedToken;
 };

package/dist/markdown/markdown-tokens.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { MarkdownToken } from "./index.js";
-  import { type MarkedToken } from "marked";
+  import type { MarkedToken } from "marked";
 
   export type MarkdownTokensProps = {
     tokens: MarkedToken[];

package/dist/markdown/markdown-tokens.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type MarkedToken } from "marked";
+import type { MarkedToken } from "marked";
 export type MarkdownTokensProps = {
     tokens: MarkedToken[];
 };

package/dist/markdown/markdown.svelte

@@ -32,7 +32,7 @@
     type MarkedToken,
     type Tokens,
   } from "marked";
-  import { type Snippet } from "svelte";
+  import type { Snippet } from "svelte";
 
   export type MarkdownProps = {
     value: string;

package/dist/markdown/markdown.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type MarkdownComponentProps } from "./index.js";
 import { type MarkedOptions, type Tokens } from "marked";
-import { type Snippet } from "svelte";
+import type { Snippet } from "svelte";
 export type MarkdownProps = {
     value: string;
     options?: MarkedOptions;

package/dist/menu/menu-actions.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type Action } from "../command/index.js";
+  import type { Action } from "../command/index.js";
   import { MenuDivider, MenuHeader, MenuItem } from "./index.js";
   import { Check } from "@lucide/svelte";
 

package/dist/menu/menu-actions.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type Action } from "../command/index.js";
+import type { Action } from "../command/index.js";
 export type MenuActionsProps = {
     actions: Action[];
 };

package/dist/menu/menu-content.svelte

@@ -3,8 +3,8 @@
   import { getMenuContext } from "./index.js";
   import { mergeComponentProps } from "../merge-props.js";
   import { Popover, type PopoverProps } from "../popover/index.js";
-  import { type ClassName } from "../utils.js";
-  import { type Snippet } from "svelte";
+  import type { ClassName } from "../utils.js";
+  import type { Snippet } from "svelte";
   import { twMerge } from "tailwind-merge";
 
   export type MenuContentProps = {

package/dist/menu/menu-content.svelte.d.ts

@@ -1,7 +1,7 @@
 import { type Variants } from "../base.js";
 import { type PopoverProps } from "../popover/index.js";
-import { type ClassName } from "../utils.js";
-import { type Snippet } from "svelte";
+import type { ClassName } from "../utils.js";
+import type { Snippet } from "svelte";
 export type MenuContentProps = {
     children: Snippet;
 } & ClassName & Variants & Omit<PopoverProps, "children" | "open">;

package/dist/menu/menu-item.svelte

@@ -3,9 +3,9 @@
   import { getMenuContext } from "./index.js";
   import { mergeProps } from "../merge-props.js";
   import { Shortcut } from "../shortcut/index.js";
-  import { type ClassName, type ElementRef } from "../utils.js";
-  import { type Snippet } from "svelte";
-  import { type HTMLButtonAttributes } from "svelte/elements";
+  import type { ClassName, ElementRef } from "../utils.js";
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
   import { twMerge } from "tailwind-merge";
 
   export type MenuItemProps = {

package/dist/menu/menu-item.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 { ClassName, ElementRef } from "../utils.js";
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
 export type MenuItemProps = {
     onSelect?: (el: HTMLElement) => void;
     children: Snippet<[]>;

package/dist/menu/menu-trigger.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" module>
-  import { type Variants } from "../base.js";
+  import type { Variants } from "../base.js";
   import { getMenuContext } from "./index.js";
   import { mergeProps } from "../merge-props.js";
   import { Shortcut } from "../shortcut/index.js";
-  import { type ClassName } from "../utils.js";
-  import { type Snippet } from "svelte";
-  import { type HTMLButtonAttributes } from "svelte/elements";
+  import type { ClassName } from "../utils.js";
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
   import { twMerge } from "tailwind-merge";
 
   export type MenuTriggerProps = {

package/dist/menu/menu-trigger.svelte.d.ts

@@ -1,7 +1,7 @@
-import { type Variants } from "../base.js";
-import { type ClassName } from "../utils.js";
-import { type Snippet } from "svelte";
-import { type HTMLButtonAttributes } from "svelte/elements";
+import type { Variants } from "../base.js";
+import type { ClassName } from "../utils.js";
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
 export type MenuTriggerProps = {
     children?: Snippet;
 } & ClassName & Variants & HTMLButtonAttributes;

package/dist/menu/menu.svelte

@@ -1,7 +1,7 @@
 <script module lang="ts">
   import { MenuContext, setMenuContext } from "./index.js";
-  import { type ElementRef } from "../utils.js";
-  import { type Snippet } from "svelte";
+  import type { ElementRef } from "../utils.js";
+  import type { Snippet } from "svelte";
 
   export type MenuProps = {
     open?: boolean;

package/dist/menu/menu.svelte.d.ts

@@ -1,5 +1,5 @@
-import { type ElementRef } from "../utils.js";
-import { type Snippet } from "svelte";
+import type { ElementRef } from "../utils.js";
+import type { Snippet } from "svelte";
 export type MenuProps = {
     open?: boolean;
     children: Snippet;

package/dist/modal/modal.svelte

@@ -2,9 +2,9 @@
   import { events } from "../index.js";
   import { mergeProps } from "../merge-props.js";
   import { Shortcut } from "../shortcut/index.js";
-  import { type ClassName } from "../utils.js";
-  import { type Snippet } from "svelte";
-  import { type HTMLDialogAttributes } from "svelte/elements";
+  import type { ClassName } from "../utils.js";
+  import type { Snippet } from "svelte";
+  import type { HTMLDialogAttributes } from "svelte/elements";
   import { scale } from "svelte/transition";
   import { twMerge } from "tailwind-merge";
 

package/dist/modal/modal.svelte.d.ts

@@ -1,6 +1,6 @@
-import { type ClassName } from "../utils.js";
-import { type Snippet } from "svelte";
-import { type HTMLDialogAttributes } from "svelte/elements";
+import type { ClassName } from "../utils.js";
+import type { Snippet } from "svelte";
+import type { HTMLDialogAttributes } from "svelte/elements";
 export type ModalProps = {
     ref?: HTMLDialogElement;
     onCancel?: () => void;

package/dist/popover/popover.svelte

@@ -9,8 +9,8 @@
     type ToggleEventWithTarget,
   } from "../utils.js";
   import * as floatingUi from "@floating-ui/dom";
-  import { type Snippet } from "svelte";
-  import { type HTMLAttributes } from "svelte/elements";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
   import { scale } from "svelte/transition";
   import { twMerge, type ClassNameValue } from "tailwind-merge";
 

package/dist/popover/popover.svelte.d.ts

@@ -1,7 +1,7 @@
 import { type ClassName, type ElementRef } from "../utils.js";
 import * as floatingUi from "@floating-ui/dom";
-import { type Snippet } from "svelte";
-import { type HTMLAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 import { type ClassNameValue } from "tailwind-merge";
 export type PopoverProps = {
     arrow?: boolean;

package/dist/portal/proxy.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import { type Snippet } from "svelte";
+  import type { Snippet } from "svelte";
 
   export type ProxyProps = { children?: Snippet };
 </script>

package/dist/portal/proxy.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type Snippet } from "svelte";
+import type { Snippet } from "svelte";
 export type ProxyProps = {
     children?: Snippet;
 };

package/dist/progress/circular-progress.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import { type Snippet } from "svelte";
+  import type { Snippet } from "svelte";
   export type CircularProgressProps = {
     children?: Snippet;
     progress?: number;

package/dist/progress/circular-progress.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type Snippet } from "svelte";
+import type { Snippet } from "svelte";
 export type CircularProgressProps = {
     children?: Snippet;
     progress?: number;

package/dist/shortcut/shortcut-badge.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
   import { Box } from "../box/index.js";
-  import { type Shortcut } from "./index.js";
+  import type { Shortcut } from "./index.js";
   import { noop, type ClassName, type ElementRef } from "../utils.js";
-  import { type HTMLInputAttributes } from "svelte/elements";
+  import type { HTMLInputAttributes } from "svelte/elements";
   import { twMerge, type ClassNameValue } from "tailwind-merge";
 
   export type ShortcutBadgeProps = {

package/dist/shortcut/shortcut-badge.svelte.d.ts

@@ -1,6 +1,6 @@
-import { type Shortcut } from "./index.js";
+import type { Shortcut } from "./index.js";
 import { type ClassName, type ElementRef } from "../utils.js";
-import { type HTMLInputAttributes } from "svelte/elements";
+import type { HTMLInputAttributes } from "svelte/elements";
 import { type ClassNameValue } from "tailwind-merge";
 export type ShortcutBadgeProps = {
     shortcut: Shortcut;

package/dist/shortcut/shortcut.d.ts

@@ -19,6 +19,8 @@ export declare class Shortcut {
     static fromEvent(event: KeyboardEvent): Shortcut;
     static ARROW_UP: Shortcut;
     static ARROW_DOWN: Shortcut;
+    static ARROW_LEFT: Shortcut;
+    static ARROW_RIGHT: Shortcut;
     static END: Shortcut;
     static ENTER: Shortcut;
     static ESCAPE: Shortcut;

package/dist/shortcut/shortcut.js

@@ -85,6 +85,8 @@ export class Shortcut {
     }
     static ARROW_UP = new Shortcut({ key: "ArrowUp" });
     static ARROW_DOWN = new Shortcut({ key: "ArrowDown" });
+    static ARROW_LEFT = new Shortcut({ key: "ArrowLeft" });
+    static ARROW_RIGHT = new Shortcut({ key: "ArrowRight" });
     static END = new Shortcut({ key: "End" });
     static ENTER = new Shortcut({ key: "Enter" });
     static ESCAPE = new Shortcut({ key: "Escape" });

package/dist/skeleton/skeleton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Box, type BoxProps } from "../box/index.js";
-  import { type Snippet } from "svelte";
+  import type { Snippet } from "svelte";
   import { twMerge } from "tailwind-merge";
 
   export type SkeletonProps = { children?: Snippet } & BoxProps;

package/dist/skeleton/skeleton.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type BoxProps } from "../box/index.js";
-import { type Snippet } from "svelte";
+import type { Snippet } from "svelte";
 export type SkeletonProps = {
     children?: Snippet;
 } & BoxProps;

package/dist/slider/index.d.ts

@@ -0,0 +1,8 @@
+export { getSliderContext, setSliderContext, SliderContext, } from "./slider-context.svelte.js";
+export { default as SliderHandleLabelArrow, type SliderHandleLabelArrowProps, } from "./slider-handle-label-arrow.svelte";
+export { default as SliderHandleLabel, type SliderHandleLabelProps, } from "./slider-handle-label.svelte";
+export { default as SliderHandle, type SliderHandleProps, } from "./slider-handle.svelte";
+export { default as SliderMarkDot, type SliderMarkDotProps, } from "./slider-mark-dot.svelte";
+export { default as SliderMarkLabel, type SliderMarkLabelProps, } from "./slider-mark-label.svelte";
+export { default as SliderMark, type SliderMarkProps, } from "./slider-mark.svelte";
+export { default as Slider, SLIDER_COLORS, SLIDER_RADII, SLIDER_SIZES, type Mark, type SliderColor, type SliderColorProp, type SliderProps, type SliderRadius, type SliderRadiusProp, type SliderSize, type SliderSizeProp, } from "./slider.svelte";

package/dist/slider/index.js

@@ -0,0 +1,8 @@
+export { getSliderContext, setSliderContext, SliderContext, } from "./slider-context.svelte.js";
+export { default as SliderHandleLabelArrow, } from "./slider-handle-label-arrow.svelte";
+export { default as SliderHandleLabel, } from "./slider-handle-label.svelte";
+export { default as SliderHandle, } from "./slider-handle.svelte";
+export { default as SliderMarkDot, } from "./slider-mark-dot.svelte";
+export { default as SliderMarkLabel, } from "./slider-mark-label.svelte";
+export { default as SliderMark, } from "./slider-mark.svelte";
+export { default as Slider, SLIDER_COLORS, SLIDER_RADII, SLIDER_SIZES, } from "./slider.svelte";

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

@@ -0,0 +1,50 @@
+import type { SliderColor, SliderHandleLabelArrowProps, SliderHandleLabelProps, SliderHandleProps, SliderMarkDotProps, SliderMarkLabelProps, SliderMarkProps, SliderRadius, SliderSize } from "./index.js";
+import { type Snippet } from "svelte";
+export type Mark = {
+    value: number;
+    label?: string;
+};
+export declare class SliderContext {
+    #private;
+    onChange: ((value: number) => void) | undefined;
+    onChangeEnd: ((value: number) => void) | undefined;
+    handleRenderer: Snippet<[SliderHandleProps]>;
+    handleLabelRenderer: Snippet<[SliderHandleLabelProps]>;
+    handleLabelArrowRenderer: Snippet<[SliderHandleLabelArrowProps]>;
+    markRenderer: Snippet<[SliderMarkProps]>;
+    markDotRenderer: Snippet<[SliderMarkDotProps]>;
+    markLabelRenderer: Snippet<[SliderMarkLabelProps]>;
+    sliderEl: HTMLDivElement;
+    hovered: boolean;
+    clicked: boolean;
+    dragging: boolean;
+    focused: boolean;
+    constructor(getValue: () => number, setValue: (val: number) => void, min: () => number, max: () => number, step: () => number, marks: () => Mark[], disabled: () => boolean, label: (value: number) => string, labelAlwaysOn: () => boolean, inverted: () => boolean, restrictToMarks: () => boolean, color: () => SliderColor, size: () => SliderSize, radius: () => SliderRadius, onChange: ((value: number) => void) | undefined, onChangeEnd: ((value: number) => void) | undefined, handleRenderer: Snippet<[SliderHandleProps]>, handleLabelRenderer: Snippet<[SliderHandleLabelProps]>, handleLabelArrowRenderer: Snippet<[SliderHandleLabelArrowProps]>, markRenderer: Snippet<[SliderMarkProps]>, markDotRenderer: Snippet<[SliderMarkDotProps]>, markLabelRenderer: Snippet<[SliderMarkLabelProps]>);
+    get value(): number;
+    set value(value: number);
+    get min(): number;
+    get max(): number;
+    get step(): number;
+    get marks(): Mark[];
+    get disabled(): boolean;
+    get label(): string;
+    get labelAlwaysOn(): boolean;
+    get inverted(): boolean;
+    get restrictToMarks(): boolean;
+    get color(): SliderColor;
+    get size(): SliderSize;
+    get radius(): SliderRadius;
+    get position(): number;
+    get animated(): boolean;
+    clamp: (val: number, minVal: number, maxVal: number) => number;
+    getValueFromPosition: (position: number) => number;
+    getPositionFromValue: (val: number) => number;
+    pointerDown: (event: PointerEvent) => void;
+    pointerMove: (event: PointerEvent) => void;
+    pointerUp: (event: PointerEvent) => void;
+    keyDown: (event: KeyboardEvent) => void;
+    focus: () => void;
+    blur: () => void;
+}
+export declare function setSliderContext(state: SliderContext): SliderContext;
+export declare function getSliderContext(): SliderContext;

package/dist/slider/slider-context.svelte.js

@@ -0,0 +1,198 @@
+import { Bindable } from "../bindable.svelte.js";
+import { Shortcut } from "../shortcut/shortcut.js";
+import { getContext, setContext } from "svelte";
+export class SliderContext {
+    #value;
+    #min;
+    #max;
+    #step;
+    #marks;
+    #disabled;
+    #label;
+    #labelAlwaysOn;
+    #inverted;
+    #restrictToMarks;
+    #color;
+    #size;
+    #radius;
+    onChange;
+    onChangeEnd;
+    handleRenderer;
+    handleLabelRenderer;
+    handleLabelArrowRenderer;
+    markRenderer;
+    markDotRenderer;
+    markLabelRenderer;
+    sliderEl;
+    hovered = $state(false);
+    clicked = $state(false);
+    dragging = $state(false);
+    focused = $state(false);
+    constructor(getValue, setValue, min, max, step, marks, disabled, label, labelAlwaysOn, inverted, restrictToMarks, color, size, radius, onChange, onChangeEnd, handleRenderer, handleLabelRenderer, handleLabelArrowRenderer, markRenderer, markDotRenderer, markLabelRenderer) {
+        this.#value = new Bindable(getValue());
+        this.#value.bind(getValue, setValue);
+        this.#min = min;
+        this.#max = max;
+        this.#step = step;
+        this.#marks = marks;
+        this.#disabled = disabled;
+        this.#label = label;
+        this.#labelAlwaysOn = labelAlwaysOn;
+        this.#inverted = inverted;
+        this.#restrictToMarks = restrictToMarks;
+        this.#color = color;
+        this.#size = size;
+        this.#radius = radius;
+        this.onChange = onChange;
+        this.onChangeEnd = onChangeEnd;
+        this.handleRenderer = handleRenderer;
+        this.handleLabelRenderer = handleLabelRenderer;
+        this.handleLabelArrowRenderer = handleLabelArrowRenderer;
+        this.markRenderer = markRenderer;
+        this.markDotRenderer = markDotRenderer;
+        this.markLabelRenderer = markLabelRenderer;
+    }
+    get value() {
+        return this.#value.value;
+    }
+    set value(value) {
+        this.#value.value = this.clamp(value, this.min, this.max);
+        this.onChange?.(this.value);
+    }
+    get min() {
+        return this.#min();
+    }
+    get max() {
+        return this.#max();
+    }
+    get step() {
+        return this.#step();
+    }
+    get marks() {
+        return this.#marks();
+    }
+    get disabled() {
+        return this.#disabled();
+    }
+    get label() {
+        return this.#label(this.value);
+    }
+    get labelAlwaysOn() {
+        return this.#labelAlwaysOn();
+    }
+    get inverted() {
+        return this.#inverted();
+    }
+    get restrictToMarks() {
+        return this.#restrictToMarks();
+    }
+    get color() {
+        return this.#color();
+    }
+    get size() {
+        return this.#size();
+    }
+    get radius() {
+        return this.#radius();
+    }
+    get position() {
+        return this.getPositionFromValue(this.value);
+    }
+    get animated() {
+        return !this.dragging || this.restrictToMarks;
+    }
+    clamp = (val, minVal, maxVal) => {
+        return Math.min(Math.max(val, minVal), maxVal);
+    };
+    getValueFromPosition = (position) => {
+        const rect = this.sliderEl.getBoundingClientRect();
+        const percentage = this.clamp((position - rect.left) / rect.width, 0, 1);
+        const range = this.max - this.min;
+        let newValue = this.min + (this.inverted ? 1 - percentage : percentage) * range;
+        if (this.restrictToMarks && this.marks.length > 0) {
+            // Find closest mark
+            const closest = this.marks.reduce((prev, curr) => Math.abs(curr.value - newValue) < Math.abs(prev.value - newValue)
+                ? curr
+                : prev);
+            newValue = closest.value;
+        }
+        else {
+            // Round to step
+            newValue = Math.round(newValue / this.step) * this.step;
+        }
+        return this.clamp(newValue, this.min, this.max);
+    };
+    getPositionFromValue = (val) => {
+        const percentage = (val - this.min) / (this.max - this.min);
+        return this.inverted ? (1 - percentage) * 100 : percentage * 100;
+    };
+    pointerDown = (event) => {
+        if (this.disabled)
+            return;
+        this.clicked = true;
+        this.sliderEl.setPointerCapture(event.pointerId);
+        this.value = this.getValueFromPosition(event.clientX);
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    };
+    pointerMove = (event) => {
+        if (this.disabled || !this.clicked)
+            return;
+        this.dragging = true;
+        this.value = this.getValueFromPosition(event.clientX);
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    };
+    pointerUp = (event) => {
+        if (this.disabled || !this.clicked)
+            return;
+        this.dragging = false;
+        this.clicked = false;
+        this.sliderEl.releasePointerCapture(event.pointerId);
+        this.onChangeEnd?.(this.value);
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    };
+    keyDown = (event) => {
+        if (this.disabled)
+            return;
+        if (Shortcut.ARROW_UP.matches(event) ||
+            Shortcut.ARROW_RIGHT.matches(event)) {
+            this.value = this.value + this.step;
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+        else if (Shortcut.ARROW_DOWN.matches(event) ||
+            Shortcut.ARROW_LEFT.matches(event)) {
+            this.value = this.value - this.step;
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+        else if (Shortcut.HOME.matches(event)) {
+            this.value = this.min;
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+        else if (Shortcut.END.matches(event)) {
+            this.value = this.max;
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+        this.onChangeEnd?.(this.value);
+    };
+    focus = () => {
+        this.focused = true;
+    };
+    blur = () => {
+        this.focused = false;
+    };
+}
+export function setSliderContext(state) {
+    return setContext(SliderContext, state);
+}
+export function getSliderContext() {
+    const ctx = getContext(SliderContext);
+    if (!ctx)
+        throw new Error("SliderContext is undefined");
+    return ctx;
+}

package/dist/slider/slider-handle-label-arrow.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { ClassName } from "../utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+
+  export type SliderHandleLabelArrowProps = {} & ClassName &
+    HTMLAttributes<HTMLDivElement>;
+  let { class: className, ...restProps }: SliderHandleLabelArrowProps =
+    $props();
+</script>
+
+<div
+  class={twMerge(
+    "absolute top-full left-1/2 h-0 w-0 -translate-x-1/2 border-t-4 border-r-4 border-l-4 border-transparent border-t-m3-outline-variant",
+    className,
+  )}
+  {...restProps}
+></div>

package/dist/slider/slider-handle-label-arrow.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { ClassName } from "../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+export type SliderHandleLabelArrowProps = {} & ClassName & HTMLAttributes<HTMLDivElement>;
+declare const SliderHandleLabelArrow: import("svelte").Component<SliderHandleLabelArrowProps, {}, "">;
+type SliderHandleLabelArrow = ReturnType<typeof SliderHandleLabelArrow>;
+export default SliderHandleLabelArrow;

package/dist/slider/slider-handle-label.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { getSliderContext } from "./index.js";
+  import type { ClassName } from "../utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { twMerge } from "tailwind-merge";
+
+  export type SliderHandleLabelProps = {} & ClassName &
+    HTMLAttributes<HTMLDivElement>;
+  let { class: className, ...restProps }: SliderHandleLabelProps = $props();
+
+  const ctx = getSliderContext();
+
+  const showLabel = $derived(
+    !ctx.disabled &&
+      (ctx.labelAlwaysOn ||
+        ctx.clicked ||
+        ctx.hovered ||
+        ctx.dragging ||
+        ctx.focused),
+  );
+</script>
+
+{#if showLabel}
+  <div
+    role="tooltip"
+    class={twMerge(
+      "pointer-events-none absolute bottom-full left-1/2 mb-1 -translate-x-1/2 rounded-md border border-m3-outline-variant bg-m3-surface-container px-2 py-1 text-xs whitespace-nowrap text-m3-on-surface shadow-sm transition-opacity duration-200",
+      className,
+    )}
+    {...restProps}
+  >
+    {ctx.label}
+    {@render ctx.handleLabelArrowRenderer({})}
+  </div>
+{/if}

package/dist/slider/slider-handle-label.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { ClassName } from "../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+export type SliderHandleLabelProps = {} & ClassName & HTMLAttributes<HTMLDivElement>;
+declare const SliderHandleLabel: import("svelte").Component<SliderHandleLabelProps, {}, "">;
+type SliderHandleLabel = ReturnType<typeof SliderHandleLabel>;
+export default SliderHandleLabel;