@skeletonlabs/skeleton-svelte 1.5.1 → 2.0.0-next.1

package/dist/{composed → components}/accordion/anatomy/accordion-content.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { mergeProps } from '@zag-js/svelte';
 	import { AccordionItemContext, AccordionRootContext } from '../modules/context.js';
+	import { classesAccordion } from '@skeletonlabs/skeleton-common';
 	import type { AccordionContentProps } from '../modules/types.js';
 
 	const rootContext = AccordionRootContext.consume();
@@ -11,7 +12,7 @@
 		mergeProps(
 			rootContext.api.getItemContentProps(itemContext.itemProps),
 			{
-				class: 'skb:py-2 skb:px-4'
+				class: classesAccordion.content
 			},
 			restAttributes
 		)

package/dist/{composed → components}/accordion/anatomy/accordion-heading.svelte

@@ -1,15 +1,25 @@
 <script lang="ts">
+	import { mergeProps } from '@zag-js/svelte';
+	import { classesAccordion } from '@skeletonlabs/skeleton-common';
 	import type { AccordionHeadingProps } from '../modules/types.js';
 
 	const props: AccordionHeadingProps = $props();
 	const { level = 3, element, children, ...restAttributes } = $derived(props);
+	const attributes = $derived(
+		mergeProps(
+			{
+				class: classesAccordion.heading
+			},
+			restAttributes
+		)
+	);
 	const tag = $derived(`h${level}`);
 </script>
 
 {#if element}
-	{@render element({ attributes: restAttributes })}
+	{@render element({ attributes })}
 {:else}
-	<svelte:element this={tag} {...restAttributes}>
+	<svelte:element this={tag} {...attributes}>
 		{@render children?.()}
 	</svelte:element>
 {/if}

package/dist/{composed → components}/accordion/anatomy/accordion-indicator.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { mergeProps } from '@zag-js/svelte';
+	import { classesAccordion } from '@skeletonlabs/skeleton-common';
 	import { AccordionRootContext, AccordionItemContext } from '../modules/context.js';
 	import type { AccordionIndicatorProps } from '../modules/types.js';
 
@@ -7,7 +8,15 @@
 	const itemContext = AccordionItemContext.consume();
 	const props: AccordionIndicatorProps = $props();
 	const { element, children, ...restAttributes } = $derived(props);
-	const attributes = $derived(mergeProps(rootContext.api.getItemIndicatorProps(itemContext.itemProps), restAttributes));
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getItemIndicatorProps(itemContext.itemProps),
+			{
+				class: classesAccordion.indicator
+			},
+			restAttributes
+		)
+	);
 </script>
 
 {#if element}

package/dist/{composed → components}/accordion/anatomy/accordion-item.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { mergeProps } from '@zag-js/svelte';
 	import * as accordion from '@zag-js/accordion';
+	import { classesAccordion } from '@skeletonlabs/skeleton-common';
 	import { AccordionItemContext, AccordionRootContext } from '../modules/context.js';
 	import type { AccordionItemProps } from '../modules/types.js';
 
@@ -12,7 +13,7 @@
 		mergeProps(
 			rootContext.api.getItemProps(itemProps),
 			{
-				class: 'skb:grid skb:gap-2'
+				class: classesAccordion.item
 			},
 			restAttributes
 		)

package/dist/{composed → components}/accordion/anatomy/accordion-root.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { mergeProps, normalizeProps, useMachine } from '@zag-js/svelte';
 	import * as accordion from '@zag-js/accordion';
+	import { classesAccordion } from '@skeletonlabs/skeleton-common';
 	import { AccordionRootContext } from '../modules/context.js';
 	import type { AccordionRootProps } from '../modules/types.js';
 
@@ -17,7 +18,7 @@
 		mergeProps(
 			api.getRootProps(),
 			{
-				class: 'skb:w-full skb:grid skb:gap-2'
+				class: classesAccordion.root
 			},
 			restAttributes
 		)

package/dist/{composed → components}/accordion/anatomy/accordion-trigger.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { mergeProps } from '@zag-js/svelte';
 	import { AccordionItemContext, AccordionRootContext } from '../modules/context.js';
+	import { classesAccordion } from '@skeletonlabs/skeleton-common';
 	import type { AccordionTriggerProps } from '../modules/types.js';
 
 	const rootContext = AccordionRootContext.consume();
@@ -11,8 +12,7 @@
 		mergeProps(
 			rootContext.api.getItemTriggerProps(itemContext.itemProps),
 			{
-				class:
-					'skb:w-full skb:grid skb:items-center skb:gap-4 skb:py-2 skb:px-4 skb:rounded-base skb:text-left skb:hover:preset-tonal-primary'
+				class: classesAccordion.trigger
 			},
 			restAttributes
 		)

package/dist/{composed → components}/avatar/anatomy/avatar-fallback.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { mergeProps } from '@zag-js/svelte';
+	import { classesAvatar } from '@skeletonlabs/skeleton-common';
 	import { AvatarRootContext } from '../modules/context.js';
 	import type { AvatarFallbackProps } from '../modules/types.js';
 
@@ -10,7 +11,7 @@
 		mergeProps(
 			rootContext.api.getFallbackProps(),
 			{
-				class: 'skb:size-full skb:flex skb:justify-center skb:items-center'
+				class: classesAvatar.fallback
 			},
 			restAttributes
 		)

package/dist/{composed → components}/avatar/anatomy/avatar-image.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { mergeProps } from '@zag-js/svelte';
+	import { classesAvatar } from '@skeletonlabs/skeleton-common';
 	import { AvatarRootContext } from '../modules/context.js';
 	import type { AvatarImageProps } from '../modules/types.js';
 
@@ -10,7 +11,7 @@
 		mergeProps(
 			rootContext.api.getImageProps(),
 			{
-				class: 'skb:w-full skb:object-cover'
+				class: classesAvatar.image
 			},
 			restAttributes
 		)

package/dist/{composed → components}/avatar/anatomy/avatar-root.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import * as avatar from '@zag-js/avatar';
 	import { useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
+	import { classesAvatar } from '@skeletonlabs/skeleton-common';
 	import { AvatarRootContext } from '../modules/context.js';
 	import type { AvatarRootProps } from '../modules/types.js';
 
@@ -17,7 +18,7 @@
 		mergeProps(
 			api.getRootProps(),
 			{
-				class: 'skb:isolate skb:bg-surface-400-600 skb:size-16 skb:rounded-full skb:overflow-hidden'
+				class: classesAvatar.root
 			},
 			restAttributes
 		)

package/dist/index.css

@@ -0,0 +1,2 @@
+@import '@skeletonlabs/skeleton-common';
+@source './';

package/dist/index.d.ts

@@ -1,21 +1,2 @@
-export { default as Accordion } from './components/Accordion/index.js';
-export { default as AppBar } from './components/AppBar/AppBar.svelte';
-export { default as Avatar } from './components/Avatar/Avatar.svelte';
-export { default as FileUpload } from './components/FileUpload/FileUpload.svelte';
-export { default as Pagination } from './components/Pagination/Pagination.svelte';
-export { default as Progress } from './components/Progress/Progress.svelte';
-export { default as ProgressRing } from './components/ProgressRing/ProgressRing.svelte';
-export { default as Navigation } from './components/Navigation/index.js';
-export { default as Segment } from './components/Segment/index.js';
-export { default as Slider } from './components/Slider/Slider.svelte';
-export { default as Switch } from './components/Switch/Switch.svelte';
-export { default as Tabs } from './components/Tabs/index.js';
-export { default as TagsInput } from './components/TagsInput/TagsInput.svelte';
-export { default as Toaster } from './components/Toast/Toaster.svelte';
-export { createToaster } from './components/Toast/create-toaster.js';
-export { default as Rating } from './components/Rating/index.js';
-export type { FileUploadApi } from './components/FileUpload/types.js';
-export { default as Combobox } from './components/Combobox/Combobox.svelte';
-export { default as Popover } from './components/Popover/Popover.svelte';
-export { default as Tooltip } from './components/Tooltip/Tooltip.svelte';
-export { default as Modal } from './components/Modal/Modal.svelte';
+export * from './components/accordion/index.js';
+export * from './components/avatar/index.js';

package/dist/index.js

@@ -1,29 +1,2 @@
-// Exports for skeleton-svelte package
-// REMINDER
-// Do not export parent/child components. Use the dot-notation composition pattern:
-// https://skeleton.dev/docs/resources/contribute/components#dot-notation-syntax
-// (See Accordion, Nav, and Tabs for examples)
-// Components
-export { default as Accordion } from './components/Accordion/index.js';
-export { default as AppBar } from './components/AppBar/AppBar.svelte';
-export { default as Avatar } from './components/Avatar/Avatar.svelte';
-export { default as FileUpload } from './components/FileUpload/FileUpload.svelte';
-export { default as Pagination } from './components/Pagination/Pagination.svelte';
-export { default as Progress } from './components/Progress/Progress.svelte';
-export { default as ProgressRing } from './components/ProgressRing/ProgressRing.svelte';
-export { default as Navigation } from './components/Navigation/index.js';
-export { default as Segment } from './components/Segment/index.js';
-export { default as Slider } from './components/Slider/Slider.svelte';
-export { default as Switch } from './components/Switch/Switch.svelte';
-export { default as Tabs } from './components/Tabs/index.js';
-export { default as TagsInput } from './components/TagsInput/TagsInput.svelte';
-export { default as Toaster } from './components/Toast/Toaster.svelte';
-export { createToaster } from './components/Toast/create-toaster.js';
-export { default as Rating } from './components/Rating/index.js';
-// Temporary Features ---
-// The following will be removed or replaced in the future.
-// Popvers
-export { default as Combobox } from './components/Combobox/Combobox.svelte';
-export { default as Popover } from './components/Popover/Popover.svelte';
-export { default as Tooltip } from './components/Tooltip/Tooltip.svelte';
-export { default as Modal } from './components/Modal/Modal.svelte';
+export * from './components/accordion/index.js';
+export * from './components/avatar/index.js';

package/package.json

@@ -1,66 +1,59 @@
 {
   "name": "@skeletonlabs/skeleton-svelte",
-  "version": "1.5.1",
+  "version": "2.0.0-next.1",
   "description": "The Svelte package for Skeleton.",
   "author": "endigo9740 <chris@skeletonlabs.dev>",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "style": "./dist/index.css",
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js",
       "default": "./dist/index.js"
-    },
-    "./composed": {
-      "types": "./dist/composed/index.d.ts",
-      "svelte": "./dist/composed/index.js",
-      "default": "./dist/composed/index.js"
     }
   },
   "files": [
-    "dist",
-    "!dist/**/*.test.*"
+    "dist"
   ],
   "dependencies": {
-    "@zag-js/accordion": "^1.18.3",
-    "@zag-js/avatar": "^1.18.3",
-    "@zag-js/combobox": "^1.18.3",
-    "@zag-js/dialog": "^1.18.3",
-    "@zag-js/file-upload": "^1.18.3",
-    "@zag-js/pagination": "^1.18.3",
-    "@zag-js/popover": "^1.18.3",
-    "@zag-js/progress": "^1.18.3",
-    "@zag-js/radio-group": "^1.18.3",
-    "@zag-js/rating-group": "^1.18.3",
-    "@zag-js/slider": "^1.18.3",
-    "@zag-js/svelte": "^1.18.3",
-    "@zag-js/switch": "^1.18.3",
-    "@zag-js/tabs": "^1.18.3",
-    "@zag-js/tags-input": "^1.18.3",
-    "@zag-js/toast": "^1.18.3",
-    "@zag-js/tooltip": "^1.18.3"
+    "@zag-js/accordion": "^1.22.1",
+    "@zag-js/avatar": "^1.22.1",
+    "@zag-js/combobox": "^1.22.1",
+    "@zag-js/dialog": "^1.22.1",
+    "@zag-js/file-upload": "^1.22.1",
+    "@zag-js/pagination": "^1.22.1",
+    "@zag-js/popover": "^1.22.1",
+    "@zag-js/progress": "^1.22.1",
+    "@zag-js/radio-group": "^1.22.1",
+    "@zag-js/rating-group": "^1.22.1",
+    "@zag-js/slider": "^1.22.1",
+    "@zag-js/svelte": "^1.22.1",
+    "@zag-js/switch": "^1.22.1",
+    "@zag-js/tabs": "^1.22.1",
+    "@zag-js/tags-input": "^1.22.1",
+    "@zag-js/toast": "^1.22.1",
+    "@zag-js/tooltip": "^1.22.1",
+    "@skeletonlabs/skeleton-common": "1.0.0-next.1"
   },
   "peerDependencies": {
     "svelte": "^5.20.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^6.0.1",
-    "@sveltejs/kit": "^2.24.0",
-    "@sveltejs/package": "^2.4.0",
-    "@sveltejs/vite-plugin-svelte": "^6.1.0",
-    "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/vite": "^4.1.11",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@sveltejs/adapter-auto": "^6.1.0",
+    "@sveltejs/kit": "^2.37.0",
+    "@sveltejs/package": "^2.5.0",
+    "@sveltejs/vite-plugin-svelte": "^6.1.3",
+    "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/svelte": "^5.2.8",
     "jsdom": "^26.1.0",
     "publint": "^0.3.12",
-    "svelte": "^5.36.1",
-    "svelte-check": "^4.2.2",
-    "tailwindcss": "^4.1.11",
+    "svelte": "^5.38.6",
+    "svelte-check": "^4.3.1",
     "tslib": "^2.8.1",
-    "typescript": "^5.8.3",
-    "vite": "^7.0.4",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.3",
     "vitest": "3.2.4",
-    "@skeletonlabs/skeleton": "3.2.0"
+    "@skeletonlabs/skeleton": "4.0.0-next.1"
   },
   "type": "module",
   "scripts": {

package/dist/components/Accordion/Accordion.svelte

@@ -1,55 +0,0 @@
-<script lang="ts">
-	import * as accordion from '@zag-js/accordion';
-	import { useMachine, normalizeProps } from '@zag-js/svelte';
-	import { setAccordionContext } from './context.js';
-	import type { AccordionProps } from './types.js';
-
-	// Props
-	const {
-		animationConfig = {
-			duration: 200
-		},
-		// Root
-		base = '',
-		padding = '',
-		spaceY = 'space-y-2',
-		rounded = 'rounded-base',
-		width = 'w-full',
-		classes = '',
-		// Snippets
-		children,
-		iconOpen,
-		iconClosed,
-		...zagProps
-	}: AccordionProps = $props();
-
-	// Zag
-	const id = $props.id();
-	const service = useMachine(accordion.machine, () => ({
-		id: id,
-		...zagProps
-	}));
-	const api = $derived(accordion.connect(service, normalizeProps));
-
-	// Context
-	setAccordionContext({
-		get api() {
-			return api;
-		},
-		get animationConfig() {
-			return animationConfig;
-		},
-		get iconClosed() {
-			return iconClosed;
-		},
-		get iconOpen() {
-			return iconOpen;
-		}
-	});
-</script>
-
-<!-- @component Divide content into collapsible sections. -->
-
-<div class="{base} {padding} {spaceY} {rounded} {width} {classes}" {...api.getRootProps()} data-testid="accordion">
-	{@render children?.()}
-</div>

package/dist/components/Accordion/Accordion.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { AccordionProps } from './types.js';
-/** Divide content into collapsible sections. */
-declare const Accordion: import("svelte").Component<AccordionProps, {}, "">;
-type Accordion = ReturnType<typeof Accordion>;
-export default Accordion;

package/dist/components/Accordion/AccordionItem.svelte

@@ -1,90 +0,0 @@
-<script lang="ts">
-	import { slide } from 'svelte/transition';
-	import { getAccordionContext } from './context.js';
-	import type { AccordionItemProps } from './types.js';
-
-	// Props
-	const {
-		headingLevel = 3,
-		// Root
-		base,
-		spaceY,
-		classes,
-		// Control
-		controlBase = 'flex text-start items-center space-x-4 w-full',
-		controlHover = 'hover:preset-tonal-primary',
-		controlPadding = 'py-2 px-4',
-		controlRounded = 'rounded-base',
-		controlClasses,
-		// Lead
-		leadBase = '',
-		leadClasses = '',
-		// Content
-		contentBase = 'flex-1',
-		contentClasses = '',
-		// Indicator
-		indicatorBase = '',
-		indicatorClasses = '',
-		// Panel
-		panelBase,
-		panelPadding = 'py-2 px-4',
-		panelRounded,
-		panelClasses,
-		// Snippets
-		control,
-		lead,
-		panel,
-		...zagProps
-	}: AccordionItemProps = $props();
-
-	// Context
-	const ctx = getAccordionContext();
-</script>
-
-<!-- @component A accordion item component. -->
-
-<div class="{base} {spaceY} {classes}" {...ctx.api.getItemProps(zagProps)} data-testid="accordion-item">
-	<!-- Control -->
-	<svelte:element this={`h${headingLevel}`}>
-		<button
-			class="{controlBase} {controlHover} {controlPadding} {controlRounded} {controlClasses}"
-			{...ctx.api.getItemTriggerProps(zagProps)}
-			data-testid="accordion-control"
-		>
-			<!-- Lead -->
-			{#if lead}
-				<div class="{leadBase} {leadClasses}" data-testid="accordion-lead">{@render lead()}</div>
-			{/if}
-			<!-- Content -->
-			<div class="{contentBase} {contentClasses}" data-testid="accordion-control">
-				{@render control()}
-			</div>
-			<!-- Indicator -->
-			<div class="{indicatorBase} {indicatorClasses}" data-testid="accordion-indicator">
-				{#if ctx.api.value.includes(zagProps.value)}
-					{#if ctx.iconOpen}
-						{@render ctx.iconOpen()}
-					{:else}
-						&minus;
-					{/if}
-				{:else if ctx.iconClosed}
-					{@render ctx.iconClosed()}
-				{:else}
-					&plus;
-				{/if}
-			</div>
-		</button>
-	</svelte:element>
-
-	<!-- Panel -->
-	{#if ctx.api.value.includes(zagProps.value)}
-		<div
-			class="{panelBase} {panelPadding} {panelRounded} {panelClasses}"
-			{...ctx.api.getItemContentProps(zagProps)}
-			transition:slide={ctx.animationConfig}
-			data-testid="accordion-panel"
-		>
-			{@render panel?.()}
-		</div>
-	{/if}
-</div>

package/dist/components/Accordion/AccordionItem.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { AccordionItemProps } from './types.js';
-/** A accordion item component. */
-declare const AccordionItem: import("svelte").Component<AccordionItemProps, {}, "">;
-type AccordionItem = ReturnType<typeof AccordionItem>;
-export default AccordionItem;

package/dist/components/Accordion/context.d.ts

@@ -1,2 +0,0 @@
-import type { AccordionContext } from './types.js';
-export declare const setAccordionContext: (value: AccordionContext) => AccordionContext, getAccordionContext: () => AccordionContext, key: symbol;

package/dist/components/Accordion/context.js

@@ -1,3 +0,0 @@
-import { createContext } from '../../internal/create-context.js';
-// @ts-expect-error - Defaults for context don't make sense, `createContext` should just throw TBH
-export const [setAccordionContext, getAccordionContext, key] = createContext();

package/dist/components/Accordion/index.d.ts

@@ -1,4 +0,0 @@
-declare const _default: import("svelte").Component<import("./types").AccordionProps, {}, ""> & {
-    Item: import("svelte").Component<import("./types").AccordionItemProps, {}, "">;
-};
-export default _default;

package/dist/components/Accordion/index.js

@@ -1,3 +0,0 @@
-import Accordion from './Accordion.svelte';
-import Item from './AccordionItem.svelte';
-export default /* @__PURE__ */ Object.assign(Accordion, { Item });

package/dist/components/Accordion/types.d.ts

@@ -1,74 +0,0 @@
-import type { Snippet } from 'svelte';
-import * as accordion from '@zag-js/accordion';
-import type { SlideParams } from 'svelte/transition';
-export interface AccordionContext extends Pick<AccordionProps, 'animationConfig' | 'iconOpen' | 'iconClosed'> {
-    api: ReturnType<typeof accordion.connect>;
-}
-export interface AccordionProps extends Omit<accordion.Props, 'id' | 'orientation'> {
-    /** The animation configuration */
-    animationConfig?: SlideParams;
-    /** Sets base styles. */
-    base?: string;
-    /** Set padding styles. */
-    padding?: string;
-    /** Set vertical spacing styles. */
-    spaceY?: string;
-    /** Set border radius styles. */
-    rounded?: string;
-    /** Set the width styles. */
-    width?: string;
-    /** Provide arbitrary CSS classes. */
-    classes?: string;
-    /** The default child slot. */
-    children: Snippet;
-    /** Set the open state icon. */
-    iconOpen?: Snippet;
-    /** Set the closed state icon. */
-    iconClosed?: Snippet;
-}
-export interface AccordionItemProps extends accordion.ItemProps {
-    /** The heading level. */
-    headingLevel?: number;
-    /** Sets base styles. */
-    base?: string;
-    /** Set vertical spacing styles. */
-    spaceY?: string;
-    /** Provide arbitrary CSS classes. */
-    classes?: string;
-    /** Sets control's base styles. */
-    controlBase?: string;
-    /** Sets control's the hover styles. */
-    controlHover?: string;
-    /** Sets control's the padding styles. */
-    controlPadding?: string;
-    /** Sets control's the border radius styles. */
-    controlRounded?: string;
-    /** Provide arbitrary CSS classes to the control. */
-    controlClasses?: string;
-    /** Sets the lead's base styles */
-    leadBase?: string;
-    /** Provide arbitrary CSS classes to the lead. */
-    leadClasses?: string;
-    /** Sets the lead's base styles */
-    contentBase?: string;
-    /** Provide arbitrary CSS classes to the content. */
-    contentClasses?: string;
-    /** Sets the lead's base styles */
-    indicatorBase?: string;
-    /** Provide arbitrary CSS classes to the indicator. */
-    indicatorClasses?: string;
-    /** Set the panel's base styles. */
-    panelBase?: string;
-    /** Set the panel's padding styles. */
-    panelPadding?: string;
-    /** Set the panel's border-radius styles. */
-    panelRounded?: string;
-    /** Provide arbitrary CSS classes to the panel. */
-    panelClasses?: string;
-    /** The control's default slot. */
-    control: Snippet;
-    /** The control's lead icon slot. */
-    lead?: Snippet;
-    /** The panels's default slot. */
-    panel?: Snippet;
-}

package/dist/components/AppBar/AppBar.svelte

@@ -1,72 +0,0 @@
-<script lang="ts">
-	import type { AppBarProps } from './types.js';
-
-	const {
-		// Root
-		base = 'w-full flex flex-col',
-		background = 'bg-surface-100-900',
-		spaceY = 'space-y-4',
-		border = '',
-		padding = 'p-4',
-		shadow = '',
-		classes = '',
-		// Toolbar
-		toolbarBase = 'flex justify-between',
-		toolbarGridCols = 'grid-cols-[auto_1fr_auto]',
-		toolbarGap = 'gap-4',
-		toolbarClasses = '',
-		// Lead
-		leadBase = 'flex',
-		leadSpaceX = 'space-x-4 rtl:space-x-reverse',
-		leadPadding = '',
-		leadClasses = '',
-		// Center
-		centerBase = 'grow',
-		centerAlign = 'text-center',
-		centerPadding = '',
-		centerClasses = '',
-		// Trail
-		trailBase = 'flex',
-		trailSpaceX = 'space-x-4 rtl:space-x-reverse',
-		trailPadding = '',
-		trailClasses = '',
-		// Headline
-		headlineBase = 'w-full',
-		headlineClasses = '',
-		// Snippets
-		children,
-		lead,
-		trail,
-		headline
-	}: AppBarProps = $props();
-</script>
-
-<!-- @component A header element for the top of a page layout. -->
-
-<header class="{base} {background} {spaceY} {border} {padding} {shadow} {classes}" data-testid="app-bar">
-	<section class="{toolbarBase} {toolbarGridCols} {toolbarGap} {toolbarClasses}" data-testid="app-bar-toolbar">
-		{#if lead}
-			<div class="{leadBase} {leadSpaceX} {leadPadding} {leadClasses}">
-				{@render lead()}
-			</div>
-		{/if}
-
-		{#if children}
-			<div class="{centerBase} {centerAlign} {centerPadding} {centerClasses}">
-				{@render children()}
-			</div>
-		{/if}
-
-		{#if trail}
-			<div class="{trailBase} {trailSpaceX} {trailPadding} {trailClasses}">
-				{@render trail()}
-			</div>
-		{/if}
-	</section>
-
-	{#if headline}
-		<section class="{headlineBase} {headlineClasses}" data-testid="app-bar-headline">
-			{@render headline()}
-		</section>
-	{/if}
-</header>