Svelte

Svelte handles webcomponents very well, and you can use the components directly from the dap-design-system package. You can use the components as you would use a normal Svelte component, and you can bind to the events and properties as well.

For more examples check the framework examples repository here.

Installation 
npm install dap-design-system

Import dap-design-system in your Svelte root component:

<script>
    import { onMount } from 'svelte';

    onMount(async () => {
        await import('dap-design-system');
    });
</script>

<dap-ds-input on:dds-input={(e) => console.log(e.detail.value)}></dap-ds-input>

And do not forget to import the CSS variables as well somewhere in your +layout root component:

<script>
    import 'dap-design-system/dist/light.theme.css';
</script>

<slot />

<style>
@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 500 700;
    src:
        url('/node_modules/dap-design-system/dist/assets/fonts/InterVariable.woff2')
        format('truetype');
    font-display: swap;
    font-feature-settings:
        'liga' 1,
        'calt' 1,
        'ss02' 1;
    font-variation-settings: 'slnt' 0;
    font-optical-sizing: auto;
}
</style>