refactor: restructure entry points (#2575)

BREAKING CHANGE: The entry points for the `@sbb-esta/lyne-components` have changed from extension-less to including the extension (e.g. `@sbb-esta/lyne-components/button` to `@sbb-esta/lyne-components/button.js`).

CODING_STANDARDS.md

@@ -101,7 +101,7 @@ components which require basic button or link functionality have to extend the c
 and they need to implement the `renderTemplate` method, which should return the component's inner content.
 
 ```ts
-import { SbbButtonBaseElement } from '../../core/base-elements';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
 import { html } from 'lit';
 
 @customElement('my-custom-button')
@@ -133,7 +133,8 @@ As the language can be changed dynamically, you have to listen to the `sbbLangua
 event and re-render the view. This can be done by marking the field with `@state` and using the language change handler (see code below).
 
 ```ts
-import { SbbLanguageController } from '../core/controllers';
+import { SbbLanguageController } from '../core/controllers.js';
+
 export class Component extends LitElement {
   private _language = new SbbLanguageController(this);
 

scripts/migrate-index.ts

@@ -0,0 +1,17 @@
+import { readFileSync, unlinkSync, writeFileSync } from 'fs';
+import { basename, dirname } from 'path';
+
+import * as glob from 'glob';
+
+const indexFiles = glob.sync('**/index.ts', {
+  cwd: dirname(import.meta.resolve('../src/components')),
+  absolute: true,
+});
+for (const indexFile of indexFiles) {
+  const content = readFileSync(indexFile, 'utf8').replaceAll(
+    /from '.([^']+)/g,
+    (_, m) => `from './${basename(dirname(indexFile))}${m.replace(/\/index.js$/, '.js')}`,
+  );
+  unlinkSync(indexFile);
+  writeFileSync(indexFile.replace(/\/index.ts$/, '.ts'), content, 'utf8');
+}

src/components/accordion.ts

@@ -0,0 +1 @@
+export * from './accordion/accordion.js';

src/components/accordion/accordion.e2e.ts

@@ -2,12 +2,12 @@ import { assert, expect } from '@open-wc/testing';
 import { nothing } from 'lit';
 import { html } from 'lit/static-html.js';
 
-import { waitForCondition, waitForLitRender, EventSpy, isSsr } from '../core/testing/index.js';
-import { fixture } from '../core/testing/private/index.js';
+import { fixture } from '../core/testing/private.js';
+import { waitForCondition, waitForLitRender, EventSpy, isSsr } from '../core/testing.js';
 import {
   SbbExpansionPanelElement,
   type SbbExpansionPanelHeaderElement,
-} from '../expansion-panel/index.js';
+} from '../expansion-panel.js';
 
 import { SbbAccordionElement } from './accordion.js';
 
@@ -33,7 +33,7 @@ describe(`sbb-accordion ${fixture.name}`, () => {
           </sbb-expansion-panel>
         </sbb-accordion>
       `,
-      { modules: ['./accordion.ts', '../expansion-panel/index.ts'] },
+      { modules: ['./accordion.ts', '../expansion-panel.ts'] },
     );
   });
 

src/components/accordion/accordion.spec.ts

@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private/index.js';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
 import type { SbbAccordionElement } from './accordion.js';
 import './accordion.js';
-import '../expansion-panel/index.js';
+import '../expansion-panel.js';
 
 describe(`sbb-accordion`, () => {
   let element: SbbAccordionElement;

src/components/accordion/accordion.stories.ts

@@ -14,7 +14,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../storybook/helpers/spread.js';
-import { SbbExpansionPanelElement } from '../expansion-panel/index.js';
+import { SbbExpansionPanelElement } from '../expansion-panel.js';
 
 import readme from './readme.md?raw';
 import './accordion.js';

src/components/accordion/accordion.ts

@@ -2,10 +2,10 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { SbbConnectedAbortController } from '../core/controllers/index.js';
-import { SbbHydrationMixin } from '../core/mixins/index.js';
-import { SbbExpansionPanelElement } from '../expansion-panel/index.js';
-import type { SbbTitleLevel } from '../title/index.js';
+import { SbbConnectedAbortController } from '../core/controllers.js';
+import { SbbHydrationMixin } from '../core/mixins.js';
+import { SbbExpansionPanelElement } from '../expansion-panel.js';
+import type { SbbTitleLevel } from '../title.js';
 
 import style from './accordion.scss?lit&inline';
 

src/components/action-group.ts

@@ -0,0 +1 @@
+export * from './action-group/action-group.js';

src/components/action-group/action-group.e2e.ts

@@ -1,15 +1,15 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import type { SbbSecondaryButtonElement } from '../button/index.js';
-import { waitForLitRender } from '../core/testing/index.js';
-import { fixture } from '../core/testing/private/index.js';
-import type { SbbBlockLinkElement } from '../link/index.js';
+import type { SbbSecondaryButtonElement } from '../button.js';
+import { fixture } from '../core/testing/private.js';
+import { waitForLitRender } from '../core/testing.js';
+import type { SbbBlockLinkElement } from '../link.js';
 
 import { SbbActionGroupElement } from './action-group.js';
 
-import '../button/secondary-button/index.js';
-import '../link/block-link/index.js';
+import '../button/secondary-button.js';
+import '../link/block-link.js';
 
 describe(`sbb-action-group with ${fixture.name}`, () => {
   let element: SbbActionGroupElement;
@@ -28,7 +28,7 @@ describe(`sbb-action-group with ${fixture.name}`, () => {
           </sbb-block-link>
         </sbb-action-group>
       `,
-      { modules: ['./action-group.ts', '../button/index.ts', '../link/index.ts'] },
+      { modules: ['./action-group.ts', '../button.ts', '../link.ts'] },
     );
   });
 

src/components/action-group/action-group.spec.ts

@@ -1,13 +1,13 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import type { SbbSecondaryButtonElement } from '../button/index.js';
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private/index.js';
+import type { SbbSecondaryButtonElement } from '../button.js';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
 
 import type { SbbActionGroupElement } from './action-group.js';
 import './action-group.js';
-import '../button/secondary-button/index.js';
-import '../link/block-link/index.js';
+import '../button/secondary-button.js';
+import '../link/block-link.js';
 
 describe(`sbb-action-group`, () => {
   describe('renders', () => {

src/components/action-group/action-group.stories.ts

@@ -9,8 +9,8 @@ import { sbbSpread } from '../../storybook/helpers/spread.js';
 
 import readme from './readme.md?raw';
 import './action-group.js';
-import '../button/index.js';
-import '../link/block-link/index.js';
+import '../button.js';
+import '../link/block-link.js';
 
 const secondaryButtonTemplate = (alignSelf?: string): TemplateResult => html`
   <sbb-secondary-button align-self=${alignSelf || nothing}> Button 1 </sbb-secondary-button>

src/components/action-group/action-group.ts

@@ -2,14 +2,14 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import type { SbbButtonCommonElement, SbbButtonSize } from '../button/index.js';
-import type { SbbHorizontalFrom, SbbOrientation } from '../core/interfaces/index.js';
+import type { SbbButtonCommonElement, SbbButtonSize } from '../button.js';
+import type { SbbHorizontalFrom, SbbOrientation } from '../core/interfaces.js';
 import type {
   SbbBlockLinkButtonElement,
   SbbBlockLinkElement,
   SbbBlockLinkStaticElement,
   SbbLinkSize,
-} from '../link/index.js';
+} from '../link.js';
 
 import style from './action-group.scss?lit&inline';
 

src/components/alert.ts

@@ -0,0 +1,2 @@
+export * from './alert/alert.js';
+export * from './alert/alert-group.js';

src/components/alert/alert-group.ts

@@ -0,0 +1 @@
+export * from './alert-group/alert-group.js';

src/components/alert/alert-group/alert-group.e2e.ts

@@ -1,14 +1,14 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import type { SbbTransparentButtonElement } from '../../button/index.js';
-import { waitForCondition, EventSpy, waitForLitRender } from '../../core/testing/index.js';
-import { fixture } from '../../core/testing/private/index.js';
-import type { SbbAlertElement } from '../alert/index.js';
+import type { SbbTransparentButtonElement } from '../../button.js';
+import { fixture } from '../../core/testing/private.js';
+import { waitForCondition, EventSpy, waitForLitRender } from '../../core/testing.js';
+import type { SbbAlertElement } from '../alert.js';
 
 import { SbbAlertGroupElement } from './alert-group.js';
 
-import '../alert/index.js';
+import '../alert.js';
 
 describe(`sbb-alert-group with ${fixture.name}`, () => {
   let element: SbbAlertGroupElement;
@@ -30,7 +30,7 @@ describe(`sbb-alert-group with ${fixture.name}`, () => {
           <sbb-alert title-content="Interruption" href="www.sbb.ch">Second</sbb-alert>
         </sbb-alert-group>
       `,
-      { modules: ['./alert-group.ts', '../alert/index.ts'] },
+      { modules: ['./alert-group.ts', '../alert.ts'] },
     );
     const didDismissAlertSpy = new EventSpy(SbbAlertGroupElement.events.didDismissAlert);
     const emptySpy = new EventSpy(SbbAlertGroupElement.events.empty);

src/components/alert/alert-group/alert-group.spec.ts

@@ -1,11 +1,11 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private/index.js';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
 import type { SbbAlertGroupElement } from './alert-group.js';
 import './alert-group.js';
-import '../alert/index.js';
+import '../alert.js';
 
 describe(`sbb-alert-group`, () => {
   describe('should render', () => {

src/components/alert/alert-group/alert-group.stories.ts

@@ -10,7 +10,7 @@ import { sbbSpread } from '../../../storybook/helpers/spread.js';
 import { SbbAlertGroupElement } from './alert-group.js';
 import readme from './readme.md?raw';
 
-import '../alert/index.js';
+import '../alert.js';
 
 const Template = (args: Args): TemplateResult => html`
   <sbb-alert-group ${sbbSpread(args)}>

src/components/alert/alert-group/alert-group.ts

@@ -3,10 +3,10 @@ import { LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import { SbbConnectedAbortController } from '../../core/controllers/index.js';
-import { EventEmitter } from '../../core/eventing/index.js';
-import type { SbbTitleLevel } from '../../title/index.js';
-import { SbbAlertElement } from '../alert/index.js';
+import { SbbConnectedAbortController } from '../../core/controllers.js';
+import { EventEmitter } from '../../core/eventing.js';
+import type { SbbTitleLevel } from '../../title.js';
+import { SbbAlertElement } from '../alert.js';
 
 import style from './alert-group.scss?lit&inline';
 

src/components/alert/alert.ts

@@ -0,0 +1 @@
+export * from './alert/alert.js';

src/components/alert/alert/alert.e2e.ts

@@ -1,8 +1,8 @@
 import { assert, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { waitForCondition, EventSpy } from '../../core/testing/index.js';
-import { fixture } from '../../core/testing/private/index.js';
+import { fixture } from '../../core/testing/private.js';
+import { waitForCondition, EventSpy } from '../../core/testing.js';
 
 import { SbbAlertElement } from './alert.js';
 

src/components/alert/alert/alert.spec.ts

@@ -1,7 +1,7 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private/index.js';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
 
 import type { SbbAlertElement } from './alert.js';
 

src/components/alert/alert/alert.ts

@@ -1,20 +1,20 @@
 import { type CSSResultGroup, html, LitElement, nothing, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import type { LinkTargetType } from '../../core/base-elements/index.js';
-import { SbbLanguageController } from '../../core/controllers/index.js';
-import { EventEmitter } from '../../core/eventing/index.js';
-import { i18nCloseAlert, i18nFindOutMore } from '../../core/i18n/index.js';
-import type { SbbOpenedClosedState } from '../../core/interfaces/index.js';
-import { SbbIconNameMixin } from '../../icon/index.js';
-import type { SbbTitleLevel } from '../../title/index.js';
+import type { LinkTargetType } from '../../core/base-elements.js';
+import { SbbLanguageController } from '../../core/controllers.js';
+import { EventEmitter } from '../../core/eventing.js';
+import { i18nCloseAlert, i18nFindOutMore } from '../../core/i18n.js';
+import type { SbbOpenedClosedState } from '../../core/interfaces.js';
+import { SbbIconNameMixin } from '../../icon.js';
+import type { SbbTitleLevel } from '../../title.js';
 
 import style from './alert.scss?lit&inline';
 
-import '../../button/transparent-button/index.js';
-import '../../divider/index.js';
-import '../../link/index.js';
-import '../../title/index.js';
+import '../../button/transparent-button.js';
+import '../../divider.js';
+import '../../link.js';
+import '../../title.js';
 
 type SbbAlertState = Exclude<SbbOpenedClosedState, 'closing'>;
 

src/components/autocomplete.ts

@@ -0,0 +1 @@
+export * from './autocomplete/autocomplete.js';

src/components/autocomplete/autocomplete.e2e.ts

@@ -2,10 +2,10 @@ import { assert, expect } from '@open-wc/testing';
 import { sendKeys, sendMouse } from '@web/test-runner-commands';
 import { html } from 'lit/static-html.js';
 
-import { waitForCondition, waitForLitRender, EventSpy } from '../core/testing/index.js';
-import { fixture } from '../core/testing/private/index.js';
-import { SbbFormFieldElement } from '../form-field/index.js';
-import { SbbOptionElement } from '../option/index.js';
+import { fixture } from '../core/testing/private.js';
+import { waitForCondition, waitForLitRender, EventSpy } from '../core/testing.js';
+import { SbbFormFieldElement } from '../form-field.js';
+import { SbbOptionElement } from '../option.js';
 
 import { SbbAutocompleteElement } from './autocomplete.js';
 
@@ -25,7 +25,7 @@ describe(`sbb-autocomplete with ${fixture.name}`, () => {
         </sbb-form-field>
         <button>Use this for backdrop click</button>
       `,
-      { modules: ['../form-field/index.ts', './autocomplete.ts', '../option/index.ts'] },
+      { modules: ['../form-field.ts', './autocomplete.ts', '../option.ts'] },
     );
     input = formField.querySelector<HTMLInputElement>('input')!;
     element = formField.querySelector<SbbAutocompleteElement>('sbb-autocomplete')!;

src/components/autocomplete/autocomplete.spec.ts

@@ -1,14 +1,14 @@
 import { expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { isSafari } from '../core/dom/index.js';
-import { describeIf } from '../core/testing/index.js';
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private/index.js';
-import type { SbbFormFieldElement } from '../form-field/index.js';
+import { isSafari } from '../core/dom.js';
+import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
+import { describeIf } from '../core/testing.js';
+import type { SbbFormFieldElement } from '../form-field.js';
 
 import type { SbbAutocompleteElement } from './autocomplete.js';
-import '../form-field/index.js';
-import '../option/index.js';
+import '../form-field.js';
+import '../option.js';
 import './autocomplete.js';
 
 describe(`sbb-autocomplete`, () => {

src/components/autocomplete/autocomplete.stories.ts

@@ -16,14 +16,14 @@ import { styleMap } from 'lit/directives/style-map.js';
 
 import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready.js';
 import { waitForStablePosition } from '../../storybook/testing/wait-for-stable-position.js';
-import type { SbbFormErrorElement } from '../form-error/index.js';
-import { SbbOptionElement } from '../option/index.js';
+import type { SbbFormErrorElement } from '../form-error.js';
+import { SbbOptionElement } from '../option.js';
 
 import { SbbAutocompleteElement } from './autocomplete.js';
 import readme from './readme.md?raw';
 
-import '../form-field/index.js';
-import '../form-error/index.js';
+import '../form-field.js';
+import '../form-error.js';
 
 const wrapperStyle = (context: StoryContext): Record<string, string> => ({
   'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',