@social.io/catalog 1.3.0 → 2.0.0

package/dist_ts_web/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@social.io/catalog',
-    version: '1.3.0',
-    description: 'catalog for social.io'
+    version: '2.0.0',
+    description: 'v7 Apple-native design system and web components for social.io'
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsb0JBQW9CO0lBQzFCLE9BQU8sRUFBRSxPQUFPO0lBQ2hCLFdBQVcsRUFBRSx1QkFBdUI7Q0FDckMsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsb0JBQW9CO0lBQzFCLE9BQU8sRUFBRSxPQUFPO0lBQ2hCLFdBQVcsRUFBRSxnRUFBZ0U7Q0FDOUUsQ0FBQSJ9

package/dist_ts_web/elements/index.d.ts

@@ -1,11 +1,28 @@
+export * from './tokens.js';
 export * from './sio-icon.js';
 export * from './sio-button.js';
+export * from './sio-kbd.js';
+export * from './sio-chip.js';
+export * from './sio-avatar.js';
+export * from './sio-unread-badge.js';
+export * from './sio-glass-toolbar.js';
+export * from './sio-segmented.js';
+export * from './sio-tab-bar.js';
+export * from './sio-channel-rail.js';
 export * from './sio-dropdown-menu.js';
+export * from './sio-list-row.js';
+export * from './sio-inset-list.js';
+export * from './sio-bucket-header.js';
+export * from './sio-ai-card.js';
+export * from './sio-composer.js';
+export * from './sio-cmdk.js';
+export * from './sio-waveform.js';
+export * from './sio-step-timeline.js';
+export * from './sio-paper-thumb.js';
+export * from './sio-fab.js';
+export * from './sio-combox.js';
 export * from './sio-conversation-selector.js';
 export * from './sio-conversation-view.js';
 export * from './sio-message-input.js';
-export * from './sio-combox.js';
-export * from './sio-fab.js';
-export * from './sio-recorder.js';
 export * from './sio-image-lightbox.js';
 export * from './sio-pdf-viewer.js';

package/dist_ts_web/elements/index.js

@@ -1,15 +1,35 @@
-// Core components
+// design tokens — custom props, glass recipes, SF type ramp
+export * from './tokens.js';
+// foundation
 export * from './sio-icon.js';
 export * from './sio-button.js';
+export * from './sio-kbd.js';
+export * from './sio-chip.js';
+export * from './sio-avatar.js';
+export * from './sio-unread-badge.js';
+// chrome & navigation
+export * from './sio-glass-toolbar.js';
+export * from './sio-segmented.js';
+export * from './sio-tab-bar.js';
+export * from './sio-channel-rail.js';
 export * from './sio-dropdown-menu.js';
-// Conversation components
+// lists & feed
+export * from './sio-list-row.js';
+export * from './sio-inset-list.js';
+export * from './sio-bucket-header.js';
+// content & input
+export * from './sio-ai-card.js';
+export * from './sio-composer.js';
+export * from './sio-cmdk.js';
+export * from './sio-waveform.js';
+export * from './sio-step-timeline.js';
+export * from './sio-paper-thumb.js';
+// embeddable chat-widget suite
+export * from './sio-fab.js';
+export * from './sio-combox.js';
 export * from './sio-conversation-selector.js';
 export * from './sio-conversation-view.js';
 export * from './sio-message-input.js';
-export * from './sio-combox.js';
-// Other components
-export * from './sio-fab.js';
-export * from './sio-recorder.js';
 export * from './sio-image-lightbox.js';
 export * from './sio-pdf-viewer.js';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsa0JBQWtCO0FBQ2xCLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyx3QkFBd0IsQ0FBQztBQUV2QywwQkFBMEI7QUFDMUIsY0FBYyxnQ0FBZ0MsQ0FBQztBQUMvQyxjQUFjLDRCQUE0QixDQUFDO0FBQzNDLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyxpQkFBaUIsQ0FBQztBQUVoQyxtQkFBbUI7QUFDbkIsY0FBYyxjQUFjLENBQUM7QUFDN0IsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMscUJBQXFCLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsNERBQTREO0FBQzVELGNBQWMsYUFBYSxDQUFDO0FBRTVCLGFBQWE7QUFDYixjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsY0FBYyxDQUFDO0FBQzdCLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyx1QkFBdUIsQ0FBQztBQUV0QyxzQkFBc0I7QUFDdEIsY0FBYyx3QkFBd0IsQ0FBQztBQUN2QyxjQUFjLG9CQUFvQixDQUFDO0FBQ25DLGNBQWMsa0JBQWtCLENBQUM7QUFDakMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLHdCQUF3QixDQUFDO0FBRXZDLGVBQWU7QUFDZixjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyx3QkFBd0IsQ0FBQztBQUV2QyxrQkFBa0I7QUFDbEIsY0FBYyxrQkFBa0IsQ0FBQztBQUNqQyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyx3QkFBd0IsQ0FBQztBQUN2QyxjQUFjLHNCQUFzQixDQUFDO0FBRXJDLCtCQUErQjtBQUMvQixjQUFjLGNBQWMsQ0FBQztBQUM3QixjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsZ0NBQWdDLENBQUM7QUFDL0MsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyxxQkFBcUIsQ0FBQyJ9

package/dist_ts_web/elements/sio-ai-card.d.ts

@@ -0,0 +1,39 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './sio-icon.js';
+/**
+ * Accent source for the card. Empty string = system tint (default);
+ * a channel name colors the card with the channel palette instead
+ * (bg 8% / border 28% per the unified detail design).
+ */
+export type TSioAiCardChannel = '' | 'mail' | 'chats' | 'calls' | 'letters';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sio-ai-card': SioAiCard;
+    }
+}
+/**
+ * sio-ai-card — the shared AI surface of social.io v7.
+ *
+ * Tint-soft (or channel-color 8%) background, 0.5px hairline border at
+ * color-mix 25–28%, radius 12. Header row: sparkle icon + uppercase
+ * 11/700 tinted eyebrow. Slotted children render as bullet lines,
+ * each prefixed with a tinted dot (disable via `plain` for the
+ * single-paragraph summary style).
+ *
+ * Design sources: SocialIODesktop.jsx (thread AI summary),
+ * SocialIOUnified.jsx (channel-colored summary),
+ * SocialIOChannels.jsx (letters "translated" summary).
+ */
+export declare class SioAiCard extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    /** Eyebrow text, rendered uppercase — e.g. "Summary · 4 messages". */
+    accessor label: string;
+    /** Channel accent; empty = system tint. */
+    accessor channel: TSioAiCardChannel;
+    /** Translated variant — appends "· translated to <language>" to the eyebrow. */
+    accessor translatedTo: string;
+    /** Single-paragraph summary style: no tinted dot in front of slotted lines. */
+    accessor plain: boolean;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+}

package/dist_ts_web/elements/sio-ai-card.js

@@ -0,0 +1,229 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { DeesElement, html, property, customElement, css, } from '@design.estate/dees-element';
+import { sioElementStyles } from './tokens.js';
+import './sio-icon.js';
+/**
+ * sio-ai-card — the shared AI surface of social.io v7.
+ *
+ * Tint-soft (or channel-color 8%) background, 0.5px hairline border at
+ * color-mix 25–28%, radius 12. Header row: sparkle icon + uppercase
+ * 11/700 tinted eyebrow. Slotted children render as bullet lines,
+ * each prefixed with a tinted dot (disable via `plain` for the
+ * single-paragraph summary style).
+ *
+ * Design sources: SocialIODesktop.jsx (thread AI summary),
+ * SocialIOUnified.jsx (channel-colored summary),
+ * SocialIOChannels.jsx (letters "translated" summary).
+ */
+let SioAiCard = (() => {
+    let _classDecorators = [customElement('sio-ai-card')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _channel_decorators;
+    let _channel_initializers = [];
+    let _channel_extraInitializers = [];
+    let _translatedTo_decorators;
+    let _translatedTo_initializers = [];
+    let _translatedTo_extraInitializers = [];
+    let _plain_decorators;
+    let _plain_initializers = [];
+    let _plain_extraInitializers = [];
+    var SioAiCard = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _label_decorators = [property({ type: String })];
+            _channel_decorators = [property({ type: String, reflect: true })];
+            _translatedTo_decorators = [property({ type: String, attribute: 'translated-to' })];
+            _plain_decorators = [property({ type: Boolean, reflect: true })];
+            __esDecorate(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(this, null, _channel_decorators, { kind: "accessor", name: "channel", static: false, private: false, access: { has: obj => "channel" in obj, get: obj => obj.channel, set: (obj, value) => { obj.channel = value; } }, metadata: _metadata }, _channel_initializers, _channel_extraInitializers);
+            __esDecorate(this, null, _translatedTo_decorators, { kind: "accessor", name: "translatedTo", static: false, private: false, access: { has: obj => "translatedTo" in obj, get: obj => obj.translatedTo, set: (obj, value) => { obj.translatedTo = value; } }, metadata: _metadata }, _translatedTo_initializers, _translatedTo_extraInitializers);
+            __esDecorate(this, null, _plain_decorators, { kind: "accessor", name: "plain", static: false, private: false, access: { has: obj => "plain" in obj, get: obj => obj.plain, set: (obj, value) => { obj.plain = value; } }, metadata: _metadata }, _plain_initializers, _plain_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SioAiCard = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `
+    <div
+      style="display: grid; gap: 14px; max-width: 640px; padding: 24px; background: var(--sio-bg); font-family: var(--sio-font-sf);"
+    >
+      <sio-ai-card label="Summary · 4 messages">
+        <div>Lena rewrote the hero and the "three lanes" section based on Tuesday's feedback.</div>
+        <div>Two open questions: (1) keep the Hey-style screener mention, (2) tighten the closing CTA.</div>
+        <div>She's asking for a 15-min sync before Tuesday's ship.</div>
+      </sio-ai-card>
+
+      <sio-ai-card label="Summary" translated-to="English" plain>
+        <div>
+          2024 tax assessment — <b>refund of €1,284.60</b> due to you. Will be paid to your
+          registered bank account within 4 weeks. Objection period: 1 month.
+        </div>
+      </sio-ai-card>
+
+      <sio-ai-card label="AI summary" channel="letters" plain>
+        <div>Scanned at Berlin-Mitte hub. Objection deadline in 28 days.</div>
+      </sio-ai-card>
+
+      <sio-ai-card label="AI summary" channel="chats" plain>
+        <div>Lena: "bumping this — should we hold the banner for Thursday?"</div>
+      </sio-ai-card>
+    </div>
+  `;
+        #label_accessor_storage = __runInitializers(this, _label_initializers, 'Summary');
+        /** Eyebrow text, rendered uppercase — e.g. "Summary · 4 messages". */
+        get label() { return this.#label_accessor_storage; }
+        set label(value) { this.#label_accessor_storage = value; }
+        #channel_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _channel_initializers, ''));
+        /** Channel accent; empty = system tint. */
+        get channel() { return this.#channel_accessor_storage; }
+        set channel(value) { this.#channel_accessor_storage = value; }
+        #translatedTo_accessor_storage = (__runInitializers(this, _channel_extraInitializers), __runInitializers(this, _translatedTo_initializers, ''));
+        /** Translated variant — appends "· translated to <language>" to the eyebrow. */
+        get translatedTo() { return this.#translatedTo_accessor_storage; }
+        set translatedTo(value) { this.#translatedTo_accessor_storage = value; }
+        #plain_accessor_storage = (__runInitializers(this, _translatedTo_extraInitializers), __runInitializers(this, _plain_initializers, false));
+        /** Single-paragraph summary style: no tinted dot in front of slotted lines. */
+        get plain() { return this.#plain_accessor_storage; }
+        set plain(value) { this.#plain_accessor_storage = value; }
+        static styles = [
+            ...sioElementStyles,
+            css `
+      :host {
+        display: block;
+        --sio-ai-accent: var(--sio-tint);
+        --sio-ai-bg: var(--sio-tint-soft);
+        --sio-ai-border: color-mix(in oklab, var(--sio-tint) 25%, transparent);
+      }
+      :host([channel='mail']) {
+        --sio-ai-accent: var(--sio-ch-mail);
+        --sio-ai-bg: color-mix(in oklab, var(--sio-ch-mail) 8%, transparent);
+        --sio-ai-border: color-mix(in oklab, var(--sio-ch-mail) 28%, transparent);
+      }
+      :host([channel='chats']) {
+        --sio-ai-accent: var(--sio-ch-chats);
+        --sio-ai-bg: color-mix(in oklab, var(--sio-ch-chats) 8%, transparent);
+        --sio-ai-border: color-mix(in oklab, var(--sio-ch-chats) 28%, transparent);
+      }
+      :host([channel='calls']) {
+        --sio-ai-accent: var(--sio-ch-calls);
+        --sio-ai-bg: color-mix(in oklab, var(--sio-ch-calls) 8%, transparent);
+        --sio-ai-border: color-mix(in oklab, var(--sio-ch-calls) 28%, transparent);
+      }
+      :host([channel='letters']) {
+        --sio-ai-accent: var(--sio-ch-letters);
+        --sio-ai-bg: color-mix(in oklab, var(--sio-ch-letters) 8%, transparent);
+        --sio-ai-border: color-mix(in oklab, var(--sio-ch-letters) 28%, transparent);
+      }
+
+      .card {
+        padding: 14px 16px;
+        border-radius: var(--sio-radius-md);
+        background: var(--sio-ai-bg);
+        border: var(--sio-hairline) solid var(--sio-ai-border);
+      }
+
+      .eyebrow {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 8px;
+        font-size: 11px;
+        line-height: 13px;
+        font-weight: 700;
+        letter-spacing: 0.06px;
+        text-transform: uppercase;
+        color: var(--sio-ai-accent);
+        font-variant-numeric: tabular-nums;
+      }
+
+      .eyebrow sio-icon {
+        flex: 0 0 auto;
+      }
+
+      ::slotted(*) {
+        display: flex;
+        gap: 8px;
+        margin: 0 0 3px;
+        font-size: 13.5px;
+        line-height: 1.5;
+        color: var(--sio-label);
+      }
+
+      ::slotted(*:last-child) {
+        margin-bottom: 0;
+      }
+
+      ::slotted(*)::before {
+        content: '·';
+        color: var(--sio-ai-accent);
+        flex: 0 0 auto;
+      }
+
+      :host([plain]) ::slotted(*)::before {
+        content: none;
+      }
+    `,
+        ];
+        render() {
+            const suffix = this.translatedTo ? ` · translated to ${this.translatedTo}` : '';
+            return html `
+      <div class="card" part="card">
+        <div class="eyebrow" part="eyebrow">
+          <sio-icon icon="sparkles" size="11" .strokeWidth=${2}></sio-icon>
+          <span>${this.label}${suffix}</span>
+        </div>
+        <slot></slot>
+      </div>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _plain_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SioAiCard = _classThis;
+})();
+export { SioAiCard };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLWFpLWNhcmQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvc2lvLWFpLWNhcmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxXQUFXLEVBQ1gsSUFBSSxFQUNKLFFBQVEsRUFDUixhQUFhLEVBQ2IsR0FBRyxHQUVKLE1BQU0sNkJBQTZCLENBQUM7QUFDckMsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQy9DLE9BQU8sZUFBZSxDQUFDO0FBZXZCOzs7Ozs7Ozs7Ozs7R0FZRztJQUVVLFNBQVM7NEJBRHJCLGFBQWEsQ0FBQyxhQUFhLENBQUM7Ozs7c0JBQ0UsV0FBVzs7Ozs7Ozs7Ozs7Ozt5QkFBbkIsU0FBUSxXQUFXOzs7O2lDQTZCdkMsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO21DQUkxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsQ0FBQzt3Q0FJekMsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsZUFBZSxFQUFFLENBQUM7aUNBSXRELFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxDQUFDO1lBWDNDLG9LQUFnQixLQUFLLDZCQUFMLEtBQUsscUZBQWE7WUFJbEMsMEtBQWdCLE9BQU8sNkJBQVAsT0FBTyx5RkFBeUI7WUFJaEQseUxBQWdCLFlBQVksNkJBQVosWUFBWSxtR0FBTTtZQUlsQyxvS0FBZ0IsS0FBSyw2QkFBTCxLQUFLLHFGQUFTO1lBMUNoQyw2S0F3SUM7Ozs7UUF2SVEsTUFBTSxDQUFDLElBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F5QjlCLENBQUM7UUFJRix1RUFBd0IsU0FBUyxFQUFDO1FBRmxDLHNFQUFzRTtRQUV0RSxJQUFnQixLQUFLLDJDQUFhO1FBQWxDLElBQWdCLEtBQUssaURBQWE7UUFJbEMsK0hBQTZDLEVBQUUsR0FBQztRQUZoRCwyQ0FBMkM7UUFFM0MsSUFBZ0IsT0FBTyw2Q0FBeUI7UUFBaEQsSUFBZ0IsT0FBTyxtREFBeUI7UUFJaEQsMklBQStCLEVBQUUsR0FBQztRQUZsQyxnRkFBZ0Y7UUFFaEYsSUFBZ0IsWUFBWSxrREFBTTtRQUFsQyxJQUFnQixZQUFZLHdEQUFNO1FBSWxDLGtJQUF3QixLQUFLLEdBQUM7UUFGOUIsK0VBQStFO1FBRS9FLElBQWdCLEtBQUssMkNBQVM7UUFBOUIsSUFBZ0IsS0FBSyxpREFBUztRQUV2QixNQUFNLENBQUMsTUFBTSxHQUFHO1lBQ3JCLEdBQUcsZ0JBQWdCO1lBQ25CLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBMkVGO1NBQ0YsQ0FBQztRQUVLLE1BQU07WUFDWCxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQyxvQkFBb0IsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7WUFDaEYsT0FBTyxJQUFJLENBQUE7Ozs2REFHOEMsQ0FBQztrQkFDNUMsSUFBSSxDQUFDLEtBQUssR0FBRyxNQUFNOzs7O0tBSWhDLENBQUM7UUFDSixDQUFDOzs7Ozs7WUF2SVUsdURBQVM7Ozs7O1NBQVQsU0FBUyJ9

package/dist_ts_web/elements/sio-avatar.d.ts

@@ -0,0 +1,46 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './sio-icon.js';
+export type TSioAvatarPresence = 'none' | 'online';
+export type TSioAvatarChannelBadge = 'none' | 'mail' | 'chats' | 'calls' | 'letters';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sio-avatar': SioAvatar;
+        'sio-avatar-stack': SioAvatarStack;
+    }
+}
+/**
+ * sio-avatar — initials on a tinted circle (v7 `.sio-avatar`).
+ *
+ * The tint is data-driven (each person carries their own accent color),
+ * so it is passed in as a prop; it defaults to the system tint token.
+ * Optional presence dot (online) and channel badge, both ringed with
+ * 2px of surface color so they read on top of list rows.
+ */
+export declare class SioAvatar extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    accessor initials: string;
+    /** person accent color (data-driven); any CSS color, tokens welcome */
+    accessor tint: string;
+    accessor size: number;
+    accessor presence: TSioAvatarPresence;
+    accessor channelBadge: TSioAvatarChannelBadge;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+}
+/**
+ * sio-avatar-stack — overlapping avatar row (thread participants).
+ * Slotted sio-avatar elements overlap by -8px, each ringed with 2px of
+ * surface color; avatars beyond `max` collapse into a "+N" bubble.
+ */
+export declare class SioAvatarStack extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    /** visible avatars before collapsing into "+N" */
+    accessor max: number;
+    /** diameter of the "+N" overflow bubble — match the slotted avatar size */
+    accessor size: number;
+    private accessor overflowCount;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+    updated(changedProperties: Map<PropertyKey, unknown>): void;
+    private recomputeStack;
+}