ui-svelte 0.2.11 → 0.2.12

package/dist/display/css/avatar.css

@@ -1,160 +1,178 @@
 @layer components {
 	.avatar {
 		@apply relative flex items-center justify-center;
-		@apply rounded-ui;
-		@apply transition-all duration-200;
-	}
+		@apply rounded-avatar;
+		@apply transition-all duration-300;
+
+		&.is-clickable {
+			@apply cursor-pointer;
+			@apply hover:opacity-80 hover:scale-105;
+			@apply active:scale-95;
+		}
+
+		&.is-bordered {
+			@apply ring-3;
+		}
 
-	.avatar.is-clickable {
-		@apply cursor-pointer;
-		@apply hover:opacity-80 hover:scale-105;
-		@apply active:scale-95;
+		&.is-transparent {
+			@apply bg-transparent;
+		}
 	}
 
-	/* Reset button/anchor styles when used as clickable */
 	button.avatar,
 	a.avatar {
 		@apply border-0 bg-transparent p-0;
 		@apply no-underline;
 	}
 
-	.avatar.is-primary {
-		@apply bg-primary text-on-primary;
-	}
-
-	.avatar.is-secondary {
-		@apply bg-secondary text-on-secondary;
-	}
-
-	.avatar.is-muted {
-		@apply bg-muted text-on-muted;
-	}
-
-	.avatar.is-success {
-		@apply bg-success text-on-success;
-	}
-
-	.avatar.is-warning {
-		@apply bg-warning text-on-warning;
-	}
-
-	.avatar.is-danger {
-		@apply bg-danger text-on-danger;
-	}
-
-	.avatar.is-info {
-		@apply bg-info text-on-info;
-	}
-
-	.avatar.is-bordered {
-		@apply ring-3 ring-background;
-	}
-
-	.avatar.is-transparent {
-		@apply bg-transparent;
-	}
-
-	.avatar-status {
-		@apply absolute bottom-0 right-0 translate-x-[25%];
-	}
-
-	.avatar-indicator {
-		@apply ring ring-background rounded-full;
-	}
-
-	.avatar-indicator.is-online {
-		@apply bg-success;
-	}
-
-	.avatar-indicator.is-busy {
-		@apply bg-warning;
-	}
-
-	.avatar-indicator.is-away {
-		@apply bg-danger;
-	}
-
-	.avatar-indicator.is-offline {
-		@apply bg-muted;
-	}
+	.avatar {
+		&.is-xs {
+			@apply size-5;
+			& .avatar-image {
+				@apply size-5 object-cover rounded-avatar;
+			}
+			& .avatar-name {
+				@apply text-xs;
+			}
+			& .avatar-icon {
+				@apply size-3;
+			}
+			& .avatar-indicator {
+				@apply size-1;
+			}
+		}
 
-	.avatar.is-xs {
-		@apply size-5;
+		&.is-sm {
+			@apply size-6;
+			& .avatar-image {
+				@apply size-6 object-cover rounded-avatar;
+			}
+			& .avatar-name {
+				@apply text-base;
+			}
+			& .avatar-icon {
+				@apply size-4;
+			}
+			& .avatar-indicator {
+				@apply size-2;
+			}
+		}
 
-		.avatar-image {
-			@apply size-5 object-cover rounded-ui;
+		&.is-md {
+			@apply size-7;
+			& .avatar-image {
+				@apply size-7 object-cover rounded-avatar;
+			}
+			& .avatar-name {
+				@apply text-lg;
+			}
+			& .avatar-icon {
+				@apply size-5;
+			}
+			& .avatar-indicator {
+				@apply size-2;
+			}
 		}
 
-		.avatar-name {
-			@apply text-xs;
+		&.is-lg {
+			@apply size-10;
+			& .avatar-image {
+				@apply size-10 object-cover rounded-avatar;
+			}
+			& .avatar-name {
+				@apply text-xl;
+			}
+			& .avatar-icon {
+				@apply size-6;
+			}
+			& .avatar-indicator {
+				@apply size-3;
+			}
 		}
 
-		.avatar-indicator {
-			@apply size-1;
+		&.is-xl {
+			@apply size-14;
+			& .avatar-image {
+				@apply size-14 object-cover rounded-avatar;
+			}
+			& .avatar-name {
+				@apply text-3xl;
+			}
+			& .avatar-icon {
+				@apply size-8;
+			}
+			& .avatar-indicator {
+				@apply size-3;
+			}
 		}
 	}
 
-	.avatar.is-sm {
-		@apply size-6;
-
-		.avatar-image {
-			@apply size-6 object-cover rounded-ui;
+	.avatar.is-soft {
+		&.is-primary {
+			@apply bg-on-primary text-primary ring-primary hover:bg-on-primary/80;
 		}
-
-		.avatar-name {
-			@apply text-base;
+		&.is-secondary {
+			@apply bg-on-secondary text-secondary ring-secondary hover:bg-on-secondary/80;
 		}
-
-		.avatar-indicator {
-			@apply size-2;
+		&.is-muted {
+			@apply bg-muted text-on-muted ring-muted hover:bg-muted/80;
 		}
-	}
-
-	.avatar.is-md {
-		@apply size-7;
-
-		.avatar-image {
-			@apply size-7 object-cover rounded-ui;
+		&.is-success {
+			@apply bg-on-success text-success ring-success hover:bg-on-success/80;
 		}
-
-		.avatar-name {
-			@apply text-xl;
+		&.is-info {
+			@apply bg-on-info text-info ring-info hover:bg-on-info/80;
 		}
-
-		.avatar-indicator {
-			@apply size-2;
+		&.is-warning {
+			@apply bg-on-warning text-warning ring-warning hover:bg-on-warning/80;
+		}
+		&.is-danger {
+			@apply bg-on-danger text-danger ring-danger hover:bg-on-danger/80;
 		}
 	}
 
-	.avatar.is-lg {
-		@apply size-10;
-
-		.avatar-image {
-			@apply size-10 object-cover rounded-ui;
+	.avatar.is-solid {
+		&.is-primary {
+			@apply bg-primary text-on-primary ring-primary hover:bg-primary/80;
 		}
-
-		.avatar-name {
-			@apply text-3xl;
+		&.is-secondary {
+			@apply bg-secondary text-on-secondary ring-secondary hover:bg-secondary/80;
 		}
-
-		.avatar-indicator {
-			@apply size-3;
+		&.is-muted {
+			@apply bg-on-muted text-muted ring-muted hover:bg-on-muted/80;
+		}
+		&.is-success {
+			@apply bg-success text-on-success ring-success hover:bg-success/80;
 		}
+		&.is-info {
+			@apply bg-info text-on-info ring-info hover:bg-info/80;
+		}
+		&.is-warning {
+			@apply bg-warning text-on-warning ring-warning hover:bg-warning/80;
+		}
+		&.is-danger {
+			@apply bg-danger text-on-danger ring-danger hover:bg-danger/80;
+		}
+	}
+
+	.avatar-status {
+		@apply absolute bottom-0 right-0 translate-x-[25%];
 	}
 
-	.avatar.is-xl {
-		@apply size-14;
+	.avatar-indicator {
+		@apply ring ring-background rounded-full;
 
-		.avatar-image {
-			@apply size-14 object-cover rounded-ui;
+		&.is-online {
+			@apply bg-success;
 		}
-
-		.avatar-name {
-			@apply text-5xl;
+		&.is-busy {
+			@apply bg-warning;
 		}
-
-		.avatar-indicator {
-			@apply size-3;
+		&.is-away {
+			@apply bg-danger;
+		}
+		&.is-offline {
+			@apply bg-muted;
 		}
 	}
-}
+}

package/dist/display/css/badge.css

@@ -3,48 +3,71 @@
 		@apply relative w-fit;
 	}
 	.badge-content {
-		@apply absolute flex items-center justify-center rounded-ui;
-		@apply inset-ring inset-ring-muted;
+		@apply absolute flex items-center justify-center rounded-full;
 		@apply h-5 min-w-5 px-1;
 	}
 	.badge-text {
 		@apply text-xs leading-none;
 	}
 
-	/* Position styles */
 	.is-top-left .badge-content {
-		@apply top-0 left-0 translate-x-[-50%] translate-y-[-50%];
+		@apply top-[5%] left-[5%] translate-x-[-50%] translate-y-[-50%];
 	}
 	.is-top-right .badge-content {
-		@apply top-0 right-0 translate-x-[50%] translate-y-[-50%];
+		@apply top-[5%] right-[5%] translate-x-[50%] translate-y-[-50%];
 	}
 	.is-bottom-left .badge-content {
-		@apply bottom-0 left-0 translate-x-[-50%] translate-y-[50%];
+		@apply bottom-[5%] left-[5%] translate-x-[-50%] translate-y-[50%];
 	}
 	.is-bottom-right .badge-content {
-		@apply bottom-0 right-0 translate-x-[50%] translate-y-[50%];
+		@apply bottom-[5%] right-[5%] translate-x-[50%] translate-y-[50%];
 	}
 
-	/* Variant styles */
-	.is-primary .badge-content {
-		@apply bg-primary text-on-primary;
+	.badge.is-solid {
+		&.is-primary .badge-content {
+			@apply bg-primary text-on-primary;
+		}
+		&.is-secondary .badge-content {
+			@apply bg-secondary text-on-secondary;
+		}
+		&.is-muted .badge-content {
+			@apply bg-muted text-on-muted;
+		}
+		&.is-success .badge-content {
+			@apply bg-success text-on-success;
+		}
+		&.is-warning .badge-content {
+			@apply bg-warning text-on-warning;
+		}
+		&.is-danger .badge-content {
+			@apply bg-danger text-on-danger;
+		}
+		&.is-info .badge-content {
+			@apply bg-info text-on-info;
+		}
 	}
-	.is-secondary .badge-content {
-		@apply bg-secondary text-on-secondary;
-	}
-	.is-muted .badge-content {
-		@apply bg-muted text-on-muted;
-	}
-	.is-success .badge-content {
-		@apply bg-success text-on-success;
-	}
-	.is-warning .badge-content {
-		@apply bg-warning text-on-warning;
-	}
-	.is-danger .badge-content {
-		@apply bg-danger text-on-danger;
-	}
-	.is-info .badge-content {
-		@apply bg-info text-on-info;
+
+	.badge.is-soft {
+		&.is-primary .badge-content {
+			@apply bg-on-primary text-primary;
+		}
+		&.is-secondary .badge-content {
+			@apply bg-on-secondary text-secondary;
+		}
+		&.is-muted .badge-content {
+			@apply bg-muted text-on-muted;
+		}
+		&.is-success .badge-content {
+			@apply bg-on-success text-success;
+		}
+		&.is-warning .badge-content {
+			@apply bg-on-warning text-warning;
+		}
+		&.is-danger .badge-content {
+			@apply bg-on-danger text-danger;
+		}
+		&.is-info .badge-content {
+			@apply bg-on-info text-info;
+		}
 	}
 }

package/dist/display/css/card.css

@@ -1,83 +1,67 @@
 @layer components {
 	.card {
-		@apply relative flex flex-col rounded-ui overflow-hidden;
+		@apply relative flex flex-col rounded-box overflow-hidden;
 		@apply transition-all duration-300 ease-in-out;
 
 		&:has(> .card-cover) {
 			@apply bg-transparent! text-white! text-shadow-sm! z-0;
 		}
-	}
-
-	.card.is-primary {
-		@apply bg-on-primary text-primary;
-	}
-
-	.card.is-primary.is-solid {
-		@apply bg-primary text-on-primary;
-	}
-
-	.card.is-secondary {
-		@apply bg-on-secondary text-secondary;
-	}
-
-	.card.is-secondary.is-solid {
-		@apply bg-secondary text-on-secondary;
-	}
-
-	.card.is-success {
-		@apply bg-on-success text-success;
-	}
-
-	.card.is-success.is-solid {
-		@apply bg-success text-on-success;
-	}
-
-	.card.is-info {
-		@apply bg-on-info text-info;
-	}
-
-	.card.is-info.is-solid {
-		@apply bg-info text-on-info;
-	}
-
-	.card.is-warning {
-		@apply bg-on-warning text-warning;
-	}
-
-	.card.is-warning.is-solid {
-		@apply bg-warning text-on-warning;
-	}
-
-	.card.is-danger {
-		@apply bg-on-danger text-danger;
-	}
-
-	.card.is-danger.is-solid {
-		@apply bg-danger text-on-danger;
-	}
-
-	.card.is-muted {
-		@apply bg-muted text-on-muted;
-	}
 
-	.card.is-muted.is-solid {
-		@apply bg-on-muted text-muted;
-	}
+		&.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-default { @apply bg-background text-on-background; }
+			&.is-surface { @apply bg-surface text-on-surface; }
+		}
 
-	.card.is-outlined {
-		@apply border border-muted;
-	}
+		&.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; }
+			&.is-default { @apply bg-background text-on-background; }
+			&.is-surface { @apply bg-surface text-on-surface; }
+		}
 
-	.card.is-surface {
-		@apply bg-surface text-on-surface;
-	}
+		&.is-outlined {
+			@apply border;
+
+			&.is-primary { @apply border-primary text-primary; }
+			&.is-secondary { @apply border-secondary text-secondary; }
+			&.is-muted { @apply border-on-muted text-on-muted; }
+			&.is-success { @apply border-success text-success; }
+			&.is-info { @apply border-info text-info; }
+			&.is-warning { @apply border-warning text-warning; }
+			&.is-danger { @apply border-danger text-danger; }
+			&.is-default { @apply border-on-background text-on-background; }
+			&.is-surface { @apply border-on-surface text-on-surface; }
+		}
 
-	.card.is-ghost {
-		@apply bg-transparent;
+		&.is-ghost {
+			@apply bg-transparent;
+
+			&.is-primary { @apply text-primary; }
+			&.is-secondary { @apply text-secondary; }
+			&.is-muted { @apply text-on-muted; }
+			&.is-success { @apply text-success; }
+			&.is-info { @apply text-info; }
+			&.is-warning { @apply text-warning; }
+			&.is-danger { @apply text-danger; }
+			&.is-default { @apply text-on-background; }
+			&.is-surface { @apply text-on-surface; }
+		}
 	}
 
 	.card-cover {
-		@apply absolute inset-0 object-cover size-full rounded-ui -z-10;
+		@apply absolute inset-0 object-cover size-full rounded-box -z-10;
 	}
 
 	.card-overlay {
@@ -85,11 +69,7 @@
 	}
 
 	.card-body {
-		@apply flex-1 w-full p-4 md:p-6;
-	}
-
-	.card-body:not(.prose) {
-		@apply column gap-4 md:gap-6;
+		@apply flex-1 w-full column gap-4 md:gap-6 p-4 md:p-6;
 	}
 
 	.card-header {

package/dist/display/css/carousel.css

@@ -1,9 +1,9 @@
 @layer components {
 	.carousel {
-		@apply flex flex-col gap-4 relative w-full overflow-hidden;
+		@apply flex flex-col gap-4 relative w-full;
 
 		&.is-vertical {
-			@apply flex-row;
+			@apply flex-row items-center;
 		}
 	}
 
@@ -50,7 +50,7 @@
 	}
 
 	.carousel-controls {
-		@apply flex items-center justify-center gap-2;
+		@apply flex items-center justify-center gap-2 relative z-10;
 
 		&.is-vertical {
 			@apply flex-col;
@@ -70,7 +70,27 @@
 		@apply bg-muted hover:bg-muted/70;
 
 		&.is-active {
-			@apply bg-primary;
+			&.is-primary {
+				@apply bg-primary;
+			}
+			&.is-secondary {
+				@apply bg-secondary;
+			}
+			&.is-muted {
+				@apply bg-on-muted;
+			}
+			&.is-success {
+				@apply bg-success;
+			}
+			&.is-info {
+				@apply bg-info;
+			}
+			&.is-warning {
+				@apply bg-warning;
+			}
+			&.is-danger {
+				@apply bg-danger;
+			}
 		}
 
 		&.is-sm {
@@ -169,7 +189,7 @@
 
 		.carousel-header-nav {
 			@apply flex items-center justify-center w-12 h-12 rounded-full;
-			@apply bg-surface text-on-surface transition-all duration-200;
+			@apply bg-surface text-on-surface transition-all duration-300;
 			@apply border border-muted shadow-sm;
 			@apply hover:bg-muted hover:scale-105 active:scale-95;
 			@apply disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-surface disabled:hover:scale-100;