@celar-ui/svelte 1.8.1 → 2.0.0

package/dist/inputs/TagInput.svelte

@@ -105,70 +105,80 @@
 	/>
 </div>
 
-<style>[data-tag-input] {
-  --color-background: transparent;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: var(--gap--sm);
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
-  transition-duration: var(--transition-dur);
-  transition-property: border-color;
-  transition-timing-function: ease-in-out;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius);
-  background-color: var(--color-background);
-  padding: var(--gap--md);
-  cursor: text;
-}
-[data-tag-input]:focus-within {
-  border: 1px solid var(--color-primary);
-}
-[data-tag-input] input {
-  flex: 1;
-  border: none;
-  outline: none;
-  background: transparent;
-  font-size: inherit;
-  font-family: inherit;
-  color: inherit;
-}
-[data-tag-input] input::-moz-placeholder {
-  opacity: 1;
-  color: rgba(var(--color-onSurface--rgb), 0.7);
-}
-[data-tag-input] input::placeholder {
-  opacity: 1;
-  color: rgba(var(--color-onSurface--rgb), 0.7);
-}
-[data-tag-input] input:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-[data-tag-input] [data-tag-remove] {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  background-color: transparent;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  padding: var(--gap--xs);
-  border-radius: 50%;
-  aspect-ratio: 1;
-  transition-duration: var(--transition-dur);
-  transition-property: background-color;
-  transition-timing-function: ease-in-out;
-  margin-left: var(--gap--sm);
-}
-[data-tag-input] [data-tag-remove]:hover {
-  background-color: var(--color-surfaceContainer);
-}
-[data-tag-input] [data-tag-remove]:focus {
-  outline: 1px solid var(--color-border);
-}
-[data-tag-input] [data-tag-remove] svg {
-  width: var(--gap);
-}</style>
+<style>
+	@reference '$style/index.css';
+
+	@layer components {
+		[data-tag-input] {
+			--color-background: transparent;
+
+			@apply border-onBackground/20 rounded-2xl border border-solid transition-all;
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			gap: --spacing(1.5);
+			position: relative;
+			width: 100%;
+			box-sizing: border-box;
+			background-color: var(--color-background);
+			padding: --spacing(2);
+			cursor: text;
+
+			&:focus-within {
+				@apply border-primary;
+			}
+
+			input {
+				flex: 1;
+				border: none;
+				outline: none;
+				background: transparent;
+				font-size: inherit;
+				font-family: inherit;
+				color: inherit;
+
+				&::-moz-placeholder {
+					@apply text-onBackground/70;
+					opacity: 1;
+				}
+
+				&::placeholder {
+					@apply text-onBackground/70;
+					opacity: 1;
+				}
+
+				&:disabled {
+					opacity: 0.5;
+					cursor: not-allowed;
+				}
+			}
+
+			[data-tag-remove] {
+				@apply transition-all;
+				display: inline-flex;
+				justify-content: center;
+				align-items: center;
+				background-color: transparent;
+				border: none;
+				color: inherit;
+				cursor: pointer;
+				padding: --spacing(1);
+				border-radius: 50%;
+				aspect-ratio: 1;
+				margin-left: --spacing(1.5);
+
+				&:hover {
+					background-color: var(--color-surfaceContainer);
+				}
+
+				&:focus {
+					@apply outline-onBackground/20 outline outline-solid;
+				}
+
+				svg {
+					width: --spacing(4);
+				}
+			}
+		}
+	}
+</style>

package/dist/inputs/TextInput.svelte

@@ -19,79 +19,86 @@
 	<div data-text-input-placeholder>{placeholder}</div>
 </label>
 
-<style>[data-text-input] {
-  margin: 0;
-  padding: 0;
-  display: block;
-  position: relative;
-  width: 100%;
-  pointer-events: all;
-}
-[data-text-input] input {
-  box-sizing: border-box;
-  transition-duration: var(--transition-dur);
-  transition-property: border-color;
-  transition-timing-function: ease-in-out;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius);
-  background-color: transparent;
-  padding: var(--gap--md) var(--gap);
-  padding-left: 48px;
-  width: 100%;
-  font-size: inherit;
-  font-family: inherit;
-  color: inherit;
-}
-[data-text-input] input:focus {
-  outline: none;
-  border: 1px solid var(--color-primary);
-  caret-color: var(--color-primary);
-}
-[data-text-input] input:focus + [data-text-input-icon] {
-  color: var(--color-primary);
-}
-[data-text-input] input:is(:-moz-placeholder) ~ [data-text-input-placeholder] {
-  transform: translateY(50%);
-  visibility: hidden;
-  opacity: 0;
-}
-[data-text-input] input:is(:placeholder-shown) ~ [data-text-input-placeholder] {
-  transform: translateY(50%);
-  visibility: hidden;
-  opacity: 0;
-}
-[data-text-input] input::-moz-placeholder {
-  opacity: 1;
-  color: rgba(var(--color-onSurface--rgb), 0.7);
-}
-[data-text-input] input::placeholder {
-  opacity: 1;
-  color: rgba(var(--color-onSurface--rgb), 0.7);
-}
-[data-text-input] [data-text-input-icon] {
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  justify-content: center;
-  align-items: center;
-  transition-duration: var(--transition-dur);
-  transition-property: color;
-  transition-timing-function: ease-in-out;
-  width: 48px;
-  height: 100%;
-  pointer-events: none;
-}
-[data-text-input] [data-text-input-placeholder] {
-  position: absolute;
-  transition-duration: var(--transition-dur);
-  transition-property: visibility, opacity, transform;
-  pointer-events: none;
-  color: rgba(var(--color-onSurface--rgb), 0.7);
-  font-size: 0.8em;
-  top: 0;
-  right: var(--gap);
-  transform: translateY(0);
-  visibility: visible;
-  opacity: 1;
-}</style>
+<style>
+	@reference '$style/index.css';
+
+	@layer components {
+		[data-text-input] {
+			margin: 0;
+			padding: 0;
+			display: block;
+			position: relative;
+			width: 100%;
+			pointer-events: all;
+
+			input {
+				@apply border-onBackground/20 rounded-2xl border border-solid transition-all;
+				box-sizing: border-box;
+				background-color: transparent;
+				padding: --spacing(1.5) --spacing(4);
+				padding-left: --spacing(14);
+				width: 100%;
+				font-size: inherit;
+				font-family: inherit;
+				color: inherit;
+
+				&:focus {
+					@apply border-primary;
+					outline: none;
+					caret-color: var(--color-primary);
+
+					+ [data-text-input-icon] {
+						color: var(--color-primary);
+					}
+				}
+
+				&:is(:-moz-placeholder) ~ [data-text-input-placeholder] {
+					transform: translateY(50%);
+					visibility: hidden;
+					opacity: 0;
+				}
+
+				&:is(:placeholder-shown) ~ [data-text-input-placeholder] {
+					transform: translateY(50%);
+					visibility: hidden;
+					opacity: 0;
+				}
+
+				&::-moz-placeholder {
+					@apply text-onBackground/70;
+					opacity: 1;
+				}
+
+				&::placeholder {
+					@apply text-onBackground/70;
+					opacity: 1;
+				}
+			}
+
+			[data-text-input-icon] {
+				@apply transition-all;
+				display: flex;
+				position: absolute;
+				top: 0;
+				left: 0;
+				justify-content: center;
+				align-items: center;
+				width: --spacing(14);
+				height: 100%;
+				pointer-events: none;
+			}
+
+			[data-text-input-placeholder] {
+				@apply text-onBackground/70 transition-all;
+				position: absolute;
+				pointer-events: none;
+				font-size: 0.8em;
+				top: 0;
+				right: --spacing(4);
+				transform: translateY(0);
+				visibility: visible;
+				opacity: 1;
+			}
+		}
+	}
+</style>

package/dist/inputs/styles/radio_group.css

@@ -0,0 +1,6 @@
+@reference '$style/index.css';
+@layer components {
+	[data-radio-group-root] {
+		position: relative;
+	}
+}

package/dist/misc/Badge.svelte

@@ -13,43 +13,51 @@
 	{@render children?.()}
 </span>
 
-<style>[data-badge] {
-  box-sizing: border-box;
-  border-radius: var(--gap);
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-[data-badge][data-color=surface] {
-  background-color: var(--color-surfaceContainerHighest);
-  color: var(--color-onSurface);
-}
-[data-badge][data-color=info] {
-  background-color: var(--color-info);
-  color: var(--color-onInfo);
-}
-[data-badge][data-color=success] {
-  background-color: var(--color-success);
-  color: var(--color-onSuccess);
-}
-[data-badge][data-color=warning] {
-  background-color: var(--color-warning);
-  color: var(--color-onWarning);
-}
-[data-badge][data-color=error] {
-  background-color: var(--color-error);
-  color: var(--color-onError);
-}
-[data-badge][data-size=small] {
-  font-size: 0.8em;
-  padding: var(--gap--sm) var(--gap--half);
-}
-[data-badge][data-size=medium] {
-  font-size: 0.9em;
-  padding: var(--gap--sm) var(--gap--half);
-}
-[data-badge][data-size=large] {
-  font-size: 1em;
-  padding: var(--gap--sm) var(--gap--md);
-}</style>
+<style>
+	@reference '$style/index.css';
+
+	@layer components {
+		[data-badge] {
+			box-sizing: border-box;
+			border-radius: var(--radius-2xl);
+			line-height: 1;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+
+			&[data-color='surface'] {
+				background-color: var(--color-surfaceContainerHighest);
+				color: var(--color-onSurface);
+			}
+			&[data-color='info'] {
+				background-color: var(--color-info);
+				color: var(--color-onInfo);
+			}
+			&[data-color='success'] {
+				background-color: var(--color-success);
+				color: var(--color-onSuccess);
+			}
+			&[data-color='warning'] {
+				background-color: var(--color-warning);
+				color: var(--color-onWarning);
+			}
+			&[data-color='error'] {
+				background-color: var(--color-error);
+				color: var(--color-onError);
+			}
+
+			&[data-size='small'] {
+				font-size: 0.8em;
+				padding: --spacing(1.5) --spacing(2);
+			}
+			&[data-size='medium'] {
+				font-size: 0.9em;
+				padding: --spacing(1.5) --spacing(2);
+			}
+			&[data-size='large'] {
+				font-size: 1em;
+				padding: --spacing(1.5) --spacing(3);
+			}
+		}
+	}
+</style>

package/dist/misc/DotSpinner.svelte

@@ -69,7 +69,11 @@
 	</g>
 </svg>
 
-<style>svg {
-  display: inline-block;
-  aspect-ratio: 1;
-}</style>
+<style>
+	@layer components {
+		svg {
+			display: inline-block;
+			aspect-ratio: 1;
+		}
+	}
+</style>

package/dist/misc/DuckSpinner.svelte

@@ -137,73 +137,95 @@
 	</g>
 </svg>
 
-<style>[data-duck-spinner] .line {
-  fill: none;
-  stroke: var(--color-onSurface);
-  stroke-width: 1.2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-dasharray: none;
-  transition-duration: var(--transition-duration);
-  transition-property: stroke;
-}
-[data-duck-spinner] .spinner {
-  transform-origin: center;
-  scale: 1.1;
-}
-[data-duck-spinner] .spinner > * {
-  transform-origin: center;
-  opacity: 0.64;
-  animation-duration: 3s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  animation-name: spin;
-}
-[data-duck-spinner] .spinner .circle-1 {
-  scale: 0.85;
-  opacity: 0.32;
-  animation-direction: reverse;
-}
-@keyframes spin {
-  from {
-    rotate: 0;
-  }
-  to {
-    rotate: 359deg;
-  }
-}
-[data-duck-spinner] .duck {
-  transform-origin: center;
-  scale: 1.2;
-  animation-duration: 2s;
-  animation-timing-function: ease;
-  animation-iteration-count: infinite;
-  animation-name: slay;
-}
-@keyframes slay {
-  0% {
-    rotate: -24deg;
-  }
-  50% {
-    rotate: 24deg;
-  }
-  100% {
-    rotate: -24deg;
-  }
-}
-[data-duck-spinner] .duck .body {
-  stroke-width: 1.5;
-}
-[data-duck-spinner] .duck .eye {
-  stroke-width: 1;
-}
-
-[data-thin=true] .line {
-  stroke-width: 0.5;
-}
-[data-thin=true] .duck .body {
-  stroke-width: 1;
-}
-[data-thin=true] .duck .eye {
-  stroke-width: 0.8;
-}</style>
+<style>
+	@reference '$style/index.css';
+
+	@layer components {
+		[data-duck-spinner] {
+			.line {
+				fill: none;
+				stroke: var(--color-onSurface);
+				stroke-width: 1.2;
+				stroke-linecap: round;
+				stroke-linejoin: round;
+				stroke-dasharray: none;
+				transition-duration: var(--tw-duration, 150ms);
+				transition-property: stroke;
+			}
+
+			.spinner {
+				transform-origin: center;
+				scale: 1.1;
+
+				& > * {
+					transform-origin: center;
+					opacity: 0.64;
+					animation-duration: 3s;
+					animation-timing-function: linear;
+					animation-iteration-count: infinite;
+					animation-name: spin;
+				}
+
+				.circle-1 {
+					scale: 0.85;
+					opacity: 0.32;
+					animation-direction: reverse;
+				}
+
+				@keyframes spin {
+					from {
+						rotate: 0;
+					}
+					to {
+						rotate: 359deg;
+					}
+				}
+			}
+
+			.duck {
+				transform-origin: center;
+				scale: 1.2;
+				animation-duration: 2s;
+				animation-timing-function: ease;
+				animation-iteration-count: infinite;
+				animation-name: slay;
+
+				@keyframes slay {
+					0% {
+						rotate: -24deg;
+					}
+					50% {
+						rotate: 24deg;
+					}
+					100% {
+						rotate: -24deg;
+					}
+				}
+
+				.body {
+					stroke-width: 1.5;
+				}
+
+				.eye {
+					stroke-width: 1;
+				}
+			}
+		}
+
+		[data-thin='true'] {
+			.line {
+				stroke-width: 0.5;
+			}
+
+			.duck {
+				.body {
+					stroke-width: 1;
+				}
+
+				.eye {
+					stroke-width: 0.8;
+				}
+			}
+		}
+	}
+</style>

package/dist/misc/Gap.svelte

@@ -8,9 +8,15 @@
 
 <div data-gap style:width={size}></div>
 
-<style>[data-gap] {
-  display: block;
-  aspect-ratio: 1;
-  width: 1rem;
-  height: auto;
-}</style>
+<style>
+	@reference '$style/index.css';
+
+	@layer components {
+		[data-gap] {
+			display: block;
+			aspect-ratio: 1;
+			width: 1rem;
+			height: auto;
+		}
+	}
+</style>