@social.io/catalog 1.3.0 → 2.0.0

package/dist_ts_web/elements/sio-message-input.js

@@ -1,242 +1,247 @@
-import { DeesElement, property, html, customElement, cssManager, css, unsafeCSS, state, } from '@design.estate/dees-element';
-// Import design tokens
-import { colors, bdTheme } from './00colors.js';
-import { spacing, radius, shadows, transitions } from './00tokens.js';
-import { fontFamilies, typography } from './00fonts.js';
-@customElement('sio-message-input')
-export class SioMessageInput extends DeesElement {
-    static demo = () => html `
-    <sio-message-input style="width: 600px;"></sio-message-input>
+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, state, customElement, css, } from '@design.estate/dees-element';
+import { sioElementStyles } from './tokens.js';
+import { SioComposer } from './sio-composer.js';
+SioComposer;
+/**
+ * sio-message-input — the widget's composer row, a thin shell around
+ * sio-composer (v7 SocialIOWidget.jsx composer).
+ *
+ * Adds the widget-level concerns on top of the composer primitive:
+ * a hidden file input behind the composer's attach button, the
+ * email-capture variant for the away state, and the keyboard-visibility
+ * focus events the combox uses on phablet.
+ *
+ * Events (bubbles, composed):
+ *   send-message   { text, attachments: File[] }
+ *   files-selected { files: File[] }
+ *   input-focus / input-blur — phablet keyboard handling
+ */
+let SioMessageInput = (() => {
+    let _classDecorators = [customElement('sio-message-input')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _variant_decorators;
+    let _variant_initializers = [];
+    let _variant_extraInitializers = [];
+    let _accent_decorators;
+    let _accent_initializers = [];
+    let _accent_extraInitializers = [];
+    let _attach_decorators;
+    let _attach_initializers = [];
+    let _attach_extraInitializers = [];
+    let _pendingAttachments_decorators;
+    let _pendingAttachments_initializers = [];
+    let _pendingAttachments_extraInitializers = [];
+    var SioMessageInput = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _placeholder_decorators = [property({ type: String })];
+            _disabled_decorators = [property({ type: Boolean, reflect: true })];
+            _variant_decorators = [property({ type: String })];
+            _accent_decorators = [property({ type: String })];
+            _attach_decorators = [property({ type: Boolean })];
+            _pendingAttachments_decorators = [state()];
+            __esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
+            __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(this, null, _variant_decorators, { kind: "accessor", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
+            __esDecorate(this, null, _accent_decorators, { kind: "accessor", name: "accent", static: false, private: false, access: { has: obj => "accent" in obj, get: obj => obj.accent, set: (obj, value) => { obj.accent = value; } }, metadata: _metadata }, _accent_initializers, _accent_extraInitializers);
+            __esDecorate(this, null, _attach_decorators, { kind: "accessor", name: "attach", static: false, private: false, access: { has: obj => "attach" in obj, get: obj => obj.attach, set: (obj, value) => { obj.attach = value; } }, metadata: _metadata }, _attach_initializers, _attach_extraInitializers);
+            __esDecorate(this, null, _pendingAttachments_decorators, { kind: "accessor", name: "pendingAttachments", static: false, private: false, access: { has: obj => "pendingAttachments" in obj, get: obj => obj.pendingAttachments, set: (obj, value) => { obj.pendingAttachments = value; } }, metadata: _metadata }, _pendingAttachments_initializers, _pendingAttachments_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SioMessageInput = _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: 18px; max-width: 380px; padding: 24px; background: var(--sio-bg); font-family: var(--sio-font-sf);"
+    >
+      <div
+        style="font-size: 11px; font-weight: 700; letter-spacing: 0.06px; text-transform: uppercase; color: var(--sio-label-3);"
+      >
+        Widget composer
+      </div>
+      <div style="background: var(--sio-surface); border-radius: 16px; padding-top: 12px;">
+        <sio-message-input placeholder="Write a message…"></sio-message-input>
+      </div>
+
+      <div
+        style="font-size: 11px; font-weight: 700; letter-spacing: 0.06px; text-transform: uppercase; color: var(--sio-label-3);"
+      >
+        Email capture — team is away
+      </div>
+      <div style="background: var(--sio-surface); border-radius: 16px; padding-top: 12px;">
+        <sio-message-input variant="email"></sio-message-input>
+      </div>
+    </div>
   `;
-    @property({ type: String })
-    accessor placeholder = 'Type a message...';
-    @property({ type: Boolean })
-    accessor disabled = false;
-    @state()
-    accessor messageText = '';
-    @state()
-    accessor pendingAttachments = [];
-    static styles = [
-        cssManager.defaultStyles,
-        css `
+        #placeholder_accessor_storage = __runInitializers(this, _placeholder_initializers, '');
+        /** field placeholder; message variant defaults to "Write a message…", email to "you@email.com" */
+        get placeholder() { return this.#placeholder_accessor_storage; }
+        set placeholder(value) { this.#placeholder_accessor_storage = value; }
+        #disabled_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+        get disabled() { return this.#disabled_accessor_storage; }
+        set disabled(value) { this.#disabled_accessor_storage = value; }
+        #variant_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _variant_initializers, 'message'));
+        /** 'message' (default) or 'email' — the away-state email capture */
+        get variant() { return this.#variant_accessor_storage; }
+        set variant(value) { this.#variant_accessor_storage = value; }
+        #accent_accessor_storage = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _accent_initializers, 'tint'));
+        /** send-button accent, forwarded to sio-composer */
+        get accent() { return this.#accent_accessor_storage; }
+        set accent(value) { this.#accent_accessor_storage = value; }
+        #attach_accessor_storage = (__runInitializers(this, _accent_extraInitializers), __runInitializers(this, _attach_initializers, false));
+        /** show the composer's attach "+" button (opens the file picker) */
+        get attach() { return this.#attach_accessor_storage; }
+        set attach(value) { this.#attach_accessor_storage = value; }
+        #pendingAttachments_accessor_storage = (__runInitializers(this, _attach_extraInitializers), __runInitializers(this, _pendingAttachments_initializers, []));
+        get pendingAttachments() { return this.#pendingAttachments_accessor_storage; }
+        set pendingAttachments(value) { this.#pendingAttachments_accessor_storage = value; }
+        static styles = [
+            ...sioElementStyles,
+            css `
       :host {
         display: block;
-        font-family: ${unsafeCSS(fontFamilies.sans)};
-      }
-
-      .input-container {
-        display: flex;
-        align-items: flex-end;
-        background: ${bdTheme('secondary')};
-        border: 1px solid ${bdTheme('border')};
-        border-radius: 24px;
-        padding: 2px;
-        transition: all 200ms ease;
-        overflow: hidden;
-      }
-
-      .input-container:focus-within {
-        border-color: ${bdTheme('ring')};
-        background: ${bdTheme('background')};
-      }
-
-      .message-input {
-        flex: 1;
-        min-height: 44px;
-        max-height: 120px;
-        padding: 12px 16px;
-        background: transparent;
-        border: none;
-        font-size: 15px;
-        color: ${bdTheme('foreground')};
-        outline: none;
-        resize: none;
-        font-family: ${unsafeCSS(fontFamilies.sans)};
-        line-height: 1.5;
-      }
-
-      .message-input::placeholder {
-        color: ${bdTheme('mutedForeground')};
-      }
-
-      .action-buttons {
-        display: flex;
-        gap: 4px;
-        align-items: center;
-        padding-right: 2px;
-      }
-
-      .action-button {
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-        border: none;
-        background: transparent;
-        color: ${bdTheme('mutedForeground')};
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 120ms ease;
-        position: relative;
-        outline: none;
-      }
-
-      .action-button:hover {
-        color: ${bdTheme('foreground')};
-        background: ${bdTheme('hsl(0 0% 0% / 0.05)', 'hsl(0 0% 100% / 0.05)')};
-      }
-
-      .action-button:active {
-        transform: scale(0.95);
-      }
-
-      .action-button.attachment {
-        opacity: 0.7;
-      }
-
-      .action-button.attachment:hover {
-        opacity: 1;
-      }
-
-      .action-button.send {
-        background: ${bdTheme('primary')};
-        color: white;
-        margin-left: 2px;
+        font-family: var(--sio-font-sf);
       }
 
-      .action-button.send:hover {
-        background: ${bdTheme('hsl(221 83% 49%)', 'hsl(217 91% 65%)')};
-      }
-
-      .action-button.send:disabled {
-        opacity: 0.3;
-        cursor: not-allowed;
-      }
-
-      .action-button.send:disabled:hover {
-        background: ${bdTheme('primary')};
-        transform: none;
+      :host([disabled]) {
+        pointer-events: none;
+        opacity: 0.5;
       }
 
       .file-input {
         display: none;
       }
-
-      /* Icon styles */
-      sio-icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .action-button.send sio-icon {
-        width: 18px;
-        height: 18px;
-      }
     `,
-    ];
-    render() {
-        return html `
-      <div class="input-container">
-        <textarea
-          class="message-input"
-          placeholder="${this.placeholder}"
-          .value=${this.messageText}
-          @input=${this.handleInput}
-          @keydown=${this.handleKeyDown}
-          ?disabled=${this.disabled}
-          rows="1"
-        ></textarea>
-        
-        <div class="action-buttons">
-          <input
-            type="file"
-            class="file-input"
-            id="fileInput"
-            multiple
-            accept="image/*,.pdf,.doc,.docx,.txt"
-            @change=${this.handleFileSelect}
-          />
-          <button 
-            class="action-button attachment"
-            @click=${this.openFileSelector}
-            ?disabled=${this.disabled}
-          >
-            <sio-icon icon="paperclip"></sio-icon>
-          </button>
-          <button
-            class="action-button send"
-            ?disabled=${!this.messageText.trim() || this.disabled}
-            @click=${this.sendMessage}
-          >
-            <sio-icon icon="send"></sio-icon>
-          </button>
-        </div>
-      </div>
+        ];
+        render() {
+            return html `
+      <sio-composer
+        variant=${this.variant}
+        accent=${this.accent}
+        ?attach=${this.attach}
+        ?auto-expand=${this.variant === 'message'}
+        placeholder=${this.variant === 'message' ? this.placeholder || 'Write a message…' : this.placeholder}
+        @composer-send=${this.handleComposerSend}
+        @composer-attach=${this.openFileSelector}
+        @focusin=${this.handleFocus}
+        @focusout=${this.handleBlur}
+      ></sio-composer>
+      <input
+        type="file"
+        class="file-input"
+        id="fileInput"
+        multiple
+        accept="image/*,.pdf,.doc,.docx,.txt"
+        @change=${this.handleFileSelect}
+      />
     `;
-    }
-    handleInput(event) {
-        const textarea = event.target;
-        this.messageText = textarea.value;
-        // Auto-resize textarea
-        textarea.style.height = 'auto';
-        textarea.style.height = `${textarea.scrollHeight}px`;
-    }
-    handleKeyDown(event) {
-        if (event.key === 'Enter' && !event.shiftKey) {
-            event.preventDefault();
-            this.sendMessage();
-        }
-    }
-    sendMessage() {
-        if (!this.messageText.trim() && this.pendingAttachments.length === 0) {
-            return;
         }
-        this.dispatchEvent(new CustomEvent('send-message', {
-            detail: {
-                text: this.messageText,
-                attachments: this.pendingAttachments
-            },
-            bubbles: true,
-            composed: true
-        }));
-        // Clear input
-        this.messageText = '';
-        this.pendingAttachments = [];
-        // Reset textarea height
-        const textarea = this.shadowRoot?.querySelector('.message-input');
-        if (textarea) {
-            textarea.style.height = 'auto';
+        handleComposerSend = (__runInitializers(this, _pendingAttachments_extraInitializers), (event) => {
+            // re-dispatch under the widget's send-message contract
+            event.stopPropagation();
+            this.dispatchEvent(new CustomEvent('send-message', {
+                detail: {
+                    text: event.detail.text,
+                    attachments: this.pendingAttachments,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+            this.pendingAttachments = [];
+        });
+        handleFocus = () => {
+            this.dispatchEvent(new CustomEvent('input-focus', {
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        handleBlur = () => {
+            this.dispatchEvent(new CustomEvent('input-blur', {
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        openFileSelector = (event) => {
+            event.stopPropagation();
+            const fileInput = this.shadowRoot?.querySelector('#fileInput');
+            fileInput?.click();
+        };
+        handleFileSelect = (event) => {
+            const input = event.target;
+            const files = Array.from(input.files || []);
+            if (files.length === 0) {
+                return;
+            }
+            this.pendingAttachments = [...this.pendingAttachments, ...files];
+            this.dispatchEvent(new CustomEvent('files-selected', {
+                detail: { files },
+                bubbles: true,
+                composed: true,
+            }));
+            input.value = ''; // allow re-selection of the same file
+        };
+        focus() {
+            const field = this.shadowRoot
+                ?.querySelector('sio-composer')
+                ?.shadowRoot?.querySelector('.field');
+            field?.focus();
         }
-    }
-    openFileSelector() {
-        const fileInput = this.shadowRoot?.querySelector('#fileInput');
-        if (fileInput) {
-            fileInput.click();
+        clear() {
+            const composer = this.shadowRoot?.querySelector('sio-composer');
+            if (composer) {
+                composer.value = '';
+            }
+            this.pendingAttachments = [];
         }
-    }
-    handleFileSelect(event) {
-        const input = event.target;
-        const files = Array.from(input.files || []);
-        this.pendingAttachments = [...this.pendingAttachments, ...files];
-        this.dispatchEvent(new CustomEvent('files-selected', {
-            detail: { files },
-            bubbles: true,
-            composed: true
-        }));
-        input.value = ''; // Clear input for re-selection
-    }
-    focus() {
-        const textarea = this.shadowRoot?.querySelector('.message-input');
-        textarea?.focus();
-    }
-    clear() {
-        this.messageText = '';
-        this.pendingAttachments = [];
-        const textarea = this.shadowRoot?.querySelector('.message-input');
-        if (textarea) {
-            textarea.style.height = 'auto';
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
         }
-    }
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLW1lc3NhZ2UtaW5wdXQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvc2lvLW1lc3NhZ2UtaW5wdXQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFdBQVcsRUFDWCxRQUFRLEVBQ1IsSUFBSSxFQUNKLGFBQWEsRUFFYixVQUFVLEVBQ1YsR0FBRyxFQUNILFNBQVMsRUFDVCxLQUFLLEdBQ04sTUFBTSw2QkFBNkIsQ0FBQztBQUVyQyx1QkFBdUI7QUFDdkIsT0FBTyxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDaEQsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN0RSxPQUFPLEVBQUUsWUFBWSxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQztBQVF4RCxDQUFDLGFBQWEsQ0FBQyxtQkFBbUIsQ0FBQztBQUNuQyxNQUFNLE9BQU8sZUFBZ0IsU0FBUSxXQUFXO0lBQ3ZDLE1BQU0sQ0FBQyxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOztHQUU5QixDQUFDO0lBRUYsQ0FBQyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7SUFDcEIsUUFBUSxDQUFDLFdBQVcsR0FBVyxtQkFBbUIsQ0FBQztJQUUxRCxDQUFDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsQ0FBQztJQUNyQixRQUFRLENBQUMsUUFBUSxHQUFZLEtBQUssQ0FBQztJQUUxQyxDQUFDLEtBQUssRUFBRTtJQUNBLFFBQVEsQ0FBQyxXQUFXLEdBQVcsRUFBRSxDQUFDO0lBRTFDLENBQUMsS0FBSyxFQUFFO0lBQ0EsUUFBUSxDQUFDLGtCQUFrQixHQUFXLEVBQUUsQ0FBQztJQUUxQyxNQUFNLENBQUMsTUFBTSxHQUFHO1FBQ3JCLFVBQVUsQ0FBQyxhQUFh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
+    };
+    return SioMessageInput = _classThis;
+})();
+export { SioMessageInput };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lvLW1lc3NhZ2UtaW5wdXQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvc2lvLW1lc3NhZ2UtaW5wdXQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxXQUFXLEVBQ1gsSUFBSSxFQUNKLFFBQVEsRUFDUixLQUFLLEVBQ0wsYUFBYSxFQUNiLEdBQUcsR0FFSixNQUFNLDZCQUE2QixDQUFDO0FBRXJDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUMvQyxPQUFPLEVBQUUsV0FBVyxFQUFxRCxNQUFNLG1CQUFtQixDQUFDO0FBQ25HLFdBQVcsQ0FBQztBQVFaOzs7Ozs7Ozs7Ozs7O0dBYUc7SUFFVSxlQUFlOzRCQUQzQixhQUFhLENBQUMsbUJBQW1CLENBQUM7Ozs7c0JBQ0UsV0FBVzs7Ozs7Ozs7Ozs7Ozs7Ozs7OzsrQkFBbkIsU0FBUSxXQUFXOzs7O3VDQTBCN0MsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO29DQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsQ0FBQzttQ0FJMUMsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO2tDQUkxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7a0NBSTFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsQ0FBQzs4Q0FHM0IsS0FBSyxFQUFFO1lBakJSLHNMQUFnQixXQUFXLDZCQUFYLFdBQVcsaUdBQU07WUFHakMsNktBQWdCLFFBQVEsNkJBQVIsUUFBUSwyRkFBUztZQUlqQywwS0FBZ0IsT0FBTyw2QkFBUCxPQUFPLHlGQUFrQztZQUl6RCx1S0FBZ0IsTUFBTSw2QkFBTixNQUFNLHVGQUE4QjtZQUlw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

package/dist_ts_web/elements/sio-paper-thumb.d.ts

@@ -0,0 +1,24 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+export type TSioPaperDirection = 'in' | 'out';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sio-paper-thumb': SioPaperThumb;
+    }
+}
+/**
+ * sio-paper-thumb — v7 physical-letter thumbnail (48×62, compact 38×50).
+ *
+ * Incoming letters render as cream scanned paper with a torn top edge;
+ * outgoing letters as lilac composed paper with a red-striped stamp square.
+ * An 18px direction badge (green ↓ in / letters-brown ↑ out) overhangs the
+ * bottom-right corner with a 2px surface ring.
+ */
+export declare class SioPaperThumb extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    /** 'in' = physically arrived + scanned (cream, torn edge); 'out' = composed + mailed (lilac, stamp). */
+    accessor direction: TSioPaperDirection;
+    /** 38×50 instead of 48×62, for cozy/compact list densities. */
+    accessor compact: boolean;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+}