udpate documentation card with new submodule and prepare new integrat…

package.json

@@ -37,7 +37,7 @@
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.20.0",
 		"globals": "^17.7.0",
-		"lapikit": "^0.0.0-insiders.103a606",
+		"lapikit": "^0.0.0-insiders.ee60e68",
 		"mdsvex": "^0.12.7",
 		"prettier": "^3.9.3",
 		"prettier-plugin-svelte": "^3.5.2",

src/content/docs/components/card.md

@@ -21,16 +21,15 @@ The `kit:card` component is a versatile container used to group together informa
 <Preview/>
 </LazyRepl>
 
-`kit:card` is a layout container, it adds no heading or structure on its own. Use the utility classes below inside it to organise content consistently.
+`kit:card` is a layout container, it adds no heading or structure on its own. Use the following subcomponents to structure your card content:
 
-| class                      | description                                                    |
-| -------------------------- | -------------------------------------------------------------- |
-| `kit-card__media`          | Wraps media (image, video). Clips overflow to the card radius. |
-| `kit-card__header`         | Bold title. `font-weight: 600`, tight line-height.             |
-| `kit-card__body`           | Main text content.                                             |
-| `kit-card__footer`         | Flex row between footer text and actions.                      |
-| `kit-card__footer-content` | Muted text (date, meta) inside the footer.                     |
-| `kit-card__actions`        | Inline action buttons inside the footer.                       |
+| components           | description                                                    |
+| -------------------- | -------------------------------------------------------------- |
+| `kit:card-media`     | Wraps media (image, video). Clips overflow to the card radius. |
+| `kit:card-title`     | Bold title. `font-weight: 600`, tight line-height.             |
+| `kit:card-content`   | Main text content.                                             |
+| `kit:card-actions`   | Flex bar for action buttons.                                   |
+| `kit:card-container` | Main container for the card content.                           |
 
 <LazyRepl title="card.svelte" lang="svelte" content={() => import('$examples/components/card/structure.svelte?raw')}>
 <Structure/>
@@ -54,7 +53,7 @@ The `kit:card` component is a versatile container used to group together informa
 
 `density` adjusts the internal padding.
 
-- **density**: `'compact' | 'default' | 'comfortable'` = `'default'`
+- **density**: `'none' | 'compact' | 'default' | 'comfortable'` = `'default'`
 
 <LazyRepl title="card.svelte" lang="svelte" content={() => import('$examples/components/card/density.svelte?raw')}>
 <Density/>
@@ -90,7 +89,7 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the c
 | ----------- | --------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
 | is          | `'div' \| 'article' \| 'section' \| 'aside' \| 'a' \| 'button'` | HTML element to render. Overridden by `href`.           | `'div'`     |
 | variant     | `'filled' \| 'outline' \| 'text'`                               | Visual style.                                           | `'filled'`  |
-| density     | `'compact' \| 'default' \| 'comfortable'`                       | Internal padding.                                       | `'default'` |
+| density     | `'none' \| 'compact' \| 'default' \| 'comfortable'`             | Internal padding.                                       | `'default'` |
 | rounded     | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`                     | Border radius.                                          | `'md'`      |
 | href        | `string`                                                        | Renders as `<a>`. Enables interactive mode.             |             |
 | interactive | `boolean`                                                       | Enables hover lift and ripple without changing the tag. | `false`     |

src/content/docs/hooks/use-theme.md

@@ -1,6 +1,6 @@
 ---
-title: "useTheme action"
-description: "Learn how the UseTheme hook from Lapikit simplifies theme management in Svelte: switch dark/light modes, sync global state, and keep components in sync effortlessly."
+title: 'useTheme action'
+description: 'Learn how the UseTheme hook from Lapikit simplifies theme management in Svelte: switch dark/light modes, sync global state, and keep components in sync effortlessly.'
 ---
 
 <script>
@@ -23,7 +23,7 @@ You can use this action by calling `useTheme` with the desired theme name. For e
 
 You can also customize the storage key in localStorage by passing a second argument to the `useTheme` function. By default, this key is set to `@lapikit/theme`.
 
-You can customize the available themes and their associated styles via the configuration file `plugins/lapikit.(js|ts)`. See the [themes](/docs/customize) documentation to learn about all the available options for customizing Lapikit for your application.
+See the [themes](/docs/customize) documentation to learn about all the available options for customizing Lapikit for your application.
 
 ## API References
 

src/content/examples/components/card/density.svelte

@@ -1,8 +1,8 @@
-<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start;">
-	{#each ['compact', 'default', 'comfortable'] as density (density)}
+<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: start;">
+	{#each ['none', 'compact', 'default', 'comfortable'] as density (density)}
 		<kit:card variant="outline" {density}>
-			<p class="kit-card__header">{density}</p>
-			<p class="kit-card__body">Padding adjusts with density.</p>
+			<kit:card-title>{density}</kit:card-title>
+			<kit:card-content>Padding adjusts with density.</kit:card-content>
 		</kit:card>
 	{/each}
 </div>

src/content/examples/components/card/interactive.svelte

@@ -1,11 +1,16 @@
 <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
 	<kit:card variant="outline" href="/docs">
-		<p class="kit-card__header">As a link</p>
-		<p class="kit-card__body">Interactive via <code>href</code> — renders as <code>&lt;a&gt;</code> with hover lift.</p>
+		<kit:card-title>As a link</kit:card-title>
+		<kit:card-content
+			>Interactive via <code>href</code> — renders as <code>&lt;a&gt;</code> with hover lift.</kit:card-content
+		>
 	</kit:card>
 
-	<kit:card variant="outline" interactive>
-		<p class="kit-card__header">Interactive</p>
-		<p class="kit-card__body">Hover lift and ripple via <code>interactive</code> prop — stays as <code>&lt;div&gt;</code>.</p>
+	<kit:card interactive>
+		<kit:card-title>Interactive</kit:card-title>
+		<kit:card-content
+			>Hover lift and ripple via <code>interactive</code> prop — stays as
+			<code>&lt;div&gt;</code>.</kit:card-content
+		>
 	</kit:card>
 </div>

src/content/examples/components/card/preview.svelte

@@ -2,46 +2,49 @@
 	import { Heart, Share2 } from 'lucide-svelte';
 </script>
 
-<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem;">
-	<kit:card variant="outline">
-		<div class="kit-card__media">
+<div
+	style="display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem;"
+>
+	<kit:card>
+		<kit:card-media>
 			<kit:aspect-ratio ratio="16/9">
 				<img src="https://picsum.photos/seed/card1/400/225" alt="" />
 			</kit:aspect-ratio>
-		</div>
-		<p class="kit-card__header">Mountain hike</p>
-		<p class="kit-card__body">A breathtaking trail through alpine meadows and rocky peaks.</p>
-		<div class="kit-card__footer">
-			<span class="kit-card__footer-content">2 hours ago</span>
-			<div class="kit-card__actions">
-				<kit:btn icon variant="text" density="compact">
-					<kit:icon size="sm"><Heart /></kit:icon>
-				</kit:btn>
-				<kit:btn icon variant="text" density="compact">
-					<kit:icon size="sm"><Share2 /></kit:icon>
-				</kit:btn>
-			</div>
-		</div>
+		</kit:card-media>
+		<kit:card-title>Mountain hike</kit:card-title>
+		<kit:card-content>A breathtaking trail through alpine meadows and rocky peaks.</kit:card-content
+		>
+		<kit:card-actions>
+			<span>2 hours ago</span>
+			<kit:spacer />
+			<kit:btn icon variant="text" density="compact">
+				<kit:icon size="sm"><Heart /></kit:icon>
+			</kit:btn>
+			<kit:btn icon variant="text" density="compact">
+				<kit:icon size="sm"><Share2 /></kit:icon>
+			</kit:btn>
+		</kit:card-actions>
 	</kit:card>
 
 	<kit:card variant="outline">
-		<div class="kit-card__media">
+		<kit:card-media>
 			<kit:aspect-ratio ratio="16/9">
 				<img src="https://picsum.photos/seed/card2/400/225" alt="" />
 			</kit:aspect-ratio>
-		</div>
-		<p class="kit-card__header">Forest trail</p>
-		<p class="kit-card__body">Dense canopy, mossy rocks, and the sound of a distant waterfall.</p>
-		<div class="kit-card__footer">
-			<span class="kit-card__footer-content">Yesterday</span>
-			<div class="kit-card__actions">
-				<kit:btn icon variant="text" density="compact">
-					<kit:icon size="sm"><Heart /></kit:icon>
-				</kit:btn>
-				<kit:btn icon variant="text" density="compact">
-					<kit:icon size="sm"><Share2 /></kit:icon>
-				</kit:btn>
-			</div>
-		</div>
+		</kit:card-media>
+		<kit:card-title>Forest trail</kit:card-title>
+		<kit:card-content
+			>Dense canopy, mossy rocks, and the sound of a distant waterfall.</kit:card-content
+		>
+		<kit:card-actions>
+			<span>Yesterday</span>
+			<kit:spacer />
+			<kit:btn icon variant="text" density="compact">
+				<kit:icon size="sm"><Heart /></kit:icon>
+			</kit:btn>
+			<kit:btn icon variant="text" density="compact">
+				<kit:icon size="sm"><Share2 /></kit:icon>
+			</kit:btn>
+		</kit:card-actions>
 	</kit:card>
 </div>

src/content/examples/components/card/structure.svelte

@@ -2,28 +2,27 @@
 	import { BookOpen } from 'lucide-svelte';
 </script>
 
-<kit:card variant="outline" style="max-width: 320px;">
-	<div class="kit-card__media">
+<kit:card style="max-width: 320px;">
+	<kit:card-media>
 		<kit:aspect-ratio ratio="16/9">
 			<img src="https://picsum.photos/seed/card3/400/225" alt="" />
 		</kit:aspect-ratio>
-	</div>
+	</kit:card-media>
 
-	<p class="kit-card__header">Getting started</p>
+	<kit:card-title>Getting started</kit:card-title>
 
-	<p class="kit-card__body">
+	<kit:card-content>
 		Learn how to install Lapikit and set up the preprocessor in your Svelte project.
-	</p>
+	</kit:card-content>
 
-	<div class="kit-card__footer">
-		<span class="kit-card__footer-content">5 min read</span>
-		<div class="kit-card__actions">
-			<kit:btn variant="outline" density="compact" size="sm">
-				{#snippet prepend()}
-					<kit:icon size="sm"><BookOpen /></kit:icon>
-				{/snippet}
-				Read
-			</kit:btn>
-		</div>
-	</div>
+	<kit:card-actions>
+		<span>5 min read</span>
+		<kit:spacer />
+		<kit:btn density="compact" size="sm">
+			{#snippet prepend()}
+				<kit:icon size="sm"><BookOpen /></kit:icon>
+			{/snippet}
+			Read
+		</kit:btn>
+	</kit:card-actions>
 </kit:card>

src/content/examples/components/card/variants.svelte

@@ -1,16 +1,16 @@
 <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
 	<kit:card variant="filled">
-		<p class="kit-card__header">Filled</p>
-		<p class="kit-card__body">Accent background with white text.</p>
+		<kit:card-title>Filled</kit:card-title>
+		<kit:card-content>Accent background with white text.</kit:card-content>
 	</kit:card>
 
 	<kit:card variant="outline">
-		<p class="kit-card__header">Outline</p>
-		<p class="kit-card__body">Transparent background with accent border.</p>
+		<kit:card-title>Outline</kit:card-title>
+		<kit:card-content>Transparent background with accent border.</kit:card-content>
 	</kit:card>
 
 	<kit:card variant="text">
-		<p class="kit-card__header">Text</p>
-		<p class="kit-card__body">No background or border, accent text only.</p>
+		<kit:card-title>Text</kit:card-title>
+		<kit:card-content>No background or border, accent text only.</kit:card-content>
 	</kit:card>
 </div>

src/content/examples/hooks/areaTheme-toggle.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { ThemeAction } from 'lapikit';
+	import { createTheme } from 'lapikit/actions';
+
+	const areaA = createTheme();
+	const areaB = createTheme();
+	const areaC = createTheme();
+
+	function toggle(area: ThemeAction) {
+		area.set(area.active === 'dark' ? 'light' : 'dark');
+	}
+</script>
+
+<div use:areaA.action={{ name: 'dark' }}>
+	Area A : {areaA.active}
+	<button onclick={() => toggle(areaA)}>Toggle</button>
+</div>
+
+<div use:areaB.action={{ name: 'light', key: '@custom/area-b' }}>
+	Area B : {areaB.active}
+	<button onclick={() => toggle(areaB)}>Toggle</button>
+</div>
+
+<div use:areaC.action>
+	Area C : {areaC.active}
+	<button onclick={() => toggle(areaC)}>Toggle</button>
+</div>

src/content/examples/hooks/globalTheme-toggle.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { createGlobalTheme, useTheme } from 'lapikit/actions';
+	import { Moon, Sun } from 'lucide-svelte';
+
+	const app = createGlobalTheme({ name: 'light' });
+</script>
+
+<kit:btn
+	icon
+	onclick={() => useTheme(app.active === 'dark' ? 'light' : 'dark')}
+	aria-label="Toggle theme"
+	size="lg"
+>
+	{#if app.active === 'light'}
+		<kit:icon>
+			<Moon />
+		</kit:icon>
+	{:else}
+		<kit:icon>
+			<Sun />
+		</kit:icon>
+	{/if}
+</kit:btn>