@14ch/svelte-ui 0.0.21 → 0.0.23

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,
 
@@ -361,7 +359,6 @@
 	aria-expanded={ariaExpanded}
 	aria-busy={loading ? 'true' : undefined}
 	data-testid="button"
-	{...buttonAttributes}
 	{...restProps}
 >
 	{#if loading}
@@ -393,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';
 
@@ -88,7 +85,6 @@
 
 		// HTML属性系
 		id = `checkbox-${Math.random().toString(36).substring(2, 15)}`,
-		inputAttributes,
 
 		// スタイル/レイアウト
 		size = 'medium',
@@ -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,7 +6,6 @@ export type CheckboxProps = {
     value: boolean;
     indeterminate?: boolean;
     id?: string;
-    inputAttributes?: HTMLInputAttributes | undefined;
     size?: 'small' | 'medium' | 'large';
     disabled?: boolean;
     required?: boolean;

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

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/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/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,
@@ -657,7 +653,7 @@
 <div
 	class="input
 	input--focus-{focusStyle}
-	input--type-{resolvedType}"
+	input--type-{type}"
 	class:input--inline={inline}
 	class:input--linkify={isLinkifyActive}
 	class:input--auto-resize={inline}
@@ -738,7 +734,6 @@
 			onpointercancel={handlePointerCancel}
 			oncompositionstart={handleCompositionStart}
 			oncompositionend={handleCompositionEnd}
-			{...inputAttributes}
 			{...restProps}
 		/>
 	</div>

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;

package/dist/components/Radio.svelte

@@ -2,7 +2,6 @@
 
 <script lang="ts">
 	import { type Snippet } from 'svelte';
-	import type { HTMLInputAttributes } from 'svelte/elements';
 	import type {
 		FocusHandler,
 		KeyboardHandler,
@@ -27,8 +26,6 @@
 
 		// HTML属性系
 		id?: string;
-		inputAttributes?: HTMLInputAttributes | undefined;
-
 		// スタイル/レイアウト
 		size?: 'small' | 'medium' | 'large';
 
@@ -90,7 +87,6 @@
 
 		// HTML属性系
 		id = `radio-${Math.random().toString(36).substring(2, 15)}`,
-		inputAttributes,
 
 		// スタイル/レイアウト
 		size = 'medium',
@@ -347,7 +343,6 @@
 		onpointermove={handlePointerMove}
 		onpointercancel={handlePointerCancel}
 		onchange={handleChange}
-		{...inputAttributes}
 		{...restProps}
 	/>
 	<label for={id} class="radio__icon"></label>

package/dist/components/Radio.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, BivariantValueHandler } from '../types/callbackHandlers';
 import type { OptionValue } from '../types/options';
 export type RadioProps = {
@@ -8,7 +7,6 @@ export type RadioProps = {
     value: OptionValue;
     currentValue: OptionValue;
     id?: string;
-    inputAttributes?: HTMLInputAttributes | undefined;
     size?: 'small' | 'medium' | 'large';
     disabled?: boolean;
     required?: boolean;

package/dist/components/Select.svelte

@@ -3,7 +3,6 @@
 <script lang="ts">
 	import Icon from './Icon.svelte';
 	import { t } from '../i18n';
-	import type { HTMLSelectAttributes } from 'svelte/elements';
 	import type {
 		FocusHandler,
 		KeyboardHandler,
@@ -28,8 +27,6 @@
 		ariaLabel?: string;
 		tabindex?: number | null;
 		placeholder?: string;
-		selectAttributes?: HTMLSelectAttributes | undefined;
-
 		// スタイル/レイアウト
 		size?: number | null;
 		inline?: boolean;
@@ -93,7 +90,6 @@
 		ariaLabel,
 		tabindex = null,
 		placeholder = '',
-		selectAttributes,
 
 		// スタイル/レイアウト
 		size = null,
@@ -328,7 +324,6 @@ select--focus-{focusStyle}"
 		onpointermove={handlePointerMove}
 		onpointercancel={handlePointerCancel}
 		onchange={handleChange}
-		{...selectAttributes}
 		{...restProps}
 	>
 		<!-- プレースホルダーオプション -->

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

@@ -1,4 +1,3 @@
-import type { HTMLSelectAttributes } from 'svelte/elements';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
 import type { Option } from '../types/options';
 export type SelectProps = {
@@ -9,7 +8,6 @@ export type SelectProps = {
     ariaLabel?: string;
     tabindex?: number | null;
     placeholder?: string;
-    selectAttributes?: HTMLSelectAttributes | undefined;
     size?: number | null;
     inline?: boolean;
     focusStyle?: 'background' | 'outline' | 'none';

package/dist/components/Slider.svelte

@@ -1,7 +1,6 @@
 <!-- Slider.svelte -->
 
 <script lang="ts">
-	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { getStyleFromNumber } from '../utils/style';
 	import { t } from '../i18n';
 	import type {
@@ -26,8 +25,6 @@
 		min?: number;
 		max?: number;
 		step?: number;
-		inputAttributes?: HTMLInputAttributes | undefined;
-
 		// スタイル/レイアウト
 		width?: string | number | null;
 		fullWidth?: boolean;
@@ -91,7 +88,6 @@
 		min = 0,
 		max = 100,
 		step = 1,
-		inputAttributes,
 
 		// スタイル/レイアウト
 		width = null,
@@ -350,7 +346,6 @@
 		onpointerleave={handlePointerLeave}
 		onpointermove={handlePointerMove}
 		onpointercancel={handlePointerCancel}
-		{...inputAttributes}
 		{...restProps}
 	/>
 </div>

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

@@ -1,4 +1,3 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 export type SliderProps = {
     value: number;
@@ -8,7 +7,6 @@ export type SliderProps = {
     min?: number;
     max?: number;
     step?: number;
-    inputAttributes?: HTMLInputAttributes | undefined;
     width?: string | number | null;
     fullWidth?: boolean;
     thumbColor?: string | null;

package/dist/components/Switch.svelte

@@ -2,7 +2,6 @@
 
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { HTMLInputAttributes } from 'svelte/elements';
 	import type {
 		FocusHandler,
 		KeyboardHandler,
@@ -23,8 +22,6 @@
 
 		// HTML属性系
 		id?: string;
-		inputAttributes?: HTMLInputAttributes | undefined;
-
 		// スタイル/レイアウト
 		size?: 'small' | 'medium' | 'large';
 
@@ -84,7 +81,6 @@
 
 		// HTML属性系
 		id = `switch-${Math.random().toString(36).substring(2, 15)}`,
-		inputAttributes,
 
 		// スタイル/レイアウト
 		size = 'medium',
@@ -290,7 +286,6 @@
 		{disabled}
 		{required}
 		{id}
-		{...inputAttributes}
 		onchange={handleChange}
 		onfocus={handleFocus}
 		onblur={handleBlur}
@@ -334,7 +329,7 @@
  * Base Styles
   * ============================================= */
 .switch {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   width: fit-content;
   contain: layout;

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

@@ -1,11 +1,9 @@
 import type { Snippet } from 'svelte';
-import type { HTMLInputAttributes } from 'svelte/elements';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 export type SwitchProps = {
     children?: Snippet;
     value: boolean;
     id?: string;
-    inputAttributes?: HTMLInputAttributes | undefined;
     size?: 'small' | 'medium' | 'large';
     disabled?: boolean;
     required?: boolean;

package/dist/components/Textarea.svelte

@@ -33,8 +33,6 @@
 		wrap?: 'soft' | 'hard' | null;
 		spellcheck?: boolean | null;
 		autocapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters' | null;
-		textareaAttributes?: HTMLTextareaAttributes | undefined;
-
 		// スタイル/レイアウト
 		rows?: number;
 		minHeight?: string | number | null;
@@ -119,7 +117,6 @@
 		wrap = null,
 		spellcheck = null,
 		autocapitalize = null,
-		textareaAttributes,
 
 		// スタイル/レイアウト
 		rows = 3,
@@ -583,7 +580,6 @@
 			onpointermove={handlePointerMove}
 			onpointercancel={handlePointerCancel}
 			onscroll={handleScroll}
-			{...textareaAttributes}
 			{...restProps}
 		></textarea>
 	</div>

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

@@ -13,7 +13,6 @@ export type TextareaProps = {
     wrap?: 'soft' | 'hard' | null;
     spellcheck?: boolean | null;
     autocapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters' | null;
-    textareaAttributes?: HTMLTextareaAttributes | undefined;
     rows?: number;
     minHeight?: string | number | null;
     maxHeight?: string | number | null;

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.21",
+	"version": "0.0.23",
 	"type": "module",
 	"keywords": [
 		"svelte",