@14ch/svelte-ui 0.0.20 → 0.0.22

package/dist/assets/styles/variables.scss

@@ -635,8 +635,8 @@
 	--svelte-ui-drawer-description-color: var(--svelte-ui-text-subtle-color);
 
 	/* LoadingSpinner */
-	--svelte-ui-loadingspinner-color: var(--svelte-ui-primary-color);
-	--svelte-ui-loadingspinner-size: 32px;
+	--svelte-ui-loading-spinner-color: var(--svelte-ui-primary-color);
+	--svelte-ui-loading-spinner-size: 32px;
 
 	/* Snackbar */
 	--svelte-ui-snackbar-min-width: 300px;

package/dist/components/Button.svelte

@@ -24,7 +24,6 @@
 		children: Snippet;
 
 		// HTML属性系
-		buttonAttributes?: HTMLButtonAttributes | undefined;
 		type?: HTMLButtonAttributes['type'];
 		tabindex?: number | null;
 
@@ -99,7 +98,6 @@
 		children,
 
 		// HTML属性系
-		buttonAttributes,
 		type = 'button',
 		tabindex = null,
 
@@ -141,7 +139,7 @@
 		onkeyup = () => {}, // No params for type inference
 
 		// マウスイベント
-		onclick,
+		onclick = () => {}, // No params for type inference
 		onmousedown = () => {}, // No params for type inference
 		onmouseup = () => {}, // No params for type inference
 		onmouseenter = () => {}, // No params for type inference
@@ -328,9 +326,10 @@
 	{type}
 	disabled={isDisabled}
 	class={buttonClasses}
-	style="color: {textColors[variant]}; background-color: {backgroundColors[variant]}; 
-		min-width: {minWidthStyle}; 
-		{customStyle ?? ''};"
+	style:color={textColors[variant]}
+	style:background-color={backgroundColors[variant]}
+	style:min-width={minWidthStyle}
+	style={customStyle}
 	onclick={handleClick}
 	onauxclick={handleAuxClick}
 	onfocus={handleFocus}
@@ -360,7 +359,6 @@
 	aria-expanded={ariaExpanded}
 	aria-busy={loading ? 'true' : undefined}
 	data-testid="button"
-	{...buttonAttributes}
 	{...restProps}
 >
 	{#if loading}
@@ -392,7 +390,7 @@
 
 <style>
 	.button {
-		display: flex;
+		display: inline-flex;
 		justify-content: center;
 		align-items: center;
 		gap: 4px;

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

@@ -5,7 +5,6 @@ import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, Pointer
 import type { ButtonVariant, ButtonSize } from '../types/propOptions';
 export type ButtonProps = {
     children: Snippet;
-    buttonAttributes?: HTMLButtonAttributes | undefined;
     type?: HTMLButtonAttributes['type'];
     tabindex?: number | null;
     customStyle?: HTMLButtonAttributes['style'];

package/dist/components/Checkbox.svelte

@@ -2,7 +2,6 @@
 
 <script lang="ts">
 	import { type Snippet } from 'svelte';
-	import type { HTMLInputAttributes } from 'svelte/elements';
 	import type {
 		FocusHandler,
 		KeyboardHandler,
@@ -25,8 +24,6 @@
 
 		// HTML属性系
 		id?: string;
-		inputAttributes?: HTMLInputAttributes | undefined;
-
 		// スタイル/レイアウト
 		size?: 'small' | 'medium' | 'large';
 
@@ -37,9 +34,6 @@
 		// ARIA/アクセシビリティ
 		reducedMotion?: boolean;
 
-		// 入力イベント
-		onchange?: (value: boolean) => void;
-
 		// フォーカスイベント
 		onfocus?: FocusHandler;
 		onblur?: FocusHandler;
@@ -73,6 +67,9 @@
 		onpointermove?: PointerHandler;
 		onpointercancel?: PointerHandler;
 
+		// 入力イベント
+		onchange?: (value: boolean) => void;
+
 		// その他
 		[key: string]: any;
 	};
@@ -88,7 +85,6 @@
 
 		// HTML属性系
 		id = `checkbox-${Math.random().toString(36).substring(2, 15)}`,
-		inputAttributes,
 
 		// スタイル/レイアウト
 		size = 'medium',
@@ -100,9 +96,6 @@
 		// ARIA/アクセシビリティ
 		reducedMotion = false,
 
-		// 入力イベント
-		onchange = () => {}, // No params for type inference
-
 		// フォーカスイベント
 		onfocus = () => {}, // No params for type inference
 		onblur = () => {}, // No params for type inference
@@ -136,6 +129,9 @@
 		onpointermove = () => {}, // No params for type inference
 		onpointercancel = () => {}, // No params for type inference
 
+		// 入力イベント
+		onchange = () => {}, // No params for type inference
+
 		// その他
 		...restProps
 	}: CheckboxProps = $props();
@@ -321,7 +317,6 @@
 		onpointermove={handlePointerMove}
 		onpointercancel={handlePointerCancel}
 		onchange={handleChange}
-		{...inputAttributes}
 		{...restProps}
 	/>
 	<label for={id} class="checkbox__icon"></label>

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

@@ -1,5 +1,4 @@
 import { type Snippet } from 'svelte';
-import type { HTMLInputAttributes } from 'svelte/elements';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 export type CheckboxProps = {
     children?: Snippet;
@@ -7,12 +6,10 @@ export type CheckboxProps = {
     value: boolean;
     indeterminate?: boolean;
     id?: string;
-    inputAttributes?: HTMLInputAttributes | undefined;
     size?: 'small' | 'medium' | 'large';
     disabled?: boolean;
     required?: boolean;
     reducedMotion?: boolean;
-    onchange?: (value: boolean) => void;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;
     onkeydown?: KeyboardHandler;
@@ -36,6 +33,7 @@ export type CheckboxProps = {
     onpointerleave?: PointerHandler;
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
+    onchange?: (value: boolean) => void;
     [key: string]: any;
 };
 declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "value" | "indeterminate">;

package/dist/components/CheckboxGroup.svelte

@@ -87,11 +87,10 @@
 
 <ul
 	class="checkbox-group"
-	style="--svelte-ui-checkbox-group-flex-direction: {direction === 'vertical' ? 'column' : 'row'};
-    {gapStyle ? `--svelte-ui-checkbox-group-gap: ${gapStyle};` : ''}
-    --svelte-ui-checkbox-group-wrap: {wrap ? 'wrap' : 'none'};
-    --svelte-ui-checkbox-group-min-option-width: {minOptionWidthStyle}
-    "
+	style:--internal-checkbox-group-flex-direction={direction === 'vertical' ? 'column' : 'row'}
+	style:--internal-checkbox-group-gap={gapStyle}
+	style:--internal-checkbox-group-wrap={wrap ? 'wrap' : 'none'}
+	style:--internal-checkbox-group-min-option-width={minOptionWidthStyle}
 >
 	{#each options as option (option.value)}
 		{#if localValues[String(option.value)] !== undefined}
@@ -114,12 +113,18 @@
 <style>
 	.checkbox-group {
 		display: flex;
-		flex-direction: var(--svelte-ui-checkbox-group-flex-direction);
-		gap: var(--svelte-ui-checkbox-group-gap);
-		flex-wrap: var(--svelte-ui-checkbox-group-wrap);
+		flex-direction: var(
+			--internal-checkbox-group-flex-direction,
+			var(--svelte-ui-checkbox-group-flex-direction)
+		);
+		gap: var(--internal-checkbox-group-gap, var(--svelte-ui-checkbox-group-gap));
+		flex-wrap: var(--internal-checkbox-group-wrap, var(--svelte-ui-checkbox-group-wrap));
 	}
 
 	.checkbox-group__option {
-		min-width: var(--svelte-ui-checkbox-group-min-option-width);
+		min-width: var(
+			--internal-checkbox-group-min-option-width,
+			var(--svelte-ui-checkbox-group-min-option-width)
+		);
 	}
 </style>

package/dist/components/ColorPicker.svelte

@@ -4,7 +4,6 @@
 	import { untrack } from 'svelte';
 	import Input from './Input.svelte';
 	import { t } from '../i18n';
-	import type { HTMLInputAttributes } from 'svelte/elements';
 	import type { IconVariant } from '../types/icon';
 	import type {
 		FocusHandler,
@@ -24,8 +23,6 @@
 		// HTML属性系
 		id?: string;
 		ariaLabel?: string;
-		inputAttributes?: HTMLInputAttributes | undefined;
-
 		// スタイル/レイアウト
 		customStyle?: string;
 		focusStyle?: 'background' | 'outline' | 'none';
@@ -90,7 +87,6 @@
 		// HTML属性系
 		id = `colorpicker-${Math.random().toString(36).substring(2, 15)}`,
 		ariaLabel,
-		inputAttributes,
 
 		// スタイル/レイアウト
 		customStyle = '',
@@ -367,7 +363,6 @@
 		{maxWidth}
 		{rounded}
 		customStyle={`padding-left: var(--svelte-ui-colorpicker-text-padding-left); ${customStyle}`}
-		{inputAttributes}
 		onchange={handleChange}
 		oninput={handleInput}
 		onfocus={handleFocus}
@@ -408,7 +403,6 @@
 			onkeydown={handleKeydown}
 			{disabled}
 			class="color-picker__trigger-input"
-			{...inputAttributes}
 			{...restProps}
 		/>
 		<div

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

@@ -1,11 +1,9 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
 import type { IconVariant } from '../types/icon';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 export type ColorPickerProps = {
     value: string | null | undefined;
     id?: string;
     ariaLabel?: string;
-    inputAttributes?: HTMLInputAttributes | undefined;
     customStyle?: string;
     focusStyle?: 'background' | 'outline' | 'none';
     fullWidth?: boolean;

package/dist/components/Combobox.svelte

@@ -1,7 +1,6 @@
 <!-- Combobox.svelte -->
 
 <script lang="ts">
-	import type { HTMLInputAttributes } from 'svelte/elements';
 	import Input from './Input.svelte';
 	import Popup from './Popup.svelte';
 	import { announceSelection } from '../utils/accessibility';
@@ -25,7 +24,6 @@
 		options: string[];
 
 		// HTML属性系
-		inputAttributes?: HTMLInputAttributes | undefined;
 		id?: string | null;
 		tabindex?: number | null;
 		maxlength?: number | null;
@@ -96,7 +94,6 @@
 		options = [] as string[],
 
 		// HTML属性系
-		inputAttributes,
 		id = `combobox-${Math.random().toString(36).substring(2, 15)}`,
 		tabindex = null,
 		maxlength = null,
@@ -473,7 +470,6 @@
 		onpointerleave={handlePointerLeave}
 		onpointermove={handlePointerMove}
 		onpointercancel={handlePointerCancel}
-		{inputAttributes}
 		{...restProps}
 		role="textbox"
 		aria-autocomplete="list"

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

@@ -1,10 +1,8 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
 export type ComboboxProps = {
     name?: string;
     value: string | number | null | undefined;
     options: string[];
-    inputAttributes?: HTMLInputAttributes | undefined;
     id?: string | null;
     tabindex?: number | null;
     maxlength?: number | null;

package/dist/components/Datepicker.svelte

@@ -15,7 +15,6 @@
 	import DatepickerCalendar from './DatepickerCalendar.svelte';
 	import { announceToScreenReader } from '../utils/accessibility';
 	import { getLocale } from '../config';
-	import type { HTMLInputAttributes } from 'svelte/elements';
 	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 	import type {
 		BivariantValueHandler,
@@ -42,8 +41,6 @@
 
 		// HTML属性系
 		id?: string;
-		inputAttributes?: HTMLInputAttributes | undefined;
-
 		// スタイル/レイアウト
 		inline?: boolean;
 		focusStyle?: FocusStyle;
@@ -113,7 +110,6 @@
 
 		// HTML属性系
 		id = `datepicker-${Math.random().toString(36).substring(2, 15)}`,
-		inputAttributes,
 
 		// スタイル/レイアウト
 		inline = false,
@@ -655,7 +651,6 @@
 		onpointermove={handlePointerMove}
 		onpointercancel={handlePointerCancel}
 		{id}
-		{inputAttributes}
 		{...restProps}
 	/>
 	{#if !enableTextInput && !disabled && enableClickToOpen}

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

@@ -4,7 +4,6 @@ import 'dayjs/locale/fr';
 import 'dayjs/locale/de';
 import 'dayjs/locale/es';
 import 'dayjs/locale/zh-cn';
-import type { HTMLInputAttributes } from 'svelte/elements';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 import type { BivariantValueHandler, FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 import type { DatepickerMode, FocusStyle } from '../types/propOptions';
@@ -18,7 +17,6 @@ export type DatepickerProps = {
     locale?: 'en' | 'ja' | 'fr' | 'de' | 'es' | 'zh-cn';
     rangeSeparator?: string;
     id?: string;
-    inputAttributes?: HTMLInputAttributes | undefined;
     inline?: boolean;
     focusStyle?: FocusStyle;
     fullWidth?: boolean;

package/dist/components/Fab.svelte

@@ -21,7 +21,6 @@
 	// =========================================================================
 	export type FabProps = {
 		children?: Snippet;
-		buttonAttributes?: HTMLButtonAttributes | undefined;
 		type?: HTMLButtonAttributes['type'];
 		customStyle?: HTMLButtonAttributes['style'];
 		disabled?: boolean;
@@ -83,7 +82,6 @@
 
 		// HTML属性系
 		type = 'button',
-		buttonAttributes,
 
 		// スタイル/レイアウト
 		customStyle,
@@ -293,7 +291,6 @@
 <button
 	{type}
 	disabled={disabled || loading}
-	{...buttonAttributes}
 	{...restProps}
 	class="fab"
 	class:fab--outlined={variant === 'outlined'}
@@ -307,10 +304,11 @@
 	class:fab--shadow={shadow}
 	class:fab--loading={loading}
 	class:fab--no-motion={reducedMotion}
-	style="color: {textColors[variant]}; background-color: {backgroundColors[variant]}; 
-		--fab-bottom: {bottomOffsetStyle};
-		--fab-side: {sideOffsetStyle};
-		{customStyle ?? ''};"
+	style:color={textColors[variant]}
+	style:background-color={backgroundColors[variant]}
+	style:--internal-fab-bottom={bottomOffsetStyle}
+	style:--internal-fab-side={sideOffsetStyle}
+	style={customStyle}
 	onclick={handleClick}
 	onfocus={handleFocus}
 	onblur={handleBlur}
@@ -368,7 +366,7 @@
   justify-content: center;
   align-items: center;
   position: fixed;
-  bottom: var(--fab-bottom, 24px);
+  bottom: var(--internal-fab-bottom, 24px);
   height: 56px;
   padding: 0 20px;
   background-color: transparent;
@@ -385,17 +383,17 @@
   transition-duration: var(--svelte-ui-transition-duration);
 }
 .fab.fab--left {
-  left: var(--fab-side, 24px);
+  left: var(--internal-fab-side, 24px);
 }
 .fab.fab--center {
   left: 50%;
   transform: translateX(-50%);
 }
 .fab.fab--right {
-  right: var(--fab-side, 24px);
+  right: var(--internal-fab-side, 24px);
 }
 .fab.fab--safe-area {
-  bottom: calc(var(--fab-bottom, 24px) + env(safe-area-inset-bottom, 0px));
+  bottom: calc(var(--internal-fab-bottom, 24px) + env(safe-area-inset-bottom, 0px));
 }
 .fab > * {
   z-index: 1;

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

@@ -5,7 +5,6 @@ import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, Pointer
 import type { ButtonVariant, FabPosition } from '../types/propOptions';
 export type FabProps = {
     children?: Snippet;
-    buttonAttributes?: HTMLButtonAttributes | undefined;
     type?: HTMLButtonAttributes['type'];
     customStyle?: HTMLButtonAttributes['style'];
     disabled?: boolean;

package/dist/components/FileUploader.svelte

@@ -259,6 +259,7 @@
 	// $derived
 	// =========================================================================
 	const widthStyle = $derived(getStyleFromNumber(width) || '100%');
+	const heightStyle = $derived(getStyleFromNumber(height));
 </script>
 
 <button
@@ -266,10 +267,8 @@
 	class="file-uploader"
 	class:file-uploader--hover={isHover}
 	class:rounded
-	style="
-		--svelte-ui-file-uploader-width: {widthStyle};
-		--svelte-ui-file-uploader-height: {height}px
-	"
+	style:--internal-file-uploader-width={widthStyle}
+	style:--internal-file-uploader-height={heightStyle}
 	data-testid="file-uploader"
 	onclick={handleClick}
 	onfocus={handleFocus}
@@ -380,8 +379,14 @@
 		align-items: center;
 		gap: 16px;
 		position: relative;
-		width: var(--svelte-ui-file-uploader-width, 100%);
-		height: var(--svelte-ui-file-uploader-height);
+		width: var(
+			--internal-file-uploader-width,
+			var(--svelte-ui-file-uploader-width, 100%)
+		);
+		height: var(
+			--internal-file-uploader-height,
+			var(--svelte-ui-file-uploader-height, auto)
+		);
 		min-height: 100px;
 		padding: 16px;
 		background-color: var(--svelte-ui-file-uploader-bg);

package/dist/components/Icon.svelte

@@ -76,24 +76,24 @@
 		`'FILL' ${filled ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' ${opticalSize}`
 	);
 
+	const sizeStyle = $derived(getStyleFromNumber(size));
+	const colorStyle = $derived(color || undefined);
+
 	const ariaAttributes = $derived({
 		'aria-hidden': decorative && !ariaLabel ? true : undefined,
 		'aria-label': ariaLabel || undefined,
 		role: !decorative && ariaLabel ? 'img' : undefined
 	});
-
-	const iconStyle = $derived.by(() => {
-		const sizeStyle = getStyleFromNumber(size);
-		return `width: ${sizeStyle}; height: ${sizeStyle}; font-size: ${sizeStyle}; 
-		color: ${color}; 
-		font-variation-settings: ${fontVariationSettings}; 
-		${customStyle}`;
-	});
 </script>
 
 <i
 	class={iconClasses}
-	style={iconStyle}
+	style:width={sizeStyle}
+	style:height={sizeStyle}
+	style:font-size={sizeStyle}
+	style:color={colorStyle}
+	style:font-variation-settings={fontVariationSettings}
+	style={customStyle}
 	{title}
 	{...ariaAttributes}
 	{...restProps}
@@ -106,6 +106,8 @@
 	<!-- Unicode文字での代替表示 -->
 	<span
 		class="icon-fallback-text"
+		style:font-size={sizeStyle}
+		style:color={colorStyle}
 		style={customStyle}
 		{...ariaAttributes}
 		{...restProps}

package/dist/components/IconButton.svelte

@@ -24,7 +24,6 @@
 		children: Snippet;
 
 		// HTML属性系
-		buttonAttributes?: HTMLButtonAttributes | undefined;
 		type?: 'button' | 'submit' | 'reset' | null | undefined;
 		tabindex?: number | null;
 
@@ -104,7 +103,6 @@
 		children,
 
 		// HTML属性系
-		buttonAttributes,
 		type = 'button',
 		tabindex = null,
 
@@ -373,7 +371,6 @@
 		aria-pressed={ariaPressed !== undefined ? ariaPressed : pressed ? 'true' : undefined}
 		aria-busy={loading ? 'true' : undefined}
 		data-testid="icon-button"
-		{...buttonAttributes}
 		{...restProps}
 	>
 		{#if loading}

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

@@ -5,7 +5,6 @@ import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, Pointer
 import type { ButtonVariant, BadgeVariant } from '../types/propOptions';
 export type IconButtonProps = {
     children: Snippet;
-    buttonAttributes?: HTMLButtonAttributes | undefined;
     type?: 'button' | 'submit' | 'reset' | null | undefined;
     tabindex?: number | null;
     customStyle?: HTMLButtonAttributes['style'];

package/dist/components/ImageUploader.svelte

@@ -337,10 +337,8 @@
 	class:image-uploader--multiple={multiple}
 	class:image-uploader--rounded={rounded}
 	class:image-uploader--adaptive={previewAdaptive}
-	style="
-			--svelte-ui-image-uploader-button-width: {previewWidthStyle};
-			--svelte-ui-image-uploader-button-height: {previewHeightStyle};
-		"
+	style:--internal-image-uploader-button-width={previewWidthStyle}
+	style:--internal-image-uploader-button-height={previewHeightStyle}
 	data-testid="image-uploader"
 >
 	{#if multiple}
@@ -446,8 +444,14 @@
 		align-items: center;
 		position: relative;
 		max-width: 100%;
-		min-width: var(--svelte-ui-image-uploader-button-width);
-		min-height: var(--svelte-ui-image-uploader-button-height);
+		min-width: var(
+			--internal-image-uploader-button-width,
+			var(--svelte-ui-image-uploader-button-width)
+		);
+		min-height: var(
+			--internal-image-uploader-button-height,
+			var(--svelte-ui-image-uploader-button-height)
+		);
 		padding: 16px;
 		background-color: var(--svelte-ui-form-bg);
 		border-radius: var(--svelte-ui-border-radius);

package/dist/components/Input.svelte

@@ -4,7 +4,6 @@
 	import IconButton from './IconButton.svelte';
 	import Icon from './Icon.svelte';
 	import { getStyleFromNumber } from '../utils/style';
-	import type { HTMLInputAttributes } from 'svelte/elements';
 	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 	import { t } from '../i18n';
 	import { convertToHtml, convertToHtmlWithLink } from '../utils/formatText';
@@ -39,8 +38,6 @@
 		enableThousandsSeparator?: boolean;
 		autocomplete?: HTMLInputElement['autocomplete'] | null;
 		spellcheck?: boolean | null;
-		inputAttributes?: HTMLInputAttributes | undefined;
-
 		// スタイル/レイアウト
 		inline?: boolean;
 		focusStyle?: FocusStyle;
@@ -149,7 +146,6 @@
 		enableThousandsSeparator = false,
 		autocomplete = null,
 		spellcheck = null,
-		inputAttributes,
 
 		// スタイル/レイアウト
 		inline = false,
@@ -672,7 +668,9 @@
 	class:input--readonly={readonly}
 	class:input--focused={isFocused}
 	data-testid="input"
-	style="width: {widthStyle}; max-width: {maxWidthStyle}; min-width: {minWidthStyle}"
+	style:width={widthStyle}
+	style:max-width={maxWidthStyle}
+	style:min-width={minWidthStyle}
 >
 	<!-- 表示用テキスト -->
 	<div class="input__display-text" style={customStyle}>
@@ -736,7 +734,6 @@
 			onpointercancel={handlePointerCancel}
 			oncompositionstart={handleCompositionStart}
 			oncompositionend={handleCompositionEnd}
-			{...inputAttributes}
 			{...restProps}
 		/>
 	</div>
@@ -887,7 +884,6 @@
 		text-align: inherit;
 
 		&[type='number'] {
-			text-align: right;
 			&::-webkit-outer-spin-button,
 			&::-webkit-inner-spin-button {
 				-webkit-appearance: none;
@@ -916,10 +912,15 @@
 		transition: none;
 	}
 
+	.input__display-text-content {
+		width: 100%;
+	}
+
 	.input__link-text {
 		position: absolute;
 		top: 0;
 		left: 0;
+		width: 100%;
 		height: 100%;
 		pointer-events: none;
 		z-index: 1;
@@ -1127,13 +1128,6 @@
 	/* =============================================
  * タイプ別スタイル
  * ============================================= */
-	/* type-number */
-	.input--type-number {
-		.input__display-text {
-			justify-content: flex-end;
-		}
-	}
-
 	/* type-password: セキュリティのため常にinputを表示（display-textは非表示） */
 	.input--type-password {
 		/* inputを常に表示（表示制御の非フォーカス時の不可視化を上書き） */

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

@@ -1,4 +1,3 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
 import type { FocusStyle } from '../types/propOptions';
@@ -17,7 +16,6 @@ export type InputProps = {
     enableThousandsSeparator?: boolean;
     autocomplete?: HTMLInputElement['autocomplete'] | null;
     spellcheck?: boolean | null;
-    inputAttributes?: HTMLInputAttributes | undefined;
     inline?: boolean;
     focusStyle?: FocusStyle;
     placeholder?: string;