lapikit 0.5.8 → 0.6.0

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

@@ -0,0 +1,6 @@
+export type AccordionOptions = {
+    multiple?: boolean;
+    readOnly?: boolean;
+};
+/**Modal */
+export type ModalState = boolean | 'persistent';

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

@@ -4,3 +4,4 @@ export * from './props.js';
 export * from './events.js';
 export * from './animations.js';
 export * from './core.js';
+export * from './actions.js';

package/dist/@types/index.js

@@ -4,3 +4,4 @@ export * from './props.js';
 export * from './events.js';
 export * from './animations.js';
 export * from './core.js';
+export * from './actions.js';

package/dist/actions.d.ts

@@ -0,0 +1,2 @@
+export * from './utils/themes.js';
+export * from './components/accordion/accordion.svelte.js';

package/dist/actions.js

@@ -0,0 +1,2 @@
+export * from './utils/themes.js';
+export * from './components/accordion/accordion.svelte.js';

package/dist/components/dialog/dialog.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import { disabledScroll } from '../../@legacy/internal/helpers/scroll';
 	import { makeComponentProps } from '../../html-mapped';
-	import { useClassName, useStyles } from '../../utils';
+	import { useClassName, useStyles, disabledScroll } from '../../utils';
 	import type { DialogDensity, DialogPosition, DialogProps, DialogSize } from './dialog.types.js';
 
 	function resolveSize(value: DialogSize | undefined): DialogSize {

package/dist/components/list/list.svelte

@@ -134,41 +134,6 @@
 		padding: 0.5rem;
 	}
 
-	.kit-list[data-size='xs'] {
-		--kit-list-item-h: var(--kit-list-item-h-xs);
-		--kit-list-item-px: var(--kit-list-item-px-xs);
-		--kit-list-item-gap: var(--kit-list-item-gap-xs);
-		--kit-list-item-font: var(--kit-list-item-font-xs);
-	}
-
-	.kit-list[data-size='sm'] {
-		--kit-list-item-h: var(--kit-list-item-h-sm);
-		--kit-list-item-px: var(--kit-list-item-px-sm);
-		--kit-list-item-gap: var(--kit-list-item-gap-sm);
-		--kit-list-item-font: var(--kit-list-item-font-sm);
-	}
-
-	.kit-list[data-size='md'] {
-		--kit-list-item-h: var(--kit-list-item-h-md);
-		--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[data-size='lg'] {
-		--kit-list-item-h: var(--kit-list-item-h-lg);
-		--kit-list-item-px: var(--kit-list-item-px-lg);
-		--kit-list-item-gap: var(--kit-list-item-gap-lg);
-		--kit-list-item-font: var(--kit-list-item-font-lg);
-	}
-
-	.kit-list[data-size='xl'] {
-		--kit-list-item-h: var(--kit-list-item-h-xl);
-		--kit-list-item-px: var(--kit-list-item-px-xl);
-		--kit-list-item-gap: var(--kit-list-item-gap-xl);
-		--kit-list-item-font: var(--kit-list-item-font-xl);
-	}
-
 	.kit-list[data-density='compact'] {
 		--kit-list-density-offset: -0.25rem;
 	}

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

@@ -118,6 +118,41 @@
 		text-align: left;
 	}
 
+	:global(.kit-list[data-size='xs']) .kit-list-item {
+		--kit-list-item-h: var(--kit-list-item-h-xs, 2.125rem);
+		--kit-list-item-px: var(--kit-list-item-px-xs, 0.625rem);
+		--kit-list-item-gap: var(--kit-list-item-gap-xs, 0.5rem);
+		--kit-list-item-font: var(--kit-list-item-font-xs, 0.75rem);
+	}
+
+	:global(.kit-list[data-size='sm']) .kit-list-item {
+		--kit-list-item-h: var(--kit-list-item-h-sm, 2.375rem);
+		--kit-list-item-px: var(--kit-list-item-px-sm, 0.75rem);
+		--kit-list-item-gap: var(--kit-list-item-gap-sm, 0.5rem);
+		--kit-list-item-font: var(--kit-list-item-font-sm, 0.875rem);
+	}
+
+	:global(.kit-list[data-size='md']) .kit-list-item {
+		--kit-list-item-h: var(--kit-list-item-h-md, 2.75rem);
+		--kit-list-item-px: var(--kit-list-item-px-md, 0.875rem);
+		--kit-list-item-gap: var(--kit-list-item-gap-md, 0.625rem);
+		--kit-list-item-font: var(--kit-list-item-font-md, 0.9375rem);
+	}
+
+	:global(.kit-list[data-size='lg']) .kit-list-item {
+		--kit-list-item-h: var(--kit-list-item-h-lg, 3.125rem);
+		--kit-list-item-px: var(--kit-list-item-px-lg, 1rem);
+		--kit-list-item-gap: var(--kit-list-item-gap-lg, 0.75rem);
+		--kit-list-item-font: var(--kit-list-item-font-lg, 1rem);
+	}
+
+	:global(.kit-list[data-size='xl']) .kit-list-item {
+		--kit-list-item-h: var(--kit-list-item-h-xl, 3.5rem);
+		--kit-list-item-px: var(--kit-list-item-px-xl, 1.125rem);
+		--kit-list-item-gap: var(--kit-list-item-gap-xl, 0.875rem);
+		--kit-list-item-font: var(--kit-list-item-font-xl, 1.0625rem);
+	}
+
 	.kit-list-item[data-rounded='0'] {
 		--kit-list-item-radius: 0;
 	}

package/dist/{@legacy/stores/components.d.ts → components/modal/modal.d.ts}

@@ -1,8 +1,7 @@
+import type { ModalState } from '../../@types';
 import { type Writable } from 'svelte/store';
-type ModalState = boolean | 'persistent';
 export declare const modalOpen: Writable<ModalState>;
 export declare const modalStack: Writable<string[]>;
 export declare function setOpenModal(state: boolean | 'persistent'): void;
 export declare const pushModal: (id: string) => void;
 export declare const popModal: (id: string) => void;
-export {};

package/dist/{@legacy/stores/components.js → components/modal/modal.js}

@@ -1,4 +1,4 @@
-import { disabledScroll } from '../internal/helpers/scroll.js';
+import { disabledScroll } from '../../utils';
 import { writable } from 'svelte/store';
 // presets
 const refModal = false;

package/dist/components/modal/modal.svelte

@@ -3,7 +3,7 @@
 	import { get } from 'svelte/store';
 	import { makeComponentProps } from '../../html-mapped';
 	import { useClassName, useStyles } from '../../utils';
-	import { modalOpen, modalStack, popModal, pushModal, setOpenModal } from '../../@legacy/stores';
+	import { modalOpen, modalStack, popModal, pushModal, setOpenModal } from './modal.js';
 	import type { ModalDensity, ModalPosition, ModalProps, ModalSize } from './modal.types.js';
 
 	function resolveSize(value: ModalSize | undefined): ModalSize {

package/dist/components/textfield/textfield.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { TextfieldProps } from './textfield.types.ts';
-declare const Textfield: import("svelte").Component<TextfieldProps, {}, "ref" | "value">;
+declare const Textfield: import("svelte").Component<TextfieldProps, {}, "value" | "ref">;
 type Textfield = ReturnType<typeof Textfield>;
 export default Textfield;

package/dist/constants.d.ts

@@ -1,5 +1,5 @@
-export declare const lapikitImportsRef = "lapikit/labs/components";
-export declare const lapikitImportsLabsRef = "lapikit/labs/labs/components";
+export declare const lapikitImportsRef = "lapikit/components";
+export declare const lapikitImportsLabsRef = "lapikit/labs/components";
 export declare const lapikitComponents: readonly string[];
 export declare const lapikitLabsComponents: readonly string[];
 export declare const lapikitPlugins: {

package/dist/constants.js

@@ -1,5 +1,5 @@
-export const lapikitImportsRef = 'lapikit/labs/components';
-export const lapikitImportsLabsRef = 'lapikit/labs/labs/components';
+export const lapikitImportsRef = 'lapikit/components';
+export const lapikitImportsLabsRef = 'lapikit/labs/components';
 export const lapikitComponents = [
     'app',
     'btn',

package/dist/utils/outside.d.ts

@@ -3,3 +3,4 @@ export declare function clickOutside(node: HTMLElement, options: ClickOutsideOpt
     update(newOptions: ClickOutsideOptions): void;
     destroy(): void;
 };
+export declare function disabledScroll(state: boolean): void;

package/dist/utils/outside.js

@@ -32,3 +32,8 @@ export function clickOutside(node, options) {
         }
     };
 }
+export function disabledScroll(state) {
+    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+        document.body.style.overflow = state ? 'hidden' : '';
+    }
+}

package/dist/{@legacy/stores → utils}/themes.d.ts

@@ -1,2 +1,3 @@
 import { type Writable } from 'svelte/store';
 export declare const theme: Writable<string>;
+export declare function useTheme(name: string, key?: string): void;

package/dist/{@legacy/actions/use-theme.js → utils/themes.js}

@@ -1,6 +1,9 @@
-import { theme } from '../stores/themes.js';
+import { writable } from 'svelte/store';
 // states
 const isBrowser = typeof window !== 'undefined';
+// presets
+const themeRef = 'light';
+export const theme = writable(themeRef);
 export function useTheme(name, key = '@lapikit/theme') {
     theme.update(() => {
         if (isBrowser) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.5.8",
+	"version": "0.6.0",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"
@@ -43,51 +43,30 @@
 	"bin": {
 		"lapikit": "bin/index.js"
 	},
-	"svelte": "./dist/@legacy/index.js",
-	"types": "./dist/@legacy/index.d.ts",
+	"svelte": "./dist/entry-bundler.js",
+	"types": "./dist/entry-bundler.d.ts",
 	"type": "module",
 	"exports": {
 		".": {
-			"types": "./dist/@legacy/index.d.ts",
-			"svelte": "./dist/@legacy/index.js"
-		},
-		"./components": {
-			"svelte": "./dist/@legacy/components/index.js",
-			"default": "./dist/@legacy/components/index.js"
-		},
-		"./vite": {
-			"default": "./dist/@legacy/internal/plugins/vite.js"
-		},
-		"./stores": {
-			"default": "./dist/@legacy/stores/index.js"
-		},
-		"./actions": {
-			"default": "./dist/@legacy/actions/index.js"
-		},
-		"./core/colors": {
-			"default": "./dist/@legacy/internal/core/standard-colors.js"
-		},
-		"./styles": {
-			"types": "./dist/@legacy/styles.css.d.ts",
-			"default": "./dist/@legacy/styles.css"
-		},
-		"./themes": {
-			"types": "./dist/@legacy/themes.css.d.ts",
-			"default": "./dist/@legacy/themes.css"
+			"types": "./dist/entry-bundler.d.ts",
+			"svelte": "./dist/entry-bundler.js"
 		},
-		"./labs/preprocess": {
+		"./preprocess": {
 			"types": "./dist/entry-bundler.d.ts",
 			"default": "./dist/entry-bundler.js"
 		},
-		"./labs/components": {
+		"./components": {
 			"types": "./dist/components/index.d.ts",
 			"svelte": "./dist/components/index.js",
 			"default": "./dist/components/index.js"
 		},
-		"./labs/labs/components": {
+		"./labs/components": {
 			"types": "./dist/labs/index.d.ts",
 			"svelte": "./dist/labs/index.js",
 			"default": "./dist/labs/index.js"
+		},
+		"./actions": {
+			"default": "./dist/actions.js"
 		}
 	},
 	"peerDependencies": {

package/dist/@legacy/actions/accordion.svelte.d.ts

@@ -1,9 +0,0 @@
-type AccordionOptions = {
-    multiple?: boolean;
-    readOnly?: boolean;
-};
-export declare function useAccordion({ multiple, readOnly }?: AccordionOptions): {
-    readonly values: (string | number)[];
-    toggle(id: string | number): void;
-};
-export {};

package/dist/@legacy/actions/index.d.ts

@@ -1,2 +0,0 @@
-export * from './accordion.svelte.js';
-export * from './use-theme.js';

package/dist/@legacy/actions/index.js

@@ -1,2 +0,0 @@
-export * from './accordion.svelte.js';
-export * from './use-theme.js';

package/dist/@legacy/actions/use-theme.d.ts

@@ -1 +0,0 @@
-export declare function useTheme(name: string, key?: string): void;

package/dist/@legacy/assets/icons/arrow-down.svelte

@@ -1,12 +0,0 @@
-<script lang="ts"></script>
-
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-	><path
-		fill="none"
-		stroke="currentColor"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-width="2.5"
-		d="m7 10l5 5m0 0l5-5"
-	/></svg
->

package/dist/@legacy/assets/icons/arrow-down.svelte.d.ts

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ArrowDown: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ArrowDown = InstanceType<typeof ArrowDown>;
-export default ArrowDown;

package/dist/@legacy/assets/icons/arrow-up.svelte

@@ -1,12 +0,0 @@
-<script lang="ts"></script>
-
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-	><path
-		fill="none"
-		stroke="currentColor"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-width="2.5"
-		d="m17 14l-5-5m0 0l-5 5"
-	/></svg
->

package/dist/@legacy/assets/icons/arrow-up.svelte.d.ts

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ArrowUp: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ArrowUp = InstanceType<typeof ArrowUp>;
-export default ArrowUp;

package/dist/@legacy/assets/icons/close-fill.svelte

@@ -1,12 +0,0 @@
-<script lang="ts"></script>
-
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-	><title>close_fill</title><g id="close_fill" fill="none" fill-rule="evenodd"
-		><path
-			d="M24 0v24H0V0zM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01z"
-		/><path
-			fill="currentColor"
-			d="m12 14.122 5.303 5.303a1.5 1.5 0 0 0 2.122-2.122L14.12 12l5.304-5.303a1.5 1.5 0 1 0-2.122-2.121L12 9.879 6.697 4.576a1.5 1.5 0 1 0-2.122 2.12L9.88 12l-5.304 5.304a1.5 1.5 0 1 0 2.122 2.12z"
-		/></g
-	></svg
->

package/dist/@legacy/assets/icons/close-fill.svelte.d.ts

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const CloseFill: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CloseFill = InstanceType<typeof CloseFill>;
-export default CloseFill;

package/dist/@legacy/assets/icons/loading-fill.svelte

@@ -1,31 +0,0 @@
-<script lang="ts"></script>
-
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-	><defs
-		><linearGradient id="a" x1="50%" x2="50%" y1="5.271%" y2="91.793%"
-			><stop offset="0%" stop-color="currentColor" /><stop
-				offset="100%"
-				stop-color="currentColor"
-				stop-opacity=".55"
-			/></linearGradient
-		><linearGradient id="b" x1="50%" x2="50%" y1="15.24%" y2="87.15%"
-			><stop offset="0%" stop-color="currentColor" stop-opacity="0" /><stop
-				offset="100%"
-				stop-color="currentColor"
-				stop-opacity=".55"
-			/></linearGradient
-		></defs
-	><g fill="none"
-		><path
-			d="M24 0v24H0V0zM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01z"
-		/><path
-			fill="url(#a)"
-			d="M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.502 7.502 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021"
-			transform="translate(1.5 1.625)"
-		/><path
-			fill="url(#b)"
-			d="M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.475 10.475 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084 1.5 1.5 0 0 1-.115-2.118"
-			transform="translate(1.5 1.625)"
-		/></g
-	></svg
->

package/dist/@legacy/assets/icons/loading-fill.svelte.d.ts

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const LoadingFill: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type LoadingFill = InstanceType<typeof LoadingFill>;
-export default LoadingFill;

package/dist/@legacy/components/accordion/accordion.css

@@ -1,36 +0,0 @@
-.kit-accordion {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	list-style-type: none;
-	padding: 0;
-	width: 100%;
-	position: relative;
-	z-index: 1;
-}
-
-.kit-accordion.kit-accordion--spacer .kit-accordion-item:first-child.kit-accordion-item--active {
-	margin-bottom: 1rem;
-}
-
-.kit-accordion.kit-accordion--spacer
-	.kit-accordion-item:not(:first-child):not(:last-child).kit-accordion-item--active {
-	margin-bottom: 1rem;
-	margin-top: 1rem;
-}
-.kit-accordion.kit-accordion--spacer .kit-accordion-item:last-child.kit-accordion-item--active {
-	margin-top: 1rem;
-}
-
-.kit-accordion.kit-accordion--hide-icon
-	.kit-accordion-item
-	.kit-accordion-item--title
-	> .kit-accordion-item--icon {
-	display: none !important;
-}
-
-.kit-accordion.kit-accordion--hide-icon .kit-accordion-item .kit-accordion-item--title {
-	cursor: default;
-	pointer-events: none;
-	user-select: none;
-}

package/dist/@legacy/components/accordion/accordion.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
-	import type { AccordionProps } from './types.js';
-
-	let {
-		ref = $bindable(),
-		children,
-		is = 'div',
-		dark,
-		light,
-		color,
-		background,
-		spacer,
-		hideIcon,
-		rounded,
-		...rest
-	}: AccordionProps = $props();
-
-	const assets = getAssets();
-</script>
-
-<svelte:element
-	this={is}
-	bind:this={ref}
-	{...rest}
-	class={[
-		'kit-accordion',
-		spacer && 'kit-accordion--spacer',
-		hideIcon && 'kit-accordion--hide-icon',
-		light && 'light',
-		dark && 'dark',
-		rest.class
-	]}
-	style:--accordion-shape={assets.shape(rounded)}
-	style:--accordion-background={assets.color(background)}
-	style:--accordion-color={assets.color(color)}
->
-	{@render children?.()}
-</svelte:element>

package/dist/@legacy/components/accordion/accordion.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { AccordionProps } from './types.js';
-declare const Accordion: import("svelte").Component<AccordionProps, {}, "ref">;
-type Accordion = ReturnType<typeof Accordion>;
-export default Accordion;

package/dist/@legacy/components/accordion/modules/accordion-item.css

@@ -1,68 +0,0 @@
-.kit-accordion-item {
-	flex: 1 0 100%;
-	max-width: 100%;
-	position: relative;
-	transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
-	transition-property: margin-top, border-radius, border, max-width;
-	border-radius: var(--accordion-shape, var(--system-shape-md));
-	color: var(--accordion-color, var(--kit-label-primary));
-	background-color: var(--accordion-background, var(--kit-background-grouped-primary));
-}
-
-.kit-accordion-item > button,
-.kit-accordion-item > [type='button'] {
-	font: inherit;
-	overflow: visible;
-	background-color: transparent;
-	border-style: none;
-	cursor: pointer;
-	color: inherit;
-}
-
-.kit-accordion-item .kit-accordion-item--title {
-	align-items: center;
-	text-align: start;
-	border-radius: inherit;
-	display: flex;
-	font-size: 0.9375rem;
-	min-height: 3rem;
-	outline: none;
-	padding: 1rem 1.5rem;
-	position: relative;
-	transition: 0.3s min-height margin-bottom margin-top border-radius cubic-bezier(0.4, 0, 0.2, 1);
-	width: 100%;
-	justify-content: space-between;
-}
-
-.kit-accordion-item .kit-accordion-item--text {
-	display: flex;
-}
-
-.kit-accordion-item .kit-accordion-item--text .kit-accordion-item--text-wrapper {
-	padding: 0.5rem 1.5rem 1rem;
-	flex: 1 1 auto;
-	max-width: 100%;
-}
-
-.kit-accordion-item .kit-accordion-item--icon {
-	display: inline-flex;
-	margin-bottom: -0.25rem;
-	margin-top: -0.25rem;
-	-webkit-user-select: none;
-	user-select: none;
-	margin-inline-start: auto;
-}
-
-/* disabled */
-.kit-accordion-item .kit-accordion-item--title.kit-accordion-item--disabled,
-.kit-accordion-item .kit-accordion-item--title[disabled],
-.kit-accordion-item .kit-accordion-item--title:disabled {
-	pointer-events: none;
-	user-select: none;
-}
-
-.kit-accordion-item .kit-accordion-item--title.kit-accordion-item--disabled > *,
-.kit-accordion-item .kit-accordion-item--title[disabled] > *,
-.kit-accordion-item .kit-accordion-item--title:disabled > * {
-	opacity: 0.6;
-}