@14ch/svelte-ui 0.0.36 → 0.0.38

package/dist/assets/styles/variables.scss

@@ -498,6 +498,9 @@
 	--svelte-ui-switch-thumb-size-lg: calc(
 		var(--svelte-ui-switch-height-lg) - var(--svelte-ui-switch-thumb-margin) * 2
 	);
+	--svelte-ui-switch-min-height: 1.8em;
+	--svelte-ui-switch-min-height-sm: 1.6em;
+	--svelte-ui-switch-min-height-lg: 2.2em;
 	--svelte-ui-switch-gap: 8px;
 	--svelte-ui-switch-line-height: 1.2em;
 	--svelte-ui-switch-disabled-opacity: var(--svelte-ui-disabled-opacity);
@@ -629,6 +632,7 @@
 	--svelte-ui-datepicker-selected-text-color: var(--svelte-ui-text-on-filled-color);
 
 	/* Popup */
+	--svelte-ui-popup-border-radius: var(--svelte-ui-border-radius);
 	--svelte-ui-popup-mobile-margin: 16px;
 	--svelte-ui-popup-mobile-border-radius: 12px;
 	--svelte-ui-popup-focus-color: var(--svelte-ui-primary-color);

package/dist/components/Checkbox.svelte

@@ -28,13 +28,17 @@
 
 		// HTML属性系
 		id?: string;
+
 		// スタイル/レイアウト
 		/** Checkbox size. @default 'medium' */
 		size?: 'small' | 'medium' | 'large';
+		customStyle?: string;
 
 		// 状態/動作
 		/** Disables the checkbox. @default false */
 		disabled?: boolean;
+		/** Stretches the checkbox to fill its container width. @default false */
+		fullWidth?: boolean;
 		required?: boolean;
 
 		// ARIA/アクセシビリティ
@@ -95,9 +99,11 @@
 
 		// スタイル/レイアウト
 		size = 'medium',
+		customStyle = '',
 
 		// 状態/動作
 		disabled = false,
+		fullWidth = false,
 		required = false,
 
 		// ARIA/アクセシビリティ
@@ -281,6 +287,7 @@
 			'checkbox',
 			`checkbox--${size}`,
 			disabled && 'checkbox--disabled',
+			fullWidth && 'checkbox--full-width',
 			reducedMotion && 'checkbox--no-motion'
 		]
 			.filter(Boolean)
@@ -288,7 +295,7 @@
 	);
 </script>
 
-<div class={containerClasses} data-testid="checkbox">
+<label class={containerClasses} style={customStyle} data-testid="checkbox">
 	<input
 		type="checkbox"
 		bind:checked={value}
@@ -326,14 +333,14 @@
 		onchange={handleChange}
 		{...restProps}
 	/>
-	<label for={id} class="checkbox__icon"></label>
+	<span class="checkbox__icon"></span>
 
 	{#if children}
-		<label for={id} class="checkbox__label">
+		<span class="checkbox__label">
 			{@render children()}
-		</label>
+		</span>
 	{/if}
-</div>
+</label>
 
 <style>
 	/* =========================================================================
@@ -342,11 +349,12 @@
 
 	.checkbox {
 		display: inline-flex;
-		align-items: center;
+		align-items: flex-start;
 		width: fit-content;
 		min-height: var(--svelte-ui-checkbox-min-height);
 		vertical-align: top;
 		contain: layout;
+		cursor: pointer;
 	}
 
 	.checkbox input[type='checkbox'] {
@@ -355,20 +363,18 @@
 		height: 16px;
 		margin: 0;
 		opacity: 0;
-		cursor: pointer;
 	}
 
 	/* Label */
 	.checkbox__label {
 		display: block;
 		padding-left: var(--svelte-ui-checkbox-gap);
-		white-space: nowrap;
 		font-size: inherit;
 		color: inherit;
 		line-height: var(--svelte-ui-checkbox-line-height);
-		cursor: pointer;
 		text-box-trim: trim-both;
 		text-box-edge: cap alphabetic;
+		margin-block: calc((var(--svelte-ui-checkbox-min-height) - 1cap) / 2);
 	}
 
 	/* Checkbox box */
@@ -382,7 +388,7 @@
 		transition-property: background-color, border-color, opacity;
 		transition-duration: var(--svelte-ui-transition-duration);
 		flex-shrink: 0;
-		cursor: pointer;
+		margin-block: calc((var(--svelte-ui-checkbox-min-height) - var(--svelte-ui-checkbox-size)) / 2);
 	}
 
 	/* Check mark */
@@ -420,13 +426,19 @@
 	   ========================================================================= */
 
 	/* Disabled state */
+	.checkbox--full-width {
+		width: 100%;
+	}
+
+	.checkbox--full-width .checkbox__label {
+		flex: 1;
+	}
+
 	.checkbox--disabled {
 		opacity: var(--svelte-ui-button-disabled-opacity);
 	}
 
-	.checkbox--disabled input[type='checkbox'],
-	.checkbox--disabled .checkbox__icon,
-	.checkbox--disabled .checkbox__label {
+	.checkbox--disabled {
 		cursor: not-allowed;
 	}
 
@@ -480,12 +492,19 @@
 	.checkbox--small .checkbox__icon {
 		width: var(--svelte-ui-checkbox-size-sm);
 		height: var(--svelte-ui-checkbox-size-sm);
+		margin-block: calc(
+			(var(--svelte-ui-checkbox-min-height-sm) - var(--svelte-ui-checkbox-size-sm)) / 2
+		);
 	}
 
 	.checkbox--small .checkbox__icon::after {
 		font-size: var(--svelte-ui-checkbox-icon-size-sm);
 	}
 
+	.checkbox--small .checkbox__label {
+		margin-block: calc((var(--svelte-ui-checkbox-min-height-sm) - 1cap) / 2);
+	}
+
 	.checkbox--large {
 		font-size: inherit;
 	}
@@ -493,12 +512,19 @@
 	.checkbox--large .checkbox__icon {
 		width: var(--svelte-ui-checkbox-size-lg);
 		height: var(--svelte-ui-checkbox-size-lg);
+		margin-block: calc(
+			(var(--svelte-ui-checkbox-min-height-lg) - var(--svelte-ui-checkbox-size-lg)) / 2
+		);
 	}
 
 	.checkbox--large .checkbox__icon::after {
 		font-size: var(--svelte-ui-checkbox-icon-size-lg);
 	}
 
+	.checkbox--large .checkbox__label {
+		margin-block: calc((var(--svelte-ui-checkbox-min-height-lg) - 1cap) / 2);
+	}
+
 	/* =========================================================================
 	 * Motion & Media Queries
 	 * ========================================================================= */

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

@@ -12,8 +12,11 @@ export type CheckboxProps = {
     id?: string;
     /** Checkbox size. @default 'medium' */
     size?: 'small' | 'medium' | 'large';
+    customStyle?: string;
     /** Disables the checkbox. @default false */
     disabled?: boolean;
+    /** Stretches the checkbox to fill its container width. @default false */
+    fullWidth?: boolean;
     required?: boolean;
     /** Disables animations for users who prefer reduced motion. @default false */
     reducedMotion?: boolean;

package/dist/components/Combobox.svelte

@@ -163,7 +163,7 @@
 		...restProps
 	}: ComboboxProps = $props();
 
-	let inputValue = $state('');
+	let inputValue = $state(value != null ? String(value) : '');
 	let inputRef = $state<any>();
 	let listElement = $state<HTMLDivElement>();
 	let comboboxElement = $state<HTMLDivElement>();
@@ -173,6 +173,15 @@
 	let isFocused = $state(false);
 	let isKeyboardNavigation = $state(false);
 
+	// =========================================================================
+	// Effects
+	// =========================================================================
+	$effect(() => {
+		if (!isFocused) {
+			inputValue = value != null ? String(value) : '';
+		}
+	});
+
 	// =========================================================================
 	// Methods
 	// =========================================================================
@@ -447,7 +456,7 @@
 		{readonly}
 		{required}
 		{clearable}
-		rightIcon={inline ? undefined : 'arrow_drop_down'}
+		rightIcon="arrow_drop_down"
 		{tabindex}
 		{maxlength}
 		{rounded}
@@ -553,7 +562,6 @@
 		width: max-content;
 		max-width: var(--svelte-ui-combobox-max-width);
 		background: var(--svelte-ui-combobox-bg);
-		border-radius: var(--svelte-ui-combobox-border-radius);
 		max-height: var(--svelte-ui-combobox-options-max-height);
 		overflow-y: auto;
 		margin: 0;

package/dist/components/Input.svelte

@@ -919,15 +919,20 @@
 		color: inherit;
 		line-height: inherit;
 		text-align: inherit;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
 		opacity: 1;
 		transition: none;
 	}
 
 	.input__display-text-content {
 		width: 100%;
+		overflow: hidden;
+		white-space: nowrap;
+	}
+
+	.input__link-text-content {
+		width: 100%;
+		overflow: hidden;
+		white-space: nowrap;
 	}
 
 	.input__link-text {
@@ -1199,6 +1204,10 @@
 			.input__link-text {
 				padding-right: var(--svelte-ui-input-icon-space-inline);
 			}
+
+			.input__icon-right {
+				right: 0;
+			}
 		}
 
 		&.input--clearable {

package/dist/components/MultiSelect.svelte

@@ -0,0 +1,379 @@
+<!-- MultiSelect.svelte -->
+
+<script lang="ts">
+	import Popup from './Popup.svelte';
+	import Checkbox from './Checkbox.svelte';
+	import Icon from './Icon.svelte';
+	import { t } from '../i18n';
+	import type { Option, OptionValue } from '../types/options';
+	import type { BivariantValueHandler, FocusHandler } from '../types/callbackHandlers';
+	import type { PopupPosition } from '../types/propOptions';
+
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+	export type MultiSelectProps = {
+		// 基本プロパティ
+		name?: string;
+		/** Selected values array. Supports `bind:values`. */
+		values: OptionValue[];
+		/** `{ label, value, disabled? }[]` */
+		options: Option[];
+
+		// HTML属性系
+		id?: string | null;
+		ariaLabel?: string;
+		tabindex?: number | null;
+		placeholder?: string;
+
+		// スタイル/レイアウト
+		/** Renders inline. @default false */
+		inline?: boolean;
+		/** @default 'outline' */
+		focusStyle?: 'background' | 'outline' | 'none';
+		fullWidth?: boolean;
+		rounded?: boolean;
+
+		// 状態/動作
+		disabled?: boolean;
+		required?: boolean;
+
+		// ポップアップ
+		/** @default 'bottom-left' */
+		position?: PopupPosition;
+
+		// イベントハンドラ
+		onfocus?: FocusHandler;
+		onblur?: FocusHandler;
+		onchange?: BivariantValueHandler<OptionValue[]>;
+	};
+
+	let {
+		name,
+		values = $bindable([]),
+		options = [],
+
+		id = `multi-select-${Math.random().toString(36).substring(2, 15)}`,
+		ariaLabel,
+		tabindex = null,
+		placeholder = '',
+
+		inline = false,
+		focusStyle = 'outline',
+		fullWidth = false,
+		rounded = false,
+
+		disabled = false,
+		required = false,
+
+		position = 'bottom-left',
+
+		onfocus = () => {},
+		onblur = () => {},
+		onchange = () => {}
+	}: MultiSelectProps = $props();
+
+	let popupRef = $state<any>();
+	let triggerEl = $state<HTMLButtonElement>();
+	let isPopupOpen = $state(false);
+	let triggerWidth = $state(0);
+	let isFocused = $state(false);
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+	const listboxId = $derived(`${id}-listbox`);
+
+	const selectedLabels = $derived(
+		options.filter((o) => values.includes(o.value)).map((o) => o.label)
+	);
+
+	// =========================================================================
+	// Methods
+	// =========================================================================
+	const toggleOption = (optionValue: OptionValue) => {
+		if (values.includes(optionValue)) {
+			values = values.filter((v) => v !== optionValue);
+		} else {
+			values = [...values, optionValue];
+		}
+		onchange(values);
+	};
+
+	const handleTriggerClick = () => {
+		if (disabled) return;
+		popupRef?.toggle();
+	};
+
+	const handleTriggerKeydown = (event: KeyboardEvent) => {
+		if (disabled) return;
+		if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+			event.preventDefault();
+			popupRef?.open();
+		}
+	};
+
+	const handleFocus = (event: FocusEvent) => {
+		if (disabled) return;
+		isFocused = true;
+		onfocus(event);
+	};
+
+	const handleBlur = (event: FocusEvent) => {
+		if (disabled) return;
+		isFocused = false;
+		onblur(event);
+	};
+
+	const handlePopupOpen = () => {
+		triggerWidth = triggerEl?.offsetWidth ?? 0;
+	};
+
+	const handlePopupClose = () => {
+		triggerEl?.focus();
+	};
+</script>
+
+<div
+	class="multi-select multi-select--focus-{focusStyle}"
+	class:multi-select--inline={inline}
+	class:multi-select--full-width={fullWidth}
+	class:multi-select--disabled={disabled}
+	class:multi-select--focused={isFocused}
+	class:multi-select--rounded={rounded}
+	data-testid="multi-select"
+>
+	<button
+		bind:this={triggerEl}
+		{id}
+		type="button"
+		class="multi-select__trigger"
+		role="combobox"
+		aria-expanded={isPopupOpen}
+		aria-haspopup="listbox"
+		aria-controls={isPopupOpen ? listboxId : undefined}
+		aria-label={ariaLabel ?? t('multiSelect.accessibleName')}
+		aria-required={required ? 'true' : undefined}
+		{tabindex}
+		{disabled}
+		onfocus={handleFocus}
+		onblur={handleBlur}
+		onclick={handleTriggerClick}
+		onkeydown={handleTriggerKeydown}
+	>
+		{#if selectedLabels.length > 0}
+			<span class="multi-select__display-text">
+				{#each selectedLabels as label, i}
+					<span>{label}{#if i < selectedLabels.length - 1},{/if}</span>
+				{/each}
+			</span>
+		{:else if placeholder}
+			<span class="multi-select__placeholder">{placeholder}</span>
+		{/if}
+	</button>
+	<div class="multi-select__dropdown-icon" aria-hidden="true">
+		<Icon>arrow_drop_down</Icon>
+	</div>
+
+	<Popup
+		bind:this={popupRef}
+		bind:isOpen={isPopupOpen}
+		anchorElement={triggerEl}
+		{position}
+		mobileFullscreen={true}
+		onOpen={handlePopupOpen}
+		onClose={handlePopupClose}
+		margin={4}
+	>
+		<ul
+			id={listboxId}
+			class="multi-select__options"
+			role="listbox"
+			aria-multiselectable="true"
+			aria-label={ariaLabel ?? t('multiSelect.accessibleName')}
+			style:min-width="{triggerWidth}px"
+		>
+			{#each options as option, i (option.value)}
+				<li role="presentation" class="multi-select__item">
+					<Checkbox
+						value={values.includes(option.value)}
+						disabled={option.disabled}
+						fullWidth
+						customStyle="padding: 8px 12px"
+						onchange={() => toggleOption(option.value)}
+					>
+						{option.label}
+					</Checkbox>
+				</li>
+			{/each}
+		</ul>
+	</Popup>
+</div>
+
+<style>@charset "UTF-8";
+/* =============================================
+ * 基本構造・レイアウト
+ * ============================================= */
+.multi-select {
+  display: inline-block;
+  position: relative;
+  width: auto;
+  max-width: 100%;
+  vertical-align: top;
+}
+
+/* =============================================
+ * トリガーボタン
+ * ============================================= */
+.multi-select__trigger {
+  width: 100%;
+  min-height: var(--svelte-ui-select-height);
+  padding: var(--svelte-ui-select-padding);
+  padding-right: var(--svelte-ui-select-icon-space);
+  background: transparent;
+  border: none;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+  line-height: inherit;
+  text-align: left;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+.multi-select__trigger:focus, .multi-select__trigger:focus-visible {
+  outline: var(--svelte-ui-focus-outline-inner);
+  outline-offset: var(--svelte-ui-focus-outline-offset-inner);
+}
+
+.multi-select__display-text {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0 0.5em;
+  flex: 1;
+}
+
+.multi-select__placeholder {
+  color: var(--svelte-ui-select-placeholder-color);
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.multi-select__dropdown-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 50%;
+  right: 4px;
+  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;
+}
+
+/* =============================================
+ * レイアウトバリエーション
+ * ============================================= */
+.multi-select--full-width {
+  width: 100%;
+}
+
+/* =============================================
+ * フォーカス効果バリエーション
+ * ============================================= */
+.multi-select--focus-outline .multi-select__trigger:focus {
+  outline: var(--svelte-ui-focus-outline-inner);
+  outline-offset: var(--svelte-ui-focus-outline-offset-inner);
+}
+
+.multi-select--focus-background .multi-select__trigger:focus {
+  background: var(--svelte-ui-hover-overlay);
+}
+
+/* =============================================
+ * 状態管理
+ * ============================================= */
+.multi-select--disabled {
+  opacity: var(--svelte-ui-input-disabled-opacity);
+  cursor: not-allowed;
+}
+.multi-select--disabled .multi-select__trigger {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* =============================================
+ * デザインバリアント：default
+ * ============================================= */
+.multi-select:not(.multi-select--inline) .multi-select__trigger {
+  min-height: var(--svelte-ui-select-height);
+  background-color: var(--svelte-ui-select-bg);
+  box-shadow: 0 0 0 var(--svelte-ui-border-width) inset var(--svelte-ui-select-border-color);
+  border: none;
+  border-radius: var(--svelte-ui-select-border-radius);
+  font-size: 1rem;
+}
+
+/* =============================================
+ * デザインバリアント：inline
+ * ============================================= */
+.multi-select.multi-select--inline .multi-select__trigger {
+  padding: inherit;
+  padding-right: var(--svelte-ui-input-icon-space-inline);
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  color: inherit;
+  min-height: auto;
+  line-height: inherit;
+}
+.multi-select.multi-select--inline .multi-select__dropdown-icon {
+  right: 0;
+}
+
+/* =============================================
+ * デザインバリアント：rounded
+ * ============================================= */
+.multi-select--rounded:not(.multi-select--inline) .multi-select__trigger {
+  border-radius: var(--svelte-ui-select-border-radius-rounded);
+}
+
+/* =============================================
+ * オプションリスト（ポップアップ内）
+ * ============================================= */
+.multi-select__options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  min-width: 160px;
+  max-height: var(--svelte-ui-combobox-options-max-height);
+  overflow-y: auto;
+}
+
+.multi-select__item {
+  position: relative;
+  padding: 0;
+  margin: 0;
+}
+@media (hover: hover) {
+  .multi-select__item:hover :global(.checkbox:not(.checkbox--disabled)) {
+    background-color: var(--svelte-ui-hover-overlay);
+  }
+}
+
+.multi-select__option-cover {
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+}
+.multi-select__option-cover--disabled {
+  cursor: not-allowed;
+}</style>

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

@@ -0,0 +1,30 @@
+import type { Option, OptionValue } from '../types/options';
+import type { BivariantValueHandler, FocusHandler } from '../types/callbackHandlers';
+import type { PopupPosition } from '../types/propOptions';
+export type MultiSelectProps = {
+    name?: string;
+    /** Selected values array. Supports `bind:values`. */
+    values: OptionValue[];
+    /** `{ label, value, disabled? }[]` */
+    options: Option[];
+    id?: string | null;
+    ariaLabel?: string;
+    tabindex?: number | null;
+    placeholder?: string;
+    /** Renders inline. @default false */
+    inline?: boolean;
+    /** @default 'outline' */
+    focusStyle?: 'background' | 'outline' | 'none';
+    fullWidth?: boolean;
+    rounded?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    /** @default 'bottom-left' */
+    position?: PopupPosition;
+    onfocus?: FocusHandler;
+    onblur?: FocusHandler;
+    onchange?: BivariantValueHandler<OptionValue[]>;
+};
+declare const MultiSelect: import("svelte").Component<MultiSelectProps, {}, "values">;
+type MultiSelect = ReturnType<typeof MultiSelect>;
+export default MultiSelect;

package/dist/components/Popup.svelte

@@ -553,9 +553,10 @@
 <style>@charset "UTF-8";
 :popover-open {
   border: solid 1px var(--svelte-ui-border-weak-color);
-  border-radius: 4px;
+  border-radius: var(--svelte-ui-popup-border-radius);
   box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
   background: var(--svelte-ui-surface-color);
+  color: var(--svelte-ui-text-color);
   z-index: 1000; /* Popupを最前面に表示 */
 }