lapikit 0.5.3 → 0.5.5

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

@@ -1,5 +1,8 @@
 import type { RoundedType, Component } from '../../@types';
 import type { Snippet } from 'svelte';
+export type ModelAccordionItemProps = {
+    open: boolean;
+};
 export interface AccordionProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div';

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export type { ModelDropdownProps } from './dropdown/dropdown.types';
+export type { ModelAccordionItemProps } from './accordion/accordion.types';
 export { default as KitApp } from './app/app.svelte';
 export { default as KitAppbar } from './appbar/appbar.svelte';
 export { default as KitBtn } from './btn/btn.svelte';

package/dist/components/list/list.svelte

@@ -118,6 +118,7 @@
 		--kit-list-item-px: var(--kit-list-item-px-md);
 		--kit-list-item-gap: var(--kit-list-item-gap-md);
 		--kit-list-item-font: var(--kit-list-item-font-md);
+		--kit-list-density-offset: 0rem;
 
 		display: flex;
 		flex-direction: column;
@@ -169,11 +170,11 @@
 	}
 
 	.kit-list[data-density='compact'] {
-		--kit-list-item-h: calc(var(--kit-list-item-h) - 0.25rem);
+		--kit-list-density-offset: -0.25rem;
 	}
 
 	.kit-list[data-density='comfortable'] {
-		--kit-list-item-h: calc(var(--kit-list-item-h) + 0.25rem);
+		--kit-list-density-offset: 0.25rem;
 	}
 
 	.kit-list[data-rounded='0'] {

package/dist/components/list/modules/list-item.svelte

@@ -106,7 +106,7 @@
 		grid-template-columns: auto minmax(0, 1fr) auto;
 		align-items: center;
 		gap: var(--kit-list-item-gap, 0.625rem);
-		min-height: var(--kit-list-item-h, 2.75rem);
+		min-height: calc(var(--kit-list-item-h, 2.75rem) + var(--kit-list-density-offset, 0rem));
 		padding-inline: var(--kit-list-item-px, 0.875rem);
 		border: 0;
 		border-radius: var(--kit-list-item-radius);
@@ -146,6 +146,10 @@
 		background: var(--kit-list-item-bg, transparent);
 	}
 
+	:global(.kit-list[data-variant='filled']) .kit-list-item[data-active='true'] {
+		background: color-mix(in oklab, currentColor 12%, transparent);
+	}
+
 	:global(.kit-list[data-variant='outline']) .kit-list-item::before {
 		content: '';
 		position: absolute;

package/dist/components/toolbar/toolbar.svelte

@@ -12,7 +12,7 @@
 		's-class': sClass,
 		's-style': sStyle,
 		classContent,
-		variant = 'text',
+		variant = 'filled',
 		rounded,
 		background,
 		color,
@@ -24,9 +24,9 @@
 
 	let safeVariant = $derived(
 		typeof variant === 'string' &&
-			(variant === 'outline' || variant === 'text' || variant === 'dash')
+			(variant === 'filled' || variant === 'outline' || variant === 'text' || variant === 'dash')
 			? variant
-			: 'text'
+			: 'filled'
 	);
 
 	let safeDensity = $derived(

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

@@ -1,5 +1,5 @@
 import type { Component, PropValue, RoundedType } from '../../@types';
-type Variant = 'outline' | 'text' | 'dash';
+type Variant = 'filled' | 'outline' | 'text' | 'dash';
 type Density = 'compact' | 'comfortable' | 'default';
 type Orientation = 'horizontal' | 'vertical';
 type Location = 'top' | 'bottom';

package/dist/constants.js

@@ -22,7 +22,7 @@ export const lapikitComponents = [
     'dialog',
     'modal',
     'accordion',
-    'accordionItem',
+    'accordion-item',
     'alert',
     'aspect-ratio',
     'spacer',

package/dist/framework.js

@@ -6,7 +6,8 @@ import { lapikitImportsRef, lapikitImportsLabsRef, lapikitComponents, lapikitLab
  * @returns The component name with "Kit" prefix and the first letter capitalized
  */
 export function componentName(shortName) {
-    return 'Kit' + shortName.charAt(0).toUpperCase() + shortName.slice(1);
+    const pascal = shortName.replace(/(^|-)([a-z])/g, (_, __, letter) => letter.toUpperCase());
+    return 'Kit' + pascal;
 }
 export function liliCore(options) {
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.5.3",
+	"version": "0.5.5",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"