@social.io/catalog

The social.io v7 design system and web component library: Apple-native Lit components for the unified-inbox product family — feed rows, channel navigation, command palette, media primitives, and the embeddable chat-widget suite. Built on @design.estate/dees-element (Lit 3, standard TC39 decorators) with a CSS-custom-property token system and full light/dark theming.

Issue Reporting and Security

For reporting bugs, issues, or security vulnerabilities, please visit community.foss.global/. This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a code.foss.global/ account to submit Pull Requests directly.

Install

pnpm add @social.io/catalog

Design System

Every component draws exclusively from the token layer in tokens.ts:

• Semantic surfaces — --sio-bg, --sio-surface, --sio-surface-2, four label levels, and 0.5px hairline separators, switching between iOS-style light (#F2F2F7/#FFFFFF) and true-black dark (#000/#1C1C1E).
• Tint — --sio-tint #0A84FF, deliberately brightened to #409CFF in dark mode, with hover and soft (translucent) variants.
• Channel palette — mail #0A84FF, chats #30D158, calls #FF9F0A, letters #A2845E; lane palette (feed/paper/people) and triage-bucket palette (now/today/later/done) alongside.
• Density — --sio-row-comfortable 78px, --sio-row-cozy 62px, --sio-row-compact 48px.
• Glass recipes — sioGlass, sioToolbarGlass, sioPillGlass (backdrop blur + saturate) as reusable CSS fragments.
• SF type ramp — sioTypeLargeTitle (34/700) through sioTypeCaption2 (11/400), tabular numerals for counts and times.

Theming follows the ambient theme via cssManager.bdTheme() pairs, with explicit :host([theme='dark']) / :host([dark]) attribute overrides.

import { css } from '@design.estate/dees-element';
import { sioElementStyles } from '@social.io/catalog';

// in your own component:
public static styles = [
  ...sioElementStyles,
  css`
    .bar { background: var(--sio-surface); color: var(--sio-tint); }
  `,
];

Components

Components auto-register as custom elements on import.

Foundation

| Element | Purpose | | --- | --- | | sio-icon | Lucide icon renderer (icon, size, color, strokeWidth) | | sio-button | Primary / secondary / destructive / outline / ghost variants, sm–lg sizes, status spinner | | sio-avatar / sio-avatar-stack | Initials-on-tint circles with presence dot, channel badge, overlapping stacks | | sio-chip | Channel / lane / status chips (uppercase 11px on soft color-mix background) | | sio-unread-badge | Count pills in channel colors, rail-sized variant | | sio-kbd | Keyboard-shortcut hint chip (mono, hairline border) |

Chrome and navigation

| Element | Purpose | | --- | --- | | sio-glass-toolbar | 44px glass bar with start/center/end slots | | sio-segmented | iOS-style segmented control with counts | | sio-tab-bar | Mobile bottom glass bar, channel tabs + optional calendar | | sio-channel-rail | 64px desktop rail with per-channel unread badges | | sio-dropdown-menu | Slot-triggered menu with destructive/disabled items |

Lists and feed

| Element | Purpose | | --- | --- | | sio-list-row | Universal row: three densities, unread-dot gutter, selection tint, hover action slot | | sio-inset-list | iOS grouped card list with inset hairlines and section headers | | sio-bucket-header | Triage-bucket header (colored dot + uppercase label + count) |

Content and input

| Element | Purpose | | --- | --- | | sio-ai-card | AI summary/translation surface (soft tint, uppercase eyebrow, bullets) | | sio-composer | Pill input + circular send button, attach slot, email-capture variant | | sio-cmdk | Command palette: search, grouped results, keyboard navigation, kbd chords | | sio-waveform | Voicemail player bar chart with progress coloring and counters | | sio-step-timeline | Vertical tracking timeline (done/pending steps) | | sio-paper-thumb | Physical-letter thumbnail (torn-edge inbound / stamped outbound) |

Embeddable chat-widget suite

| Element | Purpose | | --- | --- | | sio-fab | 56px tinted launcher with unread badge and open/close crossfade | | sio-combox | The widget shell (380×620, singleton createOnBody()), welcome → conversation → away states, "Powered by social.io" footer | | sio-conversation-selector | Gradient-header welcome pane: team avatar stack, recent conversation, CTA, FAQ list | | sio-conversation-view | Message thread: glass header with presence, bubbles, typing indicator, away→email notice | | sio-message-input | Composer wrapper with attachments and email-capture mode | | sio-image-lightbox / sio-pdf-viewer | Attachment viewers (zoom/pan images, paginated PDFs) |

<!-- Drop-in chat widget -->
<sio-fab></sio-fab>

import { SioCombox } from '@social.io/catalog';

const combox = SioCombox.createOnBody();
combox.open();

Development

pnpm install
pnpm watch    # wcctools component dashboard on http://localhost:3002
pnpm test     # Chromium component tests via @git.zone/tstest
pnpm build    # tsbuild + tsbundle

Every component ships a static demo rendered in the wcctools dashboard, grouped into Primitives, Chat Widget, and Pages sections, with light/dark and viewport switching.

License and Legal Information

This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the license.md file.

Please note: The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.

Trademarks

This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH or third parties, and are not included within the scope of the MIT license granted herein.

Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines or the guidelines of the respective third-party owners, and any usage must be approved in writing. Third-party trademarks used herein are the property of their respective owners and used only in a descriptive manner, e.g. for an implementation of an API or similar.

Company Information

Task Venture Capital GmbH Registered at District Court Bremen HRB 35230 HB, Germany

For any legal inquiries or further information, please contact us via email at [email protected].

By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.