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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Skeleton Labs, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,22 @@
+# Skeleton-Svelte
+
+Provides all Svelte features for [Skeleton](https://skeleton.dev/).
+
+## Project
+
+This project has been created using a [SvelteKit](https://kit.svelte.dev/) project library.
+
+## Exports
+
+Library exports are contained within `/src/lib/index.ts`
+
+## Dev
+
+To run locally, follow the following instructions:
+
+```
+pnpm i
+pnpm dev
+```
+
+Then point your browser at http://localhost:5173/

package/dist/components/Accordion/Accordion.svelte

@@ -0,0 +1,60 @@
+<script lang="ts" context="module">const accordionCtxKey = Symbol();
+export const getAccordionCtx = () => getContext(accordionCtxKey);
+export const setAccordionCtx = (ctx) => setContext(accordionCtxKey, ctx);
+</script>
+
+<script lang="ts">import { getContext, setContext } from "svelte";
+let {
+  multiple = false,
+  value = $bindable([]),
+  animDuration = 200,
+  // Root
+  base = "",
+  padding = "",
+  spaceY = "space-y-2",
+  rounded = "rounded",
+  width = "w-full",
+  classes = "",
+  // Snippets
+  children,
+  iconOpen,
+  iconClosed
+} = $props();
+function open(id) {
+  value = multiple ? [...value, id] : [id];
+}
+function close(id) {
+  value = value.filter((_id) => _id !== id);
+}
+function toggle(id) {
+  isOpen(id) ? close(id) : open(id);
+}
+function isOpen(id) {
+  return value.includes(id);
+}
+setAccordionCtx({
+  open,
+  close,
+  toggle,
+  isOpen,
+  get animDuration() {
+    return animDuration;
+  },
+  get iconOpen() {
+    return iconOpen;
+  },
+  get iconClosed() {
+    return iconClosed;
+  }
+});
+$effect(() => {
+  if (!multiple && value.length > 1)
+    value = [value[0]];
+});
+</script>
+
+<!-- @component An Accordion parent component. -->
+
+<div class="{base} {padding} {spaceY} {rounded} {width} {classes}" data-testid="accordion">
+	{@render children()}
+</div>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "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> {
+}

package/dist/components/Accordion/AccordionItem.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">import { getAccordionCtx } from "./Accordion.svelte";
+import { slide } from "svelte/transition";
+let {
+  id = "",
+  disabled = false,
+  // Root
+  base = "",
+  spaceY = "",
+  classes = "",
+  // Control
+  controlBase = "flex text-start items-center space-x-4 w-full",
+  controlHover = "hover:preset-tonal-primary",
+  controlPadding = "py-2 px-4",
+  controlRounded = "rounded",
+  controlClasses = "",
+  // Icons
+  iconsBase = "",
+  // Panel
+  panelBase = "",
+  panelPadding = "py-2 px-4",
+  panelRounded = "",
+  panelClasses = "",
+  // Events
+  onclick = () => {
+  },
+  // Snippets
+  control,
+  controlLead,
+  panel
+} = $props();
+function clickHandler(event) {
+  ctx.toggle(id);
+  onclick(event);
+}
+const ctx = getAccordionCtx();
+</script>
+
+<!-- @component An Accordion child item. -->
+
+<div class="{base} {spaceY} {classes}" data-testid="accordion-item">
+	<!-- Control -->
+	<button
+		type="button"
+		{id}
+		class="{controlBase} {controlHover} {controlPadding} {controlRounded} {controlClasses}"
+		aria-expanded={ctx.isOpen(id)}
+		aria-controls="accordion-panel-{id}"
+		onclick={clickHandler}
+		{disabled}
+	>
+		<!-- Lead -->
+		{#if controlLead}<div>{@render controlLead()}</div>{/if}
+		<!-- Content -->
+		<div class="flex-1">{@render control()}</div>
+		<!-- Icons -->
+		<div class={iconsBase}>
+			{#if ctx.isOpen(id)}
+				{#if ctx.iconOpen}{@render ctx.iconOpen()}{:else}&minus;{/if}
+			{:else if ctx.iconClosed}{@render ctx.iconClosed()}{:else}&plus;{/if}
+		</div>
+	</button>
+	<!-- Panel -->
+	{#if panel && ctx.isOpen(id)}
+		<div
+			class="{panelBase} {panelPadding} {panelRounded} {panelClasses}"
+			transition:slide={{ duration: ctx.animDuration }}
+			id="accordion-panel-{id}"
+			role="region"
+			aria-hidden={ctx.isOpen(id)}
+			aria-labelledby={id}
+		>
+			{@render panel()}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "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> {
+}

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

@@ -0,0 +1,76 @@
+import { type Snippet } from 'svelte';
+export interface AccordionContext {
+    open: (id: string) => void;
+    close: (id: string) => void;
+    toggle: (id: string) => void;
+    isOpen: (id: string) => boolean;
+    animDuration: number;
+    iconOpen?: Snippet;
+    iconClosed?: Snippet;
+}
+export interface AccordionProps {
+    /** Enables opening multiple items at once. */
+    multiple?: boolean;
+    /** Takes an array list of open items. */
+    value?: string[];
+    /** The slide animation duration in milliseconds. */
+    animDuration?: number;
+    /** Sets base styles. */
+    base?: string;
+    /** Set padding styles. */
+    padding?: string;
+    /** Set vertical spacing styles. */
+    spaceY?: string;
+    /** Set border radius styles. */
+    rounded?: string;
+    /** Set the width styles. */
+    width?: string;
+    /** Provide arbitrary CSS classes. */
+    classes?: string;
+    /** The default child slot. */
+    children: Snippet;
+    /** Set the open state icon. */
+    iconOpen?: Snippet;
+    /** Set the closed state icon. */
+    iconClosed?: Snippet;
+}
+export interface AccordionItemProps {
+    /** Set a unique ID for the item. */
+    id: string;
+    /** Set a disabled state for the item. */
+    disabled?: boolean;
+    /** Sets base styles. */
+    base?: string;
+    /** Set vertical spacing styles. */
+    spaceY?: string;
+    /** Provide arbitrary CSS classes. */
+    classes?: string;
+    /** Triggers on item open or close. */
+    onclick?: (event: MouseEvent) => void;
+    /** Sets control's base styles. */
+    controlBase?: string;
+    /** Sets control's the hover styles. */
+    controlHover?: string;
+    /** Sets control's the padding styles. */
+    controlPadding?: string;
+    /** Sets control's the border radius styles. */
+    controlRounded?: string;
+    /** Provide arbitrary CSS classes to the control. */
+    controlClasses?: string;
+    /** Set the base styles for the state icons. */
+    iconsBase?: string;
+    /** Set the panel's base styles. */
+    panelBase?: string;
+    /** Set the panel's padding styles. */
+    panelPadding?: string;
+    /** Set the panel's border-radius styles. */
+    panelRounded?: string;
+    /** Provide arbitrary CSS classes to the panel. */
+    panelClasses?: string;
+    /** The control's default slot. */
+    control: Snippet;
+    /** The control's lead icon slot. */
+    controlLead?: Snippet;
+    /** The panels's default slot. */
+    panel?: Snippet;
+}

package/dist/components/Accordion/types.js

@@ -0,0 +1 @@
+import {} from 'svelte';

package/dist/components/AppBar/AppBar.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">let {
+  // Root
+  base = "w-full flex flex-col",
+  background = "bg-surface-100-900",
+  spaceY = "space-y-4",
+  border = "",
+  padding = "p-4",
+  shadow = "",
+  classes = "",
+  // Toolbar
+  toolbarBase = "flex justify-between",
+  toolbarGridCols = "grid-cols-[auto_1fr_auto]",
+  toolbarGap = "gap-4",
+  toolbarClasses = "",
+  // Lead
+  leadBase = "flex",
+  leadSpaceX = "space-x-4 rtl:space-x-reverse",
+  leadPadding = "",
+  leadClasses = "",
+  // Center
+  centerBase = "grow",
+  centerAlign = "text-center",
+  centerPadding = "",
+  centerClasses = "",
+  // Trail
+  trailBase = "flex",
+  trailSpaceX = "space-x-4 rtl:space-x-reverse",
+  trailPadding = "",
+  trailClasses = "",
+  // Headline
+  headlineBase = "w-full",
+  headlineClasses = "",
+  // Snippets
+  children,
+  lead,
+  trail,
+  headline
+} = $props();
+</script>
+
+<!-- @component A header element for the top of a page layout. -->
+
+<header class="{base} {background} {spaceY} {border} {padding} {shadow} {classes}" role="toolbar" data-testid="app-bar">
+	<section class="{toolbarBase} {toolbarGridCols} {toolbarGap} {toolbarClasses}">
+		{#if lead}
+			<div class="{leadBase} {leadSpaceX} {leadPadding} {leadClasses}">
+				{@render lead()}
+			</div>
+		{/if}
+
+		{#if children}
+			<div class="{centerBase} {centerAlign} {centerPadding} {centerClasses}">
+				{@render children()}
+			</div>
+		{/if}
+
+		{#if trail}
+			<div class="{trailBase} {trailSpaceX} {trailPadding} {trailClasses}">
+				{@render trail()}
+			</div>
+		{/if}
+	</section>
+
+	{#if headline}
+		<section class="{headlineBase} {headlineClasses}">
+			{@render headline()}
+		</section>
+	{/if}
+</header>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "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> {
+}

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

@@ -0,0 +1,61 @@
+import type { Snippet } from 'svelte';
+export interface AppBarProps {
+    /** Set base styles. */
+    base?: string;
+    /** Set background styles. */
+    background?: string;
+    /** Set vertical spacing styles. */
+    spaceY?: string;
+    /** Set border styles. */
+    border?: string;
+    /** Set padding styles. */
+    padding?: string;
+    /** Set shadow styles. */
+    shadow?: string;
+    /** Provide arbitrary CSS classes. */
+    classes?: string;
+    /** Sets toolbar's base styles. */
+    toolbarBase?: string;
+    /** Sets toolbar's grid columns styles. */
+    toolbarGridCols?: string;
+    /** Sets toolbar's gap styles. */
+    toolbarGap?: string;
+    /** Provide arbitrary CSS classes to the toolbar. */
+    toolbarClasses?: string;
+    /** Sets the lead snippet element's base styles. */
+    leadBase?: string;
+    /** Sets the lead snippet element's horizontal spacing styles. */
+    leadSpaceX?: string;
+    /** Sets the lead snippet element's padding styles. */
+    leadPadding?: string;
+    /** Provide arbitrary CSS classes to the lead snippet. */
+    leadClasses?: string;
+    /** Sets the center snippet element's base styles. */
+    centerBase?: string;
+    /** Sets the center snippet element's alignment styles. */
+    centerAlign?: string;
+    /** Sets the center snippet element's padding styles. */
+    centerPadding?: string;
+    /** Provide arbitrary CSS classes to the center snippet. */
+    centerClasses?: string;
+    /** Sets the trail snippet element's base styles. */
+    trailBase?: string;
+    /** Sets the trail snippet element's horizontal spacing styles. */
+    trailSpaceX?: string;
+    /** Sets the trail snippet element's padding styles. */
+    trailPadding?: string;
+    /** Provide arbitrary CSS classes to the trail snippet. */
+    trailClasses?: string;
+    /** Sets the headline snippet element's base styles. */
+    headlineBase?: string;
+    /** Provide arbitrary CSS classes to the headline snippet. */
+    headlineClasses?: string;
+    /** The center slot. */
+    children?: Snippet;
+    /** The lead slot. */
+    lead?: Snippet;
+    /** The trail slot. */
+    trail?: Snippet;
+    /** The headline slot. */
+    headline?: Snippet;
+}

package/dist/components/AppBar/types.js

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

package/dist/components/Avatar/Avatar.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">let {
+  src = "",
+  alt = "",
+  filter = "",
+  // Root
+  base = "overflow-hidden isolate",
+  background = "bg-surface-400-600",
+  size = "size-16",
+  font = "",
+  border = "",
+  rounded = "rounded-full",
+  shadow = "",
+  classes = "",
+  // Image
+  imageBase = "w-full object-cover",
+  imageClasses = "",
+  // Snippets
+  children
+} = $props();
+</script>
+
+<!-- @component An image with a fallback for representing the user. -->
+
+<figure class="{base} {background} {size} {font} {border} {rounded} {shadow} {classes}" data-testId="avatar">
+	{#if src}
+		<img class="{imageBase} {imageClasses}" {src} {alt} style:filter={filter && `url(${filter})`} />
+	{:else if children}
+		{@render children()}
+	{/if}
+</figure>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "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> {
+}

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

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+export interface AvatarProps {
+    /** Set avatar image source URL. */
+    src?: string;
+    /** Set avatar image Alt text. */
+    alt?: string;
+    /** Set avatar image filter name. such as "#Apollo". */
+    filter?: string;
+    /** Set base styles. */
+    base?: string;
+    /** Set background styles. */
+    background?: string;
+    /** Set size styles. */
+    size?: string;
+    /** Set font styles. */
+    font?: string;
+    /** Set border styles. */
+    border?: string;
+    /** Set border radius styles. */
+    rounded?: string;
+    /** Set shadow styles. */
+    shadow?: string;
+    /** Provide arbitrary CSS classes. */
+    classes?: string;
+    /** Set avatar image base styles. */
+    imageBase?: string;
+    /** Provide avatar image arbitrary CSS classes. */
+    imageClasses?: string;
+    /** The default child slot. */
+    children?: Snippet;
+}

package/dist/components/Avatar/types.js

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

package/dist/components/Progress/Progress.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">let {
+  value,
+  max = 100,
+  labelledBy = "",
+  // Root
+  base = "overflow-x-hidden",
+  bg = "bg-surface-200-800",
+  width = "w-full",
+  height = "h-2",
+  rounded = "rounded",
+  classes = "",
+  // Meter
+  meterBase = "h-full",
+  meterBg = "bg-surface-950-50",
+  meterRounded = "rounded",
+  meterTransition = "transition-[width]",
+  meterAnimate = "animate-indeterminate",
+  meterClasses = ""
+} = $props();
+$effect(() => {
+  if (max < 0) {
+    console.warn("The max prop should be greater than or equal to 0");
+  }
+});
+const indeterminate = $derived(value === void 0);
+const fillPercentage = $derived(`${indeterminate ? 50 : (value - 0) / (max - 0) * 100}%`);
+const rxIndeterminate = $derived(indeterminate ? meterAnimate : "");
+</script>
+
+<!-- @component An indicator showing the progress or completion of a task -->
+
+<div
+	role="progressbar"
+	aria-labelledby={labelledBy}
+	aria-valuenow={value}
+	aria-valuemin={0}
+	aria-valuemax={max}
+	class="{base} {bg} {width} {height} {rounded} {classes}"
+>
+	<div class="{meterBase} {meterBg} {meterRounded} {meterTransition} {rxIndeterminate} {meterClasses}" style:width={fillPercentage}></div>
+</div>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "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> {
+}

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

@@ -0,0 +1,32 @@
+export interface ProgressProps {
+    /** Set the value */
+    value?: number;
+    /** Set the maximum value */
+    max?: number;
+    /** Set the aria-labelledby */
+    labelledBy?: string;
+    /** Set root base classes */
+    base?: string;
+    /** Set root background classes  */
+    bg?: string;
+    /** Set root width classes */
+    width?: string;
+    /** Set root height classes */
+    height?: string;
+    /** Set root rounded classes */
+    rounded?: string;
+    /** Set root arbitrary classes */
+    classes?: string;
+    /** Set meter base classes. */
+    meterBase?: string;
+    /** Set meter bg classes */
+    meterBg?: string;
+    /** Set meter rounded classes. */
+    meterRounded?: string;
+    /** Set meter transition classes. */
+    meterTransition?: string;
+    /** Set meter animation classes for indeterminate (value === undefined) */
+    meterAnimate?: string;
+    /** Set meter arbitrary classes. */
+    meterClasses?: string;
+}

package/dist/components/Progress/types.js

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

package/dist/components/Tab/Tabs.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">let {
+  id,
+  // Root
+  base = "w-full",
+  spaceY = "space-y-4",
+  classes = "",
+  // Tab List
+  listBase = "flex",
+  listJustify = "justify-start",
+  listGap = "gap-2",
+  listBorder = "border-b-[1px] border-surface-200-800",
+  listClasses = "",
+  // Snippets
+  list,
+  panels
+} = $props();
+</script>
+
+<!-- @component A Tab parent component. -->
+
+<div {id} class="{base} {spaceY} {classes}" data-testid="tabs">
+	{#if list}
+		<div class="{listBase} {listGap} {listJustify} {listBorder} {listClasses}" role="tablist">
+			{@render list()}
+		</div>
+	{/if}
+	{#if panels}
+		{@render panels()}
+	{/if}
+</div>

package/dist/components/Tab/Tabs.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+import type { TabsProps } from './types.js';
+declare const __propDef: {
+    props: TabsProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type TabsProps_ = typeof __propDef.props;
+export { TabsProps_ as TabsProps };
+export type TabsEvents = typeof __propDef.events;
+export type TabsSlots = typeof __propDef.slots;
+/** A Tab parent component. */
+export default class Tabs extends SvelteComponent<TabsProps_, TabsEvents, TabsSlots> {
+}

package/dist/components/Tab/TabsControl.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">let {
+  id,
+  name,
+  group = $bindable(),
+  title,
+  // A11y
+  label = "",
+  controls = "",
+  // Root
+  base = "group",
+  width = "",
+  active = "text-surface-950-50 border-surface-950-50",
+  inactive = "text-surface-600-400 border-transparent",
+  flex = "flex justify-center items-center",
+  background = "",
+  border = "border-b-[1px]",
+  text = "type-scale-3",
+  padding = "pb-2",
+  rounded = "",
+  gap = "gap-1",
+  cursor = "cursor-pointer",
+  classes = "",
+  // Content
+  contentBase = "w-full",
+  contentFlex = "flex justify-center items-center",
+  contentGap = "gap-2",
+  contentBg = "group-hover:preset-tonal-primary",
+  contentPadding = "p-2 px-4",
+  contentRounded = "rounded-container",
+  contentClasses = "",
+  // Events
+  onclick = () => {
+  },
+  onkeypress = () => {
+  },
+  onkeydown = () => {
+  },
+  onkeyup = () => {
+  },
+  onchange = () => {
+  },
+  // Snippets
+  children
+} = $props();
+const selected = $derived(group === name);
+const rxActive = $derived(selected ? active : inactive);
+let elemInput;
+function onKeyDownHandler(event) {
+  onkeydown(event);
+  if (!["ArrowRight", "ArrowLeft", "Home", "End"].includes(event.code))
+    return;
+  event.preventDefault();
+  const currTab = elemInput.closest('[role="tab"]');
+  if (!currTab)
+    return;
+  const tabList = elemInput.closest('[role="tablist"]');
+  if (!tabList)
+    return;
+  const isRTL = getComputedStyle(tabList).direction === "rtl";
+  const tabs = Array.from(tabList.querySelectorAll('[role="tab"]'));
+  const currIndex = tabs.indexOf(currTab);
+  let nextIndex = -1;
+  switch (event.code) {
+    case "ArrowRight":
+      if (isRTL) {
+        nextIndex = currIndex - 1 < 0 ? tabs.length - 1 : currIndex - 1;
+        break;
+      }
+      nextIndex = currIndex + 1 >= tabs.length ? 0 : currIndex + 1;
+      break;
+    case "ArrowLeft":
+      if (isRTL) {
+        nextIndex = currIndex + 1 >= tabs.length ? 0 : currIndex + 1;
+        break;
+      }
+      nextIndex = currIndex - 1 < 0 ? tabs.length - 1 : currIndex - 1;
+      break;
+    case "Home":
+      nextIndex = 0;
+      break;
+    case "End":
+      nextIndex = tabs.length - 1;
+      break;
+  }
+  if (nextIndex < 0)
+    return;
+  const nextTab = tabs[nextIndex];
+  const nextTabInput = nextTab?.querySelector("input");
+  if (nextTabInput) {
+    nextTabInput.click();
+    nextTab.focus();
+  }
+}
+</script>
+
+<!-- @component A Tab Control component. -->
+
+<label
+	{id}
+	class="{base} {width} {rxActive} {flex} {background} {border} {text} {padding} {rounded} {gap} {cursor} {classes}"
+	aria-label={label}
+	{title}
+>
+	<!-- NOTE: do not add additional classes to this <div> -->
+	<div
+		class="size-full"
+		role="tab"
+		aria-controls={controls}
+		aria-selected={selected}
+		data-testid="tabs-control"
+		tabindex={selected ? 0 : -1}
+		onkeydown={onKeyDownHandler}
+		{onkeypress}
+		{onkeyup}
+	>
+		<!-- Keep these classes on wrapping element -->
+		<div class="h-0 w-0 flex-none overflow-hidden">
+			<input bind:group bind:this={elemInput} type="radio" {name} value={name} onchange={() => onchange(group)} {onclick} tabindex="-1" />
+		</div>
+		<!-- Content -->
+		{#if children}
+			<div class="{contentBase} {contentFlex} {contentGap} {contentBg} {contentPadding} {contentRounded} {contentClasses}">
+				{@render children()}
+			</div>
+		{/if}
+	</div>
+</label>

package/dist/components/Tab/TabsControl.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+import type { TabsControlProps } from './types.js';
+declare const __propDef: {
+    props: TabsControlProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type TabsControlProps_ = typeof __propDef.props;
+export { TabsControlProps_ as TabsControlProps };
+export type TabsControlEvents = typeof __propDef.events;
+export type TabsControlSlots = typeof __propDef.slots;
+/** A Tab Control component. */
+export default class TabsControl extends SvelteComponent<TabsControlProps_, TabsControlEvents, TabsControlSlots> {
+}

package/dist/components/Tab/TabsPanel.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">let {
+  id,
+  value,
+  group = $bindable(),
+  // A11y
+  labelledBy,
+  // Root
+  classes = "",
+  // Snippets
+  children
+} = $props();
+</script>
+
+<!-- @component A Tab Panel component. -->
+
+{#if value === group && children}
+	<div {id} role="tabpanel" tabindex="0" aria-labelledby={labelledBy} class={classes}>
+		{@render children()}
+	</div>
+{/if}

package/dist/components/Tab/TabsPanel.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+import type { TabsPanelProps } from './types.js';
+declare const __propDef: {
+    props: TabsPanelProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type TabsPanelProps_ = typeof __propDef.props;
+export { TabsPanelProps_ as TabsPanelProps };
+export type TabsPanelEvents = typeof __propDef.events;
+export type TabsPanelSlots = typeof __propDef.slots;
+/** A Tab Panel component. */
+export default class TabsPanel extends SvelteComponent<TabsPanelProps_, TabsPanelEvents, TabsPanelSlots> {
+}

package/dist/components/Tab/index.d.ts

@@ -0,0 +1,8 @@
+import Tabs from './Tabs.svelte';
+import Control from './TabsControl.svelte';
+import Panel from './TabsPanel.svelte';
+declare const _default: typeof Tabs & {
+    Control: typeof Control;
+    Panel: typeof Panel;
+};
+export default _default;

package/dist/components/Tab/index.js

@@ -0,0 +1,4 @@
+import Tabs from './Tabs.svelte';
+import Control from './TabsControl.svelte';
+import Panel from './TabsPanel.svelte';
+export default Object.assign(Tabs, { Control, Panel });

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

@@ -0,0 +1,105 @@
+import type { Snippet } from 'svelte';
+export interface TabsProps {
+    /** Provide a unique ID. */
+    id?: string;
+    /** Sets base styles. */
+    base?: string;
+    /** Set vertical spacing between list and panels. */
+    spaceY?: string;
+    /** Provide arbitrary CSS classes. */
+    classes?: string;
+    /** Sets the list snippet element's base styles. */
+    listBase?: string;
+    /** Sets the list snippet element's justification styles. */
+    listJustify?: string;
+    /** Sets the list snippet element's gap spacing. */
+    listGap?: string;
+    /** Sets the list snippet element's border styles. */
+    listBorder?: string;
+    /** Provide arbitrary CSS classes to the list snippet. */
+    listClasses?: string;
+    /** The tab list slot. */
+    list?: Snippet;
+    /** The tab panel slot. */
+    panels?: Snippet;
+}
+export interface TabsControlProps {
+    /** Provide a unique ID. */
+    id?: string;
+    /** Provide the tab control name. */
+    name: string;
+    /** Provide the tab control radio group. */
+    group: string;
+    /** Provide a hoverable title attribute. */
+    title?: string;
+    /** Sets the A11y label. */
+    label?: string;
+    /** Sets ARIA controls value to define which panel this tab controls. */
+    controls?: string;
+    /** Sets base styles. */
+    base?: string;
+    /** Sets width styles. */
+    width?: string;
+    /** Sets the active control styles. */
+    active?: string;
+    /** Sets the inactive control styles. */
+    inactive?: string;
+    /** Sets flex styles. */
+    flex?: string;
+    /** Sets background styles. */
+    background?: string;
+    /** Sets border styles. */
+    border?: string;
+    /** Sets text size styles. */
+    text?: string;
+    /** Sets padding styles. */
+    padding?: string;
+    /** Sets rounded styles. */
+    rounded?: string;
+    /** Sets vertical gap styles. */
+    gap?: string;
+    /** Sets cursor styles. */
+    cursor?: string;
+    /** Provide arbitrary CSS classes. */
+    classes?: string;
+    /** Sets tab content base styles. */
+    contentBase?: string;
+    /** Sets tab content flex styles. */
+    contentFlex?: string;
+    /** Sets the tab content gap styles. */
+    contentGap?: string;
+    /** Sets the tab content background styles. */
+    contentBg?: string;
+    /** Sets the tab content padding styles. */
+    contentPadding?: string;
+    /** Sets the tab content rounded styles. */
+    contentRounded?: string;
+    /** Provide arbitrary CSS classes for the tab content. */
+    contentClasses?: string;
+    /** Triggers on Tab Control click. */
+    onclick?: (event: MouseEvent) => void;
+    /** Triggers on Tab Control key press. */
+    onkeypress?: (event: KeyboardEvent) => void;
+    /** Triggers on Tab Control key down. */
+    onkeydown?: (event: KeyboardEvent) => void;
+    /** Triggers on Tab Control key up. */
+    onkeyup?: (event: KeyboardEvent) => void;
+    /** Triggers on Tab Control group change. */
+    onchange?: (group: string) => void;
+    /** The default child slot. */
+    children?: Snippet;
+}
+export interface TabsPanelProps {
+    /** Provide a unique ID. */
+    id?: string;
+    /** Provide the tab panel value. */
+    value: string;
+    /** Provide the tab control radio group. */
+    group: string;
+    /** Sets the A11y labelledby. */
+    labelledBy?: string;
+    /** Provide arbitrary CSS classes. */
+    classes?: string;
+    /** The default child slot. */
+    children?: Snippet;
+}

package/dist/components/Tab/types.js

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

package/dist/components/Test/Test.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">let count = $state(0);
+function counter() {
+  count = count + 1;
+}
+</script>
+
+<button class="btn preset-filled" onclick={counter}>Count is {count}</button>

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

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TestProps = typeof __propDef.props;
+export type TestEvents = typeof __propDef.events;
+export type TestSlots = typeof __propDef.slots;
+export default class Test extends SvelteComponent<TestProps, TestEvents, TestSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Test } from './components/Test/Test.svelte';
+export { default as Accordion } from './components/Accordion/Accordion.svelte';
+export { default as AccordionItem } from './components/Accordion/AccordionItem.svelte';
+export { default as Avatar } from './components/Avatar/Avatar.svelte';
+export { default as AppBar } from './components/AppBar/AppBar.svelte';
+export { default as Tabs } from './components/Tab/index.js';
+export { default as Progress } from './components/Progress/Progress.svelte';

package/dist/index.js

@@ -0,0 +1,8 @@
+// Exports for skeleton-svelte package
+export { default as Test } from './components/Test/Test.svelte';
+export { default as Accordion } from './components/Accordion/Accordion.svelte';
+export { default as AccordionItem } from './components/Accordion/AccordionItem.svelte';
+export { default as Avatar } from './components/Avatar/Avatar.svelte';
+export { default as AppBar } from './components/AppBar/AppBar.svelte';
+export { default as Tabs } from './components/Tab/index.js';
+export { default as Progress } from './components/Progress/Progress.svelte';

package/dist/utils.svelte.d.ts

@@ -0,0 +1,5 @@
+/** Provide reactive state for Context API */
+export declare class State<T> {
+    value: T;
+    constructor(initial: T);
+}

package/dist/utils.svelte.js

@@ -0,0 +1,10 @@
+// Common Utility Features
+// TODO: utilize this until Svelte provides a first-class solution.
+// https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACo2SMW-DMBCF_4plVSKoCDoTglRl6toOHUoHapzEKZwt-wipEP-9wg7Eadqoo---ez69dz3diJobmr71FMqG05Q-KkUjil9qfJgDr5HTiBrZajZWMsO0UJgXUKBolNRIemI4riUgPyIZyEbLhgRuMlhecC9YIp-RODHjO3ZovDcX9Hon6mom7Sv2RKHAmiPRZedEV-TOqi0eQqvCJBgknS6V4tWEAO_cDicKCty0wFBIIALYIiT9WCtwkr2_X7qCLxQfyrqdWoOTOTuwCKbhIJrXczv5kC8YRBeLjnCWnH2G7KNFlEAksFqwz1UvgA35EzDNGw6YJa7vWOdbktOINrISG8ErmqJu-RDNGVvmvyl7-W1v5gyOds57wWx_8yZc-vSPnLZ_GXVtjcqfy47Y6FPST_JDlqjcdl_d-ExcB2nZW275V3o2bW98w_jRWsTq0pjTmdtTsj-cjzOcT1O3DKVeCBAoyno-PNwJE09Dp-Z0Z8P1ku_DN0HaHf7CAwAA
+/** Provide reactive state for Context API */
+export class State {
+    value = $state();
+    constructor(initial) {
+        this.value = initial;
+    }
+}

package/package.json

@@ -1,16 +1,76 @@
 {
   "name": "@skeletonlabs/skeleton-svelte",
-  "version": "0.0.0",
-  "private": false,
-  "description": "",
-  "main": "index.js",
-  "keywords": [],
-  "author": "",
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
+  "version": "1.0.0-next.1",
+  "description": "The Svelte package for Skeleton.",
+  "author": "endigo9740 <chris@skeletonlabs.dev>",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
   },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*",
+    "./dist/**/*.svelte",
+    "./dist/**/*.js",
+    "./dist/**/*.d.ts",
+    "./dist/**/*.cjs",
+    "./dist/**/*.d.cts"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0-next.136"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.42.1",
+    "@sveltejs/adapter-auto": "^3.2.0",
+    "@sveltejs/kit": "^2.5.5",
+    "@sveltejs/package": "^2.3.1",
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@tailwindcss/forms": "^0.5.7",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/svelte": "^4.1.0",
+    "@types/eslint": "8.56.0",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "2.36.0-next.5",
+    "jsdom": "^24.0.0",
+    "postcss": "^8.4.38",
+    "postcss-load-config": "^5.0.3",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.2",
+    "prettier-plugin-tailwindcss": "^0.5.13",
+    "publint": "^0.1.16",
+    "svelte": "5.0.0-next.94",
+    "svelte-check": "^3.6.9",
+    "tailwindcss": "^3.4.3",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.4",
+    "vite": "^5.2.8",
+    "vitest": "^1.4.0",
+    "@skeletonlabs/skeleton": "3.0.0-next.0",
+    "vite-plugin-tw-plugin-watcher": "0.0.0"
+  },
+  "type": "module",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "package:watch": "svelte-package --watch",
+    "test": "npm run test:integration && npm run test:unit",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write .",
+    "test:integration": "playwright test",
+    "test:unit": "vitest",
+    "sk-sync": "svelte-kit sync"
   }
 }