@celar-ui/svelte 1.8.1 → 2.0.0

package/dist/misc/LinearProgressIndicator.svelte

@@ -7,32 +7,41 @@
 	<div data-linear-progress-indicator-line></div>
 </div>
 
-<style>[data-linear-progress-indicator] {
-  --line-height: var(--gap--sm);
-  --anim-duration: 1.7s;
-  display: block;
-  position: relative;
-  background-color: var(--color-surfaceDim);
-  width: 100%;
-  height: var(--line-height);
-  overflow: hidden;
-}
-[data-linear-progress-indicator] [data-linear-progress-indicator-line] {
-  position: absolute;
-  top: 0;
-  left: 0;
-  animation: linear-progress-animation var(--anim-duration) linear infinite;
-  background-color: var(--color-primary);
-  width: 0;
-  height: 100%;
-}
-@keyframes linear-progress-animation {
-  0% {
-    left: -8%;
-    width: 8%;
-  }
-  100% {
-    left: 100%;
-    width: 100%;
-  }
-}</style>
+<style>
+	@reference '$style/index.css';
+
+	@layer components {
+		[data-linear-progress-indicator] {
+			--line-height: --spacing(1.5);
+			--anim-duration: 1.7s;
+
+			display: block;
+			position: relative;
+			background-color: var(--color-surfaceDim);
+			width: 100%;
+			height: var(--line-height);
+			overflow: hidden;
+
+			[data-linear-progress-indicator-line] {
+				position: absolute;
+				top: 0;
+				left: 0;
+				animation: linear-progress-animation var(--anim-duration) linear infinite;
+				background-color: var(--color-primary);
+				width: 0;
+				height: 100%;
+			}
+
+			@keyframes linear-progress-animation {
+				0% {
+					left: -8%;
+					width: 8%;
+				}
+				100% {
+					left: 100%;
+					width: 100%;
+				}
+			}
+		}
+	}
+</style>

package/dist/navigation/AdaptiveSidebar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import '../containment/styles/surface-container.scss';
+	import '../containment/styles/surface-container.css';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	interface AdaptiveSidebarProps extends HTMLAttributes<HTMLElement> {
@@ -46,77 +46,70 @@
 	</aside>
 </div>
 
-<style>:root {
-  --gap--x3: 3rem;
-  --gap--x2: 2rem;
-  --gap: 1rem;
-  --gap--md: 0.7rem;
-  --gap--half: 0.5rem;
-  --gap--sm: 0.3rem;
-  --gap--xs: 0.1rem;
-  --break--xs: 540px;
-  --break--sm: 960px;
-  --break--md: 1320px;
-}
+<style>
+	@reference '$style/index.css';
 
-[data-adaptive-sidebar-backdrop] {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  -webkit-backdrop-filter: blur(var(--blur-length));
-          backdrop-filter: blur(var(--blur-length));
-  background-color: rgba(var(--color-onBackground--rgb), 0.2);
-  z-index: 100;
-  visibility: hidden;
-  opacity: 0;
-  transition-property: opacity, visibility;
-  transition-timing-function: ease-in;
-  transition-duration: var(--transition-dur);
-}
+	@layer components {
+		[data-adaptive-sidebar-backdrop] {
+			@apply bg-onBackground/20 blur-md transition-all;
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			z-index: 100;
+			visibility: hidden;
+			opacity: 0;
+		}
 
-[data-adaptive-sidebar] {
-  box-sizing: border-box;
-  z-index: 100;
-  position: relative;
-  height: 100vh;
-  width: var(--expanded);
-  padding: var(--gap);
-  border-radius: 0 var(--gap--x2) var(--gap--x2) 0;
-  max-width: 80vw;
-  overflow: hidden;
-  transition-property: transform, width, opacity, visibility;
-  transition-timing-function: ease-in-out;
-  transition-duration: var(--transition-dur);
-}
+		[data-adaptive-sidebar] {
+			@apply shadow-lg transition-all;
+			box-sizing: border-box;
+			z-index: 100;
+			height: 100vh;
+			width: var(--expanded);
+			padding: --spacing(4);
+			border-radius: 0 --spacing(8) --spacing(8) 0;
+			max-width: 80vw;
+			overflow: hidden;
+			position: fixed;
+			top: 0;
+			left: 0;
+			transform: translateX(-100%);
+			opacity: 0;
+			visibility: hidden;
 
-[data-adaptive-sidebar-state] {
-  display: none;
-}
+			@variant sm {
+				position: relative;
+				opacity: 1;
+				visibility: visible;
+				width: var(--width);
+				transform: initial;
+			}
+		}
 
-@media screen and (max-width: 540px) {
-  [data-adaptive-sidebar] {
-    position: fixed;
-    top: 0;
-    left: 0;
-    box-shadow: 0 0rem var(--gap) var(--color-shadow--md);
-    transform: translateX(-100%);
-    opacity: 0;
-    visibility: hidden;
-  }
-  [data-adaptive-sidebar-state]:checked ~ [data-adaptive-sidebar-backdrop] {
-    opacity: 1;
-    visibility: visible;
-  }
-  [data-adaptive-sidebar-state]:checked ~ [data-adaptive-sidebar] {
-    transform: translateX(0);
-    opacity: 1;
-    visibility: visible;
-  }
-}
-@media screen and (min-width: 541px) {
-  [data-adaptive-sidebar] {
-    width: var(--width);
-  }
-}</style>
+		[data-adaptive-sidebar-state] {
+			display: none;
+		}
+
+		[data-adaptive-sidebar-state]:checked {
+			~ [data-adaptive-sidebar-backdrop] {
+				opacity: 1;
+				visibility: visible;
+			}
+
+			~ [data-adaptive-sidebar] {
+				transform: translateX(0);
+				opacity: 1;
+				visibility: visible;
+			}
+
+			@variant sm {
+				~ [data-adaptive-sidebar-backdrop] {
+					opacity: 0;
+					visibility: hidden;
+				}
+			}
+		}
+	}
+</style>

package/dist/navigation/AdaptiveSidebar.svelte.d.ts

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

package/dist/navigation/AppBar.svelte

@@ -27,35 +27,42 @@
 	</div>
 </section>
 
-<style>[data-app-bar] {
-  box-sizing: border-box;
-  display: flex;
-  position: relative;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--gap--half);
-  -webkit-backdrop-filter: blur(var(--blur-length--x2));
-          backdrop-filter: blur(var(--blur-length--x2));
-  background-color: rgba(var(--color-background--rgb), 0.88);
-  padding: 0 var(--gap--half);
-  min-height: var(--gap--x3);
-}
-[data-app-bar] [data-app-bar-left] {
-  display: flex;
-  align-items: center;
-  gap: var(--gap--half);
-  overflow: hidden;
-}
-[data-app-bar] [data-app-bar-left] [data-app-bar-title] {
-  flex: 1;
-  overflow: hidden;
-  font-weight: bold;
-  font-size: 1.1rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-[data-app-bar] [data-app-bar-actions] {
-  display: flex;
-  align-items: center;
-  gap: var(--gap--sm);
-}</style>
+<style>
+	@reference '$style/index.css';
+
+	@layer components {
+		[data-app-bar] {
+			@apply bg-background/88 backdrop-blur;
+			box-sizing: border-box;
+			display: flex;
+			position: relative;
+			justify-content: space-between;
+			align-items: center;
+			gap: --spacing(2);
+			padding: 0 --spacing(2);
+			min-height: --spacing(12);
+
+			[data-app-bar-left] {
+				display: flex;
+				align-items: center;
+				gap: var(--gap--half);
+				overflow: hidden;
+
+				[data-app-bar-title] {
+					flex: 1;
+					overflow: hidden;
+					font-weight: bold;
+					font-size: 1.1rem;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+			}
+
+			[data-app-bar-actions] {
+				display: flex;
+				align-items: center;
+				gap: --spacing(1.5);
+			}
+		}
+	}
+</style>

package/dist/navigation/NavigationBar.svelte

@@ -8,39 +8,31 @@
 	{@render children?.()}
 </section>
 
-<style>:root {
-  --gap--x3: 3rem;
-  --gap--x2: 2rem;
-  --gap: 1rem;
-  --gap--md: 0.7rem;
-  --gap--half: 0.5rem;
-  --gap--sm: 0.3rem;
-  --gap--xs: 0.1rem;
-  --break--xs: 540px;
-  --break--sm: 960px;
-  --break--md: 1320px;
-}
+<style>
+	@reference '$style/index.css';
 
-[data-navigation-bar] {
-  box-sizing: border-box;
-  display: flex;
-  position: relative;
-  justify-content: space-evenly;
-  border-top-right-radius: var(--radius);
-  border-top-left-radius: var(--radius);
-  background-color: var(--color-surfaceContainerLow);
-  width: 100%;
-  height: auto;
-}
-@media screen and (min-width: 540px) {
-  [data-navigation-bar] {
-    flex-direction: column;
-    justify-content: flex-start;
-    border-top-left-radius: 0;
-    border-bottom-right-radius: var(--radius);
-    padding: 0 var(--gap--half);
-    width: -moz-min-content;
-    width: min-content;
-    height: 100%;
-  }
-}</style>
+	@layer components {
+		[data-navigation-bar] {
+			box-sizing: border-box;
+			display: flex;
+			position: relative;
+			justify-content: space-evenly;
+			border-top-right-radius: var(--radius-2xl);
+			border-top-left-radius: var(--radius-2xl);
+			background-color: var(--color-surfaceContainerLow);
+			width: 100%;
+			height: auto;
+
+			@variant sm {
+				flex-direction: column;
+				justify-content: flex-start;
+				border-top-left-radius: 0;
+				border-bottom-right-radius: var(--radius);
+				padding: 0 --spacing(2);
+				width: -moz-min-content;
+				width: min-content;
+				height: 100%;
+			}
+		}
+	}
+</style>

package/dist/navigation/NavigationBarButton.svelte

@@ -23,36 +23,45 @@
 	{@render children?.()}
 </a>
 
-<style>[data-navigation-bar-button] {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  gap: var(--gap--xs);
-  background-color: transparent;
-  padding: var(--gap--half) 0;
-  width: 100%;
-  color: var(--color-onSurface);
-  text-align: center;
-  font-size: 0.8rem;
-  text-decoration: none;
-  -webkit-tap-highlight-color: transparent;
-}
-[data-navigation-bar-button]:not(:disabled):active {
-  top: 0;
-}
-[data-navigation-bar-button]:hover > [data-navigation-bar-button-icon] {
-  background-color: var(--color-primaryContainer);
-}
-[data-navigation-bar-button][data-active=true] > [data-navigation-bar-button-icon] {
-  background-color: var(--color-inversePrimary);
-}
-[data-navigation-bar-button] > [data-navigation-bar-button-icon] {
-  transition-duration: var(--transition-dur);
-  transition-property: color, background-color;
-  transition-timing-function: ease-in;
-  border-radius: var(--radius);
-  background-color: transparent;
-  padding: var(--gap--xs) var(--gap);
-}</style>
+<style>
+	@reference '$style/index.css';
+
+	@layer components {
+		[data-navigation-bar-button] {
+			box-sizing: border-box;
+			display: flex;
+			flex-direction: column;
+			justify-content: flex-start;
+			align-items: center;
+			gap: --spacing(1);
+			background-color: transparent;
+			padding: --spacing(2) 0;
+			width: 100%;
+			color: var(--color-onSurface);
+			text-align: center;
+			font-size: 0.8rem;
+			text-decoration: none;
+			-webkit-tap-highlight-color: transparent;
+
+			&:not(:disabled):active {
+				top: 0;
+			}
+
+			&:hover {
+				& > [data-navigation-bar-button-icon] {
+					background-color: var(--color-primaryContainer);
+				}
+			}
+
+			&[data-active='true'] {
+				& > [data-navigation-bar-button-icon] {
+					background-color: var(--color-inversePrimary);
+				}
+			}
+
+			& > [data-navigation-bar-button-icon] {
+				@apply rounded-2xl bg-transparent px-4 py-1 transition-all;
+			}
+		}
+	}
+</style>

package/dist/navigation/NavigationDrawer.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './styles/navigation_drawer.css';
 	import { fade, fly } from 'svelte/transition';
 	import { Dialog as BitDialog, type DialogRootProps } from 'bits-ui';
 	import type { Snippet } from 'svelte';
@@ -79,85 +80,3 @@
 		</BitDialog.Content>
 	</BitDialog.Portal>
 </BitDialog.Root>
-
-<style>:global([data-navigation-drawer-backdrop]) {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  -webkit-backdrop-filter: blur(var(--blur-length));
-          backdrop-filter: blur(var(--blur-length));
-  background-color: rgba(var(--color-onBackground--rgb), 0.2);
-  z-index: 100;
-}
-
-:global([data-navigation-drawer]) {
-  box-sizing: border-box;
-  display: flex;
-  position: fixed;
-  top: 0;
-  z-index: 100;
-  flex-direction: column;
-  background-color: var(--color-surface);
-  height: 100dvh;
-  overflow-y: auto;
-  box-shadow: 0 var(--gap--xs) var(--gap--half) var(--color-shadow--md);
-  max-width: 85%;
-}
-:global([data-navigation-drawer])[data-position=left] {
-  left: 0;
-  border-top-right-radius: var(--radius);
-  border-bottom-right-radius: var(--radius);
-}
-:global([data-navigation-drawer])[data-position=right] {
-  right: 0;
-  border-top-left-radius: var(--radius);
-  border-bottom-left-radius: var(--radius);
-}
-:global([data-navigation-drawer]) [data-navigation-drawer-header] {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border);
-  padding: var(--gap);
-  flex-shrink: 0;
-}
-:global([data-navigation-drawer]) [data-navigation-drawer-header] [data-navigation-drawer-close] {
-  margin-left: auto;
-}
-:global([data-navigation-drawer]) [data-navigation-drawer-content] {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--gap--half);
-}
-:global([data-navigation-drawer]) [data-navigation-drawer-footer] {
-  border-top: 1px solid var(--color-border);
-  padding: var(--gap);
-  flex-shrink: 0;
-}
-
-/* Scrollbar styling */
-:global([data-navigation-drawer]) {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-border) transparent;
-}
-:global([data-navigation-drawer])::-webkit-scrollbar {
-  width: 6px;
-}
-:global([data-navigation-drawer])::-webkit-scrollbar-track {
-  background: transparent;
-}
-:global([data-navigation-drawer])::-webkit-scrollbar-thumb {
-  border-radius: 3px;
-  background-color: var(--color-border);
-}
-:global([data-navigation-drawer])::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-primaryContainer);
-}
-
-/* Focus management */
-:global([data-navigation-drawer]:focus-visible) {
-  outline: 2px solid var(--color-primary);
-  outline-offset: -2px;
-}</style>

package/dist/navigation/NavigationDrawer.svelte.d.ts

@@ -1,3 +1,4 @@
+import './styles/navigation_drawer.css';
 import { type DialogRootProps } from 'bits-ui';
 import type { Snippet } from 'svelte';
 export interface NavigationDrawerProps extends DialogRootProps {

package/dist/navigation/styles/navigation_drawer.css

@@ -0,0 +1,93 @@
+@reference '$style/index.css';
+
+@layer components {
+	[data-navigation-drawer-backdrop] {
+		@apply bg-onBackground/20 backdrop-blur;
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 100;
+	}
+
+	[data-navigation-drawer] {
+		@apply shadow-lg;
+		box-sizing: border-box;
+		display: flex;
+		position: fixed;
+		top: 0;
+		z-index: 100;
+		flex-direction: column;
+		background-color: var(--color-surface);
+		height: 100dvh;
+		overflow-y: auto;
+		max-width: 85%;
+
+		&[data-position='left'] {
+			left: 0;
+			border-top-right-radius: var(--radius-2xl);
+			border-bottom-right-radius: var(--radius-2xl);
+		}
+
+		&[data-position='right'] {
+			right: 0;
+			border-top-left-radius: var(--radius-2xl);
+			border-bottom-left-radius: var(--radius-2xl);
+		}
+
+		[data-navigation-drawer-header] {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			border-bottom: 1px solid --alpha(var(--color-onBackground) / 20%);
+			padding: --spacing(4);
+			flex-shrink: 0;
+
+			[data-navigation-drawer-close] {
+				margin-left: auto;
+			}
+		}
+
+		[data-navigation-drawer-content] {
+			flex: 1;
+			overflow-y: auto;
+			padding: --spacing(2);
+		}
+
+		[data-navigation-drawer-footer] {
+			border-top: 1px solid --alpha(var(--color-onBackground) / 20%);
+			padding: --spacing(4);
+			flex-shrink: 0;
+		}
+	}
+
+	/* Scrollbar styling */
+	[data-navigation-drawer] {
+		scrollbar-width: thin;
+		scrollbar-color: --alpha(var(--color-onBackground) / 20%) transparent;
+
+		&::-webkit-scrollbar {
+			width: 6px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			border-radius: 3px;
+			background-color: --alpha(var(--color-onBackground) / 20%);
+		}
+
+		&::-webkit-scrollbar-thumb:hover {
+			background-color: var(--color-primaryContainer);
+		}
+	}
+
+	/* Focus management */
+	[data-navigation-drawer]:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: -2px;
+	}
+}

package/dist/overlay/CommandDialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import './styles/command.scss';
+	import './styles/command.css';
 	import { Command } from 'bits-ui';
 	import { default as MinimalDialog, type MinimalDialogProps } from './MinimalDialog.svelte';
 	import type { Snippet } from 'svelte';

package/dist/overlay/CommandDialog.svelte.d.ts

@@ -1,4 +1,4 @@
-import './styles/command.scss';
+import './styles/command.css';
 import { type MinimalDialogProps } from './MinimalDialog.svelte';
 import type { Snippet } from 'svelte';
 type CommandDialogProps = MinimalDialogProps & {

package/dist/overlay/Dialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import './styles/dialog.scss';
+	import './styles/dialog.css';
 	import { fade, fly } from 'svelte/transition';
 	import { Dialog as BitDialog, type DialogContentProps } from 'bits-ui';
 	import type { Snippet } from 'svelte';

package/dist/overlay/Dialog.svelte.d.ts

@@ -1,4 +1,4 @@
-import './styles/dialog.scss';
+import './styles/dialog.css';
 import { type DialogContentProps } from 'bits-ui';
 import type { Snippet } from 'svelte';
 export type DialogProps = Omit<DialogContentProps, 'title'> & {