@celar-ui/svelte 1.6.0 → 1.8.1

package/dist/containment/Card.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import './styles/card.scss';
-	import Container from './Container.svelte';
-	import type { ContainerProps } from './Container.svelte';
+	import type { SurfaceContainerProps } from './SurfaceContainer.svelte';
+	import SurfaceContainer from './SurfaceContainer.svelte';
 
-	let props: ContainerProps = $props();
+	let props: SurfaceContainerProps = $props();
 </script>
 
-<Container {...props} data-card />
+<SurfaceContainer {...props} data-card />

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

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

package/dist/containment/styles/card.scss

@@ -1,5 +1,3 @@
 [data-card] {
 	box-shadow: 0 var(--gap--xs) var(--gap--sm) var(--color-shadow--soft);
-	background-color: var(--color-surface);
-	border-radius: var(--gap);
 }

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { default as CommandDialog } from './overlay/CommandDialog.svelte';
 export { default as CommandGroupItems } from './overlay/CommandGroupItems.svelte';
 export { default as CommandItem } from './overlay/CommandItem.svelte';
 export { default as MinimalSurfaceDialog } from './overlay/MinimalSurfaceDialog.svelte';
+export { default as Popover } from './overlay/Popover.svelte';
 export { default as Gap } from './misc/Gap.svelte';
 export { default as DuckSpinner } from './misc/DuckSpinner.svelte';
 export { default as DotSpinner } from './misc/DotSpinner.svelte';

package/dist/index.js

@@ -18,6 +18,7 @@ export { default as CommandDialog } from './overlay/CommandDialog.svelte';
 export { default as CommandGroupItems } from './overlay/CommandGroupItems.svelte';
 export { default as CommandItem } from './overlay/CommandItem.svelte';
 export { default as MinimalSurfaceDialog } from './overlay/MinimalSurfaceDialog.svelte';
+export { default as Popover } from './overlay/Popover.svelte';
 export { default as Gap } from './misc/Gap.svelte';
 export { default as DuckSpinner } from './misc/DuckSpinner.svelte';
 export { default as DotSpinner } from './misc/DotSpinner.svelte';

package/dist/navigation/AdaptiveSidebar.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
+	import '../containment/styles/surface-container.scss';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	interface AdaptiveSidebarProps extends HTMLAttributes<HTMLElement> {
 		open?: boolean;
 		collapsedSize?: string;
 		expandedSize?: string;
+		elevated?: 0 | 1 | 2 | 3 | 4 | 5;
 	}
 
 	let {
 		open = $bindable(false),
 		collapsedSize = '80px',
 		expandedSize = '300px',
+		elevated = 3,
 		children,
 		...rest
 	}: AdaptiveSidebarProps = $props();
@@ -33,9 +36,11 @@
 	<aside
 		{...rest}
 		data-adaptive-sidebar
+		data-surface-container
 		style:--collapsed={collapsedSize}
 		style:--expanded={expandedSize}
 		style:--width={open ? expandedSize : collapsedSize}
+		data-elevated={elevated}
 	>
 		{@render children?.()}
 	</aside>
@@ -77,10 +82,8 @@
   position: relative;
   height: 100vh;
   width: var(--expanded);
-  background-color: var(--color-surface);
   padding: var(--gap);
-  border-top-right-radius: var(--gap--x2);
-  border-bottom-right-radius: var(--gap--x2);
+  border-radius: 0 var(--gap--x2) var(--gap--x2) 0;
   max-width: 80vw;
   overflow: hidden;
   transition-property: transform, width, opacity, visibility;

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

@@ -1,8 +1,10 @@
+import '../containment/styles/surface-container.scss';
 import type { HTMLAttributes } from 'svelte/elements';
 interface AdaptiveSidebarProps extends HTMLAttributes<HTMLElement> {
     open?: boolean;
     collapsedSize?: string;
     expandedSize?: string;
+    elevated?: 0 | 1 | 2 | 3 | 4 | 5;
 }
 declare const AdaptiveSidebar: import("svelte").Component<AdaptiveSidebarProps, {}, "open">;
 type AdaptiveSidebar = ReturnType<typeof AdaptiveSidebar>;

package/dist/overlay/Popover.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import './styles/popover.scss';
+	import { scale } from 'svelte/transition';
+	import { Popover as BitsPopover, type PopoverContentProps } from 'bits-ui';
+
+	type PopoverProps = PopoverContentProps & {
+		open?: boolean;
+		trigger?: Snippet<[{ props: Record<string, unknown> }]>;
+		transitionDuration?: number;
+	};
+
+	let {
+		open = $bindable(false),
+		trigger,
+		children,
+		transitionDuration = 200,
+		...rest
+	}: PopoverProps = $props();
+</script>
+
+<BitsPopover.Root bind:open>
+	<BitsPopover.Trigger child={trigger} />
+	<BitsPopover.Portal>
+		<BitsPopover.Content {...rest} forceMount>
+			{#snippet child({ wrapperProps, props, open })}
+				{#if open}
+					<div {...wrapperProps}>
+						<div {...props} transition:scale={{ duration: transitionDuration }}>
+							{@render children?.()}
+						</div>
+					</div>
+				{/if}
+			{/snippet}
+		</BitsPopover.Content>
+	</BitsPopover.Portal>
+</BitsPopover.Root>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import './styles/popover.scss';
+import { type PopoverContentProps } from 'bits-ui';
+type PopoverProps = PopoverContentProps & {
+    open?: boolean;
+    trigger?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    transitionDuration?: number;
+};
+declare const Popover: import("svelte").Component<PopoverProps, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/overlay/styles/popover.scss

@@ -0,0 +1,5 @@
+[data-popover-content] {
+	z-index: var(--z-index, 120);
+	max-width: 100vw;
+	margin: var(--gap--half) auto;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@celar-ui/svelte",
-	"version": "1.6.0",
+	"version": "1.8.1",
 	"license": "MIT",
 	"author": {
 		"name": "cuikho210",
@@ -51,32 +51,32 @@
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@eslint/compat": "^1.4.0",
-		"@eslint/js": "^9.36.0",
-		"@iconify-json/hugeicons": "^1.2.16",
+		"@eslint/compat": "^1.4.1",
+		"@eslint/js": "^9.39.1",
+		"@iconify-json/hugeicons": "^1.2.17",
 		"@sveltejs/adapter-auto": "^4.0.0",
-		"@sveltejs/kit": "^2.43.1",
-		"@sveltejs/package": "^2.5.3",
+		"@sveltejs/kit": "^2.48.4",
+		"@sveltejs/package": "^2.5.4",
 		"@sveltejs/vite-plugin-svelte": "^5.1.1",
-		"@types/bun": "^1.2.22",
+		"@types/bun": "^1.3.1",
 		"autoprefixer": "^10.4.21",
-		"bits-ui": "^2.11.0",
+		"bits-ui": "^2.14.2",
 		"csstype": "^3.1.3",
-		"eslint": "^9.36.0",
+		"eslint": "^9.39.1",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.12.4",
-		"globals": "^16.4.0",
+		"eslint-plugin-svelte": "^3.13.0",
+		"globals": "^16.5.0",
 		"material-dynamic-colors": "^1.1.2",
 		"prettier": "^3.6.2",
 		"prettier-plugin-svelte": "^3.4.0",
-		"publint": "^0.3.13",
-		"sass": "^1.93.1",
-		"svelte": "^5.39.4",
-		"svelte-check": "^4.3.2",
-		"typescript": "^5.9.2",
-		"typescript-eslint": "^8.44.1",
-		"unplugin-icons": "^22.3.0",
-		"vite": "^6.3.6"
+		"publint": "^0.3.15",
+		"sass": "^1.93.3",
+		"svelte": "^5.43.4",
+		"svelte-check": "^4.3.3",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.46.3",
+		"unplugin-icons": "^22.5.0",
+		"vite": "^6.4.1"
 	},
 	"keywords": [
 		"svelte"