lapikit 0.6.12 → 0.7.1

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

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { ClassNameType, IdElementType, KitClassNameType, KitStylePropertiesType, PropValue, SClassProp, SStyleProp, StylePropertiesType } from './';
+import type { ClassValue } from 'svelte/elements';
 export interface useClassNameProps {
     baseClass?: string;
     className?: string;
@@ -30,4 +31,11 @@ export type KitComponentScan = {
 export type ComponentInfo = {
     name: string;
     ref: string;
+    direct?: boolean;
 };
+export interface ComponentAttrs {
+    /** For the class attribute of the element: Svelte applies clsx (strings, arrays, objects) */
+    class: ClassValue;
+    style: string;
+    rest: Record<string, unknown>;
+}

package/dist/components/app/app.svelte

@@ -37,275 +37,221 @@
 	{@render children?.()}
 </div>
 
-<style>
-	:global(html) {
-		--kit-shape-none: 0;
-		--kit-shape-xs: 4px;
-		--kit-shape-sm: 6px;
-		--kit-shape-md: 10px;
-		--kit-shape-lg: 14px;
-		--kit-shape-xl: 18px;
-		--kit-shape-full: 9999px;
-
-		--kit-font-xs: 13px;
-		--kit-font-sm: 14px;
-		--kit-font-md: 15px;
-		--kit-font-lg: 16px;
-		--kit-font-xl: 17px;
-
-		--kit-space-compact: 2px;
-		--kit-space-default: 4px;
-		--kit-space-comfortable: 6px;
-
-		--kit-density-compact: -4px;
-		--kit-density-default: 0px;
-		--kit-density-comfortable: 4px;
-
-		--kit-shadow-opacity: 30%;
-		--kit-shadow-ambient-opacity: 15%;
-
-		--kit-disabled-opacity: 0.55;
-		--kit-font:
-			ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-			'Segoe UI Symbol', 'Noto Color Emoji';
-
-		--kit-color-transparent: transparent;
-	}
-
-	:global(html:not([data-kit-theme])),
-	:global([data-kit-theme='light']) {
-		color-scheme: light;
-		--kit-color-surface: hsl(0 0% 100%);
-		--kit-color-surface-1: hsl(240 15% 96.5%);
-		--kit-color-surface-2: hsl(240 10% 93%);
-		--kit-color-surface-3: hsl(0 0% 100%);
-
-		--kit-color-text: hsl(222 20% 10%);
-		--kit-color-text-muted: hsl(220 10% 40%);
-		--kit-color-text-subtle: hsl(220 8% 58%);
-		--kit-color-text-disabled: hsl(220 5% 76%);
-
-		--kit-color-fill: hsl(240 8% 93%);
-		--kit-color-fill-hover: hsl(240 4% 91%);
-		--kit-color-fill-active: hsl(240 4% 88%);
-
-		--kit-color-border: hsl(220 16% 88%);
-		--kit-color-shadow: hsl(240 3% 11%);
-
-		--kit-color-accent: hsl(220 90% 56%);
-		--kit-color-on-accent: hsl(0 0% 100%);
-		--kit-color-success: hsl(145 50% 38%);
-		--kit-color-on-success: hsl(0 0% 100%);
-		--kit-color-warning: hsl(35 80% 45%);
-		--kit-color-on-warning: hsl(222 20% 10%);
-		--kit-color-error: hsl(5 65% 48%);
-		--kit-color-on-error: hsl(0 0% 100%);
-		--kit-color-info: hsl(205 60% 42%);
-		--kit-color-on-info: hsl(0 0% 100%);
-		--kit-color-focus: hsl(35 90% 56%);
-	}
-
-	:global([data-kit-theme='dark']) {
-		color-scheme: dark;
-
-		--kit-color-surface: hsl(240 3% 11%);
-		--kit-color-surface-1: hsl(240 2% 17.5%);
-		--kit-color-surface-2: hsl(240 1.5% 23%);
-		--kit-color-surface-3: hsl(240 1.5% 28%);
-
-		--kit-color-text: hsl(0 0% 100%);
-		--kit-color-text-muted: hsl(240 3% 56%);
-		--kit-color-text-subtle: hsl(240 2.5% 38%);
-		--kit-color-text-disabled: hsl(240 1.5% 25%);
-
-		--kit-color-fill: hsl(240 2.5% 24%);
-		--kit-color-fill-hover: hsl(240 2.5% 28%);
-		--kit-color-fill-active: hsl(240 2.5% 31%);
-
-		--kit-color-border: hsl(240 2% 26%);
-		--kit-color-shadow: hsl(240 3% 11%);
-
-		--kit-color-accent: hsl(220 85% 65%);
-		--kit-color-on-accent: hsl(240 3% 11%);
-		--kit-color-success: hsl(145 50% 50%);
-		--kit-color-on-success: hsl(240 3% 11%);
-		--kit-color-warning: hsl(35 85% 58%);
-		--kit-color-on-warning: hsl(240 3% 11%);
-		--kit-color-error: hsl(5 70% 60%);
-		--kit-color-on-error: hsl(240 3% 11%);
-		--kit-color-info: hsl(205 65% 58%);
-		--kit-color-on-info: hsl(240 3% 11%);
-		--kit-color-focus: hsl(35 90% 62%);
-	}
-
-	@media (prefers-color-scheme: light) {
-		:global([data-kit-theme='system']) {
-			color-scheme: light;
-
-			--kit-color-surface: hsl(0 0% 100%);
-			--kit-color-surface-1: hsl(240 15% 96.5%);
-			--kit-color-surface-2: hsl(240 10% 93%);
-			--kit-color-surface-3: hsl(0 0% 100%);
-
-			--kit-color-text: hsl(222 20% 10%);
-			--kit-color-text-muted: hsl(220 10% 40%);
-			--kit-color-text-subtle: hsl(220 8% 58%);
-			--kit-color-text-disabled: hsl(220 5% 76%);
-
-			--kit-color-fill: hsl(240 8% 93%);
-			--kit-color-fill-hover: hsl(240 4% 91%);
-			--kit-color-fill-active: hsl(240 4% 88%);
-
-			--kit-color-border: hsl(220 16% 88%);
-			--kit-color-shadow: hsl(240 3% 11%);
-
-			--kit-color-accent: hsl(220 90% 56%);
-			--kit-color-on-accent: hsl(0 0% 100%);
-			--kit-color-success: hsl(145 50% 38%);
-			--kit-color-on-success: hsl(0 0% 100%);
-			--kit-color-warning: hsl(35 80% 45%);
-			--kit-color-on-warning: hsl(222 20% 10%);
-			--kit-color-error: hsl(5 65% 48%);
-			--kit-color-on-error: hsl(0 0% 100%);
-			--kit-color-info: hsl(205 60% 42%);
-			--kit-color-on-info: hsl(0 0% 100%);
-			--kit-color-focus: hsl(35 90% 56%);
-		}
-	}
-
-	@media (prefers-color-scheme: dark) {
-		:global([data-kit-theme='system']) {
-			color-scheme: dark;
-
-			--kit-color-surface: hsl(240 3% 11%);
-			--kit-color-surface-1: hsl(240 2% 17.5%);
-			--kit-color-surface-2: hsl(240 1.5% 23%);
-			--kit-color-surface-3: hsl(240 1.5% 28%);
-
-			--kit-color-text: hsl(0 0% 100%);
-			--kit-color-text-muted: hsl(240 3% 56%);
-			--kit-color-text-subtle: hsl(240 2.5% 38%);
-			--kit-color-text-disabled: hsl(240 1.5% 25%);
-
-			--kit-color-fill: hsl(240 2.5% 24%);
-			--kit-color-fill-hover: hsl(240 2.5% 28%);
-			--kit-color-fill-active: hsl(240 2.5% 31%);
-
-			--kit-color-border: hsl(240 2% 26%);
-			--kit-color-shadow: hsl(240 3% 11%);
-
-			--kit-color-accent: hsl(220 85% 65%);
-			--kit-color-on-accent: hsl(240 3% 11%);
-			--kit-color-success: hsl(145 50% 50%);
-			--kit-color-on-success: hsl(240 3% 11%);
-			--kit-color-warning: hsl(35 85% 58%);
-			--kit-color-on-warning: hsl(240 3% 11%);
-			--kit-color-error: hsl(5 70% 60%);
-			--kit-color-on-error: hsl(240 3% 11%);
-			--kit-color-info: hsl(205 65% 58%);
-			--kit-color-on-info: hsl(240 3% 11%);
-			--kit-color-focus: hsl(35 90% 62%);
-		}
-	}
-
-	:global(.outline) {
-		position: absolute;
-		inset: 0;
-		border: 1px solid var(--outline-color);
-		border-radius: inherit;
-		box-sizing: border-box;
-		z-index: 1;
-		pointer-events: none;
-	}
-
-	:global(.kit-ripple) {
-		background-color: currentColor;
-		opacity: 0.1;
-		position: absolute;
-		border-radius: 50%;
-		pointer-events: none;
-		transition: 0.6s;
-		animation: animation-l-ripple var(--system-animation-ripple-duration, 0.4s)
-			cubic-bezier(0.4, 0, 0.2, 1);
-		border-radius: 50%;
-	}
-
-	:global(.kit-ripple--center) {
-		top: 50% !important;
-		left: 50% !important;
-		translate: -50% -50% !important;
-	}
-
-	:global(.kit-ripple--effect) {
-		position: absolute;
-		left: 0;
-		right: 0;
-		top: 0;
-		bottom: 0;
-		overflow: hidden;
-		background: none;
-		pointer-events: none;
-		z-index: 999;
-		border-radius: var(--system-ripple-radius);
-	}
-
-	:global([data-elevation='0']),
-	:global([data-elevation-hover='0']:hover),
-	:global([data-elevation-active='0']):active {
-		box-shadow: none;
-	}
-
-	:global([data-elevation='1']),
-	:global([data-elevation-hover='1']:hover),
-	:global([data-elevation-active='1']:active) {
-		box-shadow:
-			0 1px 2px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent),
-			0 3px 8px -2px
-				color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
-	}
-
-	:global([data-elevation='2']),
-	:global([data-elevation-hover='2']:hover),
-	:global([data-elevation-active='2']:active) {
-		box-shadow:
-			0 1px 3px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent),
-			0 5px 12px -3px
-				color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
-	}
-
-	:global([data-elevation='3']),
-	:global([data-elevation-hover='3']:hover),
-	:global([data-elevation-active='3']:active) {
-		box-shadow:
-			0 2px 4px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent),
-			0 8px 20px -4px
-				color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
-	}
-
-	:global([data-elevation='4']),
-	:global([data-elevation-hover='4']):hover,
-	:global([data-elevation-active='4']):active {
-		box-shadow:
-			0 3px 5px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent),
-			0 11px 26px -5px
-				color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
-	}
-
-	:global([data-elevation='5']),
-	:global([data-elevation-hover='5']:hover),
-	:global([data-elevation-active='5']:active) {
-		box-shadow:
-			0 4px 6px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent),
-			0 14px 32px -6px
-				color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
-	}
-	@keyframes -global-animation-l-ripple {
-		from {
-			scale: 0;
-		}
-
-		to {
-			scale: 1;
-		}
-	}
-</style>
+<style>:root {
+  --kit-shape-none: 0;
+  --kit-shape-xs: 0.25rem;
+  --kit-shape-sm: 0.375rem;
+  --kit-shape-md: 0.625rem;
+  --kit-shape-lg: 0.875rem;
+  --kit-shape-xl: 1.125rem;
+  --kit-shape-full: 9999px;
+}
+
+:global html {
+  --kit-font-xs: 13px;
+  --kit-font-sm: 14px;
+  --kit-font-md: 15px;
+  --kit-font-lg: 16px;
+  --kit-font-xl: 17px;
+  --kit-space-compact: 2px;
+  --kit-space-default: 4px;
+  --kit-space-comfortable: 6px;
+  --kit-density-compact: -4px;
+  --kit-density-default: 0px;
+  --kit-density-comfortable: 4px;
+  --kit-shadow-opacity: 30%;
+  --kit-shadow-ambient-opacity: 15%;
+  --kit-disabled-opacity: 0.55;
+  --kit-font:
+  	ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+  	'Segoe UI Symbol', 'Noto Color Emoji';
+  --kit-color-transparent: transparent;
+}
+:global html:not([data-kit-theme]),
+:global [data-kit-theme=light] {
+  color-scheme: light;
+  --kit-color-surface: hsl(0 0% 100%);
+  --kit-color-surface-1: hsl(240 15% 96.5%);
+  --kit-color-surface-2: hsl(240 10% 93%);
+  --kit-color-surface-3: hsl(0 0% 100%);
+  --kit-color-text: hsl(222 20% 10%);
+  --kit-color-text-muted: hsl(220 10% 40%);
+  --kit-color-text-subtle: hsl(220 8% 58%);
+  --kit-color-text-disabled: hsl(220 5% 76%);
+  --kit-color-fill: hsl(240 8% 93%);
+  --kit-color-fill-hover: hsl(240 4% 91%);
+  --kit-color-fill-active: hsl(240 4% 88%);
+  --kit-color-border: hsl(220 16% 88%);
+  --kit-color-shadow: hsl(240 3% 11%);
+  --kit-color-accent: hsl(220 90% 56%);
+  --kit-color-on-accent: hsl(0 0% 100%);
+  --kit-color-success: hsl(145 50% 38%);
+  --kit-color-on-success: hsl(0 0% 100%);
+  --kit-color-warning: hsl(35 80% 45%);
+  --kit-color-on-warning: hsl(222 20% 10%);
+  --kit-color-error: hsl(5 65% 48%);
+  --kit-color-on-error: hsl(0 0% 100%);
+  --kit-color-info: hsl(205 60% 42%);
+  --kit-color-on-info: hsl(0 0% 100%);
+  --kit-color-focus: hsl(35 90% 56%);
+}
+:global [data-kit-theme=dark] {
+  color-scheme: dark;
+  --kit-color-surface: hsl(240 3% 11%);
+  --kit-color-surface-1: hsl(240 2% 17.5%);
+  --kit-color-surface-2: hsl(240 1.5% 23%);
+  --kit-color-surface-3: hsl(240 1.5% 28%);
+  --kit-color-text: hsl(0 0% 100%);
+  --kit-color-text-muted: hsl(240 3% 56%);
+  --kit-color-text-subtle: hsl(240 2.5% 38%);
+  --kit-color-text-disabled: hsl(240 1.5% 25%);
+  --kit-color-fill: hsl(240 2.5% 24%);
+  --kit-color-fill-hover: hsl(240 2.5% 28%);
+  --kit-color-fill-active: hsl(240 2.5% 31%);
+  --kit-color-border: hsl(240 2% 26%);
+  --kit-color-shadow: hsl(240 3% 11%);
+  --kit-color-accent: hsl(220 85% 65%);
+  --kit-color-on-accent: hsl(240 3% 11%);
+  --kit-color-success: hsl(145 50% 50%);
+  --kit-color-on-success: hsl(240 3% 11%);
+  --kit-color-warning: hsl(35 85% 58%);
+  --kit-color-on-warning: hsl(240 3% 11%);
+  --kit-color-error: hsl(5 70% 60%);
+  --kit-color-on-error: hsl(240 3% 11%);
+  --kit-color-info: hsl(205 65% 58%);
+  --kit-color-on-info: hsl(240 3% 11%);
+  --kit-color-focus: hsl(35 90% 62%);
+}
+@media (prefers-color-scheme: light) {
+  :global [data-kit-theme=system] {
+    color-scheme: light;
+    --kit-color-surface: hsl(0 0% 100%);
+    --kit-color-surface-1: hsl(240 15% 96.5%);
+    --kit-color-surface-2: hsl(240 10% 93%);
+    --kit-color-surface-3: hsl(0 0% 100%);
+    --kit-color-text: hsl(222 20% 10%);
+    --kit-color-text-muted: hsl(220 10% 40%);
+    --kit-color-text-subtle: hsl(220 8% 58%);
+    --kit-color-text-disabled: hsl(220 5% 76%);
+    --kit-color-fill: hsl(240 8% 93%);
+    --kit-color-fill-hover: hsl(240 4% 91%);
+    --kit-color-fill-active: hsl(240 4% 88%);
+    --kit-color-border: hsl(220 16% 88%);
+    --kit-color-shadow: hsl(240 3% 11%);
+    --kit-color-accent: hsl(220 90% 56%);
+    --kit-color-on-accent: hsl(0 0% 100%);
+    --kit-color-success: hsl(145 50% 38%);
+    --kit-color-on-success: hsl(0 0% 100%);
+    --kit-color-warning: hsl(35 80% 45%);
+    --kit-color-on-warning: hsl(222 20% 10%);
+    --kit-color-error: hsl(5 65% 48%);
+    --kit-color-on-error: hsl(0 0% 100%);
+    --kit-color-info: hsl(205 60% 42%);
+    --kit-color-on-info: hsl(0 0% 100%);
+    --kit-color-focus: hsl(35 90% 56%);
+  }
+}
+@media (prefers-color-scheme: dark) {
+  :global [data-kit-theme=system] {
+    color-scheme: dark;
+    --kit-color-surface: hsl(240 3% 11%);
+    --kit-color-surface-1: hsl(240 2% 17.5%);
+    --kit-color-surface-2: hsl(240 1.5% 23%);
+    --kit-color-surface-3: hsl(240 1.5% 28%);
+    --kit-color-text: hsl(0 0% 100%);
+    --kit-color-text-muted: hsl(240 3% 56%);
+    --kit-color-text-subtle: hsl(240 2.5% 38%);
+    --kit-color-text-disabled: hsl(240 1.5% 25%);
+    --kit-color-fill: hsl(240 2.5% 24%);
+    --kit-color-fill-hover: hsl(240 2.5% 28%);
+    --kit-color-fill-active: hsl(240 2.5% 31%);
+    --kit-color-border: hsl(240 2% 26%);
+    --kit-color-shadow: hsl(240 3% 11%);
+    --kit-color-accent: hsl(220 85% 65%);
+    --kit-color-on-accent: hsl(240 3% 11%);
+    --kit-color-success: hsl(145 50% 50%);
+    --kit-color-on-success: hsl(240 3% 11%);
+    --kit-color-warning: hsl(35 85% 58%);
+    --kit-color-on-warning: hsl(240 3% 11%);
+    --kit-color-error: hsl(5 70% 60%);
+    --kit-color-on-error: hsl(240 3% 11%);
+    --kit-color-info: hsl(205 65% 58%);
+    --kit-color-on-info: hsl(240 3% 11%);
+    --kit-color-focus: hsl(35 90% 62%);
+  }
+}
+:global .outline {
+  position: absolute;
+  inset: 0;
+  border: 1px solid var(--outline-color);
+  border-radius: inherit;
+  box-sizing: border-box;
+  z-index: 1;
+  pointer-events: none;
+}
+:global .kit-ripple {
+  background-color: currentColor;
+  opacity: 0.1;
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+  transition: 0.6s;
+  animation: animation-l-ripple var(--system-animation-ripple-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 50%;
+}
+:global .kit-ripple--center {
+  top: 50% !important;
+  left: 50% !important;
+  translate: -50% -50% !important;
+}
+:global .kit-ripple--effect {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  overflow: hidden;
+  background: none;
+  pointer-events: none;
+  z-index: 999;
+  border-radius: var(--system-ripple-radius);
+}
+:global [data-elevation="0"],
+:global [data-elevation-hover="0"]:hover,
+:global [data-elevation-active="0"]:active {
+  box-shadow: none;
+}
+:global [data-elevation="1"],
+:global [data-elevation-hover="1"]:hover,
+:global [data-elevation-active="1"]:active {
+  box-shadow: 0 1px 2px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent), 0 3px 8px -2px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
+}
+:global [data-elevation="2"],
+:global [data-elevation-hover="2"]:hover,
+:global [data-elevation-active="2"]:active {
+  box-shadow: 0 1px 3px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent), 0 5px 12px -3px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
+}
+:global [data-elevation="3"],
+:global [data-elevation-hover="3"]:hover,
+:global [data-elevation-active="3"]:active {
+  box-shadow: 0 2px 4px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent), 0 8px 20px -4px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
+}
+:global [data-elevation="4"],
+:global [data-elevation-hover="4"]:hover,
+:global [data-elevation-active="4"]:active {
+  box-shadow: 0 3px 5px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent), 0 11px 26px -5px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
+}
+:global [data-elevation="5"],
+:global [data-elevation-hover="5"]:hover,
+:global [data-elevation-active="5"]:active {
+  box-shadow: 0 4px 6px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-opacity), transparent), 0 14px 32px -6px color-mix(in oklab, var(--kit-color-shadow) var(--kit-shadow-ambient-opacity), transparent);
+}
+
+@keyframes -global-animation-l-ripple {
+  from {
+    scale: 0;
+  }
+  to {
+    scale: 1;
+  }
+}</style>

package/dist/constants.d.ts

@@ -1,5 +1,7 @@
 export declare const lapikitImportsRef = "lapikit/components";
 export declare const lapikitImportsLabsRef = "lapikit/labs/components";
+export declare const lapikitComponentPaths: Readonly<Record<string, string>>;
+export declare const lapikitLabsComponentPaths: Readonly<Record<string, string>>;
 export declare const lapikitComponents: readonly string[];
 export declare const lapikitLabsComponents: readonly string[];
 export declare const lapikitPlugins: {

package/dist/constants.js

@@ -1,41 +1,39 @@
 export const lapikitImportsRef = 'lapikit/components';
 export const lapikitImportsLabsRef = 'lapikit/labs/components';
-export const lapikitComponents = [
-    'app',
-    'btn',
-    'icon',
-    'avatar',
-    'dropdown',
-    'popover',
-    'tooltip',
-    'textfield',
-    'appbar',
-    'btn',
-    'icon',
-    'avatar',
-    'toolbar',
-    'btn',
-    'icon',
-    'avatar',
-    'list',
-    'list-item',
-    'dialog',
-    'modal',
-    'accordion',
-    'accordion-item',
-    'alert',
-    'aspect-ratio',
-    'spacer',
-    'separator',
-    'chip',
-    'card',
-    'card-title',
-    'card-content',
-    'card-media',
-    'card-actions',
-    'card-container'
-];
-export const lapikitLabsComponents = ['sheet'];
+export const lapikitComponentPaths = {
+    app: 'app/app.svelte',
+    appbar: 'appbar/appbar.svelte',
+    btn: 'btn/btn.svelte',
+    icon: 'icon/icon.svelte',
+    avatar: 'avatar/avatar.svelte',
+    dropdown: 'dropdown/dropdown.svelte',
+    popover: 'popover/popover.svelte',
+    tooltip: 'tooltip/tooltip.svelte',
+    textfield: 'textfield/textfield.svelte',
+    toolbar: 'toolbar/toolbar.svelte',
+    list: 'list/list.svelte',
+    'list-item': 'list/modules/list-item.svelte',
+    dialog: 'dialog/dialog.svelte',
+    modal: 'modal/modal.svelte',
+    accordion: 'accordion/accordion.svelte',
+    'accordion-item': 'accordion/modules/accordion-item.svelte',
+    alert: 'alert/alert.svelte',
+    'aspect-ratio': 'aspect-ratio/aspect-ratio.svelte',
+    spacer: 'spacer/spacer.svelte',
+    separator: 'separator/separator.svelte',
+    chip: 'chip/chip.svelte',
+    card: 'card/card.svelte',
+    'card-title': 'card/modules/card-title.svelte',
+    'card-content': 'card/modules/card-content.svelte',
+    'card-media': 'card/modules/card-media.svelte',
+    'card-actions': 'card/modules/card-actions.svelte',
+    'card-container': 'card/modules/card-container.svelte'
+};
+export const lapikitLabsComponentPaths = {
+    sheet: 'sheet/sheet.svelte'
+};
+export const lapikitComponents = Object.keys(lapikitComponentPaths);
+export const lapikitLabsComponents = Object.keys(lapikitLabsComponentPaths);
 export const lapikitPlugins = {
     repl: {
         components: ['repl'],

package/dist/directives.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Svelte refuses the class: and style: directives on a component. On a <kit:...> tag, Lili turns them
+ * into the s-class_ / s-style_ props the components already handle:
+ *   class:active          -> s-class_active={active}
+ *   class:gap={4}         -> s-class_gap={4}         (the component gives the class gap-4)
+ *   style:opacity={0}     -> s-style_opacity={0}
+ *   style:color="red"     -> s-style_color="red"
+ * A directive with a modifier (style:color|important) is left as it is: Svelte reports it.
+ */
+/**
+ * Rewrites the class: and style: directives of the attributes of a tag (everything after its name).
+ * The values of the other attributes are skipped, so a "class:" inside a string or an expression is kept.
+ */
+export declare function rewriteDirectives(attributes: string): string;