refactor: migrate sbb-signet

src/components/sbb-signet/sbb-signet.stories.tsx

@@ -1,8 +1,9 @@
 /** @jsx h */
 import { h, JSX } from 'jsx-dom';
 import readme from './readme.md';
-import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/html';
+import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import type { InputType } from '@storybook/types';
+import './sbb-signet';
 
 const Template = (args): JSX.Element => <sbb-signet {...args} />;
 

src/components/sbb-signet/sbb-signet.tsx

@@ -1,33 +1,39 @@
-import { Component, h, JSX, Prop } from '@stencil/core';
-
 import { InterfaceSignetAttributes } from './sbb-signet.custom';
+import { CSSResult, html, LitElement, nothing, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import Style from './sbb-signet.scss?lit&inline';
+
+@customElement('sbb-signet')
+export class SbbSignet extends LitElement {
+  public static override styles: CSSResult = Style;
 
-@Component({
-  shadow: true,
-  styleUrl: 'sbb-signet.scss',
-  tag: 'sbb-signet',
-})
-export class SbbSignet {
   /** Visual protective room around signet. */
-  @Prop({ reflect: true }) public protectiveRoom?: InterfaceSignetAttributes['protectiveRoom'] =
-    'ideal';
+  @property({ attribute: 'protective-room', reflect: true })
+  public protectiveRoom?: InterfaceSignetAttributes['protectiveRoom'] = 'ideal';
 
   /** Accessibility label which will be forwarded to the inner SVG signet. */
-  @Prop() public accessibilityLabel = 'Logo';
+  @property({ attribute: 'accessibility-label' }) public accessibilityLabel = 'Logo';
 
-  public render(): JSX.Element {
-    return (
+  protected override render(): TemplateResult {
+    return html`
       <span class="sbb-signet">
         <span class="sbb-signet__svg-container">
           <svg focusable="false" viewBox="0 0 80 40" xmlns="http://www.w3.org/2000/svg">
-            {this.accessibilityLabel && <title>{this.accessibilityLabel}</title>}
+            ${this.accessibilityLabel ? html`<title>${this.accessibilityLabel}</title>` : nothing}
             <path
               id="sbb-signet__icon"
               d="M20.0265 40H31.6821L16 24.6154H35.3907V40H44.6093V24.6154H64.106L48.4238 40H60.0795L80 20.0531L60.0795 0H48.4238L64.106 15.3846H44.6093V0H35.3907V15.3846H16L31.6821 0H20.0265L0 20.0531L20.0265 40Z"
             />
           </svg>
         </span>
       </span>
-    );
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'sbb-signet': SbbSignet;
   }
 }