@14ch/svelte-ui 0.0.20 → 0.0.22

package/dist/components/SnackbarItem.svelte

@@ -146,22 +146,33 @@
 
 <div
 	bind:this={snackbarRef}
-	class="snackbar-item snackbar-item--{position} {visible ? '' : 'snackbar-item--hidden'}"
+	class="snackbar-item"
+	class:snackbar-item--top={position === 'top'}
+	class:snackbar-item--bottom={position === 'bottom'}
+	class:snackbar-item--hidden={!visible}
 	data-testid="snackbar-item"
 >
 	<div
-		class="snackbar-item__content snackbar-item__content--{type} snackbar-item__content--{variant} snackbar-item__content--{position} {visible
-			? 'snackbar-item__content--visible'
-			: ''}"
-		style="--svelte-ui-snackbar-item-custom-color: {color ??
-			'unset'}; --svelte-ui-snackbar-item-custom-text-color: {textColor ?? 'unset'};"
+		class="snackbar-item__content"
+		class:snackbar-item__content--info={type === 'info'}
+		class:snackbar-item__content--success={type === 'success'}
+		class:snackbar-item__content--warning={type === 'warning'}
+		class:snackbar-item__content--error={type === 'error'}
+		class:snackbar-item__content--default={type === 'default'}
+		class:snackbar-item__content--filled={variant === 'filled'}
+		class:snackbar-item__content--outlined={variant === 'outlined'}
+		class:snackbar-item__content--top={position === 'top'}
+		class:snackbar-item__content--bottom={position === 'bottom'}
+		class:snackbar-item__content--visible={visible}
+		style:--internal-snackbar-item-custom-color={color ?? 'unset'}
+		style:--internal-snackbar-item-custom-text-color={textColor ?? 'unset'}
 		role={type === 'error' || type === 'warning' ? 'alert' : 'status'}
 		aria-live={type === 'error' || type === 'warning' ? 'assertive' : 'polite'}
 		aria-atomic="true"
 		aria-hidden={!visible}
 	>
 		{#if typeIcons[type]}
-			<div class="snackbar__icon" aria-hidden="true">
+			<div class="snackbar-item__icon" aria-hidden="true">
 				<Icon name={typeIcons[type]} size={32}>{typeIcons[type]}</Icon>
 			</div>
 		{/if}
@@ -332,90 +343,90 @@
 	/* Type variants - filled */
 	.snackbar-item__content--filled.snackbar-item__content--info {
 		background-color: var(
-			--svelte-ui-snackbar-item-custom-color,
+			--internal-snackbar-item-custom-color,
 			var(--svelte-ui-snackbar-info-filled-bg)
 		);
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-info-filled-text-color)
 		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--info .snackbar-item__icon {
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-info-filled-text-color)
 		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--success {
 		background-color: var(
-			--svelte-ui-snackbar-item-custom-color,
+			--internal-snackbar-item-custom-color,
 			var(--svelte-ui-snackbar-success-filled-bg)
 		);
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-success-filled-text-color)
 		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--success .snackbar-item__icon {
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-success-filled-text-color)
 		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--warning {
 		background-color: var(
-			--svelte-ui-snackbar-item-custom-color,
+			--internal-snackbar-item-custom-color,
 			var(--svelte-ui-snackbar-warning-filled-bg)
 		);
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-warning-filled-text-color)
 		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--warning .snackbar-item__icon {
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-warning-filled-text-color)
 		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--error {
 		background-color: var(
-			--svelte-ui-snackbar-item-custom-color,
+			--internal-snackbar-item-custom-color,
 			var(--svelte-ui-snackbar-error-filled-bg)
 		);
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-error-filled-text-color)
 		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--error .snackbar-item__icon {
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-error-filled-text-color)
 		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--default {
 		background-color: var(
-			--svelte-ui-snackbar-item-custom-color,
+			--internal-snackbar-item-custom-color,
 			var(--svelte-ui-snackbar-default-filled-bg)
 		);
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-default-filled-text-color)
 		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--default .snackbar-item__icon {
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-default-filled-text-color)
 		);
 	}
@@ -423,115 +434,115 @@
 	/* Type variants - outlined */
 	.snackbar-item__content--outlined.snackbar-item__content--info {
 		background-color: var(
-			--svelte-ui-snackbar-item-custom-color,
+			--internal-snackbar-item-custom-color,
 			var(--svelte-ui-snackbar-info-outlined-bg)
 		);
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-info-outlined-text-color)
 		);
 		box-shadow: inset 0 0 0 1px
 			var(
-				--svelte-ui-snackbar-item-custom-color,
+				--internal-snackbar-item-custom-color,
 				var(--svelte-ui-snackbar-info-outlined-border-color)
 			);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--info .snackbar-item__icon {
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-info-outlined-text-color)
 		);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--success {
 		background-color: var(
-			--svelte-ui-snackbar-item-custom-color,
+			--internal-snackbar-item-custom-color,
 			var(--svelte-ui-snackbar-success-outlined-bg)
 		);
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-success-outlined-text-color)
 		);
 		box-shadow: inset 0 0 0 1px
 			var(
-				--svelte-ui-snackbar-item-custom-color,
+				--internal-snackbar-item-custom-color,
 				var(--svelte-ui-snackbar-success-outlined-border-color)
 			);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--success .snackbar-item__icon {
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-success-outlined-text-color)
 		);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--warning {
 		background-color: var(
-			--svelte-ui-snackbar-item-custom-color,
+			--internal-snackbar-item-custom-color,
 			var(--svelte-ui-snackbar-warning-outlined-bg)
 		);
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-warning-outlined-text-color)
 		);
 		box-shadow: inset 0 0 0 1px
 			var(
-				--svelte-ui-snackbar-item-custom-color,
+				--internal-snackbar-item-custom-color,
 				var(--svelte-ui-snackbar-warning-outlined-border-color)
 			);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--warning .snackbar-item__icon {
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-warning-outlined-text-color)
 		);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--error {
 		background-color: var(
-			--svelte-ui-snackbar-item-custom-color,
+			--internal-snackbar-item-custom-color,
 			var(--svelte-ui-snackbar-error-outlined-bg)
 		);
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-error-outlined-text-color)
 		);
 		box-shadow: inset 0 0 0 1px
 			var(
-				--svelte-ui-snackbar-item-custom-color,
+				--internal-snackbar-item-custom-color,
 				var(--svelte-ui-snackbar-error-outlined-border-color)
 			);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--error .snackbar-item__icon {
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-error-outlined-text-color)
 		);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--default {
 		background-color: var(
-			--svelte-ui-snackbar-item-custom-color,
+			--internal-snackbar-item-custom-color,
 			var(--svelte-ui-snackbar-default-outlined-bg)
 		);
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-default-outlined-text-color)
 		);
 		box-shadow: inset 0 0 0 1px
 			var(
-				--svelte-ui-snackbar-item-custom-color,
+				--internal-snackbar-item-custom-color,
 				var(--svelte-ui-snackbar-default-outlined-border-color)
 			);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--default .snackbar-item__icon {
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-default-outlined-text-color)
 		);
 	}

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/TabItem.svelte

@@ -71,23 +71,19 @@
 		return `${pathPrefix}${tabItem.href.startsWith('/') ? '' : '/'}${tabItem.href}`;
 	});
 
-	// 明示的に渡されたときだけ style で上書き。未渡しなら variables の tab 用変数をそのまま参照
-	const tabItemStyle = $derived.by(() => {
-		const parts: string[] = [];
-		if (textColor !== undefined) parts.push(`--svelte-ui-tab-item-text-color: ${textColor}`);
-		if (selectedTextColor !== undefined)
-			parts.push(`--svelte-ui-tab-item-selected-text-color: ${selectedTextColor}`);
-		if (selectedBarColor !== undefined)
-			parts.push(`--svelte-ui-tab-item-selected-bar-color: ${selectedBarColor}`);
-		return parts.length > 0 ? parts.join('; ') : undefined;
-	});
+	// 明示的に渡されたときだけ内部CSS変数で上書き。未渡しなら variables の tab 用変数をそのまま参照
+	const internalTextColor = $derived(textColor);
+	const internalSelectedTextColor = $derived(selectedTextColor);
+	const internalSelectedBarColor = $derived(selectedBarColor);
 </script>
 
 {#if isDisabled}
 	<span
 		class="tab-item tab-item--disabled"
 		class:tab-item--selected={isSelected}
-		style={tabItemStyle}
+		style:--internal-tab-item-text-color={internalTextColor}
+		style:--internal-tab-item-selected-text-color={internalSelectedTextColor}
+		style:--internal-tab-item-selected-bar-color={internalSelectedBarColor}
 		role="tab"
 		aria-selected={isSelected}
 		aria-disabled="true"
@@ -116,7 +112,9 @@
 		href={hrefWithPrefix}
 		class="tab-item"
 		class:tab-item--selected={isSelected}
-		style={tabItemStyle}
+		style:--internal-tab-item-text-color={internalTextColor}
+		style:--internal-tab-item-selected-text-color={internalSelectedTextColor}
+		style:--internal-tab-item-selected-bar-color={internalSelectedBarColor}
 		role="tab"
 		aria-selected={isSelected}
 		tabindex={0}
@@ -149,7 +147,7 @@
   gap: var(--svelte-ui-tab-item-icon-gap);
   position: relative;
   padding: var(--svelte-ui-tab-item-padding);
-  color: var(--svelte-ui-tab-item-text-color);
+  color: var(--internal-tab-item-text-color, var(--svelte-ui-tab-item-text-color));
   white-space: nowrap;
   text-decoration: none;
   transition-property: background-color, color, outline;
@@ -159,7 +157,7 @@
 
 @media (hover: hover) {
   .tab-item:hover:not(.tab-item--selected) {
-    color: var(--svelte-ui-tab-item-selected-text-color);
+    color: var(--internal-tab-item-selected-text-color, var(--svelte-ui-tab-item-selected-text-color));
   }
   .tab-item:hover:not(.tab-item--selected)::before {
     opacity: 1;
@@ -178,7 +176,7 @@
     outline-offset: var(--svelte-ui-focus-outline-offset-inner);
   }
   .tab-item:focus:not(.tab-item--selected) {
-    color: var(--svelte-ui-tab-item-selected-text-color);
+    color: var(--internal-tab-item-selected-text-color, var(--svelte-ui-tab-item-selected-text-color));
   }
   .tab-item:focus:not(.tab-item--selected)::before {
     opacity: 1;
@@ -193,7 +191,7 @@
   bottom: 0;
   width: calc(100% - 2 * var(--svelte-ui-tab-item-padding-x) + 2 * var(--svelte-ui-tab-item-selected-bar-offset));
   height: var(--svelte-ui-tab-item-selected-bar-height);
-  background-color: var(--svelte-ui-tab-item-selected-bar-color);
+  background-color: var(--internal-tab-item-selected-bar-color, var(--svelte-ui-tab-item-selected-bar-color));
   border-radius: var(--svelte-ui-tab-item-selected-bar-radius);
   opacity: 0;
   transition-property: opacity;
@@ -201,7 +199,7 @@
 }
 
 .tab-item--selected {
-  color: var(--svelte-ui-tab-item-selected-text-color);
+  color: var(--internal-tab-item-selected-text-color, var(--svelte-ui-tab-item-selected-text-color));
   background-color: transparent;
 }
 

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,
@@ -524,13 +521,16 @@
 	class:textarea--readonly={readonly}
 	class:textarea--focused={isFocused}
 	data-testid="textarea"
-	style="width: {widthStyle}; {!inline ? `max-height: ${maxHeightStyle};` : ''}"
+	style:width={widthStyle}
+	style:max-height={!inline ? maxHeightStyle : undefined}
 >
 	<div
 		bind:this={displayTextRef}
 		class="textarea__display-text"
 		class:textarea__display-text--placeholder={!hasDisplayValue}
-		style="min-height: {minHeightStyle}; max-height: {maxHeightStyle}; {customStyle}"
+		style:min-height={minHeightStyle}
+		style:max-height={maxHeightStyle}
+		style={customStyle}
 	>
 		{@html displayValue}
 	</div>
@@ -552,7 +552,8 @@
 			{spellcheck}
 			{autocapitalize}
 			class:resizable
-			style="min-height: {minHeightStyle}; {customStyle}"
+			style:min-height={minHeightStyle}
+			style={customStyle}
 			onchange={handleChange}
 			oninput={handleInput}
 			onfocus={handleFocus}
@@ -579,7 +580,6 @@
 			onpointermove={handlePointerMove}
 			onpointercancel={handlePointerCancel}
 			onscroll={handleScroll}
-			{...textareaAttributes}
 			{...restProps}
 		></textarea>
 	</div>
@@ -587,7 +587,9 @@
 		<div
 			bind:this={linkTextRef}
 			class="textarea__link-text"
-			style="min-height: {minHeightStyle}; max-height: {maxHeightStyle}; {customStyle}"
+			style:min-height={minHeightStyle}
+			style:max-height={maxHeightStyle}
+			style={customStyle}
 		>
 			{@html linkHtmlValue}
 		</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.20",
+	"version": "0.0.22",
 	"type": "module",
 	"keywords": [
 		"svelte",