@skeletonlabs/skeleton-svelte 1.0.0-next.9 → 1.1.0

package/dist/components/Segment/SegmentItem.svelte

@@ -1,24 +1,31 @@
-<script lang="ts">import { getSegmentContext } from "./context.js";
-let {
-  // Root
-  base = "btn cursor-pointer z-[1]",
-  classes = "",
-  // State
-  stateDisabled = "disabled",
-  stateFocused = "focused",
-  // Label
-  labelBase = "pointer-events-none transition-colors duration-100",
-  labelClasses = "",
-  // Snippets
-  children,
-  // Zag
-  ...zagProps
-} = $props();
-const ctx = getSegmentContext();
-const state = $derived(ctx.api.getItemState(zagProps));
-const rxDisabled = $derived(state.disabled ? stateDisabled : "");
-const rxActiveText = $derived(state.checked ? ctx.indicatorText : "");
-const rxFocused = $derived(state.focused ? stateFocused : "");
+<script lang="ts">
+	import type { SegmentItemProps } from './types.js';
+	import { getSegmentContext } from './context.js';
+
+	let {
+		// Root
+		base = 'btn cursor-pointer z-[1]',
+		classes = '',
+		// State
+		stateDisabled = 'disabled',
+		stateFocused = 'focused',
+		// Label
+		labelBase = 'pointer-events-none transition-colors duration-100',
+		labelClasses = '',
+		// Snippets
+		children,
+		// Zag
+		...zagProps
+	}: SegmentItemProps = $props();
+
+	// Context
+	const ctx = getSegmentContext();
+
+	// Reactive
+	const state = $derived(ctx.api.getItemState(zagProps));
+	const rxDisabled = $derived(state.disabled ? stateDisabled : '');
+	const rxActiveText = $derived(state.checked ? ctx.indicatorText : '');
+	const rxFocused = $derived(state.focused ? stateFocused : '');
 </script>
 
 <!-- @component An individual Segment option. -->

package/dist/components/Segment/SegmentItem.svelte.d.ts

@@ -1,17 +1,5 @@
 import type { SegmentItemProps } 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;
-}
 /** An individual Segment option. */
-declare const SegmentItem: $$__sveltets_2_IsomorphicComponent<SegmentItemProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type SegmentItem = InstanceType<typeof SegmentItem>;
+declare const SegmentItem: import("svelte").Component<SegmentItemProps, {}, "">;
+type SegmentItem = ReturnType<typeof SegmentItem>;
 export default SegmentItem;

package/dist/components/Segment/context.js

@@ -1,6 +1,7 @@
+var _a;
 import * as radio from '@zag-js/radio-group';
 import { createContext } from '../../internal/create-context.js';
-export const [setSegmentContext, getSegmentContext, key] = createContext({
+export var setSegmentContext = (_a = createContext({
     api: {},
     indicatorText: ''
-});
+}), _a[0]), getSegmentContext = _a[1], key = _a[2];

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

@@ -0,0 +1,4 @@
+declare const _default: import("svelte").Component<import("./types").SegmentProps, {}, ""> & {
+    Item: import("svelte").Component<import("./types").SegmentItemProps, {}, "">;
+};
+export default _default;

package/dist/components/Segment/index.js

@@ -1,3 +1,3 @@
 import Segment from './Segment.svelte';
 import Item from './SegmentItem.svelte';
-export default Object.assign(Segment, { Item });
+export default /* @__PURE__ */ Object.assign(Segment, { Item: Item });

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

@@ -4,11 +4,7 @@ export interface SegmentContext {
     api: ReturnType<typeof radio.connect>;
     indicatorText: string;
 }
-export interface SegmentControl extends Omit<radio.Context, 'id' | 'orientation' | 'onValueChange'> {
-    /** Set the active value. */
-    value?: string;
-    /** Set the orientation. */
-    orientation?: 'horizontal' | 'vertical' | undefined;
+export interface SegmentProps extends Omit<radio.Props, 'id'> {
     /** Sets base classes. */
     base?: string;
     /** Set background classes. */
@@ -29,11 +25,11 @@ export interface SegmentControl extends Omit<radio.Context, 'id' | 'orientation'
     classes?: string;
     /** Set classes to provide a vertical layout. */
     orientVertical?: string;
-    /** Set classes to provide a horizintal layout. */
+    /** Set classes to provide a horizontal layout. */
     orientHorizontal?: string;
-    /** Set claseses for the disabled state. */
+    /** Set classes for the disabled state. */
     stateDisabled?: string;
-    /** Set claseses for the read-only state. */
+    /** Set classes for the read-only state. */
     stateReadOnly?: string;
     /** Sets base classes to the indicator. */
     indicatorBase?: string;
@@ -45,6 +41,8 @@ export interface SegmentControl extends Omit<radio.Context, 'id' | 'orientation'
     indicatorRounded?: string;
     /** Provide arbitrary CSS classes to the indicator. */
     indicatorClasses?: string;
+    /** Set aria-labelledby for element */
+    labelledby?: string;
     /** The default child slot. */
     children?: Snippet;
 }
@@ -53,9 +51,9 @@ export interface SegmentItemProps extends Omit<radio.ItemProps, 'invalid'> {
     base?: string;
     /** Provide arbitrary CSS classes. */
     classes?: string;
-    /** Set claseses for the disabled state. */
+    /** Set classes for the disabled state. */
     stateDisabled?: string;
-    /** Set claseses for the focus state. */
+    /** Set classes for the focus state. */
     stateFocused?: string;
     /** Sets base classes for the label element. */
     labelBase?: string;

package/dist/components/Slider/Slider.svelte

@@ -1,72 +1,65 @@
-<script lang="ts">import * as slider from "@zag-js/slider";
-import { normalizeProps, useMachine } from "@zag-js/svelte";
-import { useId } from "../../internal/use-id.js";
-let {
-  value = $bindable([0]),
-  markers = [],
-  height = "h-1.5",
-  // Root ---
-  base = "w-full bg-green",
-  spaceY = "",
-  classes = "",
-  // Control ---
-  controlBase = "",
-  controlClasses = "",
-  // Track ---
-  trackBase = "overflow-hidden",
-  trackBg = "bg-surface-200-800",
-  trackRounded = "rounded-full",
-  trackClasses = "",
-  // Meter ---
-  meterBase = "",
-  meterBg = "bg-surface-950-50",
-  materRounded = "rounded-container",
-  meterClasses = "",
-  // Thumb ---
-  thumbBase = "ring-inset transition-scale duration-100 ease-in-out",
-  thumbSize = "size-8 md:size-5",
-  thumbBg = "bg-surface-50-950",
-  thumbRingSize = "ring-2",
-  thumbRingColor = "ring-surface-950-50",
-  thumbRounded = "rounded-full",
-  thumbScale = "hover:scale-125",
-  thumbCursor = "hover:cursor-pointer",
-  thumbClasses = "",
-  // Markers ---
-  markersBase = "",
-  markerslasses = "",
-  // Mark ---
-  markBase = "",
-  markText = "text-[10px]",
-  markOpacity = "opacity-50",
-  markClasses = "",
-  // State ---
-  stateDisabled = "disabled",
-  stateReadOnly = "cursor-not-allowed",
-  // Children ---
-  mark,
-  // Zag ---
-  ...zagProps
-} = $props();
-const [snapshot, send] = useMachine(
-  slider.machine({
-    id: useId(),
-    onValueChange(details) {
-      value = details.value;
-    }
-  }),
-  {
-    context: {
-      ...zagProps,
-      get value() {
-        return value;
-      }
-    }
-  }
-);
-const api = $derived(slider.connect(snapshot, send, normalizeProps));
-const rxDisabled = $derived(snapshot.context.disabled ? stateDisabled : "");
-const rxReadOnly = $derived(snapshot.context.readOnly ? stateReadOnly : `${thumbScale} ${thumbCursor}`);
+<script lang="ts">
+	import * as slider from '@zag-js/slider';
+	import { normalizeProps, useMachine } from '@zag-js/svelte';
+	import type { SliderProps } from './types.js';
+
+	const {
+		markers = [],
+		height = 'h-1.5',
+		// Root ---
+		base = 'w-full bg-green',
+		spaceY = '',
+		classes = '',
+		// Control ---
+		controlBase = '',
+		controlClasses = '',
+		// Track ---
+		trackBase = 'overflow-hidden',
+		trackBg = 'bg-surface-200-800',
+		trackRounded = 'rounded-full',
+		trackClasses = '',
+		// Meter ---
+		meterBase = '',
+		meterBg = 'bg-surface-950-50',
+		meterRounded = 'rounded-container',
+		meterClasses = '',
+		// Thumb ---
+		thumbBase = 'ring-inset transition-scale duration-100 ease-in-out',
+		thumbSize = 'size-8 md:size-5',
+		thumbBg = 'bg-surface-50-950',
+		thumbRingSize = 'ring-2',
+		thumbRingColor = 'ring-surface-950-50',
+		thumbRounded = 'rounded-full',
+		thumbCursor = 'hover:cursor-pointer',
+		thumbClasses = '',
+		// Markers ---
+		markersBase = '',
+		markersClasses = '',
+		// Mark ---
+		markBase = '',
+		markText = 'text-[10px]',
+		markOpacity = 'opacity-50',
+		markClasses = '',
+		// State ---
+		stateDisabled = 'disabled',
+		stateReadOnly = 'cursor-not-allowed',
+		// Children ---
+		mark,
+		// Zag ---
+		...zagProps
+	}: SliderProps = $props();
+
+	// Zag
+	const id = $props.id();
+	const service = useMachine(slider.machine, () => ({
+		id: id,
+		...zagProps
+	}));
+	const api = $derived(slider.connect(service, normalizeProps));
+
+	// Reactive
+	const rxDisabled = $derived(service.prop('disabled') ? stateDisabled : '');
+	const rxReadOnly = $derived(service.prop('readOnly') ? stateReadOnly : thumbCursor);
 </script>
 
 <div {...api.getRootProps()} class="{base} {height} {spaceY} {rxDisabled} {classes}" data-testid="slider">
@@ -75,10 +68,12 @@ const rxReadOnly = $derived(snapshot.context.readOnly ? stateReadOnly : `${thumb
 		<!-- Track -->
 		<div {...api.getTrackProps()} class="{trackBase} {trackBg} {height} {trackRounded} {trackClasses}" data-testid="slider-track">
 			<!-- Meter -->
-			<div {...api.getRangeProps()} class="{meterBase} {height} {meterBg} {materRounded} {meterClasses}" data-testid="slider-meter"></div>
+			<div {...api.getRangeProps()} class="{meterBase} {height} {meterBg} {meterRounded} {meterClasses}" data-testid="slider-meter"></div>
 		</div>
 		<!-- NOTE: this div centers thumbs vertically -->
 		<div class={height} style="display: flex; align-items: center; transform: translateY(-100%);" data-testid="slider-thumb-wrapper">
+			<!-- Disabled: skipping this so we can match Zag implementation. -->
+			<!-- eslint-disable @typescript-eslint/no-unused-vars -->
 			{#each api.value as _, index}
 				<div {...api.getThumbProps({ index })}>
 					<!-- Thumb -->
@@ -94,12 +89,12 @@ const rxReadOnly = $derived(snapshot.context.readOnly ? stateReadOnly : `${thumb
 	</div>
 	<!-- Markers -->
 	{#if markers.length > 0}
-		<div {...api.getMarkerGroupProps()} class="{markersBase} {markerslasses}" data-testid="slider-markers">
+		<div {...api.getMarkerGroupProps()} class="{markersBase} {markersClasses}" data-testid="slider-markers">
 			{#each markers as value}
 				<!-- Mark -->
 				<span {...api.getMarkerProps({ value })} class="{markBase} {markText} {markOpacity} {markClasses}" data-testid="slider-mark">
 					{#if mark}
-						{@render mark()}
+						{@render mark(value)}
 					{:else}
 						{value}
 					{/if}

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

@@ -1,16 +1,4 @@
 import type { SliderProps } 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 Slider: $$__sveltets_2_IsomorphicComponent<SliderProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "value">;
-type Slider = InstanceType<typeof Slider>;
+declare const Slider: import("svelte").Component<SliderProps, {}, "">;
+type Slider = ReturnType<typeof Slider>;
 export default Slider;

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

@@ -1,8 +1,6 @@
 import * as slider from '@zag-js/slider';
 import type { Snippet } from 'svelte';
-export interface SliderProps extends Omit<slider.Context, 'id' | 'thumbSize'> {
-    /** Provide the value as an array. */
-    value?: number[];
+export interface SliderProps extends Omit<slider.Props, 'id' | 'thumbSize'> {
     /** Provide an array of value markers */
     markers?: number[];
     /** Set height classes for the overall slider. */
@@ -30,7 +28,7 @@ export interface SliderProps extends Omit<slider.Context, 'id' | 'thumbSize'> {
     /** Set background classes for the meter. */
     meterBg?: string;
     /** Set border radius classes for the meter. */
-    materRounded?: string;
+    meterRounded?: string;
     /** Provide arbitrary classes for the meter. */
     meterClasses?: string;
     /** Set base classes for the thumb. */
@@ -45,8 +43,6 @@ export interface SliderProps extends Omit<slider.Context, 'id' | 'thumbSize'> {
     thumbRingColor?: string;
     /** Set border-radius classes for the thumb. */
     thumbRounded?: string;
-    /** Set scale classes for the thumb. */
-    thumbScale?: string;
     /** Set cursor classes for the thumb. */
     thumbCursor?: string;
     /** Provide arbitrary classes for the thumb. */
@@ -54,7 +50,7 @@ export interface SliderProps extends Omit<slider.Context, 'id' | 'thumbSize'> {
     /** Set base classes for the markers. */
     markersBase?: string;
     /** Provide arbitrary classes for the markers. */
-    markerslasses?: string;
+    markersClasses?: string;
     /** Set base classes for each mark. */
     markBase?: string;
     /** Set text size classes for each mark. */
@@ -67,6 +63,6 @@ export interface SliderProps extends Omit<slider.Context, 'id' | 'thumbSize'> {
     stateDisabled?: string;
     /** Set read-only state classes for the root element. */
     stateReadOnly?: string;
-    /** Replace numeric markers with symbol, such as a icon. */
-    mark?: Snippet;
+    /** Replace numeric markers with symbol, such as a icon. Takes marker value as argument. */
+    mark?: Snippet<[number]>;
 }

package/dist/components/Switch/Switch.svelte

@@ -1,97 +1,80 @@
-<script lang="ts">import { normalizeProps, useMachine } from "@zag-js/svelte";
-import * as zagSwitch from "@zag-js/switch";
-import { useId } from "../../internal/use-id.js";
-let {
-  name = "",
-  checked = $bindable(false),
-  disabled = $bindable(false),
-  compact = $bindable(false),
-  // Root (Track)
-  base = "inline-flex items-center gap-4",
-  classes = "",
-  // State
-  stateFocused = "[&>span]:focused",
-  // Control
-  controlBase = "cursor-pointer transition duration-200",
-  controlInactive = "preset-filled-surface-200-800",
-  controlActive = "preset-filled-primary-500",
-  controlDisabled = "opacity-50 cursor-not-allowed",
-  controlWidth = "w-10",
-  controlHeight = "h-6",
-  controlPadding = "p-0.5",
-  controlRounded = "rounded-full",
-  controlHover = "hover:brightness-90 dark:hover:brightness-110",
-  controlClasses = "",
-  // Thumb
-  thumbBase = "right-0 aspect-square h-full flex justify-center items-center text-right cursor-pointer",
-  thumbInactive = "preset-filled-surface-50-950",
-  thumbActive = "bg-surface-50 text-surface-contrast-50",
-  thumbRounded = "rounded-full",
-  thumbTranslateX = "translate-x-4 rtl:-translate-x-4",
-  thumbTransition = "transition",
-  thumbEase = "ease-in-out",
-  thumbDuration = "duration-200",
-  thumbClasses = "",
-  // Label
-  labelBase = "",
-  labelClasses = "",
-  // Icons
-  iconInactiveBase = "pointer-events-none",
-  iconActiveBase = "pointer-events-none",
-  // Snippets
-  children,
-  inactiveChild,
-  activeChild,
-  // ZagProps
-  ...zagProps
-} = $props();
-const [snapshot, send] = useMachine(
-  zagSwitch.machine({
-    id: useId(),
-    name,
-    onCheckedChange(details) {
-      checked = details.checked;
-    }
-  }),
-  {
-    context: {
-      ...zagProps,
-      get checked() {
-        return checked;
-      },
-      get disabled() {
-        return disabled;
-      },
-      get compact() {
-        return compact;
-      }
-    }
-  }
-);
-const api = $derived(zagSwitch.connect(snapshot, send, normalizeProps));
-if (compact) {
-  controlBase = thumbBase;
-  controlHeight = "";
-  thumbInactive = controlInactive;
-  thumbActive = controlActive;
-  thumbTranslateX = "";
-  controlPadding = "";
-}
-const rxTrackState = $derived(api.checked ? controlActive : controlInactive);
-const rxThumbState = $derived(api.checked ? `${thumbActive} ${thumbTranslateX}` : thumbInactive);
-const rxDisabled = $derived(api.disabled ? controlDisabled : "");
-const rxFocused = $derived(api.focused ? stateFocused : "");
+<script lang="ts">
+	import { normalizeProps, useMachine } from '@zag-js/svelte';
+	import * as zagSwitch from '@zag-js/switch';
+	import type { SwitchProps } from './types.js';
+
+	const {
+		compact = false,
+		// Root (Track)
+		base = 'inline-flex items-center gap-4',
+		classes = '',
+		// State
+		stateFocused = 'data-[focus-visible]:focused',
+		// Control
+		controlBase = 'cursor-pointer transition duration-200',
+		controlInactive = 'preset-filled-surface-200-800',
+		controlActive = 'preset-filled-primary-500',
+		controlDisabled = 'opacity-50 cursor-not-allowed',
+		controlWidth = 'w-10',
+		controlHeight = 'h-6',
+		controlPadding = 'p-0.5',
+		controlRounded = 'rounded-full',
+		controlHover = 'hover:brightness-90 dark:hover:brightness-110',
+		controlClasses = '',
+		// Thumb
+		thumbBase = 'right-0 aspect-square h-full flex justify-center items-center text-right cursor-pointer',
+		thumbInactive = 'preset-filled-surface-50-950',
+		thumbActive = 'bg-surface-50 text-surface-contrast-50',
+		thumbRounded = 'rounded-full',
+		thumbTranslateX = 'translate-x-4 rtl:-translate-x-4',
+		thumbTransition = 'transition',
+		thumbEase = 'ease-in-out',
+		thumbDuration = 'duration-200',
+		thumbClasses = '',
+		// Label
+		labelBase = '',
+		labelClasses = '',
+		// Icons
+		iconInactiveBase = 'pointer-events-none',
+		iconActiveBase = 'pointer-events-none',
+		// Snippets
+		children,
+		inactiveChild,
+		activeChild,
+		// ZagProps
+		...zagProps
+	}: SwitchProps = $props();
+
+	// Zag
+	const id = $props.id();
+	const service = useMachine(zagSwitch.machine, () => ({
+		id: id,
+		...zagProps
+	}));
+	const api = $derived(zagSwitch.connect(service, normalizeProps));
+
+	const rxControlBase = $derived(compact ? thumbBase : controlBase);
+	const rxControlHeight = $derived(compact ? '' : controlHeight);
+	const rxControlPadding = $derived(compact ? '' : controlPadding);
+	const rxThumbInactive = $derived(compact ? controlInactive : thumbInactive);
+	const rxThumbActive = $derived(compact ? controlActive : thumbActive);
+	const rxThumbTranslateX = $derived(compact ? '' : thumbTranslateX);
+
+	const rxTrackState = $derived(api.checked ? controlActive : controlInactive);
+	const rxThumbState = $derived(api.checked ? `${rxThumbActive} ${rxThumbTranslateX}` : rxThumbInactive);
+	const rxDisabled = $derived(api.disabled ? controlDisabled : '');
+	const rxFocused = $derived(api.focused ? stateFocused : '');
 </script>
 
 <!-- @component A control for toggling between checked states. -->
 
-<label {...api.getRootProps()} class="{base} {rxFocused} {classes}" data-testid="switch">
+<label {...api.getRootProps()} class="{base} {classes}" data-testid="switch">
 	<!-- Input -->
 	<input {...api.getHiddenInputProps()} data-testid="switch-input" />
 	<!-- Control -->
 	<span
 		{...api.getControlProps()}
-		class="{controlBase} {rxTrackState} {controlWidth} {controlHeight} {controlPadding} {controlRounded} {controlHover} {rxDisabled}  {controlClasses}"
+		class="{rxControlBase} {rxTrackState} {rxFocused} {controlWidth} {rxControlHeight} {rxControlPadding} {controlRounded} {controlHover} {rxDisabled} {controlClasses}"
 		data-testid="switch-control"
 	>
 		<!-- Thumb -->
@@ -101,17 +84,19 @@ const rxFocused = $derived(api.focused ? stateFocused : "");
 			data-testid="switch-thumb"
 		>
 			<!-- Icon: Inactive -->
-			{#if !checked && inactiveChild}
+			{#if !api.checked && inactiveChild}
 				<span class={iconInactiveBase} data-testid="switch-icon-inactive">{@render inactiveChild()}</span>
 			{/if}
 			<!-- Icon: Active -->
-			{#if checked && activeChild}
+			{#if api.checked && activeChild}
 				<span class={iconActiveBase} data-testid="switch-icon-active">{@render activeChild()}</span>
 			{/if}
 		</span>
 	</span>
 	<!-- Label -->
-	<span {...api.getLabelProps()} class="{labelBase} {labelClasses}" data-testid="switch-label">
-		{@render children?.()}
-	</span>
+	{#if children}
+		<span {...api.getLabelProps()} class="{labelBase} {labelClasses}" data-testid="switch-label">
+			{@render children()}
+		</span>
+	{/if}
 </label>

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

@@ -1,17 +1,5 @@
 import type { SwitchProps } 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;
-}
 /** A control for toggling between checked states. */
-declare const Switch: $$__sveltets_2_IsomorphicComponent<SwitchProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "disabled" | "checked" | "compact">;
-type Switch = InstanceType<typeof Switch>;
+declare const Switch: import("svelte").Component<SwitchProps, {}, "">;
+type Switch = ReturnType<typeof Switch>;
 export default Switch;

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

@@ -1,19 +1,13 @@
 import * as zagSwitch from '@zag-js/switch';
 import type { Snippet } from 'svelte';
-export interface SwitchProps extends Omit<zagSwitch.Context, 'id'> {
-    /** Set a unique name for the switch input. */
-    name: string;
-    /** Set the checked state. */
-    checked?: boolean;
-    /** Set the disabled state. */
-    disabled?: boolean;
+export interface SwitchProps extends Omit<zagSwitch.Props, 'id'> {
     /** Set the compact display mode. */
     compact?: boolean;
     /** Set base classes for the root element. */
     base?: string;
     /** Provide arbitrary classes to the root element. */
     classes?: string;
-    /** Set claseses for the focus state. */
+    /** Set classes for the focus state. */
     stateFocused?: string;
     /** Set base classes for the control element. */
     controlBase?: string;