diff --git a/bun.lock b/bun.lock index c0380bb8..74629a85 100644 --- a/bun.lock +++ b/bun.lock @@ -27,7 +27,7 @@ "eslint-config-prettier": "^10.1.8", "eslint-plugin-svelte": "^3.20.0", "globals": "^17.7.0", - "lapikit": "^0.0.0-insiders.ee60e68", + "lapikit": "^0.0.0-insiders.a776fc5", "mdsvex": "^0.12.7", "prettier": "^3.9.3", "prettier-plugin-svelte": "^3.5.2", @@ -529,7 +529,7 @@ "known-css-properties": ["known-css-properties@0.37.0", "", {}, "sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ=="], - "lapikit": ["lapikit@0.0.0-insiders.ee60e68", "", { "peerDependencies": { "svelte": "^5.0.0" }, "bin": { "lapikit": "bin/index.js" } }, "sha512-tRqNfAUKO39b2G9mH64u/D2OXUN+dYNEmQXiNQV/EeupSQup7tW0/G9pT2B6TEu2c9HDNNr3+gZjoF4aYmR9wg=="], + "lapikit": ["lapikit@0.0.0-insiders.a776fc5", "", { "peerDependencies": { "svelte": "^5.0.0" }, "bin": { "lapikit": "bin/index.js" } }, "sha512-RsjJ5SqB3DaBBlkJPPUZTFehFy4DKTkPR/eGaya7ilciUytdwlSmj4g5/T8RTp9jl259dxqbn12/wvOHp7WKFw=="], "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="], diff --git a/package.json b/package.json index af4631dc..888e6e2b 100644 --- a/package.json +++ b/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.ee60e68", + "lapikit": "^0.0.0-insiders.a776fc5", "mdsvex": "^0.12.7", "prettier": "^3.9.3", "prettier-plugin-svelte": "^3.5.2", diff --git a/src/content/docs/components/card.md b/src/content/docs/components/card.md index 53cd03e4..87082b34 100644 --- a/src/content/docs/components/card.md +++ b/src/content/docs/components/card.md @@ -11,6 +11,7 @@ description: "Organize and display content in visually coherent blocks. The Lapi import Density from '$examples/components/card/density.svelte'; import Interactive from '$examples/components/card/interactive.svelte'; import Structure from '$examples/components/card/structure.svelte'; + import Elevation from '$examples/components/card/elevation.svelte'; # Card component @@ -59,7 +60,7 @@ The `kit:card` component is a versatile container used to group together informa -### interactive +### Interactive An interactive card lifts on hover and shows a ripple on click. This behaviour is automatic when `href` is set or an `onclick` handler is attached. Use `interactive` to enable it on a plain `
` without changing the element. @@ -75,6 +76,17 @@ An interactive card lifts on hover and shows a ripple on click. This behaviour i +### Elevation + +The Elevation property allows you to apply a `box shadow` effect to the **Card** component. This property lets you add this effect to the component—either by default or when the component is in the `hover` or `active` states. + +- **elevation**: `'0' | '1' | '2' | '3' | '4' | '5'` = `'undefined'` +- **elevation** (multi-state): `{base: value, hover: value, active: value}` + + import('$examples/components/card/elevation.svelte?raw')}> + + + ### Without preprocess Lapikit If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the component directly: @@ -91,6 +103,7 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the c | variant | `'filled' \| 'outline' \| 'text'` | Visual style. | `'filled'` | | density | `'none' \| 'compact' \| 'default' \| 'comfortable'` | Internal padding. | `'default'` | | rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Border radius. | `'md'` | +| elevation | `'0' \| '1' \| '2' \| '3' \| '4' \| '5' \| ElevationState` | Add shadow effect | | | href | `string` | Renders as ``. Enables interactive mode. | | | interactive | `boolean` | Enables hover lift and ripple without changing the tag. | `false` | | active | `boolean` | Applies the pressed background. | `false` | diff --git a/src/content/docs/hooks/use-theme.md b/src/content/docs/hooks/use-theme.md index 0d60ea17..74d78c53 100644 --- a/src/content/docs/hooks/use-theme.md +++ b/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." ---