diff --git a/bun.lock b/bun.lock index 74629a85..c1b5ba78 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.a776fc5", + "lapikit": "^0.0.0-insiders.bd3f1f3", "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.a776fc5", "", { "peerDependencies": { "svelte": "^5.0.0" }, "bin": { "lapikit": "bin/index.js" } }, "sha512-RsjJ5SqB3DaBBlkJPPUZTFehFy4DKTkPR/eGaya7ilciUytdwlSmj4g5/T8RTp9jl259dxqbn12/wvOHp7WKFw=="], + "lapikit": ["lapikit@0.0.0-insiders.bd3f1f3", "", { "peerDependencies": { "svelte": "^5.0.0" }, "bin": { "lapikit": "bin/index.js" } }, "sha512-eGmZvlcC002R1i+k5z3pLAu7Q1TkDePQENDWCpFbLoc1P9XeU8CevMXCsRVPCs7/aoKMxzfirWZWp5nJsl6RLg=="], "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 888e6e2b..6e8769c2 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.a776fc5", + "lapikit": "^0.0.0-insiders.bd3f1f3", "mdsvex": "^0.12.7", "prettier": "^3.9.3", "prettier-plugin-svelte": "^3.5.2", diff --git a/src/app.html b/src/app.html index ff310ec1..8d483635 100644 --- a/src/app.html +++ b/src/app.html @@ -3,14 +3,14 @@ - --> %sveltekit.head% diff --git a/src/content/docs/components/accordion.md b/src/content/docs/components/accordion.md index a6dda995..4cc11800 100644 --- a/src/content/docs/components/accordion.md +++ b/src/content/docs/components/accordion.md @@ -112,31 +112,42 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the c **`kit:accordion`** -| props | type | description | default | -| ---------- | ------------------------------------------- | ------------------------------------------------- | ------- | -| spacer | `boolean` | Adds a gap between items. | `false` | -| hideIcon | `boolean` | Hides the indicator icon on all child items. | `false` | -| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Border radius applied to all items. | | -| text | `string` | Applies a text color CSS variable. | | -| color | `string` | Foreground color override (`--kit-accordion-fg`). | | -| background | `string` | Background color override (`--kit-accordion-bg`). | | -| children | `Snippet` | Accordion items to render. | | +| props | type | description | default | +| ------------- | ----------------------------------------------------- | ------------------------------------------------------ | ----------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| is | `div` | Defines the HTML tag used as the root element. | `'div'` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on accordion | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on accordion | | +| spacer | `boolean` | Adds a gap between items. | | +| hideIcon | `boolean` | Hides the indicator icon on all child items. | | +| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | Border radius applied to all items. | `'md'` | +| text | `string` | Applies a text color CSS variable. | | +| density | `'none' \| 'compact' \| 'default' \| 'comfortable'` | Spacing inside accordion. | `'default'` | +| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Sizing height, font and gap for accordion items. | `'md'` | +| variant | `'filled' \| 'outline' \| 'text'` | Visual style of the accordion items. | `'filled'` | +| color | `string` | Foreground color override (`--kit-accordion-item-fg`). | | +| background | `string` | Background color override (`--kit-accordion-item-bg`). | | +| children | `Snippet` | Accordion items to render. | | **`kit:accordion-item`** -| props | type | description | default | -| ---------- | ------------------------------------------- | ---------------------------------------------------------------- | ------- | -| index | `string \| number` | Unique identifier for this item. **Required.** | | -| open | `boolean` | Whether the item is expanded. | `false` | -| toggle | `(index: string \| number) => void` | Called when the trigger is clicked. Receives the item's `index`. | | -| text | `string` | Label displayed in the trigger button. | | -| activator | `Snippet` | Custom trigger content - replaces `text`. | | -| indicator | `Snippet<[{ open: boolean }]>` | Custom indicator - replaces the default chevron icon. | | -| disabled | `boolean` | Prevents the item from being toggled. | `false` | -| readOnly | `boolean` | Renders the item as non-interactive without disabled styling. | `false` | -| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Per-item border radius override. | | -| color | `string` | Foreground color override (`--kit-accordion-item-fg`). | | -| background | `string` | Background color override (`--kit-accordion-item-bg`). | | -| children | `Snippet` | Content revealed when the item is open. | | +| props | type | description | default | +| ------------- | ---------------------------------------------------------- | ---------------------------------------------------------------- | ------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| is | `div` | Defines the HTML tag used as the root element. | `'div'` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on accordion item | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on accordion item | | +| index | `string \| number` | Unique identifier for this item. **Required.** | | +| open | `boolean` | Whether the item is expanded. | `false` | +| toggle | `(index: string \| number) => void` | Called when the trigger is clicked. Receives the item's `index`. | | +| text | `string` | Label displayed in the trigger button. | | +| activator | `Snippet` | Custom trigger content - replaces `text`. | | +| indicator | `Snippet<[{ open: boolean }]>` | Custom indicator - replaces the default chevron icon. | | +| disabled | `boolean` | Prevents the item from being toggled. | `false` | +| readOnly | `boolean` | Renders the item as non-interactive without disabled styling. | `false` | +| color | `string` | Foreground color override (`--kit-accordion-item-fg`). | | +| background | `string` | Background color override (`--kit-accordion-item-bg`). | | +| children | `Snippet` | Content revealed when the item is open. | | +| elevation | `'0' \| '1' \| '2' \| '3' \| '4' \| '5' \| ElevationState` | Add shadow effect | | For the state hook API, see the dedicated [`useAccordion`](/docs/hooks/use-accordion) page and for complete your `kit:accordion` interface, consider the [Icon](/docs/components/icon) and [Chip](/docs/components/chip) components for dynamic content. diff --git a/src/content/docs/components/alert.md b/src/content/docs/components/alert.md index 597305ac..e255c9de 100644 --- a/src/content/docs/components/alert.md +++ b/src/content/docs/components/alert.md @@ -114,20 +114,26 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the c **`kit:alert`** -| props | type | description | default | -| ---------- | ---------------------------------------------------------- | ------------------------------------------------ | ----------- | -| is | `'div' \| 'section' \| 'aside' \| 'article'` | HTML element to render. | `'div'` | -| open | `boolean` | Controls visibility. Bindable. | `true` | -| closable | `boolean` | Adds a close button that sets `open` to `false`. | `false` | -| variant | `'filled' \| 'outline' \| 'text'` | Visual style of the alert. | `'filled'` | -| density | `'compact' \| 'default' \| 'comfortable'` | Spacing inside the alert. | `'default'` | -| tone | `'default' \| 'info' \| 'success' \| 'warning' \| 'error'` | Semantic color tone. | `'default'` | -| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Border radius. | `'md'` | -| color | `string` | Foreground color override (`--kit-alert-fg`). | | -| background | `string` | Background color override (`--kit-alert-bg`). | | -| prepend | `Snippet` | Content rendered before the main text. | | -| append | `Snippet` | Content rendered after the main text. | | -| close | `Snippet` | Custom content inside the close button. | | -| children | `Snippet` | Main alert content. | | +| props | type | description | default | +| -------------- | ---------------------------------------------------------- | ------------------------------------------------ | ----------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| is | `'div' \| 'section' \| 'aside' \| 'article'` | HTML element to render. | `'div'` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on alert. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on alert. | | +| open $bindable | `boolean` | Controls visibility. Bindable. | `true` | +| closable | `boolean` | Adds a close button that sets `open` to `false`. | `false` | +| variant | `'filled' \| 'outline' \| 'text'` | Visual style of the alert. | `'filled'` | +| density | `'none' \| 'compact' \| 'default' \| 'comfortable'` | Spacing inside the alert. | `'default'` | +| tone | `'default' \| 'info' \| 'success' \| 'warning' \| 'error'` | Semantic color tone. | `'default'` | +| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | Border radius. | `'md'` | +| color | `string` | Foreground color override (`--kit-alert-fg`). | | +| background | `string` | Background color override (`--kit-alert-bg`). | | +| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Sizing height, font and gap for alert. | `'md'` | +| prepend | `Snippet` | Content rendered before the main text. | | +| append | `Snippet` | Content rendered after the main text. | | +| close | `Snippet` | Custom content inside the close button. | | +| children | `Snippet` | Main alert content. | | +| multiline | `boolean` | Define alert message on one or more line. | | +| elevation | `'0' \| '1' \| '2' \| '3' \| '4' \| '5' \| ElevationState` | Add shadow effect. | | To enhance your `kit:alert`, think of [Icon](/docs/components/icon) for legibility, or [Button](/docs/components/button) for integrated actions. diff --git a/src/content/docs/components/appbar.md b/src/content/docs/components/appbar.md index 9ca95caf..2ea70660 100644 --- a/src/content/docs/components/appbar.md +++ b/src/content/docs/components/appbar.md @@ -64,15 +64,20 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the c **`kit:appbar`** -| props | type | description | default | -| ------------ | ----------------------------------------------------- | ----------------------------------------------- | ----------- | -| is | `'div' \| 'header' \| 'nav'` | HTML element to render. | `'header'` | -| variant | `'filled' \| 'outline' \| 'text'` | Visual style of the appbar. | `'filled'` | -| density | `'compact' \| 'default' \| 'comfortable'` | Height and horizontal padding. | `'default'` | -| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| string` | Border radius. Accepts a custom `px` value. | `0` | -| color | `string` | Foreground color override (`--kit-appbar-fg`). | | -| background | `string` | Background color override (`--kit-appbar-bg`). | | -| classContent | `string \| string[]` | Class(es) applied to the inner content wrapper. | | -| children | `Snippet` | Appbar content. | | +| props | type | description | default | +| ------------- | ---------------------------------------------------------- | ----------------------------------------------- | ----------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| is | `'div' \| 'header' \| 'nav'` | HTML element to render. | `'header'` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on appbar. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on appbar. | | +| variant | `'filled' \| 'outline' \| 'text'` | Visual style of the appbar. | `'filled'` | +| density | `'none' \| 'compact' \| 'default' \| 'comfortable'` | Height and horizontal padding. | `'default'` | +| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | Border radius. | `0` | +| color | `string` | Foreground color override (`--kit-appbar-fg`). | | +| background | `string` | Background color override (`--kit-appbar-bg`). | | +| classContent | `string \| string[]` | Class(es) applied to the inner content wrapper. | | +| children | `Snippet` | Appbar content. | | +| elevation | `'0' \| '1' \| '2' \| '3' \| '4' \| '5' \| ElevationState` | Add shadow effect. | | +| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Sizing height, font and gap for appbar. | `'md'` | An effective `kit:appbar` goes well with [Dropdown](/docs/components/dropdown) for menus and [Avatars](/docs/components/avatar) for identification. diff --git a/src/content/docs/components/application.md b/src/content/docs/components/application.md index db3546c9..745597a6 100644 --- a/src/content/docs/components/application.md +++ b/src/content/docs/components/application.md @@ -45,8 +45,11 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, you can impo **Root** -| props | type | description | default | -| -------- | ------------------------ | ------------------------------------------- | ----------- | -| children | `Snippet` \| `undefined` | Child content to be displayed in `kit:app`. | `undefined` | +| props | type | description | default | +| ------------- | --------------------------------- | ----------------------------------------------- | ----------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on app. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on app. | | +| children | `Snippet` \| `undefined` | Child content to be displayed in `kit:app`. | `undefined` | Then you can explore basic components like [Button](/docs/components/button), [Card](/docs/components/card) or [Dialog](/docs/components/dialog) to enrich your `kit:app`. diff --git a/src/content/docs/components/aspect-ratio.md b/src/content/docs/components/aspect-ratio.md index 51c87672..707dd1ed 100644 --- a/src/content/docs/components/aspect-ratio.md +++ b/src/content/docs/components/aspect-ratio.md @@ -67,13 +67,16 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the c **`kit:aspect-ratio`** -| props | type | description | default | -| ----------- | ------------------------------------------------------- | ---------------------------------------------------- | --------- | -| is | `'div' \| 'span' \| 'figure' \| 'section' \| 'article'` | HTML element to render. | `'div'` | -| ratio | `string \| number` | Aspect ratio. Accepts `"w/h"`, `"w:h"`, or a number. | `16/9` | -| aspectRatio | `string \| number` | Alias for `ratio`. | `16/9` | -| fit | `'cover' \| 'contain' \| 'fill'` | `object-fit` applied to child media elements. | `'cover'` | -| inline | `boolean` | Renders as `inline-block` with `width: auto`. | `false` | -| children | `Snippet` | Content to constrain. | | +| props | type | description | default | +| ------------- | ------------------------------------------------------- | ---------------------------------------------------- | --------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| is | `'div' \| 'span' \| 'figure' \| 'section' \| 'article'` | HTML element to render. | `'div'` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on aspect-ratio. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on aspect-ratio. | | +| ratio | `string \| number` | Aspect ratio. Accepts `"w/h"`, `"w:h"`, or a number. | `16/9` | +| aspectRatio | `string \| number` | Alias for `ratio`. | `16/9` | +| fit | `'cover' \| 'contain' \| 'fill'` | `object-fit` applied to child media elements. | `'cover'` | +| inline | `boolean` | Renders as `inline-block` with `width: auto`. | `false` | +| children | `Snippet` | Content to constrain. | | Use `kit:aspect-ratio` on [Icon](/docs/components/icon) to visually structure your media components in a [Card](/docs/components/card). diff --git a/src/content/docs/components/avatar.md b/src/content/docs/components/avatar.md index 67ff9d22..961fad04 100644 --- a/src/content/docs/components/avatar.md +++ b/src/content/docs/components/avatar.md @@ -76,11 +76,18 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the c **`kit:avatar`** -| props | type | description | default | -| -------- | ----------------------------------------- | ------------------------------------------------------- | ----------- | -| label | `string` | Text displayed inside the avatar (uppercased). | | -| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Diameter and font size. Label mode only. | `'md'` | -| density | `'compact' \| 'default' \| 'comfortable'` | Size multiplier applied on top of `size`. Label only. | `'default'` | -| children | `Snippet` | Content when `label` is not set (typically an ``). | | +| props | type | description | default | +| ------------- | ---------------------------------------------------------- | ------------------------------------------------------- | ----------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on avatar. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on avatar. | | +| label | `string` | Text displayed inside the avatar (uppercased). | | +| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Diameter and font size. Label mode only. | `'md'` | +| density | `'none' \| 'compact' \| 'default' \| 'comfortable'` | Size multiplier applied on top of `size`. Label only. | `'default'` | +| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | Border radius. | `'full'` | +| children | `Snippet` | Content when `label` is not set (typically an ``). | | +| elevation | `'0' \| '1' \| '2' \| '3' \| '4' \| '5' \| ElevationState` | Add shadow effect. | | +| color | `string` | Foreground color override (`--kit-avatar-fg`). | | +| background | `string` | Background color override (`--kit-avatar-bg`). | | Associate `kit:avatar` with user [Cards](/docs/components/card) or [Chips](/docs/components/chip) to display roles or status. diff --git a/src/content/docs/components/button.md b/src/content/docs/components/button.md index 564368ee..cefe9346 100644 --- a/src/content/docs/components/button.md +++ b/src/content/docs/components/button.md @@ -125,24 +125,30 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the c **`kit:btn`** -| props | type | description | default | -| -------- | ------------------------------------------- | -------------------------------------------------------- | ----------- | -| is | `'button' \| 'a' \| 'input'` | HTML element to render. Overridden by `href` or `input`. | `'button'` | -| variant | `'filled' \| 'outline' \| 'text' \| 'link'` | Visual style. | `'filled'` | -| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Height and font size. | `'md'` | -| density | `'compact' \| 'default' \| 'comfortable'` | Padding and height multiplier. | `'default'` | -| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Border radius. | | -| href | `string` | Renders as ``. Cleared when `disabled`. | | -| disabled | `boolean` | Prevents interaction, dims the button. | `false` | -| loading | `boolean` | Shows a spinner, hides content. | | -| active | `boolean` | Applies the pressed background. | `false` | -| icon | `boolean` | Makes width equal height for icon-only buttons. | | -| block | `boolean` | Stretches to full container width. | | -| wide | `boolean` | Caps width at `16rem`. | | -| noRipple | `boolean` | Disables the ripple animation on click. | | -| prepend | `Snippet` | Content before the label. | | -| append | `Snippet` | Content after the label. | | -| load | `Snippet` | Custom spinner content shown while loading. | | -| children | `Snippet` | Button label. | | +| props | type | description | default | +| ------------- | ---------------------------------------------------------- | -------------------------------------------------------- | ----------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| is | `'button' \| 'a' \| 'input'` | HTML element to render. Overridden by `href` or `input`. | `'button'` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on btn. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on btn. | | +| variant | `'filled' \| 'outline' \| 'text' \| 'link'` | Visual style. | `'filled'` | +| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Height and font size. | `'md'` | +| density | `'none' \| 'compact' \| 'default' \| 'comfortable'` | Padding and height multiplier. | `'default'` | +| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | Border radius. | `'sm'` | +| href | `string` | Renders as ``. Cleared when `disabled`. | | +| disabled | `boolean` | Prevents interaction, dims the button. | `false` | +| loading | `boolean` | Shows a spinner, hides content. | | +| active | `boolean` | Applies the pressed background. | `false` | +| icon | `boolean` | Makes width equal height for icon-only buttons. | | +| block | `boolean` | Stretches to full container width. | | +| wide | `boolean` | Caps width at `16rem`. | | +| noRipple | `boolean` | Disables the ripple animation on click. | | +| prepend | `Snippet` | Content before the label. | | +| append | `Snippet` | Content after the label. | | +| load | `Snippet` | Custom spinner content shown while loading. | | +| children | `Snippet` | Button label. | | +| color | `string` | Foreground color override (`--kit-btn-fg`). | | +| background | `string` | Background color override (`--kit-btn-bg`). | | +| elevation | `'0' \| '1' \| '2' \| '3' \| '4' \| '5' \| ElevationState` | Add shadow effect. | | `kit:btn` become more effective with [Tooltips](/docs/components/tooltip), a [Toolbar](/docs/components/toolbar) or [Popover](/docs/components/popover) interactions. diff --git a/src/content/docs/components/card.md b/src/content/docs/components/card.md index 87082b34..15d4f872 100644 --- a/src/content/docs/components/card.md +++ b/src/content/docs/components/card.md @@ -97,18 +97,69 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the c **`kit:card`** -| props | type | description | default | -| ----------- | --------------------------------------------------------------- | ------------------------------------------------------- | ----------- | -| is | `'div' \| 'article' \| 'section' \| 'aside' \| 'a' \| 'button'` | HTML element to render. Overridden by `href`. | `'div'` | -| 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` | -| disabled | `boolean` | Dims and disables interaction. | `false` | -| noRipple | `boolean` | Disables the ripple animation on click. | | -| children | `Snippet` | Card content. | | +| props | type | description | default | +| ------------- | --------------------------------------------------------------- | ------------------------------------------------------- | ----------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| is | `'div' \| 'article' \| 'section' \| 'aside' \| 'a' \| 'button'` | HTML element to render. Overridden by `href`. | `'div'` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on card. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on card. | | +| variant | `'filled' \| 'outline' \| 'text'` | Visual style. | `'filled'` | +| type | `'button' \| 'submit' \| 'reset'` | Defined html type to card. | | +| 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` | +| disabled | `boolean` | Dims and disables interaction. | `false` | +| noRipple | `boolean` | Disables the ripple animation on click. | | +| children | `Snippet` | Card content. | | +| color | `string` | Foreground color override (`--kit-card-fg`). | | +| background | `string` | Background color override (`--kit-card-bg`). | | + +**`kit:card-container`** + +| props | type | description | default | +| ------------- | --------------------------------- | ----------------------------------------------- | ------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| is | `'div' \| 'span'` | HTML element to render | `'div'` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on card container. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on card container. | | + +**`kit:card-title`** + +| props | type | description | default | +| ------------- | --------------------------------------------------------------------------- | ----------------------------------------------- | ------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| is | `'div' \| 'p' \| 'span' \| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'` | HTML element to render | `'div'` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on card title. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on card title. | | + +**`kit:card-content`** + +| props | type | description | default | +| ------------- | --------------------------------------------------------------------------- | ----------------------------------------------- | ------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| is | `'div' \| 'p' \| 'span' \| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'` | HTML element to render | `'div'` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on card content. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on card content. | | + +**`kit:card-media`** + +| props | type | description | default | +| ------------- | --------------------------------- | ----------------------------------------------- | ------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| is | `'div' \| 'span'` | HTML element to render | `'div'` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on card media. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on card media. | | + +**`kit:card-actions`** + +| props | type | description | default | +| ------------- | --------------------------------- | ----------------------------------------------- | ------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| is | `'div' \| 'span'` | HTML element to render | `'div'` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on card actions. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on card actions. | | For better structure, combine your [Cards](/docs/components/card) with [Avatars](/docs/components/avatar) and clear [Buttons](/docs/components/button). diff --git a/src/content/docs/components/chip.md b/src/content/docs/components/chip.md index 165070e7..7539e5ba 100644 --- a/src/content/docs/components/chip.md +++ b/src/content/docs/components/chip.md @@ -95,22 +95,29 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the c **`kit:chip`** -| props | type | description | default | -| ---------- | ------------------------------------------- | ---------------------------------------------------------- | ----------- | -| is | `'div' \| 'a' \| 'button' \| 'input'` | HTML element. Overridden by `href` or event handlers. | `'div'` | -| variant | `'filled' \| 'outline' \| 'text' \| 'link'` | Visual style. | `'filled'` | -| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Height and font size. | `'md'` | -| density | `'compact' \| 'default' \| 'comfortable'` | Padding and height multiplier. | `'default'` | -| href | `string` | Renders as ``. Cleared when `disabled` or `readonly`. | | -| active | `boolean` | Applies the pressed background. | `false` | -| disabled | `boolean` | Dims and blocks all interaction. | `false` | -| readonly | `boolean` | Blocks interaction without disabled styling. | `false` | -| labelStyle | `boolean` | Uppercase, bold, letter-spacing for badges and categories. | `false` | -| loading | `boolean` | Shows a spinner, hides content. | | -| noRipple | `boolean` | Disables the ripple animation on click. | | -| prepend | `Snippet` | Content before the label. | | -| append | `Snippet` | Content after the label. | | -| load | `Snippet` | Custom spinner content shown while loading. | | -| children | `Snippet` | Chip label. | | +| props | type | description | default | +| ------------- | ---------------------------------------------------------- | ---------------------------------------------------------- | ----------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| is | `'div' \| 'a' \| 'button' \| 'input'` | HTML element. Overridden by `href` or event handlers. | `'div'` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on chip. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on chip. | | +| variant | `'filled' \| 'outline' \| 'text'` | Visual style. | `'filled'` | +| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Height and font size. | `'md'` | +| density | `'none' \| 'compact' \| 'default' \| 'comfortable'` | Padding and height multiplier. | `'default'` | +| href | `string` | Renders as ``. Cleared when `disabled` or `readonly`. | | +| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | Border radius. | `'full'` | +| active | `boolean` | Applies the pressed background. | `false` | +| disabled | `boolean` | Dims and blocks all interaction. | `false` | +| readonly | `boolean` | Blocks interaction without disabled styling. | `false` | +| labelStyle | `boolean` | Uppercase, bold, letter-spacing for badges and categories. | `false` | +| loading | `boolean` | Shows a spinner, hides content. | | +| noRipple | `boolean` | Disables the ripple animation on click. | | +| prepend | `Snippet` | Content before the label. | | +| append | `Snippet` | Content after the label. | | +| load | `Snippet` | Custom spinner content shown while loading. | | +| children | `Snippet` | Chip label. | | +| color | `string` | Foreground color override (`--kit-chip-fg`). | | +| background | `string` | Background color override (`--kit-chip-bg`). | | +| elevation | `'0' \| '1' \| '2' \| '3' \| '4' \| '5' \| ElevationState` | Add shadow effect. | | `kit:chip` are often used in a [Toolbar](/docs/components/toolbar) or as a complement in a [Card](/docs/components/card) to structure information and [List](/docs/components/list). diff --git a/src/content/docs/components/dialog.md b/src/content/docs/components/dialog.md index e777a6da..956ee0b6 100644 --- a/src/content/docs/components/dialog.md +++ b/src/content/docs/components/dialog.md @@ -68,17 +68,21 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the c **`kit:dialog`** -| props | type | description | default | -| ------------ | ------------------------------------------- | ---------------------------------------------- | ----------- | -| open | `boolean` | Controls visibility. Bindable. | `false` | -| persistent | `boolean` | Prevents closing on backdrop click or Escape. | `false` | -| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Max-width of the content panel. | `'md'` | -| position | `'top' \| 'center' \| 'bottom'` | Vertical alignment on the viewport. | `'center'` | -| density | `'compact' \| 'default' \| 'comfortable'` | Padding inside the content panel. | `'default'` | -| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Border radius of the content panel. | `'md'` | -| classContent | `string \| string[]` | Class(es) applied to the inner content panel. | | -| color | `string` | Foreground color override (`--kit-dialog-fg`). | | -| background | `string` | Background color override (`--kit-dialog-bg`). | | -| children | `Snippet` | Dialog content. | | +| props | type | description | default | +| -------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | ----------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on dialog. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on dialog. | | +| open $bindable | `boolean` | Controls visibility. Bindable. | `false` | +| persistent | `boolean` | Prevents closing on backdrop click or Escape. | `false` | +| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Max-width of the content panel. | `'md'` | +| position | `'top' \| 'center' \| 'bottom' \| 'top-left' \| 'top-right' \| 'center-left' \| 'center-right' \| 'bottom-left' \| 'botom-right'` | Orientation dialog on viewport. | `'center'` | +| density | `'none' \| 'compact' \| 'default' \| 'comfortable'` | Padding inside the content panel. | `'default'` | +| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Border radius of the content panel. | `'md'` | +| classContent | `string \| string[]` | Class(es) applied to the inner content panel. | | +| color | `string` | Foreground color override (`--kit-dialog-fg`). | | +| background | `string` | Background color override (`--kit-dialog-bg`). | | +| children | `Snippet` | Dialog content. | | +| elevation | `'0' \| '1' \| '2' \| '3' \| '4' \| '5' \| ElevationState` | Add shadow effect. | `'2'` | Remember to follow up with [Modal](/docs/components/modal) or [Popover](/docs/components/popover) to create complete user paths. diff --git a/src/content/docs/components/dropdown.md b/src/content/docs/components/dropdown.md index 491c8165..9ed87a1f 100644 --- a/src/content/docs/components/dropdown.md +++ b/src/content/docs/components/dropdown.md @@ -72,16 +72,21 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the c **`kit:dropdown`** -| props | type | description | default | -| ------------ | ----------------------------------------------------- | ----------------------------------------------------- | ---------- | -| position | `'top' \| 'bottom' \| 'left' \| 'right'` | Preferred position relative to the activator. | `'bottom'` | -| openOnHover | `boolean` | Opens on mouse enter wire `handleMouse` on activator. | `false` | -| closeOnClick | `boolean` | Closes when content inside the panel is clicked. | `false` | -| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| string` | Border radius of the floating panel. | | -| color | `string` | Foreground color override (`--kit-dropdown-fg`). | | -| background | `string` | Background color override (`--kit-dropdown-bg`). | | -| activator | `Snippet<[model, handleMouse]>` | Trigger element. Receives model and mouse handler. | | -| children | `Snippet` | Floating panel content. | | +| props | type | description | default | +| ------------- | ---------------------------------------------------------- | ----------------------------------------------------- | ----------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on dropdown. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on dropdown. | | +| position | `'top' \| 'bottom' \| 'left' \| 'right'` | Preferred position relative to the activator. | `'bottom'` | +| openOnHover | `boolean` | Opens on mouse enter wire `handleMouse` on activator. | `false` | +| closeOnClick | `boolean` | Closes when content inside the panel is clicked. | `false` | +| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' ` | Border radius of the floating panel. | | +| color | `string` | Foreground color override (`--kit-dropdown-fg`). | | +| background | `string` | Background color override (`--kit-dropdown-bg`). | | +| activator | `Snippet<[model, handleMouse]>` | Trigger element. Receives model and mouse handler. | | +| children | `Snippet` | Floating panel content. | | +| density | `'none' \| 'compact' \| 'default' \| 'comfortable'` | Height and horizontal padding. | `'default'` | +| elevation | `'0' \| '1' \| '2' \| '3' \| '4' \| '5' \| ElevationState` | Add shadow effect. | | **ModelDropdownProps** diff --git a/src/content/docs/components/icon.md b/src/content/docs/components/icon.md index 9ee15374..af72ad81 100644 --- a/src/content/docs/components/icon.md +++ b/src/content/docs/components/icon.md @@ -76,21 +76,24 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the c **`kit:icon`** -| props | type | description | default | -| ---------- | ---------------------------------------- | ------------------------------------------------------- | --------- | -| is | `string` | HTML element to render. | `'i'` | -| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Icon size token. Inherits from context when unset. | | -| src | `string` | Image URL. Used instead of `children`. | | -| name | `string` | CSS class name for icon fonts. | | -| icon | `string` | Alias treated as `src` if it contains `/`, else `name`. | | -| color | `string` | Color applied to the icon and mask. | | -| colorMode | `'auto' \| 'mask' \| 'filter' \| 'none'` | How `color` is applied to image icons. | `'auto'` | -| imgFilter | `string` | CSS `filter` value used in `filter` mode. | | -| decorative | `boolean` | Hides from assistive tech when `true`. | `true` | -| label | `string` | Accessible label when `decorative={false}`. | | -| alt | `string` | Alt text for image icons. | `''` | -| loading | `'eager' \| 'lazy'` | Image loading strategy. | `'eager'` | -| decoding | `'sync' \| 'async' \| 'auto'` | Image decoding hint. | `'async'` | -| children | `Snippet` | SVG icon component (e.g. from lucide-svelte). | | +| props | type | description | default | +| ------------- | ---------------------------------------- | ------------------------------------------------------- | --------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| is | `string` | HTML element to render. | `'i'` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on icon. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on icon. | | +| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Icon size token. Inherits from context when unset. | | +| src | `string` | Image URL. Used instead of `children`. | | +| name | `string` | CSS class name for icon fonts. | | +| icon | `string` | Alias treated as `src` if it contains `/`, else `name`. | | +| color | `string` | Color applied to the icon and mask. | | +| colorMode | `'auto' \| 'mask' \| 'filter' \| 'none'` | How `color` is applied to image icons. | `'auto'` | +| imgFilter | `string` | CSS `filter` value used in `filter` mode. | | +| decorative | `boolean` | Hides from assistive tech when `true`. | `true` | +| label | `string` | Accessible label when `decorative={false}`. | | +| alt | `string` | Alt text for image icons. | `''` | +| loading | `'eager' \| 'lazy'` | Image loading strategy. | `'eager'` | +| decoding | `'sync' \| 'async' \| 'auto'` | Image decoding hint. | `'async'` | +| children | `Snippet` | SVG icon component (e.g. from lucide-svelte). | | Add `kit:icon` to your [Buttons](/docs/components/button), [Cards](/docs/components/card) or [Chips](/docs/components/chip) to visually guide your users. diff --git a/src/content/docs/components/list.md b/src/content/docs/components/list.md index 7f50f0c7..a47e60d2 100644 --- a/src/content/docs/components/list.md +++ b/src/content/docs/components/list.md @@ -70,32 +70,38 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the c **`kit:list`** -| props | type | description | default | -| ---------- | ------------------------------------------- | -------------------------------------------------- | ----------- | -| is | `'div' \| 'nav' \| 'ul'` | HTML element to render. | `'div'` | -| variant | `'filled' \| 'outline' \| 'text'` | Visual style. | `'filled'` | -| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Item height, padding, and font size tokens. | `'md'` | -| density | `'compact' \| 'default' \| 'comfortable'` | Vertical density offset applied to item height. | `'default'` | -| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Border radius. | `'md'` | -| nav | `boolean` | Navigation mode more padding, `role="navigation"`. | `false` | -| color | `string` | Foreground color override (`--kit-list-fg`). | | -| background | `string` | Background color override (`--kit-list-bg`). | | -| children | `Snippet` | List items. | | +| props | type | description | default | +| ------------- | ----------------------------------------------------- | -------------------------------------------------- | ----------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| is | `'div' \| 'nav' \| 'ul'` | HTML element to render. | `'div'` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on list. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on list. | | +| variant | `'filled' \| 'outline' \| 'text'` | Visual style. | `'filled'` | +| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Item height, padding, and font size tokens. | `'md'` | +| density | `'none' \| 'compact' \| 'default' \| 'comfortable'` | Vertical density offset applied to item height. | `'default'` | +| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | Border radius on list items children. | `'md'` | +| nav | `boolean` | Navigation mode more padding, `role="navigation"`. | `false` | +| color | `string` | Foreground color override (`--kit-list-item-fg`). | | +| background | `string` | Background color override (`--kit-list-item-bg`). | | +| children | `Snippet` | List items. | | **`kit:list-item`** -| props | type | description | default | -| ---------- | ------------------------------------------- | ------------------------------------------------- | ------- | -| is | `'div' \| 'a' \| 'button' \| 'li'` | HTML element. Overridden by `href` or `onclick`. | `'div'` | -| href | `string` | Renders as ``. Cleared when `disabled`. | | -| active | `boolean` | Applies the active background. | `false` | -| disabled | `boolean` | Dims and blocks interaction. | `false` | -| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Per-item border radius override. | `'sm'` | -| noRipple | `boolean` | Disables the ripple animation. | `false` | -| color | `string` | Foreground color override (`--kit-list-item-fg`). | | -| background | `string` | Background color override (`--kit-list-item-bg`). | | -| prepend | `Snippet` | Content before the label. | | -| append | `Snippet` | Content after the label. | | -| children | `Snippet` | Item label. | | +| props | type | description | default | +| ------------- | ---------------------------------- | ------------------------------------------------- | ------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| is | `'div' \| 'a' \| 'button' \| 'li'` | HTML element. Overridden by `href` or `onclick`. | `'div'` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on list item. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on list item. | | +| href | `string` | Renders as ``. Cleared when `disabled`. | | +| active | `boolean` | Applies the active background. | `false` | +| disabled | `boolean` | Dims and blocks interaction. | `false` | +| noRipple | `boolean` | Disables the ripple animation. | `false` | +| interactive | `boolean` | Force effect hover and active | `false` | +| color | `string` | Foreground color override (`--kit-list-item-fg`). | | +| background | `string` | Background color override (`--kit-list-item-bg`). | | +| prepend | `Snippet` | Content before the label. | | +| append | `Snippet` | Content after the label. | | +| children | `Snippet` | Item label. | | A well-structured `kit:list` can easily be enriched with [Separators](/docs/components/separator) or elements in a [Card](/docs/components/card). diff --git a/src/content/docs/components/modal.md b/src/content/docs/components/modal.md index 935d6184..0c873b4f 100644 --- a/src/content/docs/components/modal.md +++ b/src/content/docs/components/modal.md @@ -68,19 +68,24 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the c **`kit:modal`** -| props | type | description | default | -| ------------ | ------------------------------------------------ | ------------------------------------------------- | ----------- | -| open | `boolean` | Controls visibility. Bindable. | `false` | -| persistent | `boolean` | Prevents closing on Escape. | `false` | -| contain | `boolean` | Positions relative to parent instead of viewport. | `false` | -| closeWithEsc | `boolean` | Closes on Escape key. | `true` | -| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | Max-width of the content panel. | `'md'` | -| position | `'top' \| 'center' \| 'bottom'` | Vertical alignment on the viewport. | `'center'` | -| density | `'compact' \| 'default' \| 'comfortable'` | Padding inside the content panel. | `'default'` | -| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Border radius of the content panel. | `'md'` | -| classContent | `string \| string[]` | Class(es) applied to the inner content panel. | | -| color | `string` | Foreground color override (`--kit-modal-fg`). | | -| background | `string` | Background color override (`--kit-modal-bg`). | | -| children | `Snippet` | Modal content. | | +| props | type | description | default | +| -------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ----------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on modal. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on modal. | | +| open $bindable | `boolean` | Controls visibility. | `false` | +| persistent | `boolean` | Prevents closing on Escape. | `false` | +| contain | `boolean` | Positions relative to parent instead of viewport. | `false` | +| closeWithEsc | `boolean` | Closes on Escape key. | `true` | +| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | Max-width of the content panel. | `'md'` | +| position | `'top' \| 'center' \| 'bottom' \| 'top-left' \| 'top-right' \| 'center-left' \| 'center-right' \| 'bottom-left' \| 'botom-right'` | Vertical alignment on the viewport. | `'center'` | +| density | `'none' \| 'compact' \| 'default' \| 'comfortable'` | Padding inside the content panel. | `'default'` | +| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Border radius of the content panel. | `'md'` | +| classContent | `string \| string[]` | Class(es) applied to the inner content panel. | | +| color | `string` | Foreground color override (`--kit-modal-fg`). | | +| background | `string` | Background color override (`--kit-modal-bg`). | | +| children | `Snippet` | Modal content. | | +| space | `string` | Add border space to viewport override (`--kit-modal-space`). | | +| elevation | `'0' \| '1' \| '2' \| '3' \| '4' \| '5' \| ElevationState` | Add shadow effect. | `'2'` | Complement the use of `kit:modal` with [Dialog](/docs/components/dialog) for confirmations or [Popover](/docs/components/popover) for light details. diff --git a/src/content/docs/components/popover.md b/src/content/docs/components/popover.md index 28eed3b2..31ff666c 100644 --- a/src/content/docs/components/popover.md +++ b/src/content/docs/components/popover.md @@ -50,15 +50,20 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the c **`kit:popover`** -| props | type | description | default | -| ---------- | ----------------------------------------------------- | ----------------------------------------------- | ---------- | -| open | `boolean` | Controls visibility. Bindable. | `false` | -| position | `'top' \| 'bottom' \| 'left' \| 'right'` | Preferred position relative to the activator. | `'bottom'` | -| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| string` | Border radius of the floating panel. | | -| color | `string` | Foreground color override (`--kit-popover-fg`). | | -| background | `string` | Background color override (`--kit-popover-bg`). | | -| activator | `Snippet<[model]>` | Trigger element. Receives model with `toggle`. | | -| children | `Snippet` | Floating panel content. | | +| props | type | description | default | +| -------------- | ---------------------------------------------------------- | ----------------------------------------------- | ----------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on popover. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on popover. | | +| open $bindable | `boolean` | Controls visibility. Bindable. | `false` | +| position | `'top' \| 'bottom' \| 'left' \| 'right'` | Preferred position relative to the activator. | `'bottom'` | +| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' ` | Border radius of the floating panel. | | +| color | `string` | Foreground color override (`--kit-popover-fg`). | | +| background | `string` | Background color override (`--kit-popover-bg`). | | +| activator | `Snippet<[model]>` | Trigger element. Receives model with `toggle`. | | +| children | `Snippet` | Floating panel content. | | +| elevation | `'0' \| '1' \| '2' \| '3' \| '4' \| '5' \| ElevationState` | Add shadow effect. | `'2'` | +| density | `'none' \| 'compact' \| 'default' \| 'comfortable'` | Padding inside the content panel. | `'default'` | **ModelPopoverProps** diff --git a/src/content/docs/components/separator.md b/src/content/docs/components/separator.md index 16bf9e37..af10a9bd 100644 --- a/src/content/docs/components/separator.md +++ b/src/content/docs/components/separator.md @@ -53,13 +53,15 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the c **`kit:separator`** -| props | type | description | default | -| ----------- | ---------------------------- | ------------------------------------------------ | -------------- | -| is | `'div' \| 'hr'` | HTML element to render. | `'hr'` | -| orientation | `'horizontal' \| 'vertical'` | Direction of the separator. | `'horizontal'` | -| inset | `boolean` | Adds a leading indent. | `false` | -| thickness | `string \| number` | Border width override (px number or CSS string). | | -| opacity | `string \| number` | Opacity override. | `0.12` | -| color | `string` | Color override (`--kit-separator-color`). | | +| props | type | description | default | +| ------------- | --------------------------------- | ------------------------------------------------ | -------------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| is | `'div' \| 'hr'` | HTML element to render. | `'hr'` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on separator. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on separator. | | +| orientation | `'horizontal' \| 'vertical'` | Direction of the separator. | `'horizontal'` | +| inset | `boolean` | Adds a leading indent. | `false` | +| thickness | `string \| number` | Border width override (px number or CSS string). | | +| color | `string` | Color override (`--kit-separator-color`). | | To organize your data, combine Separators with [List](/docs/components/list) for greater legibility. diff --git a/src/content/docs/components/textfield.md b/src/content/docs/components/textfield.md index 8d1790a4..ede7397f 100644 --- a/src/content/docs/components/textfield.md +++ b/src/content/docs/components/textfield.md @@ -90,40 +90,44 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the c **`kit:textfield`** -| props | type | description | default | -| ----------------- | --------------------------------------------- | -------------------------------------------------- | ----------- | -| value | `string \| number` | Input value. Bindable. | | -| type | `'text' \| 'email' \| 'password' \| 'number'` | Input type. | `'text'` | -| placeholder | `string` | Placeholder text. | | -| variant | `'filled' \| 'outline' \| 'text'` | Visual style. | `'filled'` | -| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Field size. | `'md'` | -| density | `'compact' \| 'default' \| 'comfortable'` | Padding density. | `'default'` | -| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Border radius. | `'md'` | -| error | `boolean` | Activates error state. | `false` | -| errorMessage | `string` | Message shown when `error` is `true`. | | -| message | `string` | Helper text below the field. | | -| messagePrefix | `string` | Leading text in the message row. | | -| messageSuffix | `string` | Trailing text in the message row. | | -| persistentMessage | `boolean` | Always shows the message, not only on focus. | `false` | -| counter | `boolean` | Shows character counter. | `false` | -| min | `number` | Minimum character count. | | -| max | `number` | Maximum character count. | | -| clearable | `boolean` | Shows a clear button when the field has a value. | `false` | -| persistentClear | `boolean` | Always shows the clear button. | `false` | -| disabled | `boolean` | Disables the input. | `false` | -| readonly | `boolean` | Makes the input read-only. | `false` | -| hideSpinButtons | `boolean` | Hides the spin buttons on `type="number"` inputs. | `false` | -| prefix | `string` | Static text before the input value. | | -| suffix | `string` | Static text after the input value. | | -| name | `string` | Input `name` attribute. | | -| id | `string` | Input `id` attribute. | | -| autocomplete | `string` | Input `autocomplete` attribute. | | -| inputmode | `string` | Input `inputmode` attribute. | | -| color | `string` | Foreground color override (`--kit-textfield-fg`). | | -| background | `string` | Background color override (`--kit-textfield-bg`). | | -| prepend | `Snippet` | Content outside the field, before it. | | -| append | `Snippet` | Content outside the field, after it. | | -| prependInner | `Snippet` | Content inside the field border, before the input. | | -| appendInner | `Snippet` | Content inside the field border, after the input. | | +| props | type | description | default | +| ----------------- | ---------------------------------------------------------- | -------------------------------------------------- | ----------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on textfield. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on textfield. | | +| value $bindable | `string \| number` | Input value. | | +| type | `'text' \| 'email' \| 'password' \| 'number'` | Input type. | `'text'` | +| placeholder | `string` | Placeholder text. | | +| variant | `'filled' \| 'outline' \| 'text'` | Visual style. | `'filled'` | +| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Field size. | `'md'` | +| density | `'none' \| 'compact' \| 'default' \| 'comfortable'` | Padding density. | `'default'` | +| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Border radius. | `'md'` | +| error | `boolean` | Activates error state. | `false` | +| errorMessage | `string` | Message shown when `error` is `true`. | | +| message | `string` | Helper text below the field. | | +| messagePrefix | `string` | Leading text in the message row. | | +| messageSuffix | `string` | Trailing text in the message row. | | +| persistentMessage | `boolean` | Always shows the message, not only on focus. | `false` | +| counter | `boolean` | Shows character counter. | `false` | +| min | `number` | Minimum character count. | | +| max | `number` | Maximum character count. | | +| clearable | `boolean` | Shows a clear button when the field has a value. | `false` | +| persistentClear | `boolean` | Always shows the clear button. | `false` | +| disabled | `boolean` | Disables the input. | `false` | +| readonly | `boolean` | Makes the input read-only. | `false` | +| hideSpinButtons | `boolean` | Hides the spin buttons on `type="number"` inputs. | `false` | +| prefix | `string` | Static text before the input value. | | +| suffix | `string` | Static text after the input value. | | +| name | `string` | Input `name` attribute. | | +| id | `string` | Input `id` attribute. | | +| autocomplete | `string` | Input `autocomplete` attribute. | | +| inputmode | `string` | Input `inputmode` attribute. | | +| color | `string` | Foreground color override (`--kit-textfield-fg`). | | +| background | `string` | Background color override (`--kit-textfield-bg`). | | +| prepend | `Snippet` | Content outside the field, before it. | | +| append | `Snippet` | Content outside the field, after it. | | +| prependInner | `Snippet` | Content inside the field border, before the input. | | +| appendInner | `Snippet` | Content inside the field border, after the input. | | +| elevation | `'0' \| '1' \| '2' \| '3' \| '4' \| '5' \| ElevationState` | Add shadow effect. | | `kit:textfield` works great with Form validation and can be enhanced with [Icons](/docs/components/icon) and [Buttons](/docs/components/button) using snippets. diff --git a/src/content/docs/components/toolbar.md b/src/content/docs/components/toolbar.md index 294a0773..bb89d71b 100644 --- a/src/content/docs/components/toolbar.md +++ b/src/content/docs/components/toolbar.md @@ -79,17 +79,21 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the c **`kit:toolbar`** -| props | type | description | default | -| ------------ | ------------------------------------------- | ----------------------------------------------- | -------------- | -| is | `'div' \| 'header' \| 'nav'` | HTML element to render. | `'div'` | -| variant | `'filled' \| 'outline' \| 'text' \| 'dash'` | Visual style. | `'filled'` | -| density | `'compact' \| 'default' \| 'comfortable'` | Padding and size density. | `'default'` | -| orientation | `'horizontal' \| 'vertical'` | Layout direction. | `'horizontal'` | -| location | `'top' \| 'bottom'` | Pins to viewport edge (`position: fixed`). | | -| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Border radius. | `'xl'` (1rem) | -| classContent | `string \| string[]` | Class(es) applied to the inner wrapper. | | -| color | `string` | Foreground color override (`--kit-toolbar-fg`). | | -| background | `string` | Background color override (`--kit-toolbar-bg`). | | -| children | `Snippet` | Toolbar content. | | +| props | type | description | default | +| ------------- | ---------------------------------------------------------- | ----------------------------------------------- | -------------- | +| ref $bindable | `HTMLElement` | Bindable reference to the rendered DOM element. | `null` | +| is | `'div' \| 'header' \| 'nav'` | HTML element to render. | `'div'` | +| s-class | `'string' \| 'array' \| 'object'` | Sets className on toolbar. | | +| s-style | `'string' \| 'array' \| 'object'` | Sets styles on toolbar. | | +| variant | `'filled' \| 'outline' \| 'text'` | Visual style. | `'filled'` | +| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Field size. | `'md'` | +| density | `'none' \| 'compact' \| 'default' \| 'comfortable'` | Padding and size density. | `'default'` | +| orientation | `'horizontal' \| 'vertical'` | Layout direction. | `'horizontal'` | +| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | Border radius. | `'md'` | +| classContent | `string \| string[]` | Class(es) applied to the inner wrapper. | | +| color | `string` | Foreground color override (`--kit-toolbar-fg`). | | +| background | `string` | Background color override (`--kit-toolbar-bg`). | | +| children | `Snippet` | Toolbar content. | | +| elevation | `'0' \| '1' \| '2' \| '3' \| '4' \| '5' \| ElevationState` | Add shadow effect. | | `kit:toolbar` is the right place to group [Buttons](/docs/components/button), [Chips](/docs/components/chip) and [Icons](/docs/components/icon) in a coherent space. diff --git a/src/content/docs/components/tooltip.md b/src/content/docs/components/tooltip.md index 92f18cd0..32870048 100644 --- a/src/content/docs/components/tooltip.md +++ b/src/content/docs/components/tooltip.md @@ -69,21 +69,21 @@ If you aren't using the Lapikit preprocessor in `svelte.config.js`, import the c **`kit:tooltip`** -| props | type | description | default | -| --------------- | ------------------------------------------- | ------------------------------------------------- | ----------- | -| label | `string` | Plain text content of the tooltip. | | -| location | `'top' \| 'bottom' \| 'left' \| 'right'` | Preferred position relative to the trigger. | `'bottom'` | -| variant | `'arrow'` | Renders a directional arrow on the tooltip panel. | | -| delayDuration | `number` | Hover delay before the tooltip appears (ms). | `850` | -| open | `boolean` | Controls visibility. Bindable. | `false` | -| disabled | `boolean` | Prevents the tooltip from showing. | `false` | -| forceMount | `boolean` | Keeps the tooltip in the DOM when closed. | `false` | -| avoidCollisions | `boolean` | Flips position to stay within the viewport. | `true` | -| density | `'compact' \| 'default' \| 'comfortable'` | Padding density. | `'default'` | -| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | Border radius. | | -| color | `string` | Foreground color override (`--kit-tooltip-fg`). | | -| background | `string` | Background color override (`--kit-tooltip-bg`). | | -| tooltip | `Snippet` | Rich content rendered inside the tooltip panel. | | -| children | `Snippet` | The trigger element. | | +| props | type | description | default | +| --------------- | ----------------------------------------------------- | ------------------------------------------------- | ----------- | +| label | `string` | Plain text content of the tooltip. | | +| location | `'top' \| 'bottom' \| 'left' \| 'right'` | Preferred position relative to the trigger. | `'bottom'` | +| variant | `'arrow'` | Renders a directional arrow on the tooltip panel. | | +| delayDuration | `number` | Hover delay before the tooltip appears (ms). | `850` | +| open | `boolean` | Controls visibility. Bindable. | `false` | +| disabled | `boolean` | Prevents the tooltip from showing. | `false` | +| forceMount | `boolean` | Keeps the tooltip in the DOM when closed. | `false` | +| avoidCollisions | `boolean` | Flips position to stay within the viewport. | `true` | +| density | `'none' \| 'compact' \| 'default' \| 'comfortable'` | Padding density. | `'default'` | +| rounded | `0 \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | Border radius. | `'xs'` | +| color | `string` | Foreground color override (`--kit-tooltip-fg`). | | +| background | `string` | Background color override (`--kit-tooltip-bg`). | | +| tooltip | `Snippet` | Rich content rendered inside the tooltip panel. | | +| children | `Snippet` | The trigger element. | | Tooltips complement your [Buttons](/docs/components/button) or [Icons](/docs/components/icon) by providing discreet but useful context for users. diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 04ba3815..52d8921b 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -4,7 +4,7 @@ import { page } from '$app/state'; import { browser } from '$app/environment'; import { onMount } from 'svelte'; - import './layout.css'; + import { createGlobalTheme } from 'lapikit/actions'; import { docsSeoByPath, getBreadcrumbStructuredData, getBreadcrumbs, seoByPath } from '$lib'; import { capitalize } from '$lib/utils'; @@ -19,6 +19,10 @@ let { children } = $props(); + const app = createGlobalTheme(); + + import './layout.css'; + onMount(() => { if (browser) loadNpmData(); }); @@ -72,6 +76,7 @@ +
{@render children()}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index f08c617e..03b1295f 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -47,6 +47,7 @@ import { openConsentPreferences } from '$lib/stores/consent.svelte'; import { npmState } from '$lib/stores/npm.svelte'; import { resolve } from '$app/paths'; + import { createTheme } from 'lapikit/actions'; // states let stepCode: number = $state(0); @@ -59,6 +60,8 @@ scrolled = window.scrollY > 20; } + const themeHomepage = createTheme(); + onMount(() => { if (browser) { window.addEventListener('scroll', handleScroll); @@ -210,7 +213,7 @@ }; -
+
{#snippet prepend()} @@ -329,7 +332,7 @@
@@ -432,6 +435,7 @@ active={stepCode === 0} rounded="xl" size="sm" + style="--kit-btn-bg: var(--primary-legacy)" > View Button @@ -440,6 +444,7 @@ active={stepCode === 1} rounded="xl" size="sm" + style="--kit-btn-bg: var(--primary-legacy)" > Discover Card @@ -448,6 +453,7 @@ active={stepCode === 2} rounded="xl" size="sm" + style="--kit-btn-bg: var(--primary-legacy)" > Explore Modal @@ -643,6 +649,7 @@ class="max-sm:flex-col max-sm:p-[36px_29px]!" rounded="xl" size="lg" + style="--kit-btn-bg: var(--primary-legacy)" > Start Building with Lapikit @@ -707,7 +714,12 @@
- + {capitalize(`It's not over yet!`)} {#snippet append()} @@ -1058,7 +1070,13 @@ >

Start exploring Lapikit

Design system, themes, components, all in one lib

- + Discover the components {#snippet append()} diff --git a/src/routes/docs/+layout.svelte b/src/routes/docs/+layout.svelte index 15f5a599..02a9d3ea 100644 --- a/src/routes/docs/+layout.svelte +++ b/src/routes/docs/+layout.svelte @@ -2,7 +2,7 @@ import { resolve } from '$app/paths'; import { browser } from '$app/environment'; import { theme_storage_key } from '$lib'; - + import { useTheme } from 'lapikit/actions'; // types import type { ModelDropdownProps } from 'lapikit/components'; @@ -15,21 +15,22 @@ let { children } = $props(); - let mode = $state<'light' | 'dark' | 'system'>( + let localMode = $state<'light' | 'dark' | 'system'>( browser ? ((localStorage.getItem(theme_storage_key) as 'light' | 'dark' | 'system') ?? 'system') : 'system' ); - $effect(() => { - if (!browser) return; - if (mode === 'system') { - document.documentElement.removeAttribute('data-theme'); - } else { - document.documentElement.setAttribute('data-theme', mode); - } - localStorage.setItem(theme_storage_key, mode); - }); + // $effect(() => { + // if (!browser) return; + + // // if (mode === 'system') { + // // document.documentElement.removeAttribute('data-kit-theme'); + // // } else { + // // document.documentElement.setAttribute('data-theme', mode); + // // } + // // localStorage.setItem(theme_storage_key, mode); + // }); @@ -58,11 +59,11 @@ icon size="lg" > - {#if mode === 'light'} + {#if localMode === 'light'} - {:else if mode === 'dark'} + {:else if localMode === 'dark'} @@ -75,7 +76,7 @@ {/snippet} - (mode = 'light')} active={mode === 'light'}> + useTheme('light')} active={localMode === 'light'}> {#snippet prepend()} @@ -83,7 +84,7 @@ {/snippet} Light - (mode = 'dark')} active={mode === 'dark'}> + useTheme('dark')} active={localMode === 'dark'}> {#snippet prepend()} @@ -91,7 +92,7 @@ {/snippet} Dark - (mode = 'system')} active={mode === 'system'}> + useTheme('system')} active={localMode === 'system'}> {#snippet prepend()} diff --git a/src/routes/layout.css b/src/routes/layout.css index dd757f9f..e72407e8 100644 --- a/src/routes/layout.css +++ b/src/routes/layout.css @@ -12,9 +12,10 @@ } @layer base { - body { + body, + #kit-app { font-family: var(--font-sans); - background-color: var(--kit-bg); - color: var(--kit-fg); + background-color: var(--kit-color-surface); + color: var(--kit-color-text); } } diff --git a/src/routes/theme.css b/src/routes/theme.css index fb7cd591..9d7725be 100644 --- a/src/routes/theme.css +++ b/src/routes/theme.css @@ -1,6 +1,6 @@ -html[data-theme='light'] { +html[data-kit-theme='light'] { color-scheme: light; - --kit-bg: hsl(0 0% 100%); + /* --kit-bg: hsl(0 0% 100%); --kit-fg: hsl(222 20% 10%); --kit-muted: hsl(220 10% 45%); @@ -12,7 +12,7 @@ html[data-theme='light'] { --kit-accent: hsl(220 90% 56%); - --kit-focus: hsl(35, 90%, 56%); + --kit-focus: hsl(35, 90%, 56%); */ /** markdown theme variables */ --md-color-text: #1a1a1a; @@ -32,14 +32,15 @@ html[data-theme='light'] { } @media (prefers-color-scheme: dark) { - html:not([data-theme='light']) { + html:not([data-kit-theme='light']) { color-scheme: dark; --md-color-text: #e6edf3; --md-color-muted: #8b949e; --md-color-link: #58a6ff; --md-color-link-hover: #79b8ff; --md-color-border: #30363d; - --md-color-bg: hsl(222 20% 9%); + /* --md-color-bg: hsl(222 20% 9%); */ + --md-color-bg: var(--kit-color-surface); --md-color-surface: hsl(222 18% 15%); --md-color-code-bg: hsl(222 16% 14%); --md-color-code-text: #ff7b72; @@ -52,7 +53,7 @@ html[data-theme='light'] { --md-table-stripe-bg: hsl(222 20% 12%); } - html:not([data-theme='light']), + /* html:not([data-theme='light']), html:not([data-theme='light']) div#kit-app { color-scheme: dark; --kit-bg: hsl(222 20% 9%); @@ -68,10 +69,10 @@ html[data-theme='light'] { --kit-accent: hsl(220 90% 65%); --kit-focus: hsl(35 90% 62%); - } + } */ } -html[data-theme='dark'], +/* html[data-theme='dark'], html[data-theme='dark'] div#kit-app { color-scheme: dark; --kit-bg: hsl(222 20% 9%); @@ -87,16 +88,16 @@ html[data-theme='dark'] div#kit-app { --kit-accent: hsl(220 90% 65%); --kit-focus: hsl(35 90% 62%); -} +} */ -html[data-theme='dark'] { +html[data-kit-theme='dark'] { color-scheme: dark; --md-color-text: #e6edf3; --md-color-muted: #8b949e; --md-color-link: #58a6ff; --md-color-link-hover: #79b8ff; --md-color-border: #30363d; - --md-color-bg: hsl(222 20% 9%); + --md-color-bg: var(--kit-color-surface); --md-color-surface: hsl(222 18% 15%); --md-color-code-bg: hsl(222 16% 14%); --md-color-code-text: #ff7b72;