@14ch/svelte-ui 0.0.2 → 0.0.3

package/README.md

@@ -346,6 +346,15 @@ MIT License - see the [LICENSE](LICENSE) file for details.
 
 ## Changelog
 
+### v0.0.3
+
+- Improved text vertical alignment in Button, Fab, TabItem, Checkbox, and Radio components using `text-box-trim`
+- Text labels now appear more visually centered within their containers
+
+### v0.0.2
+
+(Previous release notes...)
+
 ### v0.0.1
 
 - Initial release

package/dist/assets/styles/variables.scss

@@ -293,12 +293,13 @@
 	--svelte-ui-button-height-sm: var(--svelte-ui-form-height-sm);
 	--svelte-ui-button-height: var(--svelte-ui-form-height);
 	--svelte-ui-button-height-lg: var(--svelte-ui-form-height-lg);
-	--svelte-ui-button-padding-sm: 0 8px;
-	--svelte-ui-button-padding: 0 12px;
-	--svelte-ui-button-padding-lg: 0 16px;
+	--svelte-ui-button-padding-sm: 6px 8px;
+	--svelte-ui-button-padding: 8px 12px;
+	--svelte-ui-button-padding-lg: 12px 16px;
 	--svelte-ui-button-font-size-sm: 14px;
 	--svelte-ui-button-font-size: inherit;
 	--svelte-ui-button-font-size-lg: 16px;
+	--svelte-ui-button-line-height: 1.2em;
 	--svelte-ui-button-border-radius: var(--svelte-ui-border-radius);
 	--svelte-ui-button-border-radius-rounded: var(--svelte-ui-border-radius-rounded);
 	--svelte-ui-button-disabled-opacity: var(--svelte-ui-disabled-opacity);
@@ -412,6 +413,7 @@
 	--svelte-ui-checkbox-icon-size: 1rem;
 	--svelte-ui-checkbox-icon-size-sm: 0.875rem;
 	--svelte-ui-checkbox-icon-size-lg: 1.25rem;
+	--svelte-ui-checkbox-line-height: 1.2em;
 	--svelte-ui-checkbox-disabled-opacity: var(--svelte-ui-disabled-opacity);
 	--svelte-ui-checkbox-border-color: var(--svelte-ui-border-color);
 	--svelte-ui-checkbox-bg-checked: var(--svelte-ui-checkbox-checked-color);
@@ -437,6 +439,7 @@
 		var(--svelte-ui-switch-height-lg) - var(--svelte-ui-switch-thumb-margin) * 2
 	);
 	--svelte-ui-switch-gap: 8px;
+	--svelte-ui-switch-line-height: 1.2em;
 	--svelte-ui-switch-disabled-opacity: var(--svelte-ui-disabled-opacity);
 	--svelte-ui-switch-border-radius: var(--svelte-ui-border-radius-rounded);
 	--svelte-ui-switch-thumb-border-radius: var(--svelte-ui-border-radius-rounded);
@@ -457,9 +460,8 @@
 	--svelte-ui-radio-min-height: 20px;
 	--svelte-ui-radio-min-height-sm: 16px;
 	--svelte-ui-radio-min-height-lg: 24px;
-	--svelte-ui-radio-padding: 0 0 0 24px;
-	--svelte-ui-radio-padding-sm: 0 0 0 20px;
-	--svelte-ui-radio-padding-lg: 0 0 0 28px;
+	--svelte-ui-radio-gap: 8px;
+	--svelte-ui-radio-line-height: 1.2em;
 	--svelte-ui-radio-disabled-opacity: var(--svelte-ui-disabled-opacity);
 	--svelte-ui-radio-border-color: var(--svelte-ui-border-color);
 	--svelte-ui-radio-bg-checked: var(--svelte-ui-radio-checked-color);

package/dist/components/Button.svelte

@@ -502,9 +502,11 @@
 
 	.button__label {
 		width: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
+		display: block;
+		text-align: center;
+		line-height: var(--svelte-ui-button-line-height);
+		text-box-trim: trim-both;
+		text-box-edge: cap alphabetic;
 		transition-property: opacity;
 		transition-duration: var(--svelte-ui-transition-duration);
 	}

package/dist/components/Checkbox.svelte

@@ -330,6 +330,7 @@
 		display: flex;
 		align-items: center;
 		width: fit-content;
+		min-height: var(--svelte-ui-checkbox-min-height);
 		contain: layout;
 	}
 
@@ -344,14 +345,15 @@
 
 	/* Label */
 	.checkbox__label {
-		display: flex;
-		align-items: center;
-		min-height: var(--svelte-ui-checkbox-min-height);
+		display: block;
 		padding-left: var(--svelte-ui-checkbox-gap);
 		white-space: nowrap;
 		font-size: inherit;
 		color: inherit;
+		line-height: var(--svelte-ui-checkbox-line-height);
 		cursor: pointer;
+		text-box-trim: trim-both;
+		text-box-edge: cap alphabetic;
 	}
 
 	/* Checkbox box */

package/dist/components/Dialog.svelte

@@ -115,7 +115,7 @@
 		return styles.join('; ');
 	});
 
-	const dialogClasses = $derived(['dialog', scrollable && 'scrollable'].filter(Boolean).join(' '));
+	const dialogClasses = $derived([scrollable && 'scrollable'].filter(Boolean).join(' ')); // dialogクラス自体はcustomClassに含めない
 
 	const ariaLabelledby = $derived(title ? 'dialog-title' : undefined);
 	const ariaDescribedbyValue = $derived(
@@ -136,7 +136,7 @@
 	customStyles={dialogStyles}
 	id={id ? `${id}-modal` : undefined}
 >
-	<div class="dialog">
+	<div class="dialog {scrollable ? 'scrollable' : ''}">
 		{#if header || title}
 			<div class="dialog__header">
 				{#if header}
@@ -166,11 +166,7 @@
 	</div>
 </Modal>
 
-<style>:global(.dialog) {
-  color: var(--svelte-ui-dialog-title-color);
-}
-
-.dialog {
+<style>.dialog {
   display: flex;
   flex-direction: column;
   justify-content: stretch;
@@ -218,28 +214,15 @@
   border-bottom: 1px solid var(--svelte-ui-border-weak-color);
 }
 
-:global(.dialog.scrollable) .dialog__header {
+:global(.scrollable) .dialog__header {
   margin-bottom: 0;
   border-bottom: solid var(--svelte-ui-border-width, 1px) var(--svelte-ui-border-weak-color);
 }
-:global(.dialog.scrollable) .dialog__body {
+:global(.scrollable) .dialog__body {
   flex-shrink: 1;
   padding: var(--svelte-ui-dialog-body-padding);
   overflow: auto;
 }
-:global(.dialog.scrollable) .dialog__footer {
+:global(.scrollable) .dialog__footer {
   border-top: solid var(--svelte-ui-border-width, 1px) var(--svelte-ui-border-weak-color);
-}
-
-/* Screen reader only content */
-:global(.sr-only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
 }</style>

package/dist/components/Drawer.svelte

@@ -123,7 +123,9 @@
 	});
 
 	const drawerClasses = $derived(
-		['drawer', `drawer--${position}`, scrollable && 'drawer--scrollable'].filter(Boolean).join(' ')
+		['drawer-wrapper', `drawer-wrapper--${position}`, scrollable && 'drawer-wrapper--scrollable']
+			.filter(Boolean)
+			.join(' ')
 	);
 
 	const ariaLabelledby = $derived(title ? 'drawer-title' : undefined);
@@ -176,7 +178,7 @@
 </Modal>
 
 <style>@charset "UTF-8";
-:global(.drawer) {
+:global(.drawer-wrapper) {
   width: 100%;
   height: 100%;
   min-height: 100%;
@@ -186,7 +188,7 @@
   color: var(--svelte-ui-drawer-title-color);
 }
 
-:global(.drawer:-internal-dialog-in-top-layer) {
+:global(.drawer-wrapper:-internal-dialog-in-top-layer) {
   max-height: none;
   max-width: none;
   width: 100%;
@@ -257,31 +259,31 @@
     transform: translateX(-50%);
   }
 }
-:global(.drawer--right.fade-in) {
+:global(.drawer-wrapper--right.fade-in) {
   animation: fadeInFromRight var(--svelte-ui-transition-duration, 300ms) forwards;
 }
 
-:global(.drawer--right.fade-in::backdrop) {
+:global(.drawer-wrapper--right.fade-in::backdrop) {
   animation: fadeIn var(--svelte-ui-transition-duration, 300ms) forwards;
 }
 
-:global(.drawer--left.fade-in) {
+:global(.drawer-wrapper--left.fade-in) {
   animation: fadeInFromLeft var(--svelte-ui-transition-duration, 300ms) forwards;
 }
 
-:global(.drawer--left.fade-in::backdrop) {
+:global(.drawer-wrapper--left.fade-in::backdrop) {
   animation: fadeIn var(--svelte-ui-transition-duration, 300ms) forwards;
 }
 
-:global(.drawer--left.fade-out) {
+:global(.drawer-wrapper--left.fade-out) {
   animation: fadeOutToLeft var(--svelte-ui-transition-duration, 300ms) forwards;
 }
 
-:global(.drawer--right.fade-out) {
+:global(.drawer-wrapper--right.fade-out) {
   animation: fadeOutToRight var(--svelte-ui-transition-duration, 300ms) forwards;
 }
 
-:global(.drawer.fade-out::backdrop) {
+:global(.drawer-wrapper.fade-out::backdrop) {
   animation: fadeOut var(--svelte-ui-transition-duration, 300ms) forwards;
 }
 
@@ -356,28 +358,16 @@
 
 /* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
-  :global(.drawer.fade-in),
-  :global(.drawer.fade-in::backdrop),
-  :global(.drawer.fade-out),
-  :global(.drawer.fade-out::backdrop),
-  :global(.drawer--left.fade-in),
-  :global(.drawer--left.fade-in::backdrop),
-  :global(.drawer--left.fade-out),
-  :global(.drawer--right.fade-in),
-  :global(.drawer--right.fade-in::backdrop),
-  :global(.drawer--right.fade-out) {
+  :global(.drawer-wrapper.fade-in),
+  :global(.drawer-wrapper.fade-in::backdrop),
+  :global(.drawer-wrapper.fade-out),
+  :global(.drawer-wrapper.fade-out::backdrop),
+  :global(.drawer-wrapper--left.fade-in),
+  :global(.drawer-wrapper--left.fade-in::backdrop),
+  :global(.drawer-wrapper--left.fade-out),
+  :global(.drawer-wrapper--right.fade-in),
+  :global(.drawer-wrapper--right.fade-in::backdrop),
+  :global(.drawer-wrapper--right.fade-out) {
     animation-duration: 0.01s;
   }
-}
-/* Screen reader only content */
-:global(.sr-only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
 }</style>

package/dist/components/Fab.svelte

@@ -452,8 +452,12 @@
   justify-content: center;
 }
 .fab .fab__label {
+  display: block;
   white-space: nowrap;
   user-select: none;
+  text-align: center;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
   transition-property: opacity;
   transition-duration: var(--svelte-ui-transition-duration);
 }

package/dist/components/Popup.svelte

@@ -581,19 +581,6 @@
   animation: fadeOut 300ms forwards;
 }
 
-/* Screen reader only content */
-:global(.sr-only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 /* =============================================
  * Mobile-specific styles
  * ============================================= */

package/dist/components/PopupMenu.svelte

@@ -393,7 +393,7 @@
   }
 }
 /* Enhanced mobile menu styles */
-:global(.mobile .popup-menu) {
+:global(.popup--mobile) .popup-menu {
   border-radius: 0;
   box-shadow: none;
   background: transparent;
@@ -402,7 +402,7 @@
   min-width: auto;
 }
 
-:global(.mobile.fullscreen .popup-menu) {
+:global(.popup--mobile.popup--fullscreen) .popup-menu {
   background: var(--svelte-ui-surface-color);
   border-radius: var(--svelte-ui-popup-mobile-border-radius);
   box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
@@ -410,11 +410,11 @@
   padding: 0;
 }
 
-:global(.mobile.fullscreen .popup-menu__list) {
+:global(.popup--mobile.popup--fullscreen) .popup-menu__list {
   padding: 16px 0;
 }
 
-:global(.mobile.fullscreen .popup-menu__button) {
+:global(.popup--mobile.popup--fullscreen) .popup-menu__button {
   padding: 16px 24px;
   font-size: 1.1rem;
   min-height: var(--svelte-ui-touch-target-lg);

package/dist/components/PopupMenuButton.svelte

@@ -349,17 +349,4 @@
 
 <style>.button-block {
   width: fit-content;
-}
-
-/* Screen reader only content */
-:global(.sr-only) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
 }</style>

package/dist/components/Radio.svelte

@@ -354,6 +354,8 @@
 		display: flex;
 		align-items: center;
 		width: fit-content;
+		min-height: var(--svelte-ui-radio-min-height);
+		contain: layout;
 	}
 
 	.radio input[type='radio'] {
@@ -368,13 +370,15 @@
 
 	/* Label */
 	.radio__label {
-		display: flex;
-		align-items: center;
+		display: block;
+		padding-left: var(--svelte-ui-radio-gap);
 		white-space: nowrap;
 		font-size: inherit;
 		color: inherit;
+		line-height: var(--svelte-ui-radio-line-height);
 		cursor: pointer;
-		min-height: var(--svelte-ui-checkbox-min-height);
+		text-box-trim: trim-both;
+		text-box-edge: cap alphabetic;
 	}
 
 	/* Icon */
@@ -382,7 +386,7 @@
 		position: relative;
 		display: flex;
 		align-items: center;
-		padding: var(--svelte-ui-radio-padding);
+		width: var(--svelte-ui-radio-size);
 		white-space: nowrap;
 		font-size: inherit;
 		color: inherit;
@@ -470,7 +474,7 @@
 	}
 
 	.radio--small .radio__icon {
-		padding: var(--svelte-ui-radio-padding-sm);
+		width: var(--svelte-ui-radio-size-sm);
 		min-height: var(--svelte-ui-radio-min-height-sm);
 	}
 
@@ -494,7 +498,7 @@
 	}
 
 	.radio--large .radio__icon {
-		padding: var(--svelte-ui-radio-padding-lg);
+		width: var(--svelte-ui-radio-size-lg);
 		min-height: var(--svelte-ui-radio-min-height-lg);
 	}
 

package/dist/components/Slider.svelte

@@ -464,10 +464,5 @@
 			width: var(--svelte-ui-slider-thumb-width-mobile);
 			height: var(--svelte-ui-slider-thumb-height-mobile);
 		}
-
-		:global(.slider__custom-thumb) {
-			width: var(--svelte-ui-slider-custom-thumb-size-mobile);
-			height: var(--svelte-ui-slider-custom-thumb-size-mobile);
-		}
 	}
 </style>

package/dist/components/Snackbar.svelte

@@ -117,8 +117,4 @@
 		pointer-events: auto;
 		position: relative;
 	}
-
-	.snackbar__item :global(.snackbar-item__content) {
-		margin-bottom: 0;
-	}
 </style>

package/dist/components/Switch.svelte

@@ -328,12 +328,10 @@
  * Base Styles
   * ============================================= */
 .switch {
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  font-family: var(--svelte-ui-font-family);
-  font-size: inherit;
-  line-height: var(--svelte-ui-line-height);
-  color: var(--svelte-ui-text-color);
+  width: fit-content;
+  contain: layout;
 }
 
 .switch-input {
@@ -350,10 +348,13 @@
 }
 
 .switch__label {
-  display: inline-flex;
-  align-items: center;
+  display: block;
   padding-left: var(--svelte-ui-switch-gap);
+  white-space: nowrap;
+  line-height: var(--svelte-ui-checkbox-line-height);
   cursor: pointer;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
   user-select: none;
 }
 .switch__label--disabled {

package/dist/components/Tab.svelte

@@ -158,23 +158,23 @@
 	data-testid="tab"
 >
 	{#each tabItems as tabItem, index}
-		<div class="tab__item">
-			<TabItem
-				{tabItem}
-				isSelected={index === selectedTabIndex}
-				{textColor}
-				{selectedTextColor}
-				{selectedBarColor}
-			/>
-		</div>
+		<TabItem
+			{tabItem}
+			isSelected={index === selectedTabIndex}
+			{textColor}
+			{selectedTextColor}
+			{selectedBarColor}
+		/>
 	{/each}
 </div>
 
 <style>.tab {
   display: flex;
   justify-content: start;
+  position: relative;
   width: 100%;
   height: 100%;
+  min-height: 36px;
   overflow-x: auto;
   overflow-y: visible;
   -ms-overflow-style: none;
@@ -184,10 +184,4 @@
 
 .tab::-webkit-scrollbar {
   display: none;
-}
-
-.tab__item {
-  display: block;
-  height: 100%;
-  flex-shrink: 0;
 }</style>

package/dist/components/TabItem.svelte

@@ -70,7 +70,7 @@
 		</div>
 	{/if}
 	{#if tabItem.title}
-		<div class="tab-item__text">
+		<div class="tab-item__label">
 			{tabItem.title}
 		</div>
 	{/if}
@@ -83,8 +83,7 @@
   align-items: center;
   gap: 8px;
   position: relative;
-  height: 100%;
-  padding: 0 16px;
+  padding: 8px 16px;
   color: var(--text-color);
   white-space: nowrap;
   text-decoration: none;
@@ -137,4 +136,9 @@
 
 .tab-item--selected::before {
   opacity: 1;
+}
+
+.tab-item__label {
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }</style>

package/dist/components/skeleton/SkeletonText.svelte

@@ -55,7 +55,7 @@
 		<div class="skeleton-text__line" style="width: {widthStyle}">
 			<SkeletonBox
 				width="100%"
-				height="1em"
+				height="1.2em"
 				radius="var(--svelte-ui-skeleton-text-border-radius)"
 				{animated}
 			/>

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