Initial commit: scaffold stack.gallery catalog frontend

ts_web/elements/sg-protocol-badge.ts

@@ -0,0 +1,74 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  property,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import type { TSgProtocol } from '../interfaces.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sg-protocol-badge': SgProtocolBadge;
+  }
+}
+
+const protocolColors: Record<string, string> = {
+  npm: '#cb3837',
+  oci: '#2496ed',
+  maven: '#c71a36',
+  cargo: '#dea584',
+  composer: '#885630',
+  pypi: '#3775a9',
+  rubygems: '#e9573f',
+};
+
+@customElement('sg-protocol-badge')
+export class SgProtocolBadge extends DeesElement {
+  public static demo = () => html`
+    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+      <sg-protocol-badge .protocol=${'npm'}></sg-protocol-badge>
+      <sg-protocol-badge .protocol=${'oci'}></sg-protocol-badge>
+      <sg-protocol-badge .protocol=${'maven'}></sg-protocol-badge>
+      <sg-protocol-badge .protocol=${'cargo'}></sg-protocol-badge>
+      <sg-protocol-badge .protocol=${'pypi'}></sg-protocol-badge>
+      <sg-protocol-badge .protocol=${'composer'}></sg-protocol-badge>
+      <sg-protocol-badge .protocol=${'rubygems'}></sg-protocol-badge>
+    </div>
+  `;
+  public static demoGroups = ['Shared'];
+
+  @property({ type: String })
+  accessor protocol: TSgProtocol = 'npm';
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: inline-block;
+      }
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        font-size: 11px;
+        font-weight: 600;
+        font-family: 'JetBrains Mono', monospace;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: #fff;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const color = protocolColors[this.protocol] || '#666';
+    return html`
+      <span class="badge" style="background: ${color}">
+        ${this.protocol}
+      </span>
+    `;
+  }
+}