@social.io/catalog

The social.io v8 design system and web component library: Apple-native Lit components for the unified-inbox product family — the faceted social.io brand mark, 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

Product UI components draw from the token layer in tokens.ts; sio-logo preserves the canonical v8 facet palette as brand artwork:

• 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.

import '@social.io/catalog';

<sio-logo size="30" theme="auto" no-entrance></sio-logo>

Foundation

Element	Purpose
sio-logo	Faceted social.io S mark with tight/square layouts, palette modes, and reduced-motion-aware animations
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)

sio-logo

Property	Default	Purpose
size	40	Mark height in CSS pixels; tight-crop width follows the brand aspect ratio
background	transparent	Canvas background color
gap	2	Inset between facets in the 500px design grid
radius	16	Facet corner radius in the 500px design grid
square	false	Render on a square tile instead of the tight S crop
mono	empty	Use one color while retaining facet depth
theme	auto	Select auto, light, or dark backdrop palette behavior
loading	false	Run the looping loading treatment
no-entrance	false	Disable the entrance animation
no-hover	false	Disable the pointer wave animation

The public play(), wave(), and dismiss() methods trigger the entrance, wave, and exit treatments. All motion respects prefers-reduced-motion.

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 the built-in v8 brand mark and per-channel unread badges
sio-dropdown-menu	Slot-triggered menu with destructive/disabled items

sio-tab-bar uses max(30px, var(--sio-safe-area-bottom, env(safe-area-inset-bottom, 0px))) for its bottom padding. Set --sio-safe-area-bottom when a screenshot or native shell supplies a known system-reserved area.

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 repository license 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 hello@task.vc.

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.