@social.io/catalog 1.3.0 → 2.1.0

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

@@ -0,0 +1,32 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sio-segmented': SioSegmented;
+    }
+}
+export interface ISioSegment {
+    id: string;
+    label: string;
+    count?: number;
+}
+export interface ISioSegmentChangeDetail {
+    id: string;
+    segment: ISioSegment;
+}
+/**
+ * sio-segmented — iOS-style segmented control (v7 prototype:
+ * SocialIOUnified.jsx mode switch — Priority / Timeline / By person).
+ *
+ * Recessed systemGray track (2px inner padding, radius 9), the selected
+ * segment floats on a white / systemGray knob with the layered iOS shadow
+ * and steps up to weight 600. Selecting a segment dispatches
+ * `segment-change` with `{ id, segment }` (bubbles, composed).
+ */
+export declare class SioSegmented extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    accessor segments: ISioSegment[];
+    accessor selected: string;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+    private handleSelect;
+}

package/dist_ts_web/elements/sio-segmented.js

@@ -0,0 +1,217 @@
+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, cssManager, } from '@design.estate/dees-element';
+import { sioElementStyles } from './tokens.js';
+/**
+ * sio-segmented — iOS-style segmented control (v7 prototype:
+ * SocialIOUnified.jsx mode switch — Priority / Timeline / By person).
+ *
+ * Recessed systemGray track (2px inner padding, radius 9), the selected
+ * segment floats on a white / systemGray knob with the layered iOS shadow
+ * and steps up to weight 600. Selecting a segment dispatches
+ * `segment-change` with `{ id, segment }` (bubbles, composed).
+ */
+let SioSegmented = (() => {
+    let _classDecorators = [customElement('sio-segmented')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _segments_decorators;
+    let _segments_initializers = [];
+    let _segments_extraInitializers = [];
+    let _selected_decorators;
+    let _selected_initializers = [];
+    let _selected_extraInitializers = [];
+    var SioSegmented = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _segments_decorators = [property({ type: Array })];
+            _selected_decorators = [property({ type: String })];
+            __esDecorate(this, null, _segments_decorators, { kind: "accessor", name: "segments", static: false, private: false, access: { has: obj => "segments" in obj, get: obj => obj.segments, set: (obj, value) => { obj.segments = value; } }, metadata: _metadata }, _segments_initializers, _segments_extraInitializers);
+            __esDecorate(this, null, _selected_decorators, { kind: "accessor", name: "selected", static: false, private: false, access: { has: obj => "selected" in obj, get: obj => obj.selected, set: (obj, value) => { obj.selected = value; } }, metadata: _metadata }, _selected_initializers, _selected_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SioSegmented = _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: 20px; max-width: 360px; padding: 20px; border-radius: 14px; background: var(--sio-bg); font-family: var(--sio-font-sf);"
+    >
+      <sio-segmented
+        .segments=${[
+            { id: 'priority', label: 'Priority' },
+            { id: 'time', label: 'Timeline' },
+            { id: 'person', label: 'By person' },
+        ]}
+        selected="priority"
+      ></sio-segmented>
+
+      <sio-segmented
+        .segments=${[
+            { id: 'feed', label: 'Feed', count: 12 },
+            { id: 'paper', label: 'Paper', count: 4 },
+            { id: 'people', label: 'People', count: 3 },
+        ]}
+        selected="people"
+      ></sio-segmented>
+
+      <sio-segmented
+        .segments=${[
+            { id: 'all', label: 'All' },
+            { id: 'unread', label: 'Unread', count: 7 },
+        ]}
+        selected="all"
+      ></sio-segmented>
+    </div>
+  `;
+        #segments_accessor_storage = __runInitializers(this, _segments_initializers, []);
+        get segments() { return this.#segments_accessor_storage; }
+        set segments(value) { this.#segments_accessor_storage = value; }
+        #selected_accessor_storage = (__runInitializers(this, _segments_extraInitializers), __runInitializers(this, _selected_initializers, ''));
+        get selected() { return this.#selected_accessor_storage; }
+        set selected(value) { this.#selected_accessor_storage = value; }
+        static styles = [
+            ...sioElementStyles,
+            css `
+      :host {
+        display: block;
+
+        /* iOS UISegmentedControl selected fill — white in light, systemGray
+           #636366 in dark. Not modeled in tokens.ts (it is knob-specific,
+           not a surface), so it branches here via the same theme mechanism
+           tokens.ts uses — no string concatenation. */
+        --sio-segmented-knob: ${cssManager.bdTheme('#FFFFFF', '#636366')};
+      }
+
+      .track {
+        display: flex;
+        padding: 2px;
+        border-radius: 9px;
+        background: var(--sio-surface-2);
+      }
+
+      .segment {
+        appearance: none;
+        border: none;
+        margin: 0;
+        flex: 1;
+        min-width: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 5px;
+        padding: 5px 0;
+        border-radius: 7px;
+        background: transparent;
+        font-family: var(--sio-font-sf);
+        font-size: 13px;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+        line-height: 1.25;
+        color: var(--sio-label-3);
+        white-space: nowrap;
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+        transition: color 120ms ease, background 120ms ease, box-shadow 120ms ease;
+      }
+
+      .segment:focus-visible {
+        outline: 2px solid color-mix(in oklab, var(--sio-tint) 40%, transparent);
+        outline-offset: 1px;
+      }
+
+      .segment.selected {
+        background: var(--sio-segmented-knob);
+        color: var(--sio-label);
+        font-weight: 600;
+        box-shadow:
+          0 1px 4px rgba(0, 0, 0, 0.12),
+          0 0 0 0.5px rgba(0, 0, 0, 0.04);
+      }
+
+      .count {
+        font-variant-numeric: tabular-nums;
+        font-size: 12px;
+        font-weight: 500;
+        opacity: 0.55;
+      }
+    `,
+        ];
+        render() {
+            const selectedId = this.selected || this.segments[0]?.id;
+            return html `
+      <div class="track" role="tablist">
+        ${this.segments.map((segment) => html `
+            <button
+              type="button"
+              role="tab"
+              class="segment ${segment.id === selectedId ? 'selected' : ''}"
+              aria-selected=${segment.id === selectedId ? 'true' : 'false'}
+              @click=${() => this.handleSelect(segment)}
+            >
+              ${segment.label}
+              ${segment.count !== undefined
+                ? html `<span class="count">${segment.count}</span>`
+                : html ``}
+            </button>
+          `)}
+      </div>
+    `;
+        }
+        handleSelect(segment) {
+            if (segment.id === this.selected) {
+                return;
+            }
+            this.selected = segment.id;
+            this.dispatchEvent(new CustomEvent('segment-change', {
+                detail: { id: segment.id, segment },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _selected_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SioSegmented = _classThis;
+})();
+export { SioSegmented };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLXNlZ21lbnRlZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9zaW8tc2VnbWVudGVkLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsV0FBVyxFQUNYLElBQUksRUFDSixRQUFRLEVBQ1IsYUFBYSxFQUNiLEdBQUcsRUFDSCxVQUFVLEdBRVgsTUFBTSw2QkFBNkIsQ0FBQztBQUNyQyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFtQi9DOzs7Ozs7OztHQVFHO0lBRVUsWUFBWTs0QkFEeEIsYUFBYSxDQUFDLGVBQWUsQ0FBQzs7OztzQkFDRyxXQUFXOzs7Ozs7OzRCQUFuQixTQUFRLFdBQVc7Ozs7b0NBaUMxQyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLENBQUM7b0NBR3pCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztZQUYzQiw2S0FBZ0IsUUFBUSw2QkFBUixRQUFRLDJGQUFxQjtZQUc3Qyw2S0FBZ0IsUUFBUSw2QkFBUixRQUFRLDJGQUFNO1lBckNoQyw2S0FnSkM7Ozs7UUEvSVEsTUFBTSxDQUFDLElBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUE7Ozs7O29CQUtiO1lBQ1YsRUFBRSxFQUFFLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUU7WUFDckMsRUFBRSxFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUU7WUFDakMsRUFBRSxFQUFFLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxXQUFXLEVBQUU7U0FDckM7Ozs7O29CQUtXO1lBQ1YsRUFBRSxFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLEVBQUUsRUFBRTtZQUN4QyxFQUFFLEVBQUUsRUFBRSxP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

package/dist_ts_web/elements/sio-step-timeline.d.ts

@@ -0,0 +1,28 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+export interface ISioStepTimelineStep {
+    when: string;
+    label: string;
+    done: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sio-step-timeline': SioStepTimeline;
+    }
+}
+/**
+ * sio-step-timeline — v7 vertical tracking timeline (outbound letters,
+ * delivery receipts, meeting prep …).
+ *
+ * 14px dots take the accent color once a step is done; the 2px connecting
+ * line only colors between two completed steps. Labels sit at 14.5px with
+ * muted 12px timestamps underneath — exactly the SIOLetterTracking recipe.
+ */
+export declare class SioStepTimeline extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    /** Ordered steps, first to last. */
+    accessor steps: ISioStepTimelineStep[];
+    /** Accent for completed dots + connecting lines. Defaults to the letters channel. */
+    accessor color: string;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+}

package/dist_ts_web/elements/sio-step-timeline.js

@@ -0,0 +1,222 @@
+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';
+/**
+ * sio-step-timeline — v7 vertical tracking timeline (outbound letters,
+ * delivery receipts, meeting prep …).
+ *
+ * 14px dots take the accent color once a step is done; the 2px connecting
+ * line only colors between two completed steps. Labels sit at 14.5px with
+ * muted 12px timestamps underneath — exactly the SIOLetterTracking recipe.
+ */
+let SioStepTimeline = (() => {
+    let _classDecorators = [customElement('sio-step-timeline')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _steps_decorators;
+    let _steps_initializers = [];
+    let _steps_extraInitializers = [];
+    let _color_decorators;
+    let _color_initializers = [];
+    let _color_extraInitializers = [];
+    var SioStepTimeline = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _steps_decorators = [property({ type: Array })];
+            _color_decorators = [property({ type: String })];
+            __esDecorate(this, null, _steps_decorators, { kind: "accessor", name: "steps", static: false, private: false, access: { has: obj => "steps" in obj, get: obj => obj.steps, set: (obj, value) => { obj.steps = value; } }, metadata: _metadata }, _steps_initializers, _steps_extraInitializers);
+            __esDecorate(this, null, _color_decorators, { kind: "accessor", name: "color", static: false, private: false, access: { has: obj => "color" in obj, get: obj => obj.color, set: (obj, value) => { obj.color = value; } }, metadata: _metadata }, _color_initializers, _color_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SioStepTimeline = _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-wrap: wrap; gap: 20px; padding: 20px; background: var(--sio-bg); border-radius: 18px; font-family: var(--sio-font-sf);"
+    >
+      <div
+        style="flex: 1; min-width: 260px; background: var(--sio-surface); border: 0.5px solid var(--sio-separator); border-radius: 16px; padding: 14px 16px;"
+      >
+        <div
+          style="font-size: 11px; font-weight: 700; color: var(--sio-label-3); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px;"
+        >
+          Tracking
+        </div>
+        <sio-step-timeline
+          .steps=${[
+            { when: 'Today 08:10', label: 'Printed at Berlin-Mitte print hub', done: true },
+            { when: 'Today 09:42', label: 'Handed to Deutsche Post', done: true },
+            { when: 'Tomorrow', label: 'In transit', done: false },
+            { when: 'Thu', label: 'Delivered', done: false },
+        ]}
+        ></sio-step-timeline>
+      </div>
+      <div
+        style="flex: 1; min-width: 260px; background: var(--sio-surface); border: 0.5px solid var(--sio-separator); border-radius: 16px; padding: 14px 16px;"
+      >
+        <div
+          style="font-size: 11px; font-weight: 700; color: var(--sio-label-3); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px;"
+        >
+          Delivery
+        </div>
+        <sio-step-timeline
+          color="var(--sio-bucket-done)"
+          .steps=${[
+            { when: 'Mon 14:48', label: 'Printed at Berlin-Mitte print hub', done: true },
+            { when: 'Mon 16:02', label: 'Handed to Deutsche Post', done: true },
+            { when: 'Tue', label: 'In transit', done: true },
+            { when: 'Wed 11:15', label: 'Delivered', done: true },
+        ]}
+        ></sio-step-timeline>
+      </div>
+    </div>
+  `;
+        #steps_accessor_storage = __runInitializers(this, _steps_initializers, []);
+        /** Ordered steps, first to last. */
+        get steps() { return this.#steps_accessor_storage; }
+        set steps(value) { this.#steps_accessor_storage = value; }
+        #color_accessor_storage = (__runInitializers(this, _steps_extraInitializers), __runInitializers(this, _color_initializers, 'var(--sio-ch-letters)'));
+        /** Accent for completed dots + connecting lines. Defaults to the letters channel. */
+        get color() { return this.#color_accessor_storage; }
+        set color(value) { this.#color_accessor_storage = value; }
+        static styles = [
+            ...sioElementStyles,
+            css `
+      :host {
+        display: block;
+        color: var(--sio-label);
+      }
+
+      .step {
+        position: relative;
+        display: flex;
+        gap: 12px;
+        margin-bottom: 14px;
+      }
+      .step:last-child {
+        margin-bottom: 0;
+      }
+
+      .dot {
+        box-sizing: border-box;
+        width: 14px;
+        height: 14px;
+        border-radius: 7px;
+        margin-top: 3px;
+        flex-shrink: 0;
+        background: transparent;
+        border: 2px solid var(--sio-label-3);
+        position: relative;
+        z-index: 2;
+      }
+      .step.done .dot {
+        background: var(--step-color);
+        border-color: var(--step-color);
+      }
+
+      .line {
+        position: absolute;
+        left: 6px;
+        top: 17px;
+        bottom: -14px;
+        width: 2px;
+        background: var(--sio-separator);
+      }
+      .line.done {
+        background: var(--step-color);
+      }
+
+      .body {
+        flex: 1;
+        min-width: 0;
+        padding-bottom: 2px;
+      }
+
+      .label {
+        font-size: 14.5px;
+        line-height: 1.35;
+        font-weight: 400;
+        color: var(--sio-label);
+      }
+      .step.done .label {
+        font-weight: 500;
+      }
+
+      .when {
+        font-size: 12px;
+        color: var(--sio-label-3);
+        margin-top: 1px;
+        font-variant-numeric: tabular-nums;
+      }
+    `,
+        ];
+        render() {
+            return html `
+      <div style="--step-color: ${this.color};">
+        ${this.steps.map((step, index) => html `
+            <div class="step ${step.done ? 'done' : ''}">
+              <div class="dot"></div>
+              ${index < this.steps.length - 1
+                ? html `
+                    <div
+                      class="line ${step.done && this.steps[index + 1].done ? 'done' : ''}"
+                    ></div>
+                  `
+                : html ``}
+              <div class="body">
+                <div class="label">${step.label}</div>
+                <div class="when">${step.when}</div>
+              </div>
+            </div>
+          `)}
+      </div>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _color_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SioStepTimeline = _classThis;
+})();
+export { SioStepTimeline };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLXN0ZXAtdGltZWxpbmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvc2lvLXN0ZXAtdGltZWxpbmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxXQUFXLEVBQ1gsSUFBSSxFQUNKLFFBQVEsRUFDUixhQUFhLEVBQ2IsR0FBRyxHQUVKLE1BQU0sNkJBQTZCLENBQUM7QUFDckMsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sYUFBYSxDQUFDO0FBYy9DOzs7Ozs7O0dBT0c7SUFFVSxlQUFlOzRCQUQzQixhQUFhLENBQUMsbUJBQW1CLENBQUM7Ozs7c0JBQ0UsV0FBVzs7Ozs7OzsrQkFBbkIsU0FBUSxXQUFXOzs7O2lDQTRDN0MsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxDQUFDO2lDQUl6QixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7WUFIM0Isb0tBQWdCLEtBQUssNkJBQUwsS0FBSyxxRkFBOEI7WUFJbkQsb0tBQWdCLEtBQUssNkJBQUwsS0FBSyxxRkFBbUM7WUFqRDFELDZLQW1KQzs7OztRQWxKUSxNQUFNLENBQUMsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7Ozs7Ozs7Ozs7OzttQkFhZDtZQUNQLEVBQUUsSUFBSSxFQUFFLGFBQWEsRUFBRSxLQUFLLEVBQUUsbUNBQW1DLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRTtZQUMvRSxFQUFFLElBQUksRUFBRSxhQUFhLEVBQUUsS0FBSyxFQUFFLHlCQUF5QixFQUFFLElBQUksRUFBRSxJQUFJLEVBQUU7WUFDckUsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxZQUFZLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRTtZQUN0RCxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFO1NBQ2pEOzs7Ozs7Ozs7Ozs7O21CQWFRO1lBQ1AsRUFBRSxJQUFJLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxtQ0FBbUMsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFO1lBQzdFLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUseUJBQXlCLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRTtZQUNuRSxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLFlBQVksRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFO1lBQ2hELEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUU7U0FDdEQ7Ozs7R0FJUixDQUFDO1FBSUYsdUVBQWdELEVBQUUsRUFBQztRQUZuRCxvQ0FBb0M7UUFFcEMsSUFBZ0IsS0FBSywyQ0FBOEI7UUFBbkQsSUFBZ0IsS0FBSyxpREFBOEI7UUFJbkQsMkhBQWdDLHVCQUF1QixHQUFDO1FBRnhELHFGQUFxRjtRQUVyRixJQUFnQixLQUFLLDJDQUFtQztRQUF4RCxJQUFnQixLQUFLLGlEQUFtQztRQUVqRCxNQUFNLENBQUMsTUFBTSxHQUFHO1lBQ3JCLEdBQUcsZ0JBQWdCO1lBQ25CLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQW1FRjtTQUNGLENBQUM7UUFFSyxNQUFNO1lBQ1gsT0FBTyxJQUFJLENBQUE7a0NBQ21CLElBQUksQ0FBQyxLQUFLO1VBQ2xDLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUNkLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFBOytCQUNBLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRTs7Z0JBRXRDLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxDQUFDO2dCQUM3QixDQUFDLENBQUMsSUFBSSxDQUFBOztvQ0FFYyxJQUFJLENBQUMsSUFBSSxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFOzttQkFFdEU7Z0JBQ0gsQ0FBQyxDQUFDLElBQUksQ0FBQSxFQUFFOztxQ0FFYSxJQUFJLENBQUMsS0FBSztvQ0FDWCxJQUFJLENBQUMsSUFBSTs7O1dBR2xDLENBQ0Y7O0tBRUosQ0FBQztRQUNKLENBQUM7Ozs7OztZQWxKVSx1REFBZTs7Ozs7U0FBZixlQUFlIn0=

package/dist_ts_web/elements/sio-tab-bar.d.ts

@@ -0,0 +1,36 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './sio-icon.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sio-tab-bar': SioTabBar;
+    }
+}
+export interface ISioTabBarChannel {
+    id: string;
+    label: string;
+    color: string;
+    icon: string;
+}
+export interface ISioTabChangeDetail {
+    id: string;
+    channel: ISioTabBarChannel;
+}
+/**
+ * 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; safe-area-aware bottom padding clears the
+ * iOS home indicator. Selecting a tab dispatches `tab-change` with `{ id, channel }`
+ * (bubbles, composed).
+ */
+export declare class SioTabBar extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    accessor channels: ISioTabBarChannel[];
+    accessor active: string;
+    accessor withCalendar: boolean;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+    private handleSelect;
+}