ui-svelte 0.2.10 → 0.2.12

package/dist/control/css/media.css

@@ -1,17 +1,60 @@
 @layer components {
-	/* Base styles compartidos */
 	.media {
-		@apply relative flex items-center gap-3 rounded-ui;
+		@apply relative flex items-center w-full gap-3 rounded-box;
 		@apply transition-colors duration-300 ease-in-out;
-		@apply p-3 max-w-md select-none;
+		@apply px-3 py-1.5 select-none;
+
+		&.is-soft {
+			&.is-primary {
+				@apply bg-on-primary text-primary;
+			}
+			&.is-secondary {
+				@apply bg-on-secondary text-secondary;
+			}
+			&.is-muted {
+				@apply bg-muted text-on-muted;
+			}
+			&.is-success {
+				@apply bg-on-success text-success;
+			}
+			&.is-info {
+				@apply bg-on-info text-info;
+			}
+			&.is-warning {
+				@apply bg-on-warning text-warning;
+			}
+			&.is-danger {
+				@apply bg-on-danger text-danger;
+			}
+		}
+
+		&.is-solid {
+			&.is-primary {
+				@apply bg-primary text-on-primary;
+			}
+			&.is-secondary {
+				@apply bg-secondary text-on-secondary;
+			}
+			&.is-muted {
+				@apply bg-on-muted text-muted;
+			}
+			&.is-success {
+				@apply bg-success text-on-success;
+			}
+			&.is-info {
+				@apply bg-info text-on-info;
+			}
+			&.is-warning {
+				@apply bg-warning text-on-warning;
+			}
+			&.is-danger {
+				@apply bg-danger text-on-danger;
+			}
+		}
 	}
 
 	.media-waveform {
-		@apply flex-1 h-10 flex items-center relative;
-	}
-
-	.media-waveform.clickable {
-		@apply cursor-pointer;
+		@apply w-full shrink-0 h-8 flex items-center relative pt-4;
 	}
 
 	.media-loading {
@@ -23,7 +66,7 @@
 	}
 
 	.media-bar {
-		@apply flex-1 rounded-sm transition-all duration-100;
+		@apply flex-1 rounded-sm transition-all duration-300;
 		@apply min-h-1 bg-current opacity-30;
 	}
 
@@ -35,44 +78,66 @@
 		@apply opacity-100 animate-pulse;
 	}
 
-	.media-time {
-		@apply shrink-0 text-sm font-medium min-w-10 text-right;
+	.media-bar.loading {
+		animation: shimmer 1.5s ease-in-out infinite;
 	}
 
-	/* Variantes */
-	.media.primary {
-		@apply bg-primary text-on-primary;
+	@keyframes shimmer {
+		0%,
+		100% {
+			opacity: 0.15;
+		}
+		50% {
+			opacity: 0.35;
+		}
 	}
 
-	.media.secondary {
-		@apply bg-secondary text-on-secondary;
+	.media-bars.loading .media-bar:nth-child(odd) {
+		animation-delay: 0.2s;
+	}
+	.media-bars.loaded .media-bar {
+		animation: wave-appear 0.4s ease-out forwards;
 	}
 
-	.media.soft {
-		@apply bg-on-primary text-primary;
+	@keyframes wave-appear {
+		from {
+			opacity: 0;
+			transform: scaleY(0.3);
+		}
+		to {
+			opacity: 0.3;
+			transform: scaleY(1);
+		}
 	}
 
-	.media.outlined {
-		@apply inset-ring inset-ring-muted bg-background text-on-background;
+	.media-bars.loaded .media-bar.active {
+		animation: wave-appear-active 0.4s ease-out forwards;
 	}
 
-	.media.ghost {
-		@apply bg-transparent text-on-background;
+	@keyframes wave-appear-active {
+		from {
+			opacity: 0;
+			transform: scaleY(0.3);
+		}
+		to {
+			opacity: 1;
+			transform: scaleY(1);
+		}
 	}
 
-	.media.success {
-		@apply bg-success text-on-success;
+	.media-content {
+		@apply flex-1 flex flex-col gap-0.5;
 	}
 
-	.media.warning {
-		@apply bg-warning text-on-warning;
+	.media-footer {
+		@apply flex items-center justify-between text-xs opacity-70;
 	}
 
-	.media.info {
-		@apply bg-info text-on-info;
+	.media-time {
+		@apply shrink-0 font-medium;
 	}
 
-	.media.danger {
-		@apply bg-danger text-on-danger;
+	.media-subtitle {
+		@apply truncate;
 	}
 }

package/dist/control/css/toggle-group.css

@@ -1,85 +1,270 @@
 @layer components {
-    .toggle-group {
-        @apply flex w-fit rounded-ui bg-muted p-1;
-    }
-
-    .toggle-group.is-vertical {
-        @apply flex-col;
-    }
-
-    .toggle-group-item {
-        @apply relative flex items-center justify-center flex-nowrap;
-        @apply font-medium whitespace-nowrap;
-        @apply rounded-ui outline-none;
-        @apply cursor-pointer select-none;
-        @apply transition-all duration-200;
-        @apply disabled:cursor-not-allowed disabled:opacity-50;
-    }
-
-    .toggle-group-item.is-xs {
-        @apply h-6 gap-2 px-2 text-xs;
-
-        .icon {
-            @apply h-4 w-auto;
-        }
-    }
-
-    .toggle-group-item.is-sm {
-        @apply h-8 gap-2 px-2 text-xs;
-
-        .icon {
-            @apply h-4 w-auto;
-        }
-    }
-
-    .toggle-group-item.is-md {
-        @apply h-10 gap-3 px-3 text-sm;
-
-        .icon {
-            @apply h-5 w-auto;
-        }
-    }
-
-    .toggle-group-item.is-lg {
-        @apply h-12 gap-3 px-4 text-lg;
-
-        .icon {
-            @apply h-6 w-auto;
-        }
-    }
-
-    .toggle-group-item.is-active {
-        @apply bg-background text-on-background shadow-sm;
-    }
-
-    .toggle-group-item:not(.is-active) {
-        @apply text-on-muted hover:text-on-background;
-    }
-
-    .toggle-group.is-wide {
-        @apply w-full;
-    }
-
-    .toggle-group.is-wide .toggle-group-item {
-        @apply flex-1;
-    }
-
-    /* Primary variant */
-    .toggle-group.is-primary .toggle-group-item.is-active {
-        @apply bg-primary text-on-primary;
-    }
-
-    /* Secondary variant */
-    .toggle-group.is-secondary .toggle-group-item.is-active {
-        @apply bg-secondary text-on-secondary;
-    }
-
-    /* Outlined variant */
-    .toggle-group.is-outlined {
-        @apply bg-transparent inset-ring inset-ring-muted;
-    }
-
-    .toggle-group.is-outlined .toggle-group-item.is-active {
-        @apply bg-muted text-on-muted;
-    }
-}
+	.toggle-group {
+		@apply flex w-fit rounded-ui p-1;
+	}
+
+	.toggle-group.is-vertical {
+		@apply flex-col;
+	}
+
+	.toggle-group-item {
+		@apply relative flex items-center justify-center flex-nowrap;
+		@apply font-medium whitespace-nowrap;
+		@apply rounded-ui outline-none;
+		@apply cursor-pointer select-none;
+		@apply transition-all duration-300;
+		@apply disabled:cursor-not-allowed disabled:opacity-50;
+	}
+
+	.toggle-group-item.is-xs {
+		@apply h-6 gap-2 px-2 text-xs;
+
+		.icon {
+			@apply h-4 w-auto;
+		}
+	}
+
+	.toggle-group-item.is-sm {
+		@apply h-8 gap-2 px-2 text-xs;
+
+		.icon {
+			@apply h-4 w-auto;
+		}
+	}
+
+	.toggle-group-item.is-md {
+		@apply h-10 gap-3 px-3 text-sm;
+
+		.icon {
+			@apply h-5 w-auto;
+		}
+	}
+
+	.toggle-group-item.is-lg {
+		@apply h-12 gap-3 px-4 text-lg;
+
+		.icon {
+			@apply h-6 w-auto;
+		}
+	}
+
+	.toggle-group.is-wide {
+		@apply w-full;
+	}
+
+	.toggle-group.is-wide .toggle-group-item {
+		@apply flex-1;
+	}
+
+	/* ===================== */
+	/* Soft Variant (default) */
+	/* ===================== */
+
+	.toggle-group.is-soft {
+		@apply bg-muted;
+	}
+
+	.toggle-group.is-soft .toggle-group-item:not(.is-active) {
+		@apply text-on-muted hover:text-on-background;
+	}
+
+	.toggle-group.is-soft .toggle-group-item.is-active {
+		@apply bg-background text-on-background shadow-sm;
+	}
+
+	.toggle-group.is-soft.is-primary .toggle-group-item.is-active {
+		@apply bg-primary text-on-primary;
+	}
+
+	.toggle-group.is-soft.is-secondary .toggle-group-item.is-active {
+		@apply bg-secondary text-on-secondary;
+	}
+
+	.toggle-group.is-soft.is-muted .toggle-group-item.is-active {
+		@apply bg-background text-on-background;
+	}
+
+	.toggle-group.is-soft.is-success .toggle-group-item.is-active {
+		@apply bg-success text-on-success;
+	}
+
+	.toggle-group.is-soft.is-info .toggle-group-item.is-active {
+		@apply bg-info text-on-info;
+	}
+
+	.toggle-group.is-soft.is-warning .toggle-group-item.is-active {
+		@apply bg-warning text-on-warning;
+	}
+
+	.toggle-group.is-soft.is-danger .toggle-group-item.is-active {
+		@apply bg-danger text-on-danger;
+	}
+
+	/* ===================== */
+	/* Solid Variant */
+	/* ===================== */
+
+	.toggle-group.is-solid.is-primary {
+		@apply bg-on-primary;
+	}
+
+	.toggle-group.is-solid.is-primary .toggle-group-item:not(.is-active) {
+		@apply text-primary hover:text-primary/80;
+	}
+
+	.toggle-group.is-solid.is-primary .toggle-group-item.is-active {
+		@apply bg-primary text-on-primary;
+	}
+
+	.toggle-group.is-solid.is-secondary {
+		@apply bg-on-secondary;
+	}
+
+	.toggle-group.is-solid.is-secondary .toggle-group-item:not(.is-active) {
+		@apply text-secondary hover:text-secondary/80;
+	}
+
+	.toggle-group.is-solid.is-secondary .toggle-group-item.is-active {
+		@apply bg-secondary text-on-secondary;
+	}
+
+	.toggle-group.is-solid.is-muted {
+		@apply bg-muted;
+	}
+
+	.toggle-group.is-solid.is-muted .toggle-group-item:not(.is-active) {
+		@apply text-on-muted hover:text-on-background;
+	}
+
+	.toggle-group.is-solid.is-muted .toggle-group-item.is-active {
+		@apply bg-on-muted text-muted;
+	}
+
+	.toggle-group.is-solid.is-success {
+		@apply bg-on-success;
+	}
+
+	.toggle-group.is-solid.is-success .toggle-group-item:not(.is-active) {
+		@apply text-success hover:text-success/80;
+	}
+
+	.toggle-group.is-solid.is-success .toggle-group-item.is-active {
+		@apply bg-success text-on-success;
+	}
+
+	.toggle-group.is-solid.is-info {
+		@apply bg-on-info;
+	}
+
+	.toggle-group.is-solid.is-info .toggle-group-item:not(.is-active) {
+		@apply text-info hover:text-info/80;
+	}
+
+	.toggle-group.is-solid.is-info .toggle-group-item.is-active {
+		@apply bg-info text-on-info;
+	}
+
+	.toggle-group.is-solid.is-warning {
+		@apply bg-on-warning;
+	}
+
+	.toggle-group.is-solid.is-warning .toggle-group-item:not(.is-active) {
+		@apply text-warning hover:text-warning/80;
+	}
+
+	.toggle-group.is-solid.is-warning .toggle-group-item.is-active {
+		@apply bg-warning text-on-warning;
+	}
+
+	.toggle-group.is-solid.is-danger {
+		@apply bg-on-danger;
+	}
+
+	.toggle-group.is-solid.is-danger .toggle-group-item:not(.is-active) {
+		@apply text-danger hover:text-danger/80;
+	}
+
+	.toggle-group.is-solid.is-danger .toggle-group-item.is-active {
+		@apply bg-danger text-on-danger;
+	}
+
+	/* ===================== */
+	/* Outlined Variant */
+	/* ===================== */
+
+	.toggle-group.is-outlined {
+		@apply bg-transparent inset-ring inset-ring-muted;
+	}
+
+	.toggle-group.is-outlined .toggle-group-item:not(.is-active) {
+		@apply text-on-muted hover:text-on-background;
+	}
+
+	.toggle-group.is-outlined.is-primary .toggle-group-item.is-active {
+		@apply bg-primary text-on-primary;
+	}
+
+	.toggle-group.is-outlined.is-secondary .toggle-group-item.is-active {
+		@apply bg-secondary text-on-secondary;
+	}
+
+	.toggle-group.is-outlined.is-muted .toggle-group-item.is-active {
+		@apply bg-muted text-on-muted;
+	}
+
+	.toggle-group.is-outlined.is-success .toggle-group-item.is-active {
+		@apply bg-success text-on-success;
+	}
+
+	.toggle-group.is-outlined.is-info .toggle-group-item.is-active {
+		@apply bg-info text-on-info;
+	}
+
+	.toggle-group.is-outlined.is-warning .toggle-group-item.is-active {
+		@apply bg-warning text-on-warning;
+	}
+
+	.toggle-group.is-outlined.is-danger .toggle-group-item.is-active {
+		@apply bg-danger text-on-danger;
+	}
+
+	/* ===================== */
+	/* Ghost Variant */
+	/* ===================== */
+
+	.toggle-group.is-ghost {
+		@apply bg-transparent p-0;
+	}
+
+	.toggle-group.is-ghost .toggle-group-item:not(.is-active) {
+		@apply text-on-muted hover:text-on-background;
+	}
+
+	.toggle-group.is-ghost.is-primary .toggle-group-item.is-active {
+		@apply bg-on-primary text-primary;
+	}
+
+	.toggle-group.is-ghost.is-secondary .toggle-group-item.is-active {
+		@apply bg-on-secondary text-secondary;
+	}
+
+	.toggle-group.is-ghost.is-muted .toggle-group-item.is-active {
+		@apply bg-muted text-on-muted;
+	}
+
+	.toggle-group.is-ghost.is-success .toggle-group-item.is-active {
+		@apply bg-on-success text-success;
+	}
+
+	.toggle-group.is-ghost.is-info .toggle-group-item.is-active {
+		@apply bg-on-info text-info;
+	}
+
+	.toggle-group.is-ghost.is-warning .toggle-group-item.is-active {
+		@apply bg-on-warning text-warning;
+	}
+
+	.toggle-group.is-ghost.is-danger .toggle-group-item.is-active {
+		@apply bg-on-danger text-danger;
+	}
+}

package/dist/control/css/video.css

@@ -2,7 +2,7 @@
 	.video {
 		@apply relative aspect-video;
 		video {
-			@apply rounded-ui absolute z-0;
+			@apply rounded-box absolute z-0;
 		}
 	}
 	.video.horizontal {
@@ -29,9 +29,6 @@
 	.video-actions-start {
 		@apply flex justify-start items-center w-full gap-2;
 	}
-	.video-actions-center {
-		@apply flex-1 flex justify-center items-center w-full gap-2;
-	}
 	.video-actions-end {
 		@apply flex justify-end items-center w-full gap-2;
 	}
@@ -39,16 +36,6 @@
 		@apply px-2 md:px-3 pb-2 rounded-b-lg pt-2;
 		@apply flex justify-between items-center gap-2;
 	}
-	.video-duration-info {
-		@apply text-sm text-white;
-	}
-	.video-btn {
-		@apply flex items-center justify-center gap-1 p-1;
-		@apply bg-black/30 hover:bg-black/50 rounded-ui cursor-pointer;
-	}
-	.video-btn-icon {
-		@apply size-5 text-white;
-	}
 	.video-volume {
 		@apply max-w-28 flex items-center;
 	}