@14ch/svelte-ui 0.0.15 → 0.0.17

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

@@ -13,7 +13,8 @@ export type InputProps = {
     min?: number | null;
     max?: number | null;
     step?: number | null;
-    size?: number | null;
+    decimalPlaces?: number | null;
+    enableThousandsSeparator?: boolean;
     autocomplete?: HTMLInputElement['autocomplete'] | null;
     spellcheck?: boolean | null;
     inputAttributes?: HTMLInputAttributes | undefined;
@@ -41,6 +42,8 @@ export type InputProps = {
     required?: boolean;
     clearable?: boolean;
     linkify?: boolean;
+    enablePasswordVisibilityToggle?: boolean;
+    enableNumberStepper?: boolean;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;
     onkeydown?: KeyboardHandler;
@@ -68,6 +71,18 @@ export type InputProps = {
     oninput?: BivariantValueHandler<string | number>;
     onRightIconClick?: MouseHandler;
     onLeftIconClick?: MouseHandler;
+    onRightIconMouseDown?: MouseHandler;
+    onLeftIconMouseDown?: MouseHandler;
+    onRightIconMouseUp?: MouseHandler;
+    onLeftIconMouseUp?: MouseHandler;
+    onRightIconMouseLeave?: MouseHandler;
+    onLeftIconMouseLeave?: MouseHandler;
+    onRightIconTouchStart?: TouchHandler;
+    onLeftIconTouchStart?: TouchHandler;
+    onRightIconTouchEnd?: TouchHandler;
+    onLeftIconTouchEnd?: TouchHandler;
+    onRightIconTouchCancel?: TouchHandler;
+    onLeftIconTouchCancel?: TouchHandler;
     [key: string]: any;
 };
 declare const Input: import("svelte").Component<InputProps, {

package/dist/components/Pagination.svelte

@@ -219,7 +219,7 @@
 		color: var(--svelte-ui-pagination-button-text-color);
 		transition-duration: 0s;
 	}
-	.pagination__button:before {
+	.pagination__button::before {
 		content: '';
 		display: block;
 		position: absolute;
@@ -235,7 +235,7 @@
 	}
 
 	@media (hover: hover) {
-		.pagination__button:hover:before {
+		.pagination__button:hover::before {
 			opacity: 1;
 		}
 	}
@@ -252,7 +252,7 @@
 		pointer-events: none;
 	}
 
-	.pagination__button:disabled:before {
+	.pagination__button:disabled::before {
 		opacity: 0;
 	}
 

package/dist/components/Popup.svelte

@@ -16,7 +16,7 @@
 
 	import type { Snippet } from 'svelte';
 	import { onDestroy, tick, onMount } from 'svelte';
-	import { isMobileDevice, disableBodyScroll, getViewportSize } from '../utils/mobile';
+	import { isMobileDevice, disableBodyScroll } from '../utils/mobile';
 	import { announceOpenClose } from '../utils/accessibility';
 	import { popupManager } from '../utils/popupManager';
 	import type { PopupPosition } from '../types/propOptions';
@@ -95,7 +95,6 @@
 	let popupRef: HTMLDivElement | undefined = $state();
 	let previousActiveElement: HTMLElement | null = null;
 	let isMobile: boolean = $state(false);
-	let shouldUseFullscreen: boolean = $state(false);
 	let bodyScrollCleanup: (() => void) | undefined = $state();
 
 	// =========================================================================
@@ -103,8 +102,6 @@
 	// =========================================================================
 	onMount(() => {
 		isMobile = isMobileDevice();
-		// モバイルの場合のみ fullscreen にするかどうか
-		shouldUseFullscreen = isMobile && mobileFullscreen;
 	});
 
 	onDestroy(() => {
@@ -117,6 +114,7 @@
 	// =========================================================================
 	// Effects
 	// =========================================================================
+
 	$effect(() => {
 		if (isOpen) {
 			if (popupRef && popupRef.matches(':popover-open')) {
@@ -517,6 +515,7 @@
 	// =========================================================================
 	const generatedPopupId = $state(`popup-${Math.random().toString(36).substring(2, 15)}`);
 	const popupId = $derived(id || generatedPopupId);
+	const shouldUseFullscreen = $derived(isMobile && mobileFullscreen);
 </script>
 
 <div

package/dist/components/PopupMenuButton.svelte

@@ -3,6 +3,7 @@
 <script lang="ts">
 	import IconButton from './IconButton.svelte';
 	import PopupMenu from './PopupMenu.svelte';
+	import { t } from '../i18n';
 	import type { MenuItem } from '../types/menuItem';
 	import type { SvelteComponent, Snippet } from 'svelte';
 	import type {
@@ -138,6 +139,7 @@
 	let anchorRef: HTMLElement | undefined = $state();
 	let popupMenuRef: SvelteComponent | undefined = $state();
 	let buttonId: string = $state(`menu-button-${Math.random().toString(36).substring(2, 15)}`);
+	const resolvedMenuId = $derived(`${id ?? buttonId}-menu`);
 
 	// =========================================================================
 	// Methods
@@ -289,7 +291,7 @@
 
 <div class="button-block" bind:this={anchorRef} {id}>
 	<IconButton
-		{ariaLabel}
+		ariaLabel={ariaLabel ?? t('popupMenuButton.openMenu')}
 		{disabled}
 		{variant}
 		{size}
@@ -297,7 +299,7 @@
 		{rounded}
 		aria-haspopup="menu"
 		aria-expanded={popupMenuRef?.isOpen ? 'true' : 'false'}
-		aria-controls={popupMenuRef ? `${id}-menu-popup` : undefined}
+		aria-controls={popupMenuRef ? `${resolvedMenuId}-popup` : undefined}
 		onclick={handleClick}
 		onfocus={handleFocus}
 		onblur={handleBlur}
@@ -335,10 +337,10 @@
 	bind:this={popupMenuRef}
 	{menuItems}
 	anchorElement={anchorRef}
-	{ariaLabel}
+	ariaLabel={ariaLabel ?? t('popupMenuButton.openMenu')}
 	{position}
 	{mobileFullscreen}
-	id={id ? `${id}-menu` : undefined}
+	id={resolvedMenuId}
 />
 
 <style>.button-block {

package/dist/components/Radio.svelte

@@ -451,12 +451,13 @@
 	/* =============================================
    * Status
    * ============================================= */
-	.radio--disabled input[type='radio'] {
-		cursor: not-allowed;
+	.radio--disabled {
+		opacity: var(--svelte-ui-button-disabled-opacity);
 	}
 
+	.radio--disabled input[type='radio'],
+	.radio--disabled .radio__icon,
 	.radio--disabled .radio__label {
-		opacity: var(--svelte-ui-button-disabled-opacity);
 		cursor: not-allowed;
 	}
 
@@ -538,15 +539,15 @@
 
 	/* Mobile touch targets */
 	@media (hover: none) and (pointer: coarse) {
-		.radio__label {
+		.radio {
 			min-height: var(--svelte-ui-touch-target);
 		}
 
-		.radio--small .radio__label {
+		.radio--small {
 			min-height: var(--svelte-ui-touch-target-sm);
 		}
 
-		.radio--large .radio__label {
+		.radio--large {
 			min-height: var(--svelte-ui-touch-target-lg);
 		}
 	}

package/dist/components/SegmentedControl.svelte

@@ -507,7 +507,11 @@
 
 .segmented-control--disabled {
   opacity: var(--svelte-ui-button-disabled-opacity);
-  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.segmented-control--disabled .segmented-control__label {
+  cursor: not-allowed;
 }
 
 .segmented-control__item {

package/dist/components/Select.svelte

@@ -2,6 +2,7 @@
 
 <script lang="ts">
 	import Icon from './Icon.svelte';
+	import { t } from '../i18n';
 	import type { HTMLSelectAttributes } from 'svelte/elements';
 	import type {
 		FocusHandler,
@@ -24,6 +25,7 @@
 
 		// HTML属性系
 		id?: string | null;
+		ariaLabel?: string;
 		tabindex?: number | null;
 		placeholder?: string;
 		selectAttributes?: HTMLSelectAttributes | undefined;
@@ -88,6 +90,7 @@
 
 		// HTML属性系
 		id = `select-${Math.random().toString(36).substring(2, 15)}`,
+		ariaLabel,
 		tabindex = null,
 		placeholder = '',
 		selectAttributes,
@@ -294,6 +297,7 @@ select--focus-{focusStyle}"
 		bind:this={selectRef}
 		{id}
 		{name}
+		aria-label={ariaLabel ?? t('select.accessibleName')}
 		bind:value
 		{disabled}
 		{required}
@@ -431,16 +435,15 @@ select--focus-{focusStyle}"
  * ============================================= */
 	.select--disabled {
 		opacity: var(--svelte-ui-input-disabled-opacity);
-		pointer-events: none;
+		cursor: not-allowed;
+	}
 
-		.select__dropdown-icon {
-			opacity: var(--svelte-ui-button-disabled-opacity);
-		}
+	.select--disabled select {
+		cursor: not-allowed;
 	}
 
 	select:disabled {
-		opacity: var(--svelte-ui-button-disabled-opacity);
-		cursor: not-allowed;
+		opacity: 1;
 	}
 
 	/* =============================================

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

@@ -6,6 +6,7 @@ export type SelectProps = {
     value: string | number | null | undefined;
     options: Option[];
     id?: string | null;
+    ariaLabel?: string;
     tabindex?: number | null;
     placeholder?: string;
     selectAttributes?: HTMLSelectAttributes | undefined;

package/dist/components/Slider.svelte

@@ -3,6 +3,7 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { getStyleFromNumber } from '../utils/style';
+	import { t } from '../i18n';
 	import type {
 		FocusHandler,
 		KeyboardHandler,
@@ -21,6 +22,7 @@
 		id?: string;
 
 		// HTML属性系
+		ariaLabel?: string;
 		min?: number;
 		max?: number;
 		step?: number;
@@ -85,6 +87,7 @@
 		id = `slider-${Math.random().toString(36).substring(2, 15)}`,
 
 		// HTML属性系
+		ariaLabel,
 		min = 0,
 		max = 100,
 		step = 1,
@@ -317,6 +320,7 @@
 	<input
 		{id}
 		{name}
+		aria-label={ariaLabel ?? t('slider.accessibleName')}
 		bind:this={ref}
 		bind:value
 		type="range"
@@ -444,7 +448,7 @@
 	 * ============================================= */
 	.slider--disabled {
 		opacity: var(--svelte-ui-input-disabled-opacity);
-		pointer-events: none;
+		cursor: not-allowed;
 	}
 
 	.slider--disabled .slider__input {

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

@@ -4,6 +4,7 @@ export type SliderProps = {
     value: number;
     name?: string;
     id?: string;
+    ariaLabel?: string;
     min?: number;
     max?: number;
     step?: number;

package/dist/components/Snackbar.svelte

@@ -1,7 +1,6 @@
 <!-- Snackbar.svelte -->
 
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import { snackbarManager, type SnackbarItem as SnackbarData } from '../utils/snackbar.svelte';
 	import SnackbarItem from './SnackbarItem.svelte';
 	import type { SnackbarPosition, SnackbarVariant } from '../types/propOptions';
@@ -30,10 +29,10 @@
 	}: SnackbarProps = $props();
 
 	// =========================================================================
-	// Lifecycle
+	// $effect
 	// =========================================================================
 
-	onMount(() => {
+	$effect(() => {
 		snackbarManager.setDefaults({
 			position,
 			maxVisible,
@@ -64,7 +63,7 @@
 			id={item.id}
 			variant={item.variant}
 			position={item.position}
-			iconVariant="outlined"
+			iconVariant={item.iconVariant ?? 'outlined'}
 			color={item.color}
 			textColor={item.textColor}
 			duration={item.duration}

package/dist/components/SnackbarItem.svelte

@@ -166,7 +166,7 @@
 			</div>
 		{/if}
 
-		<div class="snackbar__content">
+		<div class="snackbar-item__body">
 			{#if children}
 				{@render children()}
 			{:else}
@@ -176,8 +176,10 @@
 
 		{#if actionLabel && onAction}
 			<Button
-				variant="outlined"
-				color="var(--svelte-ui-text-on-filled-color)"
+				variant={variant === 'filled' ? 'outlined' : 'filled'}
+				color={variant === 'filled'
+					? 'var(--svelte-ui-text-on-filled-color)'
+					: `var(--svelte-ui-snackbar-${type}-filled-bg)`}
 				onclick={handleAction}
 				aria-label="{actionLabel} - {message}"
 			>
@@ -280,6 +282,8 @@
 
 		border-radius: var(--svelte-ui-snackbar-border-radius);
 		box-shadow: var(--svelte-ui-snackbar-shadow);
+		backdrop-filter: var(--svelte-ui-snackbar-backdrop-filter);
+		-webkit-backdrop-filter: var(--svelte-ui-snackbar-backdrop-filter);
 
 		font-size: var(--svelte-ui-snackbar-font-size);
 		line-height: var(--svelte-ui-snackbar-line-height);
@@ -308,12 +312,13 @@
 		flex-shrink: 0;
 	}
 
-	.snackbar-item__text {
+	.snackbar-item__body {
 		flex: 1;
 		min-width: 0;
 	}
 
 	.snackbar-item__message {
+		flex-grow: 1;
 		word-break: break-word;
 	}
 

package/dist/components/Switch.svelte

@@ -340,6 +340,10 @@
   contain: layout;
 }
 
+.switch--disabled {
+  cursor: not-allowed;
+}
+
 .switch-input {
   position: absolute;
   opacity: 0;
@@ -383,6 +387,7 @@
 }
 .switch--disabled .switch__track {
   opacity: var(--svelte-ui-switch-disabled-opacity);
+  cursor: not-allowed;
 }
 
 .switch-thumb {
@@ -398,9 +403,6 @@
 .switch--checked .switch-thumb {
   transform: translateX(calc(var(--switch-width) - var(--switch-thumb-size) - var(--switch-thumb-margin) * 2));
 }
-.switch--disabled .switch-thumb {
-  opacity: var(--svelte-ui-switch-disabled-opacity);
-}
 
 /* =========================================================================
  * Size Variants
@@ -445,13 +447,13 @@
  * ========================================================================= */
 /* Mobile touch targets */
 @media (hover: none) and (pointer: coarse) {
-  .switch__label {
+  .switch {
     min-height: var(--svelte-ui-touch-target);
   }
-  .switch--small .switch__label {
+  .switch--small {
     min-height: var(--svelte-ui-touch-target-sm);
   }
-  .switch--large .switch__label {
+  .switch--large {
     min-height: var(--svelte-ui-touch-target-lg);
   }
 }

package/dist/components/Tab.svelte

@@ -32,10 +32,10 @@
 		customPathMatcher,
 		currentPath,
 
-		// スタイル/レイアウト
-		textColor = 'var(--svelte-ui-text-subtle-color)',
-		selectedTextColor = 'var(--svelte-ui-primary-color)',
-		selectedBarColor = 'var(--svelte-ui-primary-color)',
+		// スタイル/レイアウト（未指定時は TabItem が variables の tab 用変数を直接参照）
+		textColor,
+		selectedTextColor,
+		selectedBarColor,
 
 		// ARIA/アクセシビリティ
 		ariaLabel = 'Tabs',
@@ -60,6 +60,11 @@
 		return '';
 	};
 
+	// currentPath が渡されたときやマウント時に選択状態を反映
+	$effect(() => {
+		resolvedCurrentPath = getCurrentPath();
+	});
+
 	afterNavigate(() => {
 		resolvedCurrentPath = getCurrentPath();
 	});
@@ -104,40 +109,49 @@
 		return normalizedCurrentPath !== '' && normalizedCurrentPath.startsWith(itemHref);
 	};
 
-	// シンプルなキーボードナビゲーション
+	// 有効なタブのインデックス一覧（disabled を除く）
+	const enabledIndices = $derived(
+		tabItems.map((item, i) => (item.disabled ? -1 : i)).filter((i) => i >= 0)
+	);
+
+	// シンプルなキーボードナビゲーション（disabled タブはスキップ）
 	const handleKeyDown = (event: KeyboardEvent) => {
-		if (tabItems.length === 0) return;
+		if (tabItems.length === 0 || enabledIndices.length === 0) return;
 
 		const tabList = event.currentTarget as HTMLElement;
-		const tabs = Array.from(tabList.querySelectorAll('a[role="tab"]')) as HTMLElement[];
+		const tabs = Array.from(tabList.querySelectorAll('[role="tab"]')) as HTMLElement[];
 		const currentTab = event.target as HTMLElement;
 		const currentIndex = tabs.indexOf(currentTab);
 
 		if (currentIndex === -1) return;
 
-		let nextIndex = currentIndex;
+		const currentEnabledPosition = enabledIndices.indexOf(currentIndex);
+		let nextEnabledPosition = currentEnabledPosition;
 
 		switch (event.key) {
 			case 'ArrowLeft':
 				event.preventDefault();
-				nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+				nextEnabledPosition =
+					currentEnabledPosition > 0 ? currentEnabledPosition - 1 : enabledIndices.length - 1;
 				break;
 			case 'ArrowRight':
 				event.preventDefault();
-				nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+				nextEnabledPosition =
+					currentEnabledPosition < enabledIndices.length - 1 ? currentEnabledPosition + 1 : 0;
 				break;
 			case 'Home':
 				event.preventDefault();
-				nextIndex = 0;
+				nextEnabledPosition = 0;
 				break;
 			case 'End':
 				event.preventDefault();
-				nextIndex = tabs.length - 1;
+				nextEnabledPosition = enabledIndices.length - 1;
 				break;
 			default:
 				return;
 		}
 
+		const nextIndex = enabledIndices[nextEnabledPosition];
 		tabs[nextIndex]?.focus();
 	};
 
@@ -173,6 +187,7 @@
 			{tabItem}
 			{pathPrefix}
 			isSelected={index === selectedTabIndex}
+			isDisabled={tabItem.disabled ?? false}
 			{textColor}
 			{selectedTextColor}
 			{selectedBarColor}
@@ -186,7 +201,7 @@
   position: relative;
   width: 100%;
   height: 100%;
-  min-height: 36px;
+  min-height: var(--svelte-ui-tab-min-height);
   overflow-x: auto;
   overflow-y: visible;
   -ms-overflow-style: none;