@social.io/catalog 1.3.0 → 2.0.0

package/dist_ts_web/elements/sio-tab-bar.js

@@ -0,0 +1,232 @@
+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';
+/**
+ * The v7 channel set — All / Mail / Chats / Calls / Letters
+ * (prototype: SIO_CHANNELS in SocialIOData.jsx).
+ */
+const defaultChannels = [
+    { id: 'all', label: 'All', color: 'var(--sio-blue)', icon: 'grid-2x2' },
+    { id: 'mail', label: 'Mail', color: 'var(--sio-ch-mail)', icon: 'mail' },
+    { id: 'chats', label: 'Chats', color: 'var(--sio-ch-chats)', icon: 'message-circle' },
+    { id: 'calls', label: 'Calls', color: 'var(--sio-ch-calls)', icon: 'phone' },
+    { id: 'letters', label: 'Letters', color: 'var(--sio-ch-letters)', icon: 'file-text' },
+];
+const calendarChannel = {
+    id: 'calendar',
+    label: 'Calendar',
+    color: 'var(--sio-blue)',
+    icon: 'calendar',
+};
+/**
+ * sio-tab-bar — the mobile bottom channel switcher (v7 prototype:
+ * SIOTabBar in SocialIOChannels.jsx).
+ *
+ * A liquid-glass bar (blur 28px saturate 180%, 0.5px top hairline) with one
+ * flex-equal tab per channel: 22px icon over a 10.5px label. The active tab
+ * lights up in its channel color; 30px bottom padding clears the iOS home
+ * indicator. Selecting a tab dispatches `tab-change` with `{ id, channel }`
+ * (bubbles, composed).
+ */
+let SioTabBar = (() => {
+    let _classDecorators = [customElement('sio-tab-bar')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _channels_decorators;
+    let _channels_initializers = [];
+    let _channels_extraInitializers = [];
+    let _active_decorators;
+    let _active_initializers = [];
+    let _active_extraInitializers = [];
+    let _withCalendar_decorators;
+    let _withCalendar_initializers = [];
+    let _withCalendar_extraInitializers = [];
+    var SioTabBar = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _channels_decorators = [property({ type: Array })];
+            _active_decorators = [property({ type: String })];
+            _withCalendar_decorators = [property({ type: Boolean })];
+            __esDecorate(this, null, _channels_decorators, { kind: "accessor", name: "channels", static: false, private: false, access: { has: obj => "channels" in obj, get: obj => obj.channels, set: (obj, value) => { obj.channels = value; } }, metadata: _metadata }, _channels_initializers, _channels_extraInitializers);
+            __esDecorate(this, null, _active_decorators, { kind: "accessor", name: "active", static: false, private: false, access: { has: obj => "active" in obj, get: obj => obj.active, set: (obj, value) => { obj.active = value; } }, metadata: _metadata }, _active_initializers, _active_extraInitializers);
+            __esDecorate(this, null, _withCalendar_decorators, { kind: "accessor", name: "withCalendar", static: false, private: false, access: { has: obj => "withCalendar" in obj, get: obj => obj.withCalendar, set: (obj, value) => { obj.withCalendar = value; } }, metadata: _metadata }, _withCalendar_initializers, _withCalendar_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SioTabBar = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `
+    <div style="display: flex; flex-direction: column; gap: 24px; max-width: 390px; font-family: var(--sio-font-sf);">
+      <!-- Mail active -->
+      <div
+        style="border-radius: 20px; overflow: hidden; border: var(--sio-hairline) solid var(--sio-separator); background: var(--sio-bg);"
+      >
+        <div style="padding: 18px 16px 26px;">
+          <div style="font-size: 28px; font-weight: 700; letter-spacing: 0.36px; color: var(--sio-label);">Mail</div>
+          <div style="margin-top: 3px; font-size: 13px; color: var(--sio-label-3);">
+            4 unread · Feed 12 · Paper 4 · People 3
+          </div>
+        </div>
+        <sio-tab-bar active="mail"></sio-tab-bar>
+      </div>
+
+      <!-- Chats active, with the optional Calendar tab -->
+      <div
+        style="border-radius: 20px; overflow: hidden; border: var(--sio-hairline) solid var(--sio-separator); background: var(--sio-bg);"
+      >
+        <div style="padding: 18px 16px 26px;">
+          <div style="font-size: 28px; font-weight: 700; letter-spacing: 0.36px; color: var(--sio-label);">Chats</div>
+          <div style="margin-top: 3px; font-size: 13px; color: var(--sio-label-3);">
+            3 new · Lena is typing…
+          </div>
+        </div>
+        <sio-tab-bar active="chats" .withCalendar=${true}></sio-tab-bar>
+      </div>
+    </div>
+  `;
+        #channels_accessor_storage = __runInitializers(this, _channels_initializers, defaultChannels);
+        get channels() { return this.#channels_accessor_storage; }
+        set channels(value) { this.#channels_accessor_storage = value; }
+        #active_accessor_storage = (__runInitializers(this, _channels_extraInitializers), __runInitializers(this, _active_initializers, 'mail'));
+        get active() { return this.#active_accessor_storage; }
+        set active(value) { this.#active_accessor_storage = value; }
+        #withCalendar_accessor_storage = (__runInitializers(this, _active_extraInitializers), __runInitializers(this, _withCalendar_initializers, false));
+        get withCalendar() { return this.#withCalendar_accessor_storage; }
+        set withCalendar(value) { this.#withCalendar_accessor_storage = value; }
+        static styles = [
+            ...sioElementStyles,
+            css `
+      :host {
+        display: block;
+      }
+
+      /* toolbar glass, hairline on the top edge (the bar sits at the bottom) */
+      .bar {
+        display: flex;
+        padding: 8px 0 30px; /* 30px clears the iOS home indicator */
+        background: var(--sio-toolbar-glass-bg);
+        backdrop-filter: blur(28px) saturate(180%);
+        -webkit-backdrop-filter: blur(28px) saturate(180%);
+        border-top: var(--sio-hairline) solid var(--sio-separator);
+      }
+
+      .tab {
+        appearance: none;
+        border: none;
+        margin: 0;
+        padding: 0;
+        background: transparent;
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 2px;
+        font-family: var(--sio-font-sf);
+        color: var(--sio-label-3);
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+        transition: color 120ms ease;
+      }
+
+      .tab.active {
+        color: var(--_channel-color, var(--sio-tint));
+      }
+
+      .tab:focus-visible {
+        outline: 2px solid color-mix(in oklab, var(--sio-tint) 40%, transparent);
+        outline-offset: -2px;
+        border-radius: var(--sio-radius-sm);
+      }
+
+      .label {
+        font-size: 10.5px;
+        font-weight: 500;
+        letter-spacing: 0.02px;
+        line-height: 1.25;
+        white-space: nowrap;
+      }
+
+      .tab.active .label {
+        font-weight: 600;
+      }
+    `,
+        ];
+        render() {
+            const tabs = this.withCalendar ? [...this.channels, calendarChannel] : this.channels;
+            return html `
+      <nav class="bar" part="bar">
+        ${tabs.map((channel) => html `
+            <button
+              type="button"
+              class="tab ${channel.id === this.active ? 'active' : ''}"
+              style="--_channel-color: ${channel.color}"
+              aria-current=${channel.id === this.active ? 'page' : 'false'}
+              @click=${() => this.handleSelect(channel)}
+            >
+              <sio-icon icon=${channel.icon} size="22" .strokeWidth=${1.7}></sio-icon>
+              <span class="label">${channel.label}</span>
+            </button>
+          `)}
+      </nav>
+    `;
+        }
+        handleSelect(channel) {
+            if (channel.id === this.active) {
+                return;
+            }
+            this.active = channel.id;
+            this.dispatchEvent(new CustomEvent('tab-change', {
+                detail: { id: channel.id, channel },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _withCalendar_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SioTabBar = _classThis;
+})();
+export { SioTabBar };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLXRhYi1iYXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvc2lvLXRhYi1iYXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxXQUFXLEVBQ1gsSUFBSSxFQUNKLFFBQVEsRUFDUixhQUFhLEVBQ2IsR0FBRyxHQUVKLE1BQU0sNkJBQTZCLENBQUM7QUFDckMsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQy9DLE9BQU8sZUFBZSxDQUFDO0FBb0J2Qjs7O0dBR0c7QUFDSCxNQUFNLGVBQWUsR0FBd0I7SUFDM0MsRUFBRSxFQUFFLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLGlCQUFpQixFQUFFLElBQUksRUFBRSxVQUFVLEVBQUU7SUFDdkUsRUFBRSxFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLG9CQUFvQixFQUFFLElBQUksRUFBRSxNQUFNLEVBQUU7SUFDeEUsRUFBRSxFQUFFLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLHFCQUFxQixFQUFFLElBQUksRUFBRSxnQkFBZ0IsRUFBRTtJQUNyRixFQUFFLEVBQUUsRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUscUJBQXFCLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRTtJQUM1RSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsdUJBQXVCLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRTtDQUN2RixDQUFDO0FBRUYsTUFBTSxlQUFlLEdBQXNCO0lBQ3pDLEVBQUUsRUFBRSxVQUFVO0lBQ2QsS0FBSyxFQUFFLFVBQVU7SUFDakIsS0FBSyxFQUFFLGlC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

package/dist_ts_web/elements/sio-unread-badge.d.ts

@@ -0,0 +1,25 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './sio-icon.js';
+export type TSioUnreadBadgeChannel = 'tint' | 'mail' | 'chats' | 'calls' | 'letters' | 'alert';
+export type TSioUnreadBadgeSize = 'md' | 'sm';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sio-unread-badge': SioUnreadBadge;
+    }
+}
+/**
+ * sio-unread-badge — count pill on solid channel color (v7 chat list /
+ * channel rail / widget launcher). md: min-width 20, height 20, radius 10,
+ * 11.5/700 tabular white. sm (rails): 16px with 10px numerals.
+ * `ring` adds the 2px surface ring used when the pill sits on an icon.
+ */
+export declare class SioUnreadBadge extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    accessor count: number;
+    accessor channel: TSioUnreadBadgeChannel;
+    accessor size: TSioUnreadBadgeSize;
+    /** 2px surface ring — for pills sitting on rail icons */
+    accessor ring: boolean;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+}

package/dist_ts_web/elements/sio-unread-badge.js

@@ -0,0 +1,203 @@
+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'; // used by the static demo
+const badgeColors = {
+    tint: 'var(--sio-tint)',
+    mail: 'var(--sio-ch-mail)',
+    chats: 'var(--sio-ch-chats)',
+    calls: 'var(--sio-ch-calls)',
+    letters: 'var(--sio-ch-letters)',
+    alert: 'var(--sio-red)',
+};
+/**
+ * sio-unread-badge — count pill on solid channel color (v7 chat list /
+ * channel rail / widget launcher). md: min-width 20, height 20, radius 10,
+ * 11.5/700 tabular white. sm (rails): 16px with 10px numerals.
+ * `ring` adds the 2px surface ring used when the pill sits on an icon.
+ */
+let SioUnreadBadge = (() => {
+    let _classDecorators = [customElement('sio-unread-badge')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _count_decorators;
+    let _count_initializers = [];
+    let _count_extraInitializers = [];
+    let _channel_decorators;
+    let _channel_initializers = [];
+    let _channel_extraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _ring_decorators;
+    let _ring_initializers = [];
+    let _ring_extraInitializers = [];
+    var SioUnreadBadge = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _count_decorators = [property({ type: Number })];
+            _channel_decorators = [property({ type: String })];
+            _size_decorators = [property({ type: String })];
+            _ring_decorators = [property({ type: Boolean })];
+            __esDecorate(this, null, _count_decorators, { kind: "accessor", name: "count", static: false, private: false, access: { has: obj => "count" in obj, get: obj => obj.count, set: (obj, value) => { obj.count = value; } }, metadata: _metadata }, _count_initializers, _count_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, _size_decorators, { kind: "accessor", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            __esDecorate(this, null, _ring_decorators, { kind: "accessor", name: "ring", static: false, private: false, access: { has: obj => "ring" in obj, get: obj => obj.ring, set: (obj, value) => { obj.ring = value; } }, metadata: _metadata }, _ring_initializers, _ring_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SioUnreadBadge = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <div style="display: flex; gap: 10px; align-items: center;">
+        <sio-unread-badge count="3" channel="chats"></sio-unread-badge>
+        <sio-unread-badge count="12" channel="mail"></sio-unread-badge>
+        <sio-unread-badge count="1" channel="calls"></sio-unread-badge>
+        <sio-unread-badge count="2" channel="letters"></sio-unread-badge>
+        <sio-unread-badge count="4"></sio-unread-badge>
+        <sio-unread-badge count="1" channel="alert"></sio-unread-badge>
+      </div>
+      <div style="display: flex; gap: 10px; align-items: center;">
+        <sio-unread-badge count="3" channel="chats" size="sm"></sio-unread-badge>
+        <sio-unread-badge count="12" channel="mail" size="sm"></sio-unread-badge>
+        <sio-unread-badge count="5" channel="calls" size="sm" ring></sio-unread-badge>
+      </div>
+      <div style="display: flex; gap: 22px; align-items: center;">
+        <span style="position: relative; display: inline-flex;">
+          <sio-icon icon="envelope" size="20" style="color: var(--sio-ch-mail);"></sio-icon>
+          <sio-unread-badge
+            count="3"
+            channel="mail"
+            size="sm"
+            ring
+            style="position: absolute; top: -5px; right: -9px;"
+          ></sio-unread-badge>
+        </span>
+        <span style="position: relative; display: inline-flex;">
+          <sio-icon icon="message-circle" size="20" style="color: var(--sio-ch-chats);"></sio-icon>
+          <sio-unread-badge
+            count="7"
+            channel="chats"
+            size="sm"
+            ring
+            style="position: absolute; top: -5px; right: -9px;"
+          ></sio-unread-badge>
+        </span>
+      </div>
+    </div>
+  `;
+        #count_accessor_storage = __runInitializers(this, _count_initializers, 0);
+        get count() { return this.#count_accessor_storage; }
+        set count(value) { this.#count_accessor_storage = value; }
+        #channel_accessor_storage = (__runInitializers(this, _count_extraInitializers), __runInitializers(this, _channel_initializers, 'tint'));
+        get channel() { return this.#channel_accessor_storage; }
+        set channel(value) { this.#channel_accessor_storage = value; }
+        #size_accessor_storage = (__runInitializers(this, _channel_extraInitializers), __runInitializers(this, _size_initializers, 'md'));
+        get size() { return this.#size_accessor_storage; }
+        set size(value) { this.#size_accessor_storage = value; }
+        #ring_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _ring_initializers, false));
+        /** 2px surface ring — for pills sitting on rail icons */
+        get ring() { return this.#ring_accessor_storage; }
+        set ring(value) { this.#ring_accessor_storage = value; }
+        static styles = [
+            ...sioElementStyles,
+            css `
+      :host {
+        display: inline-flex;
+        flex-shrink: 0;
+      }
+
+      .badge {
+        box-sizing: border-box;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 20px;
+        height: 20px;
+        padding: 0 6px;
+        border-radius: 10px;
+        background: var(--badge-color);
+        color: #fff; /* white numerals on solid channel color per v7 */
+        font-family: var(--sio-font-sf);
+        font-size: 11.5px;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+        line-height: 1;
+        white-space: nowrap;
+        user-select: none;
+      }
+
+      .badge.sm {
+        min-width: 16px;
+        height: 16px;
+        padding: 0 5px;
+        border-radius: 8px;
+        font-size: 10px;
+      }
+
+      .badge.ring {
+        box-shadow: 0 0 0 2px var(--sio-surface);
+      }
+    `,
+        ];
+        render() {
+            if (this.count <= 0) {
+                return html ``;
+            }
+            return html `
+      <span
+        class="badge ${this.size === 'sm' ? 'sm' : ''} ${this.ring ? 'ring' : ''}"
+        style="--badge-color: ${badgeColors[this.channel] || badgeColors.tint};"
+      >
+        ${this.count}
+      </span>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _ring_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SioUnreadBadge = _classThis;
+})();
+export { SioUnreadBadge };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLXVucmVhZC1iYWRnZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9zaW8tdW5yZWFkLWJhZGdlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsV0FBVyxFQUNYLElBQUksRUFDSixRQUFRLEVBQ1IsYUFBYSxFQUNiLEdBQUcsR0FFSixNQUFNLDZCQUE2QixDQUFDO0FBRXJDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUMvQyxPQUFPLGVBQWUsQ0FBQyxDQUFDLDBCQUEwQjtBQVdsRCxNQUFNLFdBQVcsR0FBMkM7SUFDMUQsSUFBSSxFQUFFLGlCQUFpQjtJQUN2QixJQUFJLEVBQUUsb0JBQW9CO0lBQzFCLEtBQUssRUFBRSxxQkFBcUI7SUFDNUIsS0FBSyxFQUFFLHFCQUFxQjtJQUM1QixPQUFPLEVBQUUsdUJBQXVCO0lBQ2hDLEtBQUssRUFBRSxnQkFBZ0I7Q0FDeEIsQ0FBQztBQUVGOzs7OztHQUtHO0lBRVUsY0FBYzs0QkFEMUIsYUFBYSxDQUFDLGtCQUFrQixDQUFDOzs7O3NCQUNFLFdBQVc7Ozs7Ozs7Ozs7Ozs7OEJBQW5CLFNBQVEsV0FBVzs7OztpQ0F5QzVDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQzttQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO2dDQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7Z0NBSTFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsQ0FBQztZQVQ1QixvS0FBZ0IsS0FBSyw2QkFBTCxLQUFLLHFGQUFLO1lBRzFCLDBLQUFnQixPQUFPLDZCQUFQLE9BQU8seUZBQWtDO1lBR3pELGlLQUFnQixJQUFJLDZCQUFKLElBQUksbUZBQTZCO1lBSWpELGlLQUFnQixJQUFJLDZCQUFKLElBQUksbUZBQVM7WUFwRC9CLDZLQTZHQzs7OztRQTVHUSxNQUFNLENBQUMsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FzQzlCLENBQUM7UUFHRix1RUFBd0IsQ0FBQyxFQUFDO1FBQTFCLElBQWdCLEtBQUssMkNBQUs7UUFBMUIsSUFBZ0IsS0FBSyxpREFBSztRQUcxQiwrSEFBa0QsTUFBTSxHQUFDO1FBQXpELElBQWdCLE9BQU8sNkNBQWtDO1FBQXpELElBQWdCLE9BQU8sbURBQWtDO1FBR3pELDJIQUE0QyxJQUFJLEdBQUM7UUFBakQsSUFBZ0IsSUFBSSwwQ0FBNkI7UUFBakQsSUFBZ0IsSUFBSSxnREFBNkI7UUFJakQsd0hBQXVCLEtBQUssR0FBQztRQUY3Qix5REFBeUQ7UUFFekQsSUFBZ0IsSUFBSSwwQ0FBUztRQUE3QixJQUFnQixJQUFJLGdEQUFTO1FBRXRCLE1BQU0sQ0FBQyxNQUFNLEdBQUc7WUFDckIsR0FBRyxnQkFBZ0I7WUFDbkIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBcUNGO1NBQ0YsQ0FBQztRQUVLLE1BQU07WUFDWCxJQUFJLElBQUksQ0FBQyxLQUFLLElBQUksQ0FBQyxFQUFFLENBQUM7Z0JBQ3BCLE9BQU8sSUFBSSxDQUFBLEVBQUUsQ0FBQztZQUNoQixDQUFDO1lBQ0QsT0FBTyxJQUFJLENBQUE7O3VCQUVRLElBQUksQ0FBQyxJQUFJLEtBQUssSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUU7Z0NBQ2hELFdBQVcsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksV0FBVyxDQUFDLElBQUk7O1VBRW5FLElBQUksQ0FBQyxLQUFLOztLQUVmLENBQUM7UUFDSixDQUFDOzs7Ozs7WUE1R1UsdURBQWM7Ozs7O1NBQWQsY0FBYyJ9

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

@@ -0,0 +1,34 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sio-waveform': SioWaveform;
+    }
+}
+/**
+ * sio-waveform — v7 voicemail / voice-message player.
+ *
+ * A surface card with a round play/pause control, a deterministic bar-chart
+ * waveform (played bars in the channel color, the rest in systemGray @ 45%
+ * per the v7 spec) and tabular elapsed / -remaining counters.
+ *
+ * Clicking the waveform dispatches `seek` ({ progress }); the play control
+ * toggles and dispatches `play` / `pause` ({ progress }).
+ */
+export declare class SioWaveform extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    /** Number of waveform bars (the v7 voicemail player draws 50). */
+    accessor bars: number;
+    /** Playback position, 0–1. Played bars take the channel color. */
+    accessor progress: number;
+    /** Accent for played bars + play control. Any CSS color, defaults to the calls channel. */
+    accessor color: string;
+    /** Elapsed counter, e.g. "0:28". */
+    accessor elapsed: string;
+    /** Remaining counter, e.g. "-1:19". */
+    accessor remaining: string;
+    accessor playing: boolean;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+    private handlePlayToggle;
+    private handleSeek;
+}