@14ch/svelte-ui 0.0.52 → 0.0.53

package/dist/components/Button.svelte

@@ -11,7 +11,7 @@
 		TouchHandler,
 		PointerHandler
 	} from '../types/callbackHandlers';
-	import type { ButtonVariant, ButtonSize } from '../types/propOptions';
+	import type { ButtonVariant, ButtonSize, IconPosition } from '../types/propOptions';
 	import Icon from './Icon.svelte';
 	import LoadingSpinner from './LoadingSpinner.svelte';
 	import { getStyleFromNumber } from '../utils/style';
@@ -46,6 +46,8 @@
 		// アイコン関連
 		/** Material Symbols icon name. */
 		icon?: string;
+		/** Icon position relative to the label. @default 'left' */
+		iconPosition?: IconPosition;
 		iconFilled?: boolean;
 		iconWeight?: IconWeight;
 		iconGrade?: IconGrade;
@@ -121,6 +123,7 @@
 
 		// アイコン関連
 		icon = '',
+		iconPosition = 'left',
 		iconFilled = false,
 		iconWeight = 300,
 		iconGrade = 0,
@@ -368,19 +371,23 @@
 	data-testid="button"
 	{...restProps}
 >
+	{#snippet iconContent()}
+		<Icon
+			filled={iconFilled}
+			weight={iconWeight}
+			grade={iconGrade}
+			opticalSize={iconOpticalSize}
+			variant={iconVariant}>{icon}</Icon
+		>
+	{/snippet}
+
 	{#if loading}
 		<div class="button__loading">
 			<LoadingSpinner size={18} strokeWidth={2} color="currentColor" />
 		</div>
-	{:else if icon}
-		<div class="button__icon">
-			<Icon
-				filled={iconFilled}
-				weight={iconWeight}
-				grade={iconGrade}
-				opticalSize={iconOpticalSize}
-				variant={iconVariant}>{icon}</Icon
-			>
+	{:else if icon && iconPosition === 'left'}
+		<div class="button__icon button__icon--left">
+			{@render iconContent()}
 		</div>
 	{/if}
 
@@ -388,6 +395,12 @@
 		{@render children()}
 	</div>
 
+	{#if icon && iconPosition === 'right' && !loading}
+		<div class="button__icon button__icon--right">
+			{@render iconContent()}
+		</div>
+	{/if}
+
 	{#if popup && !loading}
 		<div class="button__popup-icon">
 			<Icon>arrow_drop_down</Icon>
@@ -519,12 +532,24 @@
 	}
 
 	.button__icon {
-		margin: -12px 0 -12px -4px;
+		margin: -12px 0;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}
 
+	.button__icon--left {
+		margin-left: -4px;
+	}
+
+	.button__icon--right {
+		margin-right: -4px;
+	}
+
+	.button--align-left .button__icon--right {
+		margin-left: auto;
+	}
+
 	.button__label {
 		display: block;
 		width: auto;
@@ -562,10 +587,14 @@
 	}
 
 	/* Size-specific adjustments */
-	.button--small .button__icon {
+	.button--small .button__icon--left {
 		margin-left: -2px;
 	}
 
+	.button--small .button__icon--right {
+		margin-right: -2px;
+	}
+
 	.button--small .button__popup-icon {
 		margin-right: -2px;
 	}
@@ -575,10 +604,14 @@
 		margin-right: -2px;
 	}
 
-	.button--large .button__icon {
+	.button--large .button__icon--left {
 		margin-left: -6px;
 	}
 
+	.button--large .button__icon--right {
+		margin-right: -6px;
+	}
+
 	.button--large .button__popup-icon {
 		margin-right: -6px;
 	}

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

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
-import type { ButtonVariant, ButtonSize } from '../types/propOptions';
+import type { ButtonVariant, ButtonSize, IconPosition } from '../types/propOptions';
 export type ButtonProps = {
     children: Snippet;
     /** @default 'button' */
@@ -23,6 +23,8 @@ export type ButtonProps = {
     popup?: boolean;
     /** Material Symbols icon name. */
     icon?: string;
+    /** Icon position relative to the label. @default 'left' */
+    iconPosition?: IconPosition;
     iconFilled?: boolean;
     iconWeight?: IconWeight;
     iconGrade?: IconGrade;

package/dist/components/Dialog.svelte

@@ -238,7 +238,7 @@
 
 .dialog--scrollable .dialog__header {
   margin-bottom: 0;
-  border-bottom: solid var(--svelte-ui-border-width, 1px) var(--svelte-ui-border-weak-color);
+  border-bottom: solid 1px var(--svelte-ui-border-color);
 }
 
 .dialog--scrollable .dialog__body {
@@ -248,5 +248,5 @@
 }
 
 .dialog--scrollable .dialog__footer {
-  border-top: solid var(--svelte-ui-border-width, 1px) var(--svelte-ui-border-weak-color);
+  border-top: solid 1px var(--svelte-ui-border-color);
 }</style>

package/dist/components/Fab.svelte

@@ -11,7 +11,7 @@
 		TouchHandler,
 		PointerHandler
 	} from '../types/callbackHandlers';
-	import type { ButtonVariant, FabPosition } from '../types/propOptions';
+	import type { ButtonVariant, FabPosition, IconPosition } from '../types/propOptions';
 	import Icon from './Icon.svelte';
 	import LoadingSpinner from './LoadingSpinner.svelte';
 	import { getStyleFromNumber } from '../utils/style';
@@ -29,6 +29,8 @@
 		loading?: boolean;
 		/** Material Symbols icon name. */
 		icon?: string;
+		/** Icon position relative to the label. @default 'left' */
+		iconPosition?: IconPosition;
 		iconFilled?: boolean;
 		iconWeight?: IconWeight;
 		iconGrade?: IconGrade;
@@ -106,6 +108,7 @@
 
 		// アイコン関連
 		icon = '',
+		iconPosition = 'left',
 		iconFilled = false,
 		iconWeight = 300,
 		iconGrade = 0,
@@ -348,20 +351,24 @@
 	aria-busy={loading ? 'true' : undefined}
 	data-testid="fab"
 >
+	{#snippet iconContent()}
+		<Icon
+			filled={iconFilled}
+			weight={iconWeight}
+			grade={iconGrade}
+			opticalSize={iconOpticalSize}
+			variant={iconVariant}
+			size={24}>{icon}</Icon
+		>
+	{/snippet}
+
 	{#if loading}
 		<div class="fab__loading">
 			<LoadingSpinner size={24} strokeWidth={2} color="currentColor" />
 		</div>
-	{:else if icon}
-		<div class="fab__icon">
-			<Icon
-				filled={iconFilled}
-				weight={iconWeight}
-				grade={iconGrade}
-				opticalSize={iconOpticalSize}
-				variant={iconVariant}
-				size={24}>{icon}</Icon
-			>
+	{:else if icon && iconPosition === 'left'}
+		<div class="fab__icon fab__icon--left">
+			{@render iconContent()}
 		</div>
 	{/if}
 
@@ -370,6 +377,12 @@
 			{@render children()}
 		</div>
 	{/if}
+
+	{#if icon && iconPosition === 'right' && !loading}
+		<div class="fab__icon fab__icon--right">
+			{@render iconContent()}
+		</div>
+	{/if}
 </button>
 
 <style>.fab {
@@ -470,12 +483,17 @@
   transition-duration: 0.01s;
 }
 .fab .fab__icon {
-  margin: 0 8px 0 -8px;
   user-select: none;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+.fab .fab__icon--left {
+  margin: 0 8px 0 -8px;
+}
+.fab .fab__icon--right {
+  margin: 0 -8px 0 8px;
+}
 .fab .fab__loading {
   position: absolute;
   top: 50%;

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

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
-import type { ButtonVariant, FabPosition } from '../types/propOptions';
+import type { ButtonVariant, FabPosition, IconPosition } from '../types/propOptions';
 export type FabProps = {
     children?: Snippet;
     /** @default 'button' */
@@ -13,6 +13,8 @@ export type FabProps = {
     loading?: boolean;
     /** Material Symbols icon name. */
     icon?: string;
+    /** Icon position relative to the label. @default 'left' */
+    iconPosition?: IconPosition;
     iconFilled?: boolean;
     iconWeight?: IconWeight;
     iconGrade?: IconGrade;

package/dist/index.d.ts

@@ -85,7 +85,7 @@ export type { NavProps } from './components/Nav.svelte';
 export type { NavItemProps, NavItemSelectedVariant } from './components/NavItem.svelte';
 export type { TabProps } from './components/Tab.svelte';
 export type { TextareaProps } from './components/Textarea.svelte';
-export type { PopupPosition, SnackbarPosition, FabPosition, ButtonVariant, ButtonSize, ComponentSize, SnackbarType, SnackbarVariant, BadgeVariant, DatepickerMode, FocusStyle, NavVariant, ChildrenVariant, StepNavOrientation } from './types/propOptions';
+export type { PopupPosition, SnackbarPosition, FabPosition, ButtonVariant, ButtonSize, IconPosition, ComponentSize, SnackbarType, SnackbarVariant, BadgeVariant, DatepickerMode, FocusStyle, NavVariant, ChildrenVariant, StepNavOrientation } from './types/propOptions';
 export type { MenuItem } from './types/menuItem';
 export type { StepItem } from './types/stepItem';
 export type { SegmentedControlItem } from './types/segmentedControlItem';

package/dist/types/propOptions.d.ts

@@ -22,6 +22,11 @@ export type FabPosition = 'left' | 'center' | 'right';
  * Used by Button, IconButton, Fab components
  */
 export type ButtonVariant = 'ghost' | 'filled' | 'outlined' | 'glass';
+/**
+ * Icon position type (left/right)
+ * Used by Button, Fab components
+ */
+export type IconPosition = 'left' | 'right';
 /**
  * Common component size type
  * Used by Button, Checkbox, CheckboxGroup, Radio, RadioGroup, SegmentedControl, Switch

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