@14ch/svelte-ui 0.0.42 → 0.0.43

package/dist/components/Pagination.svelte

@@ -4,6 +4,7 @@
 	import Icon from './Icon.svelte';
 	import { announceToScreenReader } from '../utils/accessibility';
 	import { t } from '../i18n';
+	import type { BivariantValueHandler } from '../types/callbackHandlers';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -31,7 +32,7 @@
 		showTotal?: boolean;
 
 		// イベントハンドラー
-		onchange: (pageNum: number) => void;
+		onchange?: BivariantValueHandler<number>;
 	};
 
 	let {
@@ -151,7 +152,7 @@
 	});
 </script>
 
-<div class="pagination" {id}>
+<div class="pagination" {id} data-testid="pagination">
 	{#if showCount && rangeText}
 		<div class="pagination__count">{rangeText}</div>
 	{/if}

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

@@ -1,3 +1,4 @@
+import type { BivariantValueHandler } from '../types/callbackHandlers';
 export type PaginationProps = {
     /** Total number of items. */
     total: number;
@@ -14,7 +15,7 @@ export type PaginationProps = {
     showRange?: boolean;
     /** Shows total count. @default true */
     showTotal?: boolean;
-    onchange: (pageNum: number) => void;
+    onchange?: BivariantValueHandler<number>;
 };
 declare const Pagination: import("svelte").Component<PaginationProps, {}, "">;
 type Pagination = ReturnType<typeof Pagination>;

package/dist/components/Popup.svelte

@@ -551,6 +551,7 @@
 	aria-describedby={ariaDescribedby}
 	aria-modal={undefined}
 	id={popupId}
+	data-testid="popup"
 	use:clickOutside={() => {
 		close('outside');
 	}}

package/dist/components/PopupMenu.svelte

@@ -250,6 +250,7 @@
 		aria-activedescendant={activeIndex >= 0 ? getMenuItemId(activeIndex) : undefined}
 		tabindex="-1"
 		{id}
+		data-testid="popup-menu"
 		onclick={cancelParentEvent}
 		onkeydown={handleKeyDown}
 	>

package/dist/components/PopupMenuButton.svelte

@@ -47,6 +47,9 @@
 		/** Stops click event propagation to parent elements. @default false */
 		cancelParentClick?: boolean;
 
+		// ARIA/アクセシビリティ
+		ariaLabel?: string;
+
 		// フォーカスイベント
 		onfocus?: FocusHandler;
 		onblur?: FocusHandler;
@@ -79,9 +82,6 @@
 		onpointerleave?: PointerHandler;
 		onpointermove?: PointerHandler;
 		onpointercancel?: PointerHandler;
-
-		// ARIA/アクセシビリティ
-		ariaLabel?: string;
 	};
 
 	let {
@@ -106,6 +106,9 @@
 		mobileFullscreen = true,
 		cancelParentClick = false,
 
+		// ARIA/アクセシビリティ
+		ariaLabel,
+
 		// フォーカスイベント
 		onfocus = () => {}, // No params for type inference
 		onblur = () => {}, // No params for type inference
@@ -138,9 +141,6 @@
 		onpointerleave = () => {}, // No params for type inference
 		onpointermove = () => {}, // No params for type inference
 		onpointercancel = () => {}, // No params for type inference
-
-		// ARIA/アクセシビリティ
-		ariaLabel
 	}: PopupMenuButtonProps = $props();
 
 	let anchorRef: HTMLElement | undefined = $state();

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

@@ -21,6 +21,7 @@ export type PopupMenuButtonProps = {
     mobileFullscreen?: boolean;
     /** Stops click event propagation to parent elements. @default false */
     cancelParentClick?: boolean;
+    ariaLabel?: string;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;
     onkeydown?: KeyboardHandler;
@@ -44,7 +45,6 @@ export type PopupMenuButtonProps = {
     onpointerleave?: PointerHandler;
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
-    ariaLabel?: string;
 };
 declare const PopupMenuButton: import("svelte").Component<PopupMenuButtonProps, {}, "">;
 type PopupMenuButton = ReturnType<typeof PopupMenuButton>;

package/dist/components/Radio.svelte

@@ -11,6 +11,7 @@
 		BivariantValueHandler
 	} from '../types/callbackHandlers';
 	import type { OptionValue } from '../types/options';
+	import type { ComponentSize } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -33,17 +34,19 @@
 
 		// スタイル/レイアウト
 		/** Radio button size. @default 'medium' */
-		size?: 'small' | 'medium' | 'large';
+		size?: ComponentSize;
 		customStyle?: string;
+		/** Stretches the radio to fill its container width. @default false */
+		fullWidth?: boolean;
 
 		// 状態/動作
 		/** Disables this radio button. @default false */
 		disabled?: boolean;
-		/** Stretches the radio to fill its container width. @default false */
-		fullWidth?: boolean;
 		required?: boolean;
 
 		// ARIA/アクセシビリティ
+		/** Accessible label, used when no visible label (children) is provided. */
+		ariaLabel?: string;
 		/** Disables animations for users who prefer reduced motion. @default false */
 		reducedMotion?: boolean;
 
@@ -102,13 +105,14 @@
 		// スタイル/レイアウト
 		size = 'medium',
 		customStyle = '',
+		fullWidth = false,
 
 		// 状態/動作
 		disabled = false,
-		fullWidth = false,
 		required = false,
 
 		// ARIA/アクセシビリティ
+		ariaLabel,
 		reducedMotion = false,
 
 		// フォーカスイベント
@@ -337,6 +341,7 @@
 		{value}
 		{disabled}
 		{required}
+		aria-label={ariaLabel}
 		aria-describedby={undefined}
 		onfocus={handleFocus}
 		onblur={handleBlur}

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

@@ -1,6 +1,7 @@
 import { type Snippet } from 'svelte';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
 import type { OptionValue } from '../types/options';
+import type { ComponentSize } from '../types/propOptions';
 export type RadioProps = {
     /** Label content displayed next to the radio button. */
     children?: Snippet;
@@ -12,13 +13,15 @@ export type RadioProps = {
     currentValue: OptionValue;
     id?: string;
     /** Radio button size. @default 'medium' */
-    size?: 'small' | 'medium' | 'large';
+    size?: ComponentSize;
     customStyle?: string;
-    /** Disables this radio button. @default false */
-    disabled?: boolean;
     /** Stretches the radio to fill its container width. @default false */
     fullWidth?: boolean;
+    /** Disables this radio button. @default false */
+    disabled?: boolean;
     required?: boolean;
+    /** Accessible label, used when no visible label (children) is provided. */
+    ariaLabel?: string;
     /** Disables animations for users who prefer reduced motion. @default false */
     reducedMotion?: boolean;
     onfocus?: FocusHandler;

package/dist/components/RadioGroup.svelte

@@ -5,6 +5,7 @@
 	import Radio from './Radio.svelte';
 	import { getStyleFromNumber } from '../utils/style';
 	import type { BivariantValueHandler } from '../types/callbackHandlers';
+	import type { ComponentSize } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -24,7 +25,7 @@
 		wrap?: boolean;
 		minOptionWidth?: string | number;
 		/** @default 'medium' */
-		size?: 'small' | 'medium' | 'large';
+		size?: ComponentSize;
 
 		// 状態/動作
 		disabled?: boolean;
@@ -82,6 +83,7 @@
 	style:--internal-radio-group-gap={gapStyle}
 	style:--internal-radio-group-wrap={wrap ? 'wrap' : 'none'}
 	style:--internal-radio-group-min-option-width={minOptionWidthStyle}
+	data-testid="radio-group"
 >
 	{#each options as option (option.value)}
 		<li class="radio-group__option">
@@ -104,12 +106,9 @@
 <style>
 	.radio-group {
 		display: flex;
-		flex-direction: var(
-			--internal-radio-group-flex-direction,
-			var(--svelte-ui-radio-group-flex-direction)
-		);
+		flex-direction: var(--internal-radio-group-flex-direction);
 		gap: var(--internal-radio-group-gap, var(--svelte-ui-radio-group-gap));
-		flex-wrap: var(--internal-radio-group-wrap, var(--svelte-ui-radio-group-wrap));
+		flex-wrap: var(--internal-radio-group-wrap);
 	}
 
 	.radio-group__option {

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

@@ -1,5 +1,6 @@
 import type { Option, OptionValue } from '../types/options';
 import type { BivariantValueHandler } from '../types/callbackHandlers';
+import type { ComponentSize } from '../types/propOptions';
 export type RadioGroupProps = {
     name?: string;
     /** `{ label, value, disabled? }[]` */
@@ -12,7 +13,7 @@ export type RadioGroupProps = {
     wrap?: boolean;
     minOptionWidth?: string | number;
     /** @default 'medium' */
-    size?: 'small' | 'medium' | 'large';
+    size?: ComponentSize;
     disabled?: boolean;
     required?: boolean;
     /** Disables animations for accessibility. @default false */

package/dist/components/SegmentedControl.svelte

@@ -9,8 +9,10 @@
 		KeyboardHandler,
 		MouseHandler,
 		TouchHandler,
-		PointerHandler
+		PointerHandler,
+		BivariantValueHandler
 	} from '../types/callbackHandlers';
+	import type { ComponentSize } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -28,7 +30,7 @@
 
 		// スタイル/レイアウト
 		/** @default 'medium' */
-		size?: 'small' | 'medium' | 'large';
+		size?: ComponentSize;
 		fullWidth?: boolean;
 		/** Custom CSS color value. Overrides the theme color. */
 		color?: string;
@@ -51,7 +53,7 @@
 		reducedMotion?: boolean;
 
 		// 入力イベント
-		onchange?: (value: string) => void;
+		onchange?: BivariantValueHandler<string>;
 
 		// フォーカスイベント
 		onfocus?: FocusHandler;

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

@@ -1,6 +1,7 @@
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 import type { SegmentedControlItem } from '../types/segmentedControlItem';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
+import type { ComponentSize } from '../types/propOptions';
 export type SegmentedControlProps = {
     /** `{ label, value, icon?, disabled? }[]` */
     items: SegmentedControlItem[];
@@ -9,7 +10,7 @@ export type SegmentedControlProps = {
     id?: string;
     name?: string;
     /** @default 'medium' */
-    size?: 'small' | 'medium' | 'large';
+    size?: ComponentSize;
     fullWidth?: boolean;
     /** Custom CSS color value. Overrides the theme color. */
     color?: string;
@@ -24,7 +25,7 @@ export type SegmentedControlProps = {
     ariaLabelledby?: string;
     /** Disables animations for accessibility. @default false */
     reducedMotion?: boolean;
-    onchange?: (value: string) => void;
+    onchange?: BivariantValueHandler<string>;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;
     onkeydown?: KeyboardHandler;

package/dist/components/Select.svelte

@@ -400,7 +400,6 @@ select--focus-{focusStyle}"
 		width: 32px;
 		height: 32px;
 		transform: translateY(-50%);
-		font-size: var(--svelte-ui-select-dropdown-icon-size);
 		color: var(--svelte-ui-select-dropdown-icon-color);
 		pointer-events: none;
 	}

package/dist/components/Slider.svelte

@@ -8,7 +8,8 @@
 		KeyboardHandler,
 		MouseHandler,
 		TouchHandler,
-		PointerHandler
+		PointerHandler,
+		BivariantValueHandler
 	} from '../types/callbackHandlers';
 
 	// =========================================================================
@@ -75,8 +76,8 @@
 		onpointercancel?: PointerHandler;
 
 		// 入力イベント
-		onchange?: (value: number) => void;
-		oninput?: (value: number) => void;
+		onchange?: BivariantValueHandler<number>;
+		oninput?: BivariantValueHandler<number>;
 
 		// その他
 		[key: string]: any;

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

@@ -1,4 +1,4 @@
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
 export type SliderProps = {
     /** Supports `bind:value`. */
     value: number;
@@ -42,8 +42,8 @@ export type SliderProps = {
     onpointerleave?: PointerHandler;
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
-    onchange?: (value: number) => void;
-    oninput?: (value: number) => void;
+    onchange?: BivariantValueHandler<number>;
+    oninput?: BivariantValueHandler<number>;
     [key: string]: any;
 };
 declare const Slider: import("svelte").Component<SliderProps, {}, "value">;

package/dist/components/SnackbarItem.svelte

@@ -114,7 +114,7 @@
 			const requiredMargin = -containerHeight;
 
 			snackbarRef.style.setProperty(
-				'--svelte-ui-snackbar-item-collapse-margin',
+				'--internal-snackbar-item-collapse-margin',
 				`${requiredMargin}px`
 			);
 
@@ -237,7 +237,7 @@
 		}
 		100% {
 			opacity: 0;
-			margin-bottom: var(--svelte-ui-snackbar-item-collapse-margin);
+			margin-bottom: var(--internal-snackbar-item-collapse-margin);
 		}
 	}
 
@@ -248,7 +248,7 @@
 		}
 		100% {
 			opacity: 0;
-			margin-top: var(--svelte-ui-snackbar-item-collapse-margin);
+			margin-top: var(--internal-snackbar-item-collapse-margin);
 		}
 	}
 

package/dist/components/Switch.svelte

@@ -7,8 +7,10 @@
 		KeyboardHandler,
 		MouseHandler,
 		TouchHandler,
-		PointerHandler
+		PointerHandler,
+		BivariantValueHandler
 	} from '../types/callbackHandlers';
+	import type { ComponentSize } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -25,16 +27,18 @@
 		id?: string;
 		// スタイル/レイアウト
 		/** @default 'medium' */
-		size?: 'small' | 'medium' | 'large';
+		size?: ComponentSize;
 		customStyle?: string;
+		/** Stretches the switch to fill its container width. @default false */
+		fullWidth?: boolean;
 
 		// 状態/動作
 		disabled?: boolean;
-		/** Stretches the switch to fill its container width. @default false */
-		fullWidth?: boolean;
 		required?: boolean;
 
 		// ARIA/アクセシビリティ
+		/** Accessible label, used when no visible label (children) is provided. */
+		ariaLabel?: string;
 		/** Disables animations for accessibility. @default false */
 		reducedMotion?: boolean;
 
@@ -72,7 +76,7 @@
 		onpointercancel?: PointerHandler;
 
 		// 入力イベント
-		onchange?: (value: boolean) => void;
+		onchange?: BivariantValueHandler<boolean>;
 
 		// その他
 		[key: string]: any;
@@ -91,13 +95,14 @@
 		// スタイル/レイアウト
 		size = 'medium',
 		customStyle = '',
+		fullWidth = false,
 
 		// 状態/動作
 		disabled = false,
-		fullWidth = false,
 		required = false,
 
 		// ARIA/アクセシビリティ
+		ariaLabel,
 		reducedMotion = false,
 
 		// フォーカスイベント
@@ -296,6 +301,7 @@
 		{disabled}
 		{required}
 		{id}
+		aria-label={ariaLabel}
 		onchange={handleChange}
 		onfocus={handleFocus}
 		onblur={handleBlur}

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

@@ -1,17 +1,20 @@
 import type { Snippet } from 'svelte';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
+import type { ComponentSize } from '../types/propOptions';
 export type SwitchProps = {
     children?: Snippet;
     /** Supports `bind:value`. */
     value: boolean;
     id?: string;
     /** @default 'medium' */
-    size?: 'small' | 'medium' | 'large';
+    size?: ComponentSize;
     customStyle?: string;
-    disabled?: boolean;
     /** Stretches the switch to fill its container width. @default false */
     fullWidth?: boolean;
+    disabled?: boolean;
     required?: boolean;
+    /** Accessible label, used when no visible label (children) is provided. */
+    ariaLabel?: string;
     /** Disables animations for accessibility. @default false */
     reducedMotion?: boolean;
     onfocus?: FocusHandler;
@@ -37,7 +40,7 @@ export type SwitchProps = {
     onpointerleave?: PointerHandler;
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
-    onchange?: (value: boolean) => void;
+    onchange?: BivariantValueHandler<boolean>;
     [key: string]: any;
 };
 declare const Switch: import("svelte").Component<SwitchProps, {}, "value">;

package/dist/components/Tab.svelte

@@ -82,13 +82,7 @@
 	}: TabProps = $props();
 </script>
 
-<div
-	class="tab"
-	style:--svelte-ui-nav-item-underline-text-color={textColor}
-	style:--svelte-ui-nav-item-underline-selected-text-color={selectedTextColor}
-	style:--svelte-ui-nav-item-underline-bar-color={selectedBarColor}
-	data-testid="tab"
->
+<div class="tab" data-testid="tab">
 	<Nav
 		navItems={tabItems}
 		variant="horizontal"
@@ -102,6 +96,9 @@
 		{iconGrade}
 		{iconOpticalSize}
 		{iconVariant}
+		{textColor}
+		{selectedTextColor}
+		{selectedBarColor}
 		{customContainerStyle}
 		{customItemStyle}
 		{customChildrenContainerStyle}

package/dist/components/Textarea.svelte

@@ -12,7 +12,8 @@
 		KeyboardHandler,
 		MouseHandler,
 		TouchHandler,
-		PointerHandler
+		PointerHandler,
+		BivariantValueHandler
 	} from '../types/callbackHandlers';
 	import type { FocusStyle } from '../types/propOptions';
 
@@ -71,6 +72,10 @@
 		/** Converts URLs in the value to clickable links (non-focused view). @default false */
 		linkify?: boolean;
 
+		// ARIA/アクセシビリティ
+		/** Accessible label for the textarea, used when no associated visible label exists. */
+		ariaLabel?: string;
+
 		// フォーカスイベント
 		onfocus?: FocusHandler;
 		onblur?: FocusHandler;
@@ -105,8 +110,8 @@
 		onpointercancel?: PointerHandler;
 
 		// 入力イベント
-		onchange?: (value: string) => void;
-		oninput?: (value: string) => void;
+		onchange?: BivariantValueHandler<string>;
+		oninput?: BivariantValueHandler<string>;
 
 		// その他
 		[key: string]: any;
@@ -156,6 +161,9 @@
 		required = false,
 		linkify = false,
 
+		// ARIA/アクセシビリティ
+		ariaLabel,
+
 		// フォーカスイベント
 		onfocus = () => {}, // No params for type inference
 		onblur = () => {}, // No params for type inference
@@ -547,6 +555,7 @@
 			{readonly}
 			{required}
 			{maxlength}
+			aria-label={ariaLabel}
 			{tabindex}
 			{autocomplete}
 			{wrap}

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

@@ -1,6 +1,6 @@
 import type { HTMLTextareaAttributes } from 'svelte/elements';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
 import type { FocusStyle } from '../types/propOptions';
 export type TextareaProps = {
     name?: string;
@@ -45,6 +45,8 @@ export type TextareaProps = {
     required?: boolean;
     /** Converts URLs in the value to clickable links (non-focused view). @default false */
     linkify?: boolean;
+    /** Accessible label for the textarea, used when no associated visible label exists. */
+    ariaLabel?: string;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;
     onkeydown?: KeyboardHandler;
@@ -68,8 +70,8 @@ export type TextareaProps = {
     onpointerleave?: PointerHandler;
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
-    onchange?: (value: string) => void;
-    oninput?: (value: string) => void;
+    onchange?: BivariantValueHandler<string>;
+    oninput?: BivariantValueHandler<string>;
     [key: string]: any;
 };
 declare const Textarea: import("svelte").Component<TextareaProps, {

package/dist/index.d.ts

@@ -32,6 +32,9 @@ export { default as Skeleton } from './components/skeleton/Skeleton.svelte';
 export { default as SkeletonText } from './components/skeleton/SkeletonText.svelte';
 export { default as SkeletonBox } from './components/skeleton/SkeletonBox.svelte';
 export { default as SkeletonAvatar } from './components/skeleton/SkeletonAvatar.svelte';
+export { default as SkeletonButton } from './components/skeleton/SkeletonButton.svelte';
+export { default as SkeletonHeading } from './components/skeleton/SkeletonHeading.svelte';
+export { default as SkeletonMedia } from './components/skeleton/SkeletonMedia.svelte';
 export { default as Switch } from './components/Switch.svelte';
 export { default as Nav } from './components/Nav.svelte';
 export { default as NavItem } from './components/NavItem.svelte';
@@ -80,7 +83,7 @@ export type { NavProps } from './components/Nav.svelte';
 export type { NavItemProps, NavItemSelectedVariant } from './components/NavItem.svelte';
 export type { TabProps } from './components/Tab.svelte';
 export type { TextareaProps } from './components/Textarea.svelte';
-export type { PopupPosition, SnackbarPosition, FabPosition, ButtonVariant, ButtonSize, SnackbarType, SnackbarVariant, BadgeVariant, DatepickerMode, FocusStyle, NavVariant, ChildrenVariant } from './types/propOptions';
+export type { PopupPosition, SnackbarPosition, FabPosition, ButtonVariant, ButtonSize, ComponentSize, SnackbarType, SnackbarVariant, BadgeVariant, DatepickerMode, FocusStyle, NavVariant, ChildrenVariant } from './types/propOptions';
 export type { MenuItem } from './types/menuItem';
 export type { SegmentedControlItem } from './types/segmentedControlItem';
 export type { Option, OptionValue } from './types/options';

package/dist/index.js

@@ -33,6 +33,9 @@ export { default as Skeleton } from './components/skeleton/Skeleton.svelte';
 export { default as SkeletonText } from './components/skeleton/SkeletonText.svelte';
 export { default as SkeletonBox } from './components/skeleton/SkeletonBox.svelte';
 export { default as SkeletonAvatar } from './components/skeleton/SkeletonAvatar.svelte';
+export { default as SkeletonButton } from './components/skeleton/SkeletonButton.svelte';
+export { default as SkeletonHeading } from './components/skeleton/SkeletonHeading.svelte';
+export { default as SkeletonMedia } from './components/skeleton/SkeletonMedia.svelte';
 export { default as Switch } from './components/Switch.svelte';
 export { default as Nav } from './components/Nav.svelte';
 export { default as NavItem } from './components/NavItem.svelte';

package/dist/types/propOptions.d.ts

@@ -22,11 +22,16 @@ export type FabPosition = 'left' | 'center' | 'right';
  * Used by Button, IconButton, Fab components
  */
 export type ButtonVariant = 'ghost' | 'filled' | 'outlined' | 'glass';
+/**
+ * Common component size type
+ * Used by Button, Checkbox, CheckboxGroup, Radio, RadioGroup, SegmentedControl, Switch
+ */
+export type ComponentSize = 'small' | 'medium' | 'large';
 /**
  * Button size type
- * Used by Button component
+ * Alias of ComponentSize, kept for backward compatibility
  */
-export type ButtonSize = 'small' | 'medium' | 'large';
+export type ButtonSize = ComponentSize;
 /**
  * Snackbar type
  * Used by SnackbarItem component

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@14ch/svelte-ui",
 	"description": "Modern Svelte UI components library with TypeScript support",
 	"private": false,
-	"version": "0.0.42",
+	"version": "0.0.43",
 	"type": "module",
 	"keywords": [
 		"svelte",
@@ -31,7 +31,7 @@
 			"import": "./dist/index.js",
 			"require": "./dist/index.js"
 		},
-		"./styles": "./dist/assets/styles/import.scss",
+		"./styles": "./dist/assets/styles/import.css",
 		"./styles/*": "./dist/assets/styles/*"
 	},
 	"files": [
@@ -51,7 +51,7 @@
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
-		"package": "svelte-package",
+		"package": "svelte-package && sass src/lib/assets/styles/import.scss dist/assets/styles/import.css --no-source-map",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",