Skip to content

update documentation with new props lapikit v0.6.5 #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Nycolaide merged 7 commits into from
Jul 15, 2026
Merged

update documentation with new props lapikit v0.6.5 #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6e3c921
update documentation for card and list
Nycolaide Jul 10, 2026
2612236
update props table for all components with lapikit v0.6.4
Nycolaide Jul 14, 2026
c72470e
update types for modal and appbar and popover
Nycolaide Jul 14, 2026
36def22
update lapikit insider version + theme system theming lapikit core
Nycolaide Jul 14, 2026
f48a25d
test bugfix for color and background color variable not working with …
Nycolaide Jul 14, 2026
c8b9b72
update lapikit insiders version and update variables color on homepage
Nycolaide Jul 15, 2026
50496ce
fix theming
Nycolaide Jul 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions bun.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions src/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
<!-- <script>
(function () {
var theme = localStorage.getItem('@lapikit/theme');
if (theme === 'light' || theme === 'dark') {
document.documentElement.setAttribute('data-theme', theme);
}
})();
</script>
</script> -->
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
Expand Down
57 changes: 34 additions & 23 deletions src/content/docs/components/accordion.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
36 changes: 21 additions & 15 deletions src/content/docs/components/alert.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
25 changes: 15 additions & 10 deletions src/content/docs/components/appbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Loading