```
--------------------------------
### Handling 'Failed to execute 'define' on 'CustomElementRegistry''
Source: https://github.com/kyndryl-design-system/shidoka-applications/blob/main/README.md
Explains the 'Failed to execute 'define' on 'CustomElementRegistry'' error, often caused by bundling issues, and suggests solutions like declaring dependencies as external or peer dependencies.
```markdown
**Handling `Failed to execute 'define' on 'CustomElementRegistry'`**
#### The Problem
This is a common bundling issue that can appear when you incorporate a component that has already bundled Shidoka components. Typically this would be caused by having a middle layer, for example a Common UI layer that has a cross-platform Header component built using Shidoka components.
#### Avoiding This
You can get around this in by not declaring Shidoka components as dependencies, and instead declaring them as external or peer dependencies in the middle/common layer.
For example, from the shidoka-applications rollup.js config using [the external option](https://rollupjs.org/configuration-options/#external): `external: [/shidoka-foundation/components/]`. Since shidoka-foundation components are used within shidoka-applications components, this prevents the foundation components from being bundled, meaning it leaves the import statements unaltered (ex: `import '@kyndryl-design-system/...'`). This way, the application bundler can handle it instead.
This works with bundling from node_modules, but not with CDN hosted files since the deployed application won't know how to resolve aliased node_modules imports ex: `import '@kyndryl-design-system/...'`. In this case, you probably need a workaround.
#### Workaround
If for some reason the above suggestion does not help, there is a library containing a script/polyfill that can be used which allows custom elements to be redefined: https://github.com/caridy/redefine-custom-elements. We've found that this script works best when served from the app's `` tag.
```
--------------------------------
### Import Root Stylesheets
Source: https://github.com/kyndryl-design-system/shidoka-applications/blob/main/README.md
Demonstrates how to import the root stylesheets for Shidoka components using SCSS, CSS, or JavaScript.
```css
@use '@kyndryl-design-system/shidoka-foundation/scss/root.scss';
```
```css
@import '@kyndryl-design-system/shidoka-foundation/css/root.css';
```
```javascript
import '@kyndryl-design-system/shidoka-foundation/css/root.css';
```
--------------------------------
### Component Creation and Documentation Guidelines
Source: https://github.com/kyndryl-design-system/shidoka-applications/blob/main/CONTRIBUTING.md
Standards for creating new components, including file structure, generic design principles, and documentation requirements using JSDoc and Storybook.
```markdown
Components should be contained within their own folder containing `ts`, `scss`, and `stories` files. Sub-components can share the same folder.
Add new components to the root `index.ts` file.
Everything in the design system should be 100% generic. Remember that these components could be used to build any application. Application concerns must be separated.
Use Lit [directives](https://lit.dev/docs/templates/directives/) and [decorators](https://lit.dev/docs/components/decorators/) whenever possible.
Build responsive, build clean, focus on style and performance, enhance with quick and smooth animations.
Document everything in your components with [JSDoc](https://custom-elements-manifest.open-wc.org/analyzer/getting-started/#supported-jsdoc).
Update the `custom-elements.json` file with the `npm run analyze` script any time you add or change documentation. This is where the Storybook args tables are derived from.
Write your storybook stories with controls enabled for every property where possible.
When building modular components with sub-components, write multiple stories to show different variations. Include any sub-components in the main story so it renders a new tab with an args table.
```
--------------------------------
### Import Storybook Addon Docs Blocks
Source: https://github.com/kyndryl-design-system/shidoka-applications/blob/main/src/components/reusable/radioButton/Docs.mdx
Imports necessary components from Storybook's addon-docs/blocks for documentation rendering.
```javascript
import {
Meta,
Story,
Canvas,
Controls,
Stories,
Description,
Title,
} from '@storybook/addon-docs/blocks';
```
--------------------------------
### Testing Strategy with Storybook
Source: https://github.com/kyndryl-design-system/shidoka-applications/blob/main/CONTRIBUTING.md
Overview of testing methodologies using Storybook, including Accessibility, Interaction, and Visual Testing with Chromatic.
```markdown
We use [@storybook/test](https://storybook.js.org/docs/writing-tests) to execute a variety of automated tests.
The [Test Runner](https://storybook.js.org/docs/writing-tests/test-runner) is used to execute Accessibility and Interaction tests both locally and in CI.
[Accessibility Tests](https://storybook.js.org/docs/writing-tests/accessibility-testing)
[Interaction Tests](https://storybook.js.org/docs/writing-tests/interaction-testing)
1. Interaction Test writing strategy TBD
[Visual Testing via Chromatic](https://www.chromatic.com/)
1. Provides visual screenshot comparison testing and a review process which integrates with our CI.
```
--------------------------------
### Empty State Pattern - Small Variant
Source: https://github.com/kyndryl-design-system/shidoka-applications/blob/main/src/stories/emptyState/Docs.mdx
Provides the HTML structure for the small variant of the Empty State pattern. It includes placeholders for an icon, description, and an optional primary action button.
```html