@14ch/svelte-ui 0.0.16 → 0.0.17

package/dist/components/Datepicker.svelte

@@ -36,7 +36,7 @@
 		// 基本プロパティ
 		value: Date | { start: Date; end: Date } | undefined;
 		format?: string;
-		nullString?: string;
+		placeholder?: string;
 		locale?: 'en' | 'ja' | 'fr' | 'de' | 'es' | 'zh-cn';
 		rangeSeparator?: string;
 
@@ -48,6 +48,9 @@
 		inline?: boolean;
 		focusStyle?: FocusStyle;
 		fullWidth?: boolean;
+		width?: string | number | null;
+		minWidth?: string | number | null;
+		maxWidth?: string | number | null;
 		rounded?: boolean;
 
 		// アイコン関連
@@ -60,10 +63,9 @@
 
 		// 状態/動作
 		disabled?: boolean;
+		readonly?: boolean;
 		mode?: DatepickerMode;
-		/** テキスト入力を有効にするか */
 		enableTextInput?: boolean;
-		/** クリック時にポップアップを開くかどうかを有効にするか */
 		enableClickToOpen?: boolean;
 		minDate?: Date;
 		maxDate?: Date;
@@ -105,7 +107,7 @@
 		// 基本プロパティ
 		value = $bindable(),
 		format,
-		nullString = '',
+		placeholder = '',
 		locale,
 		rangeSeparator = ' - ',
 
@@ -117,6 +119,9 @@
 		inline = false,
 		focusStyle = 'outline',
 		fullWidth = false,
+		width,
+		minWidth,
+		maxWidth,
 		rounded = false,
 
 		// アイコン関連
@@ -129,6 +134,7 @@
 
 		// 状態/動作
 		disabled = false,
+		readonly = false,
 		mode = 'single',
 		enableTextInput = false,
 		enableClickToOpen = true,
@@ -264,7 +270,7 @@
 	// =========================================================================
 	const handleChange = () => {
 		// スクリーンリーダーアナウンス
-		if (value) {
+		if (value && !readonly) {
 			if (mode === 'range' && typeof value === 'object' && 'start' in value && 'end' in value) {
 				const startDate = dayjs(value.start).locale(resolvedLocale).format(finalFormat);
 				const endDate = dayjs(value.end).locale(resolvedLocale).format(finalFormat);
@@ -275,7 +281,9 @@
 			}
 		}
 
-		onchange(value);
+		if (!readonly) {
+			onchange(value);
+		}
 
 		// 単一日付選択時、または範囲選択時の終了日選択時にポップアップを閉じる
 		if (
@@ -292,7 +300,7 @@
 	};
 
 	const handleClick = (event: MouseEvent) => {
-		if (disabled) return;
+		if (disabled || readonly) return;
 		if (enableClickToOpen) {
 			const isOpen = popupRef?.getIsOpen && popupRef.getIsOpen();
 			if (isOpen) {
@@ -306,7 +314,7 @@
 	};
 
 	const handleKeyDown = (event: KeyboardEvent) => {
-		if (disabled) return;
+		if (disabled || readonly) return;
 		onkeydown(event);
 
 		// enableTextInput のときは、カーソルキー系は Input 内のキャレット移動に使わせたいので、
@@ -363,18 +371,18 @@
 	};
 
 	const handleKeyup = (event: KeyboardEvent) => {
-		if (disabled) return;
+		if (disabled || readonly) return;
 		onkeyup(event);
 	};
 
 	const handleInput = (inputValue: string | number) => {
-		if (disabled) return;
+		if (disabled || readonly) return;
 		oninput?.(String(inputValue));
 	};
 
 	// マウスイベント
 	const handleMouseDown = (event: MouseEvent) => {
-		if (disabled) return;
+		if (disabled || readonly) return;
 		// 入力もクリックによるオープンも無効な場合は、クリックでフォーカススタイルが出ないようにする
 		if (!enableTextInput && !enableClickToOpen) {
 			event.preventDefault();
@@ -383,12 +391,12 @@
 	};
 
 	const handleMouseUp = (event: MouseEvent) => {
-		if (disabled) return;
+		if (disabled || readonly) return;
 		onmouseup?.(event);
 	};
 
 	const handleMouseEnter = (event: MouseEvent) => {
-		if (disabled) return;
+		if (disabled || readonly) return;
 		onmouseenter?.(event);
 	};
 
@@ -470,15 +478,11 @@
 	};
 
 	const handlePopupOpen = () => {
-		// DatepickerCalendarのイベントハンドラーを有効にする
 		datapickerCalendarRef?.handlePopupOpen();
-		// キーボードで開いた場合は、最初のキーボード操作時にフォーカス表示が有効になる
 	};
 
 	const handlePopupClose = () => {
-		// DatepickerCalendarのイベントハンドラーを無効にする
 		datapickerCalendarRef?.handlePopupClose();
-		// 状態をリセット
 		openedViaKeyboard = false;
 	};
 
@@ -595,8 +599,8 @@
 	);
 	const placeholderText = $derived(
 		enableTextInput
-			? nullString || currentLocaleConfig.directInputPlaceholder
-			: nullString || currentLocaleConfig.notSelected
+			? placeholder || currentLocaleConfig.directInputPlaceholder
+			: placeholder || currentLocaleConfig.notSelected
 	);
 </script>
 
@@ -612,9 +616,12 @@
 		{inline}
 		{focusStyle}
 		{fullWidth}
+		{width}
+		{minWidth}
+		{maxWidth}
 		{rounded}
 		{disabled}
-		readonly={!enableTextInput}
+		readonly={readonly || !enableTextInput}
 		placeholder={placeholderText}
 		rightIcon={hasIcon ? (mode === 'range' ? 'date_range' : 'calendar_today') : undefined}
 		{iconFilled}
@@ -622,7 +629,6 @@
 		{iconGrade}
 		{iconOpticalSize}
 		{iconVariant}
-		onRightIconClick={handleClick}
 		onclick={handleClick}
 		onfocus={handleFocus}
 		onblur={handleBlur}
@@ -652,6 +658,14 @@
 		{inputAttributes}
 		{...restProps}
 	/>
+	{#if !enableTextInput && !disabled && enableClickToOpen}
+		<button
+			type="button"
+			class="datepicker__trigger-overlay"
+			aria-label={currentLocaleConfig.selectDateLabel}
+			onclick={handleClick}
+		></button>
+	{/if}
 </div>
 <Popup
 	bind:this={popupRef}
@@ -685,5 +699,16 @@
   width: 100%;
 }
 
+.datepicker__trigger-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
 /* Datepicker uses a readonly Input when allowDirectInput is false.
- * Background behavior for readonly inputs is now handled globally in Input. */</style>
+ * Clicks are handled by the overlay above, not by modifying Input. */</style>

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

@@ -14,7 +14,7 @@ export type DatepickerProps = {
         end: Date;
     } | undefined;
     format?: string;
-    nullString?: string;
+    placeholder?: string;
     locale?: 'en' | 'ja' | 'fr' | 'de' | 'es' | 'zh-cn';
     rangeSeparator?: string;
     id?: string;
@@ -22,6 +22,9 @@ export type DatepickerProps = {
     inline?: boolean;
     focusStyle?: FocusStyle;
     fullWidth?: boolean;
+    width?: string | number | null;
+    minWidth?: string | number | null;
+    maxWidth?: string | number | null;
     rounded?: boolean;
     hasIcon?: boolean;
     iconFilled?: boolean;
@@ -30,10 +33,9 @@ export type DatepickerProps = {
     iconOpticalSize?: IconOpticalSize;
     iconVariant?: IconVariant;
     disabled?: boolean;
+    readonly?: boolean;
     mode?: DatepickerMode;
-    /** テキスト入力を有効にするか */
     enableTextInput?: boolean;
-    /** クリック時にポップアップを開くかどうかを有効にするか */
     enableClickToOpen?: boolean;
     minDate?: Date;
     maxDate?: Date;

package/dist/components/Dialog.svelte

@@ -197,7 +197,7 @@
 .dialog__body {
   flex-shrink: 1;
   position: relative;
-  padding: var(--svelte-ui-dialog-body-padding);
+  padding: 0 var(--svelte-ui-dialog-body-padding) var(--svelte-ui-dialog-body-padding);
 }
 
 .dialog__footer {
@@ -232,10 +232,6 @@
   overflow: auto;
 }
 
-.dialog:not(.dialog--scrollable) .dialog__body {
-  padding-top: 0;
-}
-
 .dialog--scrollable .dialog__footer {
   border-top: solid var(--svelte-ui-border-width, 1px) var(--svelte-ui-border-weak-color);
 }</style>

package/dist/components/Drawer.svelte

@@ -71,7 +71,7 @@
 
 		// 状態/動作
 		isOpen = $bindable(false),
-		scrollable = true,
+		scrollable = false,
 		closeIfClickOutside = true,
 		restoreFocus = false,
 
@@ -315,7 +315,6 @@
   justify-content: stretch;
   min-height: var(--svelte-ui-drawer-header-height);
   padding: var(--svelte-ui-drawer-header-padding);
-  margin-bottom: calc(0px - var(--svelte-ui-drawer-body-padding));
 }
 .drawer__header .drawer__title {
   flex-grow: 1;
@@ -327,7 +326,7 @@
 .drawer__body {
   flex-shrink: 1;
   position: relative;
-  padding: var(--svelte-ui-drawer-body-padding);
+  padding: 0 var(--svelte-ui-drawer-body-padding) var(--svelte-ui-drawer-body-padding);
   flex-grow: 1;
 }
 

package/dist/components/Fab.svelte

@@ -400,7 +400,7 @@
 .fab > * {
   z-index: 1;
 }
-.fab:before {
+.fab::before {
   content: "";
   display: block;
   position: absolute;
@@ -415,7 +415,7 @@
   z-index: 0;
 }
 @media (hover: hover) {
-  .fab:hover:before {
+  .fab:hover:not(:disabled)::before {
     opacity: 1;
   }
 }
@@ -426,7 +426,9 @@
 .fab:disabled {
   opacity: var(--svelte-ui-button-disabled-opacity);
   cursor: not-allowed;
-  pointer-events: none;
+}
+.fab:disabled * {
+  cursor: not-allowed;
 }
 .fab.fab--outlined {
   box-shadow: inset 0 0 0 var(--svelte-ui-border-width) currentColor;
@@ -455,10 +457,7 @@
 .fab.fab--outlined.fab--shadow:active {
   box-shadow: inset 0 0 0 var(--svelte-ui-border-width) currentColor, 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
 }
-.fab.fab--loading {
-  cursor: wait;
-}
-.fab.fab--no-motion, .fab.fab--no-motion:before {
+.fab.fab--no-motion, .fab.fab--no-motion::before {
   transition-duration: 0.01s;
 }
 .fab .fab__icon {
@@ -504,7 +503,7 @@
 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
   .fab,
-  .fab:before {
+  .fab::before {
     transition-duration: 0.01s;
   }
 }

package/dist/components/FileUploader.svelte

@@ -404,7 +404,8 @@
 		transition-duration: var(--svelte-ui-transition-duration);
 	}
 
-	.file-uploader.rounded {
+	.file-uploader.rounded,
+	.file-uploader.rounded::before {
 		border-radius: var(--svelte-ui-border-radius-rounded);
 	}
 

package/dist/components/IconButton.svelte

@@ -415,6 +415,10 @@
 		width: fit-content;
 	}
 
+	.icon-button:has(.icon-button__button:disabled) {
+		cursor: not-allowed;
+	}
+
 	.icon-button__button {
 		display: flex;
 		justify-content: center;
@@ -445,7 +449,7 @@
 		-webkit-backdrop-filter: var(--svelte-ui-glass-blur);
 	}
 
-	.icon-button__button:before {
+	.icon-button__button::before {
 		content: '';
 		display: block;
 		position: absolute;
@@ -461,7 +465,7 @@
 	}
 
 	@media (hover: hover) {
-		.icon-button__button:hover:before {
+		.icon-button__button:hover:not(:disabled)::before {
 			opacity: 1;
 		}
 	}
@@ -475,18 +479,17 @@
 		transform: scale(0.95);
 	}
 
-	.icon-button__button--pressed:before {
+	.icon-button__button--pressed::before {
 		opacity: 0.12;
 	}
 
 	.icon-button__button:disabled {
 		opacity: var(--svelte-ui-button-disabled-opacity);
 		cursor: not-allowed;
-		pointer-events: none;
 	}
 
-	.icon-button__button--loading {
-		cursor: wait;
+	.icon-button__button:disabled * {
+		cursor: not-allowed;
 	}
 
 	.icon-button__button > * {
@@ -517,8 +520,6 @@
 
 	.icon-button__badge {
 		position: absolute;
-		top: -2px;
-		right: -2px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -531,20 +532,24 @@
 	}
 
 	.icon-button__badge--dot {
+		top: 0;
+		right: 0;
 		width: 8px;
 		height: 8px;
 		min-width: unset;
 	}
 
 	.icon-button__badge--count {
-		min-width: 16px;
-		height: 16px;
+		top: -5px;
+		right: -5px;
+		min-width: 18px;
+		height: 18px;
 		padding: 0 4px;
-		border-radius: 8px;
+		border-radius: 9px;
 	}
 
 	.icon-button__button--no-motion,
-	.icon-button__button--no-motion:before,
+	.icon-button__button--no-motion::before,
 	.icon-button__button--no-motion .icon-button__icon {
 		transition-duration: 0.01s;
 	}
@@ -555,7 +560,7 @@
 
 	@media (prefers-reduced-motion: reduce) {
 		.icon-button__button,
-		.icon-button__button:before,
+		.icon-button__button::before,
 		.icon-button__icon {
 			transition-duration: 0.01s;
 		}

package/dist/components/Input.svelte

@@ -35,7 +35,6 @@
 		min?: number | null;
 		max?: number | null;
 		step?: number | null;
-		size?: number | null;
 		decimalPlaces?: number | null;
 		enableThousandsSeparator?: boolean;
 		autocomplete?: HTMLInputElement['autocomplete'] | null;
@@ -146,7 +145,6 @@
 		min = null,
 		max = null,
 		step = null,
-		size = null,
 		decimalPlaces = null,
 		enableThousandsSeparator = false,
 		autocomplete = null,
@@ -158,7 +156,7 @@
 		focusStyle = 'outline',
 		fullWidth = false,
 		width = null,
-		minWidth = inline ? null : 120,
+		minWidth = inline ? null : 200,
 		maxWidth = null,
 		rounded = false,
 		customStyle = '',
@@ -503,7 +501,7 @@
 		value !== null && value !== undefined && !(typeof value === 'string' && value === '')
 	);
 	const displayValue = $derived.by(() => {
-		if (!hasDisplayValue) return inline ? ' ' : '';
+		if (!hasDisplayValue) return placeholder ? convertToHtml(placeholder) : inline ? ' ' : '';
 		if (type === 'number' && typeof value === 'number') {
 			const options = {
 				useGrouping: enableThousandsSeparator,
@@ -678,7 +676,10 @@
 >
 	<!-- 表示用テキスト -->
 	<div class="input__display-text" style={customStyle}>
-		<div class="input__display-text-content">
+		<div
+			class="input__display-text-content"
+			class:input__display-text-content--placeholder={!hasDisplayValue}
+		>
 			{@html displayValue}
 			{#if type === 'number' && unit !== '' && hasDisplayValue}
 				<span class="input__unit-text">
@@ -707,7 +708,6 @@
 			{readonly}
 			{required}
 			{tabindex}
-			{size}
 			{spellcheck}
 			onchange={handleChange}
 			oninput={handleInput}
@@ -858,6 +858,9 @@
 		height: 100%;
 		padding: inherit;
 		border: none;
+		border-radius: var(--svelte-ui-input-border-radius);
+		background-color: var(--svelte-ui-input-bg);
+		box-shadow: 0 0 0 var(--svelte-ui-border-width) inset var(--svelte-ui-input-border-color);
 		font-size: inherit;
 		font-weight: inherit;
 		color: inherit;
@@ -874,8 +877,7 @@
 		min-width: 1em;
 		min-height: var(--svelte-ui-input-height);
 		padding: var(--svelte-ui-input-padding);
-		background-color: var(--svelte-ui-input-bg);
-		box-shadow: 0 0 0 var(--svelte-ui-border-width) inset var(--svelte-ui-input-border-color);
+		background-color: transparent;
 		border: none;
 		border-radius: var(--svelte-ui-input-border-radius);
 		font-size: inherit;
@@ -934,11 +936,9 @@
 	/* =============================================
  * 表示制御
  * ============================================= */
-	/* 非フォーカス時: inputを不可視化d */
+	/* 非フォーカス時: input要素自体を不可視化（枠線・背景はラッパーにあるため display-text のみ表示） */
 	.input:not(.input--focused) input {
-		color: transparent;
-		caret-color: transparent;
-		text-shadow: none;
+		opacity: 0;
 	}
 
 	/* フォーカス時: display-textを非表示 */
@@ -950,7 +950,8 @@
  * プレースホルダー・テキスト表示
  * ============================================= */
 	input::placeholder,
-	.input__display-text:empty::before {
+	.input__display-text:empty::before,
+	.input__display-text-content--placeholder {
 		color: var(--svelte-ui-input-placeholder-color);
 	}
 
@@ -962,8 +963,11 @@
 		outline-offset: var(--svelte-ui-focus-outline-offset-inner);
 	}
 
-	.input--focus-background input:focus {
+	.input--focus-background.input--focused .input__wrapper {
 		background: var(--svelte-ui-hover-overlay);
+	}
+
+	.input--focus-background input:focus {
 		outline: none;
 	}
 
@@ -974,34 +978,33 @@
 	/* =============================================
  * 状態管理（disabled, readonly等）
  * ============================================= */
+	input[readonly] {
+		cursor: default;
+		pointer-events: none;
+	}
+
+	/* disabled */
 	.input--disabled {
 		opacity: var(--svelte-ui-input-disabled-opacity);
-		pointer-events: none;
+		cursor: not-allowed;
 
-		.input__icon-left,
-		.input__icon-right {
-			opacity: var(--svelte-ui-button-disabled-opacity);
+		input,
+		.input__display-text,
+		.input__link-text {
+			cursor: not-allowed;
 		}
-	}
 
-	.input--readonly {
-		input {
-			cursor: default;
+		.input__icon-left,
+		.input__icon-right {
+			cursor: not-allowed;
+			pointer-events: none;
 		}
 	}
 
 	input:disabled {
-		opacity: var(--svelte-ui-button-disabled-opacity);
 		cursor: not-allowed;
 	}
 
-	input[readonly] {
-		/* Keep cursor behavior but do not add a special background.
-		 * In this library, filled backgrounds are used to indicate editable fields,
-		 * so readonly inputs intentionally have no extra background color. */
-		cursor: default;
-	}
-
 	/* =============================================
  * 機能バリエーション
  * ============================================= */
@@ -1135,9 +1138,7 @@
 	.input--type-password {
 		/* inputを常に表示（表示制御の非フォーカス時の不可視化を上書き） */
 		&:not(.input--focused) input {
-			color: inherit;
-			caret-color: inherit;
-			text-shadow: inherit;
+			opacity: 1;
 		}
 
 		/* display-textは常に非表示 */
@@ -1150,22 +1151,22 @@
  * デザインバリエーション
  * ============================================= */
 	/* rounded */
-	.input--rounded {
-		input {
-			border-radius: var(--svelte-ui-input-border-radius-rounded);
-		}
+	.input--rounded .input__wrapper,
+	.input--rounded input {
+		border-radius: var(--svelte-ui-input-border-radius-rounded);
 	}
 
 	/* inline */
-	.input--inline {
-		input {
-			min-height: inherit;
-			background-color: transparent;
-			box-shadow: none;
-			border: inherit;
-			border-radius: 0;
-		}
+	.input--inline .input__wrapper,
+	.input--inline input {
+		min-height: inherit;
+		background-color: transparent;
+		box-shadow: none;
+		border: inherit;
+		border-radius: 0;
+	}
 
+	.input--inline {
 		input,
 		.input__display-text,
 		.input__link-text {

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

@@ -13,7 +13,6 @@ export type InputProps = {
     min?: number | null;
     max?: number | null;
     step?: number | null;
-    size?: number | null;
     decimalPlaces?: number | null;
     enableThousandsSeparator?: boolean;
     autocomplete?: HTMLInputElement['autocomplete'] | null;

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;
 	}