refactor: move web component implementations into one directory

packages/web-component-library-stencil/src/components/article/index.stencil.tsx → packages/web-component-library-stencil/src/components/article.tsx

@@ -8,7 +8,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-article',
-  styleUrl: 'index.scss',
+  styleUrl: 'article.scss',
   shadow: true,
 })
 export class Article {

packages/web-component-library-stencil/src/components/backdrop/index.stencil.tsx → packages/web-component-library-stencil/src/components/backdrop.tsx

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 
 @Component({
   tag: 'utrecht-backdrop',
-  styleUrl: 'index.scss',
+  styleUrl: 'backdrop.scss',
   shadow: true,
 })
 export class Backdrop {

packages/web-component-library-stencil/src/components/badge-counter/index.stencil.tsx → packages/web-component-library-stencil/src/components/badge-counter.tsx

@@ -8,7 +8,7 @@ import { Component, h, Prop } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-badge-counter',
-  styleUrl: 'index.scss',
+  styleUrl: 'badge-counter.scss',
   shadow: true,
 })
 export class BadgeCounter {

packages/web-component-library-stencil/src/components/badge-data/index.stencil.tsx → packages/web-component-library-stencil/src/components/badge-data.tsx

@@ -8,7 +8,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-badge-data',
-  styleUrl: 'index.scss',
+  styleUrl: 'badge-data.scss',
   shadow: true,
 })
 export class BadgeData {

packages/web-component-library-stencil/src/components/badge-status/index.stencil.tsx → packages/web-component-library-stencil/src/components/badge-status.tsx

@@ -8,7 +8,7 @@ import { Component, h, Prop } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-badge-status',
-  styleUrl: 'index.scss',
+  styleUrl: 'badge-status.scss',
   shadow: true,
 })
 export class BadgeStatus {

packages/web-component-library-stencil/src/components/breadcrumb/index.stencil.tsx → packages/web-component-library-stencil/src/components/breadcrumb.tsx

@@ -7,7 +7,7 @@ import clsx from 'clsx';
 
 @Component({
   tag: 'utrecht-breadcrumb',
-  styleUrl: 'index.scss',
+  styleUrl: 'breadcrumb.scss',
   shadow: true,
 })
 export class Breadcrumb {

packages/web-component-library-stencil/src/components/button/index.stencil.tsx → packages/web-component-library-stencil/src/components/button.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 
 @Component({
   tag: 'utrecht-button',
-  styleUrl: 'index.scss',
+  styleUrl: 'button.scss',
   shadow: true,
 })
 export class Button {

packages/web-component-library-stencil/src/components/checkbox/index.stencil.tsx → packages/web-component-library-stencil/src/components/checkbox.tsx

@@ -8,7 +8,7 @@ import clsx from 'clsx';
 
 @Component({
   tag: 'utrecht-checkbox',
-  styleUrl: 'index.scss',
+  styleUrl: 'checkbox.scss',
   shadow: true,
 })
 export class Checkbox {

packages/web-component-library-stencil/src/components/color-sample/index.stencil.tsx → packages/web-component-library-stencil/src/components/color-sample.tsx

@@ -8,7 +8,7 @@ import { Component, h, Host, Prop } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-color-sample',
-  styleUrl: 'index.scss',
+  styleUrl: 'color-sample.scss',
   shadow: true,
 })
 export class ColorSample {

packages/web-component-library-stencil/src/components/contact-card-template/index.stencil.tsx → packages/web-component-library-stencil/src/components/contact-card-template.tsx

@@ -2,7 +2,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-contact-card-template',
-  styleUrl: 'index.scss',
+  styleUrl: 'contact-card-template.scss',
   shadow: true,
 })
 export class ContactCardTemplate {

packages/web-component-library-stencil/src/components/custom-checkbox/index.stencil.tsx → packages/web-component-library-stencil/src/components/custom-checkbox.tsx

@@ -8,7 +8,7 @@ import clsx from 'clsx';
 
 @Component({
   tag: 'utrecht-custom-checkbox',
-  styleUrl: 'index.scss',
+  styleUrl: 'custom-checkbox.scss',
   shadow: true,
 })
 export class CustomCheckbox {

packages/web-component-library-stencil/src/components/digid-button/index.stencil.tsx → packages/web-component-library-stencil/src/components/digid-button.tsx

@@ -8,7 +8,7 @@ import { Component, h, Prop } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-digid-button',
-  styleUrl: 'index.scss',
+  styleUrl: 'digid-button.scss',
   shadow: true,
 })
 export class DigidButton {

packages/web-component-library-stencil/src/components/digid-logo/index.stencil.tsx → packages/web-component-library-stencil/src/components/digid-logo.tsx

@@ -8,7 +8,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-digid-logo',
-  styleUrl: 'index.scss',
+  styleUrl: 'digid-logo.scss',
   shadow: true,
 })
 export class DigidLogo {

packages/web-component-library-stencil/src/components/document/index.stencil.tsx → packages/web-component-library-stencil/src/components/document.tsx

@@ -2,7 +2,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-document',
-  styleUrl: 'index.scss',
+  styleUrl: 'document.scss',
   shadow: true,
 })
 export class Document {

packages/web-component-library-stencil/src/components/eherkenning-logo/index.stencil.tsx → packages/web-component-library-stencil/src/components/eherkenning-logo.tsx

@@ -8,7 +8,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-eherkenning-logo',
-  styleUrl: 'index.scss',
+  styleUrl: 'eherkenning-logo.scss',
   shadow: true,
 })
 export class EherkenningLogo {

packages/web-component-library-stencil/src/components/eidas-logo/index.stencil.tsx → packages/web-component-library-stencil/src/components/eidas-logo.tsx

@@ -8,7 +8,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-eidas-logo',
-  styleUrl: 'index.scss',
+  styleUrl: 'eidas-logo.scss',
   shadow: true,
 })
 export class EidasLogo {

packages/web-component-library-stencil/src/components/form-field-checkbox/index.stencil.tsx → packages/web-component-library-stencil/src/components/form-field-checkbox.tsx

@@ -8,7 +8,7 @@ import clsx from 'clsx';
 
 @Component({
   tag: 'utrecht-form-field-checkbox',
-  styleUrl: 'index.scss',
+  styleUrl: 'form-field-checkbox.scss',
   shadow: true,
 })
 export class FormFieldCheckbox {

packages/web-component-library-stencil/src/components/form-field-description/index.stencil.tsx → packages/web-component-library-stencil/src/components/form-field-description.tsx

@@ -8,7 +8,7 @@ import clsx from 'clsx';
 
 @Component({
   tag: 'utrecht-form-field-description',
-  styleUrl: 'index.scss',
+  styleUrl: 'form-field-description.scss',
   shadow: true,
 })
 export class FormFieldDescription {

packages/web-component-library-stencil/src/components/form-field-textarea/index.stencil.tsx → packages/web-component-library-stencil/src/components/form-field-textarea.tsx

@@ -8,7 +8,7 @@ import clsx from 'clsx';
 
 @Component({
   tag: 'utrecht-form-field-textarea',
-  styleUrl: 'index.scss',
+  styleUrl: 'form-field-textarea.scss',
   shadow: true,
 })
 export class FormFieldTextarea {

packages/web-component-library-stencil/src/components/form-field-textbox/index.stencil.tsx → packages/web-component-library-stencil/src/components/form-field-textbox.tsx

@@ -8,7 +8,7 @@ import clsx from 'clsx';
 
 @Component({
   tag: 'utrecht-form-field-textbox',
-  styleUrl: 'index.scss',
+  styleUrl: 'form-field-textbox.scss',
   shadow: true,
 })
 export class FormFieldTextbox {

packages/web-component-library-stencil/src/components/form-toggle/index.stencil.tsx → packages/web-component-library-stencil/src/components/form-toggle.tsx

@@ -8,7 +8,7 @@ import clsx from 'clsx';
 
 @Component({
   tag: 'utrecht-form-toggle',
-  styleUrl: 'index.scss',
+  styleUrl: 'form-toggle.scss',
   shadow: true,
 })
 export class FormToggle {

packages/web-component-library-stencil/src/components/heading-1/index.stencil.tsx → packages/web-component-library-stencil/src/components/heading-1.tsx

@@ -2,7 +2,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-heading-1',
-  styleUrl: 'index.scss',
+  styleUrl: 'heading-1.scss',
   shadow: true,
 })
 export class Heading1 {

packages/web-component-library-stencil/src/components/heading-2/index.stencil.tsx → packages/web-component-library-stencil/src/components/heading-2.tsx

@@ -2,7 +2,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-heading-2',
-  styleUrl: 'index.scss',
+  styleUrl: 'heading-2.scss',
   shadow: true,
 })
 export class Heading2 {

packages/web-component-library-stencil/src/components/heading-3/index.stencil.tsx → packages/web-component-library-stencil/src/components/heading-3.tsx

@@ -2,7 +2,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-heading-3',
-  styleUrl: 'index.scss',
+  styleUrl: 'heading-3.scss',
   shadow: true,
 })
 export class Heading3 {

packages/web-component-library-stencil/src/components/heading-4/index.stencil.tsx → packages/web-component-library-stencil/src/components/heading-4.tsx

@@ -2,7 +2,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-heading-4',
-  styleUrl: 'index.scss',
+  styleUrl: 'heading-4.scss',
   shadow: true,
 })
 export class Heading4 {

packages/web-component-library-stencil/src/components/heading-5/index.stencil.tsx → packages/web-component-library-stencil/src/components/heading-5.tsx

@@ -2,7 +2,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-heading-5',
-  styleUrl: 'index.scss',
+  styleUrl: 'heading-5.scss',
   shadow: true,
 })
 export class Heading5 {

packages/web-component-library-stencil/src/components/heading-6/index.stencil.tsx → packages/web-component-library-stencil/src/components/heading-6.tsx

@@ -2,7 +2,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-heading-6',
-  styleUrl: 'index.scss',
+  styleUrl: 'heading-6.scss',
   shadow: true,
 })
 export class Heading6 {

packages/web-component-library-stencil/src/components/heading/index.stencil.tsx → packages/web-component-library-stencil/src/components/heading.tsx

@@ -2,7 +2,7 @@ import { Component, h, Prop } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-heading',
-  styleUrl: 'index.scss',
+  styleUrl: 'heading.scss',
   shadow: true,
 })
 export class Heading {

packages/web-component-library-stencil/src/components/html-content/index.stencil.tsx → packages/web-component-library-stencil/src/components/html-content.tsx

@@ -6,7 +6,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-html-content',
-  styleUrl: 'index.scss',
+  styleUrl: 'html-content.scss',
   shadow: false,
 })
 export class HTMLContent {

packages/web-component-library-stencil/src/components/icon/index.spec.tsx → packages/web-component-library-stencil/src/components/icon.spec.tsx

@@ -1,5 +1,5 @@
 /* eslint-env jest */
-import { Icon } from './index.stencil';
+import { Icon } from './icon';
 
 describe('Icon', () => {
   it('builds', () => {

packages/web-component-library-stencil/src/components/icon/index.stencil.tsx → packages/web-component-library-stencil/src/components/icon.tsx

@@ -2,7 +2,7 @@ import { Component, h, Host } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-icon',
-  styleUrl: './index.scss',
+  styleUrl: './icon.scss',
   shadow: true,
 })
 export class Icon {

packages/web-component-library-stencil/src/components/logo-button/index.stencil.tsx → packages/web-component-library-stencil/src/components/logo-button.tsx

@@ -8,7 +8,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-logo-button',
-  styleUrl: 'index.scss',
+  styleUrl: 'logo-button.scss',
   shadow: true,
 })
 export class DigidButton {

packages/web-component-library-stencil/src/components/logo/index.stencil.tsx → packages/web-component-library-stencil/src/components/logo.tsx

@@ -7,7 +7,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-logo',
-  styleUrl: 'index.scss',
+  styleUrl: 'logo.scss',
   shadow: true,
 })
 export class Logo {

packages/web-component-library-stencil/src/components/map-marker/index.stencil.tsx → packages/web-component-library-stencil/src/components/map-marker.tsx

@@ -2,7 +2,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-map-marker',
-  styleUrl: './index.scss',
+  styleUrl: './map-marker.scss',
   shadow: true,
 })
 export class MapMarker {

packages/web-component-library-stencil/src/components/page-content/index.stencil.tsx → packages/web-component-library-stencil/src/components/page-content.tsx

@@ -7,7 +7,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-page-content',
-  styleUrl: 'index.scss',
+  styleUrl: 'page-content.scss',
   shadow: true,
 })
 export class Page {

packages/web-component-library-stencil/src/components/page-footer/index.stencil.tsx → packages/web-component-library-stencil/src/components/page-footer.tsx

@@ -7,7 +7,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-page-footer',
-  styleUrl: 'index.scss',
+  styleUrl: 'page-footer.scss',
   shadow: true,
 })
 export class PageFooter {

packages/web-component-library-stencil/src/components/page-header/stencil.tsx → packages/web-component-library-stencil/src/components/page-header.tsx

@@ -7,7 +7,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-page-header',
-  styleUrl: 'index.scss',
+  styleUrl: 'page-header.scss',
   shadow: true,
 })
 export class PageHeader {

packages/web-component-library-stencil/src/components/page/index.stencil.tsx → packages/web-component-library-stencil/src/components/page.tsx

@@ -7,7 +7,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-page',
-  styleUrl: 'index.scss',
+  styleUrl: 'page.scss',
   shadow: true,
 })
 export class Page {

packages/web-component-library-stencil/src/components/pagination/index.stencil.tsx → packages/web-component-library-stencil/src/components/pagination.tsx

@@ -8,7 +8,7 @@ import clsx from 'clsx';
 
 @Component({
   tag: 'utrecht-pagination',
-  styleUrl: 'index.scss',
+  styleUrl: 'pagination.scss',
   shadow: true,
 })
 export class Pagination {

packages/web-component-library-stencil/src/components/paragraph/index.stencil.tsx → packages/web-component-library-stencil/src/components/paragraph.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 
 @Component({
   tag: 'utrecht-paragraph',
-  styleUrl: 'index.scss',
+  styleUrl: 'paragraph.scss',
   shadow: true,
 })
 export class Paragraph {

packages/web-component-library-stencil/src/components/separator/index.stencil.tsx → packages/web-component-library-stencil/src/components/separator.tsx

@@ -2,7 +2,7 @@ import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'utrecht-separator',
-  styleUrl: 'index.scss',
+  styleUrl: 'separator.scss',
   shadow: true,
 })
 export class Separator {

packages/web-component-library-stencil/src/components/navigatie sidenav/index.stencil.tsx → packages/web-component-library-stencil/src/components/sidenav.tsx

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 
 @Component({
   tag: 'utrecht-sidenav',
-  styleUrl: 'index.scss',
+  styleUrl: 'sidenav.scss',
   shadow: true,
 })
 export class Sidenav {

packages/web-component-library-stencil/src/components/textbox/index.stencil.tsx → packages/web-component-library-stencil/src/components/textbox.tsx

@@ -8,7 +8,7 @@ import clsx from 'clsx';
 
 @Component({
   tag: 'utrecht-textbox',
-  styleUrl: 'index.scss',
+  styleUrl: 'textbox.scss',
   shadow: true,
 })
 export class Textbox {