Use `shoelace` in a Stencil project

app.ts

// src/global/app.ts

import { setup } from './vendor/shoelace';

export default async function (): Promise<void> {
  setup();
}

shoelace.ts

// src/global/vendor/shoelace.ts

import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
import { setDefaultAnimation } from '@shoelace-style/shoelace/dist/utilities/animation-registry.js';
import '@shoelace-style/shoelace/dist/components/avatar/avatar.js';
import '@shoelace-style/shoelace/dist/components/badge/badge.js';
import '@shoelace-style/shoelace/dist/components/button/button.js';
import '@shoelace-style/shoelace/dist/components/button-group/button-group.js';
import '@shoelace-style/shoelace/dist/components/checkbox/checkbox.js';
import '@shoelace-style/shoelace/dist/components/details/details.js';
import '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';
import '@shoelace-style/shoelace/dist/components/icon/icon.js';
import '@shoelace-style/shoelace/dist/components/input/input.js';
import '@shoelace-style/shoelace/dist/components/menu/menu.js';
import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
import '@shoelace-style/shoelace/dist/components/skeleton/skeleton.js';
import '@shoelace-style/shoelace/dist/components/spinner/spinner.js';

export function setup(): void {
  // Set the base path to the folder you copied Shoelace's assets to
  setBasePath('/assets/shoelace');

  // Change the default animation for all sl-details
  setDefaultAnimation('details.show', {
    keyframes: [],
    options: {
      duration: 0
    }
  });
  setDefaultAnimation('details.hide', {
    keyframes: [],
    options: {
      duration: 0
    }
  });
}

stencil.config.ts

import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';
import alias from '@rollup/plugin-alias';
import nodePolyfills from 'rollup-plugin-node-polyfills';

const copies = [
  {
    src: '../node_modules/@shoelace-style/shoelace/dist/assets',
    dest: 'assets/shoelace/assets'
  }
];

export const config: Config = {
  namespace: 'bla',
  taskQueue: 'async',
  outputTargets: [
    {
      type: 'dist',
      copy: copies
    },
    {
      type: 'www',
      serviceWorker: {
        skipWaiting: true,
        clientsClaim: true
      },
      copy: copies
    },
    {
      type: 'stats',
      file: 'stats.json'
    },
    {
      type: 'docs-json',
      file: 'components.json'
    }
  ],
  globalScript: 'src/global/app.ts',
  globalStyle: 'src/global/app.scss',
  plugins: [sass()],
  autoprefixCss: true
};