Introduce Label

packages/thorin-core/src/index.ts

@@ -1,5 +1,6 @@
 export { ThorinAvatar } from './avatar';
 export { ThorinButton } from './button';
+export { ThorinLabel } from './label';
 export { ThorinModal } from './modal';
 export { ThorinTag } from './tag';
 

packages/thorin-core/src/label/index.ts

@@ -0,0 +1,60 @@
+/* eslint-disable unicorn/template-indent */
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+type LabelVariant = 'default' | 'active' | 'helper';
+
+@customElement('thorin-label')
+export class ThorinLabel extends LitElement {
+    static styles = css`
+        .label.default {
+            --color: var(--thorin-text-secondary);
+            --border: 1px solid var(--thorin-border);
+        }
+        .label.active {
+            --bg: var(--thorin-blue-surface);
+            --color: var(--thorin-blue-primary);
+            --border: 1px solid var(--thorin-blue-surface);
+        }
+        .label.helper {
+            --color: var(--thorin-indigo-primary);
+            --border: 1px solid var(--thorin-border);
+            text-decoration: underline;
+        }
+        .label {
+            background: var(--bg);
+            color: var(--color);
+            display: inline-flex;
+            justify-content: center;
+            gap: 4px;
+            overflow: hidden;
+            appearance: none;
+            border: var(--border);
+            outline: none;
+            border-radius: var(--thorin-radius-label);
+            padding: 4px 8px;
+            font-weight: bold;
+        }
+    `;
+
+    @property({ type: String })
+    variant: LabelVariant = 'default';
+
+    render() {
+        return html`
+            <span class="${this.computeClass}">
+                <slot></slot>
+            </span>
+        `;
+    }
+
+    private get computeClass() {
+        return ['label', this.variant].join(' ').trim() || undefined;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'thorin-label': ThorinLabel;
+    }
+}

packages/thorin-core/src/style.css

@@ -136,6 +136,7 @@ p {
     --thorin-radius-button: 8px;
     --thorin-radius-card: 16px;
     --thorin-radius-tag: 14px;
+    --thorin-radius-label: 4px;
 }
 
 @media (prefers-color-scheme: dark) {

packages/thorin-core/src/tag/index.ts

@@ -66,12 +66,6 @@ export class ThorinTag extends LitElement {
     private get computeClass() {
         return ['tag', this.variant].join(' ').trim() || undefined;
     }
-
-    private _onClick(event: PointerEvent) {
-        if (this.onclick) {
-            this.onclick(event);
-        }
-    }
 }
 
 declare global {

web/index.html

@@ -44,6 +44,11 @@ <h1>thorin.design</h1>
                 <thorin-tag variant="yellow">Tag</thorin-tag>
                 <thorin-tag variant="grey">Tag</thorin-tag>
             </div>
+            <div class="card">
+                <thorin-label>Label</thorin-label>
+                <thorin-label variant="active">Label</thorin-label>
+                <thorin-label variant="helper">Label</thorin-label>
+            </div>
             <div class="card">
                 <thorin-button onclick="opentestmodal()">Open Modal</thorin-button>
             </div>