@celar-ui/svelte 1.8.1 → 2.0.0

package/dist/buttons/BaseButton.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import './styles/base_button.scss';
-
 	import { Button, type ButtonRootProps } from 'bits-ui';
 
 	export type BaseButtonProps = ButtonRootProps & {

package/dist/buttons/BaseButton.svelte.d.ts

@@ -1,4 +1,3 @@
-import './styles/base_button.scss';
 import { type ButtonRootProps } from 'bits-ui';
 export type BaseButtonProps = ButtonRootProps & {
     loading?: boolean;

package/dist/buttons/ElevatedButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import './styles/elevated_button.scss';
+	import './styles/elevated_button.css';
 	import TextBaseButton from './TextBaseButton.svelte';
 	import type { TextBaseButtonProps } from './TextBaseButton.svelte';
 
@@ -7,5 +7,3 @@
 </script>
 
 <TextBaseButton {...props} data-button-elevated />
-
-

package/dist/buttons/ElevatedButton.svelte.d.ts

@@ -1,4 +1,4 @@
-import './styles/elevated_button.scss';
+import './styles/elevated_button.css';
 import type { TextBaseButtonProps } from './TextBaseButton.svelte';
 declare const ElevatedButton: import("svelte").Component<TextBaseButtonProps, {}, "">;
 type ElevatedButton = ReturnType<typeof ElevatedButton>;

package/dist/buttons/ExpandedTextButton.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import './styles/expanded_text_button.scss';
+	import './styles/expanded_text_button.css';
 	import TextBaseButton from './TextBaseButton.svelte';
 	import type { TextBaseButtonProps } from './TextBaseButton.svelte';
 
-	let { gap = 'var(--gap)', ...rest }: TextBaseButtonProps = $props();
+	let { gap = 'calc(var(--spacing) * 4)', ...rest }: TextBaseButtonProps = $props();
 </script>
 
 <TextBaseButton {...rest} {gap} data-button-text-expanded />

package/dist/buttons/ExpandedTextButton.svelte.d.ts

@@ -1,4 +1,4 @@
-import './styles/expanded_text_button.scss';
+import './styles/expanded_text_button.css';
 import type { TextBaseButtonProps } from './TextBaseButton.svelte';
 declare const ExpandedTextButton: import("svelte").Component<TextBaseButtonProps, {}, "">;
 type ExpandedTextButton = ReturnType<typeof ExpandedTextButton>;

package/dist/buttons/FilledButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import './styles/filled_button.scss';
+	import './styles/filled_button.css';
 	import TextBaseButton from './TextBaseButton.svelte';
 	import type { TextBaseButtonProps } from './TextBaseButton.svelte';
 
@@ -7,4 +7,3 @@
 </script>
 
 <TextBaseButton {...props} data-button-filled />
-

package/dist/buttons/FilledButton.svelte.d.ts

@@ -1,4 +1,4 @@
-import './styles/filled_button.scss';
+import './styles/filled_button.css';
 import type { TextBaseButtonProps } from './TextBaseButton.svelte';
 declare const FilledButton: import("svelte").Component<TextBaseButtonProps, {}, "">;
 type FilledButton = ReturnType<typeof FilledButton>;

package/dist/buttons/IconButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import './styles/icon_button.scss';
+	import './styles/icon_button.css';
 	import DotSpinner from '../misc/DotSpinner.svelte';
 	import BaseButton from './BaseButton.svelte';
 	import type { BaseButtonProps } from './BaseButton.svelte';

package/dist/buttons/IconButton.svelte.d.ts

@@ -1,4 +1,4 @@
-import './styles/icon_button.scss';
+import './styles/icon_button.css';
 import type { BaseButtonProps } from './BaseButton.svelte';
 declare const IconButton: import("svelte").Component<BaseButtonProps, {}, "">;
 type IconButton = ReturnType<typeof IconButton>;

package/dist/buttons/OutlinedButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import './styles/outlined_button.scss';
+	import './styles/outlined_button.css';
 	import TextBaseButton from './TextBaseButton.svelte';
 	import type { TextBaseButtonProps } from './TextBaseButton.svelte';
 
@@ -7,5 +7,3 @@
 </script>
 
 <TextBaseButton {...props} data-button-outlined />
-
-

package/dist/buttons/OutlinedButton.svelte.d.ts

@@ -1,4 +1,4 @@
-import './styles/outlined_button.scss';
+import './styles/outlined_button.css';
 import type { TextBaseButtonProps } from './TextBaseButton.svelte';
 declare const OutlinedButton: import("svelte").Component<TextBaseButtonProps, {}, "">;
 type OutlinedButton = ReturnType<typeof OutlinedButton>;

package/dist/buttons/TextBaseButton.svelte

@@ -14,59 +14,28 @@
 		loading,
 		icon,
 		active = false,
-		gap = 'var(--gap--half)',
+		gap = 'calc(var(--spacing) * 2)',
 		...rest
 	}: TextBaseButtonProps = $props();
+	let visibility = $derived(loading ? 'hidden' : 'initial');
 </script>
 
-{#snippet baseChildren()}
-	<div class="button-body" style:visibility={loading ? 'hidden' : 'initial'} style:--body-gap={gap}>
-		{#if icon}
-			<span class="button-icon">
-				{@render icon()}
-			</span>
-		{/if}
-
-		<span class="button-content">
-			{#if children}
-				{@render children()}
-			{/if}
+<BaseButton {...rest} {loading} {active} data-button-base-text style="--body-gap: {gap}">
+	{#if icon}
+		<span class="button-icon" style:visibility>
+			{@render icon()}
 		</span>
-	</div>
+	{/if}
+
+	<span class="button-content" style:visibility>
+		{#if children}
+			{@render children()}
+		{/if}
+	</span>
 
 	{#if loading}
-		<div class="button-spinner">
+		<div class="absolute top-0 left-0 flex h-full w-full items-center justify-center">
 			<DotSpinner size="24px" />
 		</div>
 	{/if}
-{/snippet}
-
-<BaseButton {...rest} children={baseChildren} {loading} {active} data-button-base-text />
-
-<style>:global([data-button-base-text]) {
-  border-radius: var(--radius);
-}
-
-.button-body {
-  display: flex;
-  align-items: center;
-  gap: var(--body-gap);
-  padding: 0 var(--gap);
-}
-.button-body .button-content {
-  padding: var(--gap--half) 0;
-}
-.button-body .button-icon {
-  line-height: 0;
-}
-
-.button-spinner {
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}</style>
+</BaseButton>

package/dist/buttons/TextButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import './styles/text_button.scss';
+	import './styles/text_button.css';
 	import TextBaseButton from './TextBaseButton.svelte';
 	import type { TextBaseButtonProps } from './TextBaseButton.svelte';
 
@@ -7,5 +7,3 @@
 </script>
 
 <TextBaseButton {...props} data-button-text />
-
-

package/dist/buttons/TextButton.svelte.d.ts

@@ -1,4 +1,4 @@
-import './styles/text_button.scss';
+import './styles/text_button.css';
 import type { TextBaseButtonProps } from './TextBaseButton.svelte';
 declare const TextButton: import("svelte").Component<TextBaseButtonProps, {}, "">;
 type TextButton = ReturnType<typeof TextButton>;

package/dist/buttons/styles/button_utils.css

@@ -0,0 +1,37 @@
+@reference '$style/index.css';
+
+@utility button-base {
+	@apply relative m-0 box-border inline-block h-fit w-fit cursor-pointer border-none p-0 no-underline transition-all select-none;
+	font-size: inherit;
+	font-family: inherit;
+	-webkit-tap-highlight-color: transparent;
+
+	&:not([data-active='true']):disabled,
+	&:not([data-active='true'])[aria-disabled='true'] {
+		opacity: 0.6;
+		filter: grayscale(100%);
+	}
+
+	&:disabled,
+	&[aria-disabled='true'] {
+		cursor: default;
+		pointer-events: none;
+	}
+}
+
+@utility button-text-base {
+	@apply button-base;
+	border-radius: var(--radius-2xl);
+	display: inline-flex;
+	align-items: center;
+	gap: var(--body-gap);
+	padding: 0 --spacing(4);
+
+	.button-content {
+		padding: --spacing(1.5) 0;
+	}
+
+	.button-icon {
+		line-height: 0;
+	}
+}

package/dist/buttons/styles/elevated_button.css

@@ -0,0 +1,19 @@
+@reference './button_utils.css';
+
+@layer components {
+	[data-button-elevated] {
+		@apply button-text-base bg-primaryContainer text-onPrimaryContainer shadow;
+
+		&:not(:disabled, [data-active='true']):hover {
+			@apply shadow-md brightness-105;
+		}
+
+		&:not(:disabled):active {
+			@apply shadow brightness-100;
+		}
+
+		&[data-active='true'] {
+			@apply bg-inversePrimary shadow;
+		}
+	}
+}

package/dist/buttons/styles/expanded_text_button.css

@@ -0,0 +1,23 @@
+@reference './button_utils.css';
+
+@layer component {
+	[data-button-text-expanded] {
+		@apply button-text-base;
+		background-color: transparent;
+		color: var(--color-onPrimaryContainer);
+		width: 100%;
+		overflow: hidden;
+
+		&:not(:disabled, [data-active='true']):hover {
+			background-color: var(--color-primaryContainer);
+		}
+
+		&:not(:disabled):active {
+			filter: brightness(0.95);
+		}
+
+		&[data-active='true'] {
+			background-color: var(--color-inversePrimary);
+		}
+	}
+}

package/dist/buttons/styles/filled_button.css

@@ -0,0 +1,21 @@
+@reference './button_utils.css';
+
+@layer components {
+	[data-button-filled] {
+		@apply button-text-base;
+		background-color: var(--color-primary);
+		color: var(--color-onPrimary);
+
+		&:not(:disabled, [data-active='true']):hover {
+			filter: brightness(1.2);
+		}
+
+		&:not(:disabled):active {
+			filter: brightness(1);
+		}
+
+		&[data-active='true'] {
+			filter: brightness(1.3);
+		}
+	}
+}

package/dist/buttons/styles/icon_button.css

@@ -0,0 +1,42 @@
+@reference './button_utils.css';
+
+@layer components {
+	[data-button-icon] {
+		@apply button-base;
+		flex-grow: 0;
+		flex-shrink: 0;
+		border-radius: 50%;
+		background-color: transparent;
+		color: var(--color-onPrimaryContainer);
+		padding: --spacing(1.5);
+		aspect-ratio: 1/1;
+		line-height: 1;
+
+		.button-spinner {
+			display: flex;
+			position: absolute;
+			top: 0;
+			left: 0;
+			justify-content: center;
+			align-items: center;
+			width: 100%;
+			height: 100%;
+		}
+
+		.button-body {
+			line-height: 0;
+		}
+
+		&:not(:disabled, [data-active='true']):hover {
+			background-color: var(--color-primaryContainer);
+		}
+
+		&:not(:disabled):active {
+			filter: brightness(0.95);
+		}
+
+		&[data-active='true'] {
+			background-color: var(--color-inversePrimary);
+		}
+	}
+}

package/dist/buttons/styles/outlined_button.css

@@ -0,0 +1,21 @@
+@reference './button_utils.css';
+
+@layer components {
+	[data-button-outlined] {
+		@apply button-text-base border-onBackground/20 border border-solid;
+		background-color: transparent;
+		color: var(--color-onPrimaryContainer);
+
+		&:not(:disabled, [data-active='true']):hover {
+			background-color: var(--color-primaryContainer);
+		}
+
+		&:not(:disabled):active {
+			filter: brightness(0.95);
+		}
+
+		&[data-active='true'] {
+			background-color: var(--color-inversePrimary);
+		}
+	}
+}

package/dist/buttons/styles/text_button.css

@@ -0,0 +1,22 @@
+@reference './button_utils.css';
+
+@layer components {
+	[data-button-text] {
+		@apply button-text-base;
+		transition-property: background-color, opacity, filter;
+		background-color: transparent;
+		color: var(--color-onPrimaryContainer);
+
+		&:not(:disabled, [data-active='true']):hover {
+			background-color: var(--color-primaryContainer);
+		}
+
+		&:not(:disabled):active {
+			filter: brightness(0.95);
+		}
+
+		&[data-active='true'] {
+			background-color: var(--color-inversePrimary);
+		}
+	}
+}

package/dist/containment/Avatar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import './styles/avatar.scss';
+	import './styles/avatar.css';
 	import { Avatar as BitAvatar, type AvatarRootProps } from 'bits-ui';
 	import type { Snippet } from 'svelte';
 

package/dist/containment/Avatar.svelte.d.ts

@@ -1,4 +1,4 @@
-import './styles/avatar.scss';
+import './styles/avatar.css';
 import { type AvatarRootProps } from 'bits-ui';
 import type { Snippet } from 'svelte';
 export type AvatarProps = AvatarRootProps & {

package/dist/containment/Breadcrumb.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './styles/breadcrumb.css';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	let { children, ...rest }: HTMLAttributes<HTMLDivElement> = $props();
@@ -9,26 +10,3 @@
 		{@render children()}
 	{/if}
 </div>
-
-<style>:global([data-breadcrumb]) {
-  position: relative;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-
-:global([data-breadcrumb] > a) {
-  padding: 0;
-  margin: 0;
-  color: var(--color-info);
-  text-decoration: none;
-}
-:global([data-breadcrumb] > a):not(:last-child)::after {
-  content: "/";
-  color: currentColor;
-  padding: 0 var(--gap--half);
-}
-:global([data-breadcrumb] > a):last-child {
-  pointer-events: none;
-  color: var(--color-primary);
-}</style>

package/dist/containment/Breadcrumb.svelte.d.ts

@@ -1,3 +1,4 @@
+import './styles/breadcrumb.css';
 import type { HTMLAttributes } from 'svelte/elements';
 declare const Breadcrumb: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
 type Breadcrumb = ReturnType<typeof Breadcrumb>;

package/dist/containment/Card.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import './styles/card.scss';
+	import './styles/card.css';
 	import type { SurfaceContainerProps } from './SurfaceContainer.svelte';
 	import SurfaceContainer from './SurfaceContainer.svelte';
 

package/dist/containment/Card.svelte.d.ts

@@ -1,4 +1,4 @@
-import './styles/card.scss';
+import './styles/card.css';
 import type { SurfaceContainerProps } from './SurfaceContainer.svelte';
 declare const Card: import("svelte").Component<SurfaceContainerProps, {}, "">;
 type Card = ReturnType<typeof Card>;

package/dist/containment/Container.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import './styles/container.scss';
+	import './styles/container.css';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	export interface ContainerProps extends HTMLAttributes<HTMLElement> {

package/dist/containment/Container.svelte.d.ts

@@ -1,4 +1,4 @@
-import './styles/container.scss';
+import './styles/container.css';
 import type { HTMLAttributes } from 'svelte/elements';
 export interface ContainerProps extends HTMLAttributes<HTMLElement> {
     xs?: boolean;

package/dist/containment/Spacer.svelte

@@ -27,14 +27,20 @@
 	{/if}
 </div>
 
-<style>[data-spacer] {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  display: flex;
-  position: relative;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: var(--gap--half);
-}</style>
+<style>
+	@reference '$style/index.css';
+
+	@layer components {
+		[data-spacer] {
+			padding: 0;
+			margin: 0;
+			box-sizing: border-box;
+			display: flex;
+			position: relative;
+			flex-wrap: wrap;
+			justify-content: flex-start;
+			align-items: flex-start;
+			gap: --spacing(2);
+		}
+	}
+</style>

package/dist/containment/SurfaceContainer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import './styles/surface-container.scss';
+	import './styles/surface-container.css';
 	import Container, { type ContainerProps } from './Container.svelte';
 
 	export interface SurfaceContainerProps extends ContainerProps {

package/dist/containment/SurfaceContainer.svelte.d.ts

@@ -1,4 +1,4 @@
-import './styles/surface-container.scss';
+import './styles/surface-container.css';
 import { type ContainerProps } from './Container.svelte';
 export interface SurfaceContainerProps extends ContainerProps {
     elevated?: 0 | 1 | 2 | 3 | 4 | 5;

package/dist/containment/styles/avatar.css

@@ -0,0 +1,20 @@
+@reference '$style/index.css';
+
+@layer components {
+	[data-avatar-root] {
+		display: block;
+		position: relative;
+		background-color: var(--color-surfaceContainerHigh);
+		aspect-ratio: 1;
+		width: var(--size);
+		border-radius: 50%;
+		overflow: hidden;
+	}
+
+	[data-avatar-image],
+	[data-avatar-fallback] {
+		object-fit: cover;
+		width: 100%;
+		height: 100%;
+	}
+}

package/dist/containment/styles/breadcrumb.css

@@ -0,0 +1,27 @@
+@reference '$style/index.css';
+
+@layer components {
+	[data-breadcrumb] {
+		position: relative;
+		padding: 0;
+		margin: 0;
+		box-sizing: border-box;
+
+		& > a {
+			padding: 0;
+			margin: 0;
+			color: var(--color-info);
+			text-decoration: none;
+
+			&:not(:last-child)::after {
+				content: ' /';
+				color: currentColor;
+			}
+
+			&:last-child {
+				pointer-events: none;
+				color: var(--color-primary);
+			}
+		}
+	}
+}

package/dist/containment/styles/card.css

@@ -0,0 +1,7 @@
+@reference '$style/index.css';
+
+@layer components {
+	[data-card] {
+		@apply shadow-lg;
+	}
+}

package/dist/containment/styles/container.css

@@ -0,0 +1,26 @@
+@reference '$style/index.css';
+
+@layer components {
+	[data-container] {
+		position: relative;
+		margin: 0 auto;
+		padding: --spacing(4);
+		box-sizing: border-box;
+
+		&[data-xs='true'] {
+			max-width: var(--breakpoint-xs);
+		}
+
+		&[data-sm='true'] {
+			max-width: var(--breakpoint--sm);
+		}
+
+		&[data-md='true'] {
+			max-width: var(--breakpoint--md);
+		}
+
+		&[data-fluid='true'] {
+			width: 100%;
+		}
+	}
+}

package/dist/containment/styles/surface-container.css

@@ -0,0 +1,29 @@
+@reference '$style/index.css';
+
+@layer components {
+	[data-surface-container] {
+		--color-background: var(--color-surface);
+
+		border-radius: var(--radius-4xl);
+		background-color: var(--color-background);
+
+		&[data-elevated='0'] {
+			--color-background: var(--color-surfaceContainerLowest);
+		}
+		&[data-elevated='1'] {
+			--color-background: var(--color-surface);
+		}
+		&[data-elevated='2'] {
+			--color-background: var(--color-surfaceContainerLow);
+		}
+		&[data-elevated='3'] {
+			--color-background: var(--color-surfaceContainer);
+		}
+		&[data-elevated='4'] {
+			--color-background: var(--color-surfaceContainerHigh);
+		}
+		&[data-elevated='5'] {
+			--color-background: var(--color-surfaceContainerHighest);
+		}
+	}
+}