@skeletonlabs/skeleton-svelte 1.0.0-next.1 → 1.0.0-next.3

package/dist/components/Accordion/Accordion.svelte.d.ts

@@ -1,18 +1,20 @@
-import { SvelteComponent } from "svelte";
+/// <reference types="svelte" />
 export declare const getAccordionCtx: () => AccordionContext;
 export declare const setAccordionCtx: (ctx: AccordionContext) => AccordionContext;
 import type { AccordionContext, AccordionProps } from './types.js';
-declare const __propDef: {
-    props: AccordionProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type AccordionProps_ = typeof __propDef.props;
-export { AccordionProps_ as AccordionProps };
-export type AccordionEvents = typeof __propDef.events;
-export type AccordionSlots = typeof __propDef.slots;
-/** An Accordion parent component. */
-export default class Accordion extends SvelteComponent<AccordionProps_, AccordionEvents, AccordionSlots> {
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
+/** An Accordion parent component. */
+declare const Accordion: $$__sveltets_2_IsomorphicComponent<AccordionProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, Record<string, any>, "value">;
+type Accordion = InstanceType<typeof Accordion>;
+export default Accordion;

package/dist/components/Accordion/AccordionItem.svelte.d.ts

@@ -1,16 +1,18 @@
-import { SvelteComponent } from "svelte";
+/// <reference types="svelte" />
 import type { AccordionItemProps } from './types.js';
-declare const __propDef: {
-    props: AccordionItemProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type AccordionItemProps_ = typeof __propDef.props;
-export { AccordionItemProps_ as AccordionItemProps };
-export type AccordionItemEvents = typeof __propDef.events;
-export type AccordionItemSlots = typeof __propDef.slots;
-/** An Accordion child item. */
-export default class AccordionItem extends SvelteComponent<AccordionItemProps_, AccordionItemEvents, AccordionItemSlots> {
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
+/** An Accordion child item. */
+declare const AccordionItem: $$__sveltets_2_IsomorphicComponent<AccordionItemProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, Record<string, any>, "">;
+type AccordionItem = InstanceType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/components/AppBar/AppBar.svelte.d.ts

@@ -1,16 +1,18 @@
-import { SvelteComponent } from "svelte";
+/// <reference types="svelte" />
 import type { AppBarProps } from './types.js';
-declare const __propDef: {
-    props: AppBarProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type AppBarProps_ = typeof __propDef.props;
-export { AppBarProps_ as AppBarProps };
-export type AppBarEvents = typeof __propDef.events;
-export type AppBarSlots = typeof __propDef.slots;
-/** A header element for the top of a page layout. */
-export default class AppBar extends SvelteComponent<AppBarProps_, AppBarEvents, AppBarSlots> {
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
+/** A header element for the top of a page layout. */
+declare const AppBar: $$__sveltets_2_IsomorphicComponent<AppBarProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, Record<string, any>, "">;
+type AppBar = InstanceType<typeof AppBar>;
+export default AppBar;

package/dist/components/Avatar/Avatar.svelte.d.ts

@@ -1,16 +1,18 @@
-import { SvelteComponent } from "svelte";
+/// <reference types="svelte" />
 import type { AvatarProps } from './types.js';
-declare const __propDef: {
-    props: AvatarProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type AvatarProps_ = typeof __propDef.props;
-export { AvatarProps_ as AvatarProps };
-export type AvatarEvents = typeof __propDef.events;
-export type AvatarSlots = typeof __propDef.slots;
-/** An image with a fallback for representing the user. */
-export default class Avatar extends SvelteComponent<AvatarProps_, AvatarEvents, AvatarSlots> {
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
+/** An image with a fallback for representing the user. */
+declare const Avatar: $$__sveltets_2_IsomorphicComponent<AvatarProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, Record<string, any>, "">;
+type Avatar = InstanceType<typeof Avatar>;
+export default Avatar;

package/dist/components/Navigation/NavBar.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">import { setContext } from "svelte";
+let {
+  // Root
+  base = "h-full flex flex-col",
+  background = "preset-filled-surface-100-900",
+  width = "min-w-[320px] w-full",
+  height = "h-20",
+  padding = "p-1",
+  classes = "",
+  // Tiles
+  tilesBase = "flex-1 flex",
+  tilesFlexDirection = "",
+  tilesJustify = "justify-center",
+  tilesItems = "items-center",
+  tilesGap = "gap-1",
+  tilesClasses = "",
+  // Snippets
+  children
+} = $props();
+setContext("parent", "bar");
+</script>
+
+<aside class="{base} {background} {width} {height} {padding} {classes}" data-testid="nav-bar">
+	{#if children}
+		<nav class="{tilesBase} {tilesFlexDirection} {tilesJustify} {tilesItems} {tilesGap} {tilesClasses}">
+			{@render children()}
+		</nav>
+	{/if}
+</aside>

package/dist/components/Navigation/NavBar.svelte.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="svelte" />
+import type { NavBarProps } from './types.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
+}
+declare const NavBar: $$__sveltets_2_IsomorphicComponent<NavBarProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, Record<string, any>, "">;
+type NavBar = InstanceType<typeof NavBar>;
+export default NavBar;

package/dist/components/Navigation/NavRail.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">import { setContext } from "svelte";
+let {
+  expanded = false,
+  // Root
+  base = "h-full flex flex-col",
+  background = "preset-filled-surface-100-900",
+  padding = "p-1",
+  width = "w-24",
+  widthExpanded = "w-64",
+  height = "h-full",
+  classes = "",
+  // Header
+  headerBase = "flex",
+  headerFlexDirection = "flex-col",
+  headerJustify = "justify-center",
+  headerItems = "items-center",
+  headerGap = "gap-1",
+  headerClasses = "",
+  // Tiles
+  tilesBase = "flex-1 flex",
+  tilesFlexDirection = "flex-col",
+  tilesJustify = "justify-center",
+  tilesItems = "items-center",
+  tilesGap = "gap-1",
+  tilesClasses = "",
+  // Footer
+  footerBase = "flex",
+  footerFlexDirection = "flex-col",
+  footerJustify = "justify-center",
+  footerItems = "items-center",
+  footerGap = "gap-1",
+  footerClasses = "",
+  // Snippets
+  header,
+  tiles,
+  footer
+} = $props();
+setContext("parent", "rail");
+setContext("expanded", expanded);
+let rxWidth = $derived(expanded ? widthExpanded : width);
+</script>
+
+<aside class="{base} {background} {height} {padding} {rxWidth} {classes}" data-testid="nav-rail">
+	<!-- Header -->
+	{#if header}
+		<header class="{headerBase} {headerFlexDirection} {headerJustify} {headerItems} {headerGap} {headerClasses}">
+			{@render header()}
+		</header>
+	{/if}
+	<!-- Tiles -->
+	{#if tiles}
+		<nav class="{tilesBase} {tilesFlexDirection} {tilesJustify} {tilesItems} {tilesGap} {tilesClasses}">
+			{@render tiles()}
+		</nav>
+	{/if}
+	<!-- Footer -->
+	{#if footer}
+		<footer class="{footerBase} {footerFlexDirection} {footerJustify} {footerItems} {footerGap} {footerClasses}">
+			{@render footer()}
+		</footer>
+	{/if}
+</aside>

package/dist/components/Navigation/NavRail.svelte.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="svelte" />
+import type { NavRailProps } from './types.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
+}
+declare const NavRail: $$__sveltets_2_IsomorphicComponent<NavRailProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, Record<string, any>, "">;
+type NavRail = InstanceType<typeof NavRail>;
+export default NavRail;

package/dist/components/Navigation/NavTile.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">import { getContext } from "svelte";
+let {
+  id,
+  href,
+  target,
+  label,
+  labelExpanded,
+  title,
+  selected = false,
+  // Root
+  base = "flex items-center",
+  width = "w-full",
+  aspect = "aspect-square",
+  background = "",
+  hover = "hover:preset-filled-surface-50-950",
+  active = "preset-filled-primary-500",
+  padding = "p-2",
+  gap = "gap-1",
+  rounded = "rounded-container",
+  classes = "flex-col justify-center",
+  // Expanded
+  expandedPadding = "py-3 px-4",
+  expandedGap = "gap-4",
+  expandedClasses = "",
+  // Label (base)
+  labelBase = "type-scale-1",
+  labelClasses = "",
+  // Label (expanded)
+  labelExpandedBase = "",
+  labelExpandedClasses = "",
+  // Events
+  onclick,
+  // Snippets
+  children
+} = $props();
+let parent = getContext("parent");
+let expanded = getContext("expanded") ?? false;
+const element = href ? "a" : "button";
+const type = href ? void 0 : "button";
+const role = href ? void 0 : "button";
+let rxSize = parent === "bar" ? `h-full` : `${aspect}`;
+const classesCollapsed = `${rxSize} ${padding} ${gap} ${classes}`;
+const classesExtended = `${expandedPadding} ${expandedGap} ${expandedClasses}`;
+let rxMode = $derived(expanded ? classesExtended : classesCollapsed);
+let rxBackground = $derived(selected ? active : `${background} ${hover}`);
+function onClickHandler() {
+  if (onclick && !id)
+    throw new Error("No ID was provided");
+  if (onclick && id)
+    onclick(id);
+}
+</script>
+
+<svelte:element
+	this={element}
+	class="{base} {width} {rounded} {rxBackground} {rxMode}"
+	{href}
+	{target}
+	{type}
+	{title}
+	{role}
+	onclick={onClickHandler}
+	tabindex="0"
+	data-testid="nav-tile"
+>
+	<!-- Icon -->
+	{#if children}<div>{@render children()}</div>{/if}
+	<!-- Label (base) -->
+	{#if label && !expanded}
+		<div class="{labelBase} {labelClasses}">{label}</div>
+	{/if}
+	<!-- Label (expanded) -->
+	{#if labelExpanded && expanded}
+		<div class="{labelExpandedBase} {labelExpandedClasses}">{labelExpanded}</div>
+	{/if}
+</svelte:element>

package/dist/components/Navigation/NavTile.svelte.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="svelte" />
+import type { NavTileProps } from './types.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
+}
+declare const NavTile: $$__sveltets_2_IsomorphicComponent<NavTileProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, Record<string, any>, "">;
+type NavTile = InstanceType<typeof NavTile>;
+export default NavTile;

package/dist/components/Navigation/types.d.ts

@@ -0,0 +1,121 @@
+import type { Snippet } from 'svelte';
+export interface NavCommonProps {
+    /** Set base styles. */
+    base?: string;
+    /** Set background classes. */
+    background?: string;
+    /** Set padding classes. */
+    padding?: string;
+    /** Set width classes. */
+    width?: string;
+    /** Set width classes for expanded mode. */
+    widthExpanded?: string;
+    /** Set width classes. */
+    height?: string;
+    /** Provide arbitrary CSS classes. */
+    classes?: string;
+    /** Set base classes. */
+    tilesBase?: string;
+    /** Set flex direction classes. */
+    tilesFlexDirection?: string;
+    /** Set flex justify classes. */
+    tilesJustify?: string;
+    /** Set flex align classes. */
+    tilesItems?: string;
+    /** Set gap classes. */
+    tilesGap?: string;
+    /** Provide arbitrary CSS classes. */
+    tilesClasses?: string;
+}
+export interface NavBarProps extends NavCommonProps {
+    /** The default children snippet. */
+    children?: Snippet;
+}
+export interface NavRailProps extends NavCommonProps {
+    /** Enabled expanded mode. */
+    expanded?: boolean;
+    /** Set base classes. */
+    headerBase?: string;
+    /** Set flex direction classes. */
+    headerFlexDirection?: string;
+    /** Set flex justify classes. */
+    headerJustify?: string;
+    /** Set flex align classes. */
+    headerItems?: string;
+    /** Set gap classes. */
+    headerGap?: string;
+    /** Provide arbitrary CSS classes. */
+    headerClasses?: string;
+    /** Set base classes. */
+    footerBase?: string;
+    /** Set flex direction classes. */
+    footerFlexDirection?: string;
+    /** Set flex justify classes. */
+    footerJustify?: string;
+    /** Set flex align classes. */
+    footerItems?: string;
+    /** Set gap classes. */
+    footerGap?: string;
+    /** Provide arbitrary CSS classes. */
+    footerClasses?: string;
+    /** The header snippet. */
+    header?: Snippet;
+    /** The tiles snippet. */
+    tiles?: Snippet;
+    /** The footer snippet. */
+    footer?: Snippet;
+}
+export interface NavTileProps {
+    /** Provide a unique ID. */
+    id?: string;
+    /** Provide an href link; turns Tiles into an anchor */
+    href?: string;
+    /** Set the href target attribute. */
+    target?: string;
+    /** Provide the label text. */
+    label?: string;
+    /** Provide a longer label in expanded mode. */
+    labelExpanded?: string;
+    /** Provile a title attribute. */
+    title?: string;
+    /** Enable the active selected state. */
+    selected?: boolean;
+    /** Set base styles. */
+    base?: string;
+    /** Set width classes. */
+    width?: string;
+    /** Set aspect ratio classes. */
+    aspect?: string;
+    /** Set background classes. */
+    background?: string;
+    /** Set hover classes. */
+    hover?: string;
+    /** Set active classes. */
+    active?: string;
+    /** Set padding classes. */
+    padding?: string;
+    /** Set gap classes. */
+    gap?: string;
+    /** Set rounded classes. */
+    rounded?: string;
+    /** Provide arbitrary CSS classes. */
+    classes?: string;
+    /** Set padding classes for expanded mode. */
+    expandedPadding?: string;
+    /** Set gap classes for expanded mode. */
+    expandedGap?: string;
+    /** Provide arbitrary CSS classes for expanded mode. */
+    expandedClasses?: string;
+    /** Set base classes. */
+    labelBase?: string;
+    /** Provide arbitrary CSS classes. */
+    labelClasses?: string;
+    /** Set base classes. */
+    labelExpandedBase?: string;
+    /** Provide arbitrary CSS classes. */
+    labelExpandedClasses?: string;
+    /** Triggers when the tile is clicked. */
+    onclick?: (id: string) => void;
+    /** The default slot, used for icons. */
+    children?: Snippet;
+}

package/dist/components/Navigation/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Progress/Progress.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">let {
   value,
   max = 100,
-  labelledBy = "",
+  labelledby = "",
   // Root
   base = "overflow-x-hidden",
   bg = "bg-surface-200-800",
@@ -31,7 +31,7 @@ const rxIndeterminate = $derived(indeterminate ? meterAnimate : "");
 
 <div
 	role="progressbar"
-	aria-labelledby={labelledBy}
+	aria-labelledby={labelledby}
 	aria-valuenow={value}
 	aria-valuemin={0}
 	aria-valuemax={max}

package/dist/components/Progress/Progress.svelte.d.ts

@@ -1,16 +1,18 @@
-import { SvelteComponent } from "svelte";
+/// <reference types="svelte" />
 import type { ProgressProps } from './types.js';
-declare const __propDef: {
-    props: ProgressProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type ProgressProps_ = typeof __propDef.props;
-export { ProgressProps_ as ProgressProps };
-export type ProgressEvents = typeof __propDef.events;
-export type ProgressSlots = typeof __propDef.slots;
-/** An indicator showing the progress or completion of a task */
-export default class Progress extends SvelteComponent<ProgressProps_, ProgressEvents, ProgressSlots> {
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
+/** An indicator showing the progress or completion of a task */
+declare const Progress: $$__sveltets_2_IsomorphicComponent<ProgressProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, Record<string, any>, "">;
+type Progress = InstanceType<typeof Progress>;
+export default Progress;

package/dist/components/Progress/types.d.ts

@@ -3,8 +3,8 @@ export interface ProgressProps {
     value?: number;
     /** Set the maximum value */
     max?: number;
-    /** Set the aria-labelledby */
-    labelledBy?: string;
+    /** Set the aria-labelledby value */
+    labelledby?: string;
     /** Set root base classes */
     base?: string;
     /** Set root background classes  */

package/dist/components/ProgressRing/ProgressRing.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">let {
+  value,
+  max = 100,
+  strokeWidth = 50,
+  // px
+  strokeLinecap = "round",
+  labelledby = "",
+  // Base (figure)
+  base = "relative",
+  size = "size-32",
+  classes = "",
+  // Slot
+  childrenBase = "absolute top-0 left-0 z-[1] flex justify-center items-center",
+  childrenClasses = "",
+  // SVG
+  svgBase = "absolute top-0 left-0 w-full h-full rounded-full",
+  svgClasses = "",
+  // Track
+  trackBase = "fill-none",
+  trackStroke = "stroke-surface-200-800",
+  trackClasses = "",
+  // Meter
+  meterBase = "fill-none",
+  meterStroke = "stroke-primary-500",
+  meterTransition = "transition-[stroke-dashoffset]",
+  meterDuration = "duration-100",
+  meterClasses = "",
+  // Label
+  label,
+  labelBase = "",
+  labelFill = "fill-surface-950-50",
+  labelFontSize = 96,
+  // px
+  labelFontWeight = "bold",
+  labelClasses = "",
+  // Snippets
+  children
+} = $props();
+const baseSize = 512;
+const radius = baseSize / 2 - strokeWidth / 2;
+let circumference = $state(radius);
+let dashoffset = $state(calcDashOffset());
+$effect(() => {
+  dashoffset = calcDashOffset();
+});
+function calcDashOffset() {
+  const v = value !== void 0 ? value : 25;
+  const percent = 100 * v / max;
+  circumference = radius * 2 * Math.PI;
+  return circumference - percent / 100 * circumference;
+}
+</script>
+
+<figure
+	class="{base} {size} {classes}"
+	role="meter"
+	aria-labelledby={labelledby}
+	aria-valuenow={value || 0}
+	aria-valuemin={0}
+	aria-valuemax={max}
+	aria-valuetext={`${value} / ${max}`}
+	data-testid="progress-ring"
+>
+	<!-- Slot -->
+	{#if children}
+		<div class="{childrenBase} {size} {childrenClasses}">
+			{@render children()}
+		</div>
+	{/if}
+	<!-- SVG -->
+	<svg viewBox="0 0 {baseSize} {baseSize}" class="{svgBase} {svgClasses}" class:animate-spin={value === undefined}>
+		<!-- Track -->
+		<circle class="{trackBase} {trackStroke} {trackClasses}" stroke-width={strokeWidth} r={radius} cx="50%" cy="50%" />
+		<!-- Meter -->
+		<circle
+			class="{meterBase} {meterStroke} {meterTransition} {meterDuration} {meterClasses}"
+			r={radius}
+			cx="50%"
+			cy="50%"
+			stroke-width={strokeWidth}
+			stroke-linecap={strokeLinecap}
+			stroke-dasharray="{circumference} {circumference}"
+			stroke-dashoffset={dashoffset}
+			transform="rotate(-90 {baseSize / 2} {baseSize / 2})"
+		/>
+		<!-- Text -->
+		{#if value !== undefined && !children}
+			<text
+				class="{labelBase} {labelFill} {labelClasses}"
+				x="50%"
+				y="50%"
+				font-size={labelFontSize}
+				font-weight={labelFontWeight}
+				text-anchor="middle"
+				dominant-baseline="central"
+			>
+				{label ?? `${value}%`}
+			</text>
+		{/if}
+	</svg>
+</figure>

package/dist/components/ProgressRing/ProgressRing.svelte.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="svelte" />
+import type { ProgressRingProps } from './types.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
+}
+declare const ProgressRing: $$__sveltets_2_IsomorphicComponent<ProgressRingProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, Record<string, any>, "">;
+type ProgressRing = InstanceType<typeof ProgressRing>;
+export default ProgressRing;