@skdx/web-components-blocks 0.34.0 → 0.35.0

package/dist/chat-composer/ChatComposer.cjs

@@ -0,0 +1,41 @@
+"use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var y=(l,a)=>{for(var e in a)d(l,e,{get:a[e],enumerable:!0})},x=(l,a,e,r)=>{if(a&&typeof a=="object"||typeof a=="function")for(let i of v(a))!b.call(l,i)&&i!==e&&d(l,i,{get:()=>a[i],enumerable:!(r=p(a,i))||r.enumerable});return l};var f=l=>x(d({},"__esModule",{value:!0}),l),n=(l,a,e,r)=>{for(var i=r>1?void 0:r?p(a,e):a,u=l.length-1,h;u>=0;u--)(h=l[u])&&(i=(r?h(a,e,i):h(i))||i);return r&&i&&d(a,e,i),i};var V={};y(V,{SkdxChatComposer:()=>s});module.exports=f(V);var t=require("lit"),o=require("lit/decorators.js"),m=require("../internal/define.cjs"),c=require("../internal/events.cjs"),g=require("../internal/slots.cjs"),S=require("@skdx/web-components/button"),_=require("@skdx/web-components/textarea");var k="data-skdx-chat-composer-generated",s=class extends t.LitElement{constructor(){super(...arguments);this.defaultValue="";this.label="Message";this.sendLabel="Send";this.submitKey="enter";this.maxRows=8;this.disabled=!1;this.pending=!1;this.handleValueChange=e=>{e.stopPropagation(),this.setValue(e.detail,"keyboard")};this.send=()=>{let e=this.currentValue;this.disabled||this.pending||e.trim().length===0||((0,c.emit)(this,"send",{value:e}),this.value===void 0&&this.setValue("","programmatic"))};this.handleKeyDown=e=>{this.submitKey==="none"||e.key!=="Enter"||e.isComposing||!(this.submitKey==="enter"?!e.shiftKey:e.metaKey||e.ctrlKey)||(e.preventDefault(),this.send())}}createRenderRoot(){return this}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}get canSend(){return this.currentValue.trim().length>0}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.requestUpdate())}hasSlotted(e){return this.querySelector(`[slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-chat-composer__${e}`)}setValue(e,r){let i=this.currentValue;this.uncontrolledValue=e,this.requestUpdate(),(0,c.emit)(this,"value-change",{value:e,previousValue:i,reason:r})}updated(){this.pending?this.setAttribute("data-state","pending"):this.removeAttribute("data-state");let e=this.querySelector(".skdx-chat-composer__textarea");e&&(e.value=this.currentValue),(0,g.placeSlotted)(this,k,{attachments:this.region("attachments"),leading:this.region("leading"),trailing:this.region("trailing"),footer:this.region("footer"),"send-icon":this.region("send")},null)}render(){let e=this.currentValue,r=this.hasSlotted("send-icon");return t.html`
+      ${this.hasSlotted("attachments")?t.html`<div
+              class="skdx-chat-composer__attachments"
+              data-skdx-chat-composer-generated
+            ></div>`:t.nothing}
+      <div
+        class="skdx-chat-composer__field"
+        data-skdx-chat-composer-generated
+      >
+        ${this.hasSlotted("leading")?t.html`<div class="skdx-chat-composer__leading"></div>`:t.nothing}
+        <skdx-textarea
+          class="skdx-chat-composer__textarea"
+          aria-label=${this.label}
+          placeholder=${this.placeholder??t.nothing}
+          .value=${e}
+          auto-resize
+          min-rows="1"
+          max-rows=${this.maxRows}
+          maxlength=${this.maxLength??t.nothing}
+          ?disabled=${this.disabled}
+          @value-change=${this.handleValueChange}
+          @keydown=${this.handleKeyDown}
+        ></skdx-textarea>
+        ${this.hasSlotted("trailing")?t.html`<div class="skdx-chat-composer__trailing"></div>`:t.nothing}
+        <skdx-button
+          class="skdx-chat-composer__send"
+          type="button"
+          .variant=${"primary"}
+          .iconOnly=${r}
+          aria-label=${r?this.sendLabel:t.nothing}
+          ?loading=${this.pending}
+          ?disabled=${this.disabled||this.pending||!this.canSend}
+          @click=${this.send}
+          >${r?t.nothing:this.sendLabel}</skdx-button
+        >
+      </div>
+      ${this.hasSlotted("footer")?t.html`<div
+              class="skdx-chat-composer__footer"
+              data-skdx-chat-composer-generated
+            ></div>`:t.nothing}
+    `}};n([(0,o.property)({type:String})],s.prototype,"value",2),n([(0,o.property)({type:String,attribute:"default-value"})],s.prototype,"defaultValue",2),n([(0,o.property)({type:String})],s.prototype,"placeholder",2),n([(0,o.property)({type:String})],s.prototype,"label",2),n([(0,o.property)({type:String,attribute:"send-label"})],s.prototype,"sendLabel",2),n([(0,o.property)({type:String,attribute:"submit-key"})],s.prototype,"submitKey",2),n([(0,o.property)({type:Number,attribute:"max-rows"})],s.prototype,"maxRows",2),n([(0,o.property)({type:Number,attribute:"max-length"})],s.prototype,"maxLength",2),n([(0,o.property)({type:Boolean})],s.prototype,"disabled",2),n([(0,o.property)({type:Boolean})],s.prototype,"pending",2),s=n([(0,m.customElement)("skdx-chat-composer","chat-composer","root")],s);0&&(module.exports={SkdxChatComposer});

package/dist/chat-composer/ChatComposer.d.cts

@@ -0,0 +1,125 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/button';
+import '@skdx/web-components/textarea';
+/** Which key combination sends the message from inside the textarea. */
+export type SkdxChatComposerSubmitKey = 'enter' | 'mod-enter' | 'none';
+/** What a `send` event carries: the composed message as it stood when the send was triggered. */
+export interface SkdxChatComposerSendDetail {
+    /** The composed message text as it stood when the send was triggered. */
+    value: string;
+}
+/** What a `value-change` event carries: the new text, the text it replaced, and what drove the edit. */
+export interface SkdxChatComposerValueChangeDetail {
+    /** The message text as it stands after the edit. */
+    value: string;
+    /** The text held immediately before, or `null` when nothing was. */
+    previousValue: string | null;
+    /** What drove the change: a key press, a pointer, or the application. */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+}
+/**
+ * Message composer block: an auto-growing Textarea and a send Button inside a
+ * field, with consumer-supplied attachment, leading, trailing and footer
+ * regions and configurable Enter-to-send behaviour.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-chat-composer` on the host, then `__attachments`, `__field`,
+ * `__leading`, `__textarea`, `__trailing`, `__send` and `__footer`.
+ * `data-state` on the host reads `pending` while a send is in flight.
+ *
+ * @example
+ * ```html
+ * <skdx-chat-composer
+ *   id="composer"
+ *   placeholder="Send a message…"
+ * ></skdx-chat-composer>
+ * <script>
+ *   document
+ *     .getElementById('composer')
+ *     .addEventListener('send', (event) => post(event.detail.value));
+ * </script>
+ * ```
+ *
+ * @slot leading - Controls rendered inside the field before the textarea, such as an attach button.
+ * @slot trailing - Controls rendered inside the field after the textarea, such as a model picker.
+ * @slot attachments - Attached files or chips rendered in a row above the field.
+ * @slot footer - Usage counters or hints rendered in a row below the field.
+ * @slot send-icon - Glyph rendered inside the send button in place of its text, making it icon-only.
+ * @fires value-change - Fires with the new text on every edit, including the clear that follows an uncontrolled send.
+ * @fires send - Fires with the message text when the send button is activated or the configured submit key is pressed.
+ */
+export declare class SkdxChatComposer extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * Current message text, for controlled usage paired with `value-change`.
+     * @default undefined — uncontrolled, seeded from `defaultValue`.
+     */
+    value?: string | undefined;
+    /**
+     * Initial message text for uncontrolled usage, read only on mount.
+     * @default ''
+     */
+    defaultValue: string;
+    /**
+     * Hint text shown in the empty textarea, rendered as the native placeholder.
+     * @default undefined — no placeholder text renders.
+     */
+    placeholder?: string | undefined;
+    /**
+     * Accessible name of the message textarea, read by assistive technology.
+     * @default 'Message'
+     */
+    label: string;
+    /**
+     * Text of the send button, and its accessible name when the `send-icon` slot is filled.
+     * @default 'Send'
+     */
+    sendLabel: string;
+    /**
+     * Which key sends from the textarea; the other Enter presses insert a newline.
+     * @default 'enter'
+     */
+    submitKey: SkdxChatComposerSubmitKey;
+    /**
+     * Caps how far the auto-growing textarea grows, in rows, before it scrolls.
+     * @default 8
+     */
+    maxRows: number;
+    /**
+     * Native `maxlength` of the textarea — the longest message it accepts.
+     * @default undefined — no upper bound on the message length.
+     */
+    maxLength?: number | undefined;
+    /**
+     * Disables the textarea and the send button, blocking every send path.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Marks a send in flight: the button is busy and inert, the textarea stays editable.
+     * @default false
+     */
+    pending: boolean;
+    /** What the textarea last held; outranked by `value` whenever the consumer controls it. */
+    private uncontrolledValue?;
+    /** The message text right now, controlled or not. */
+    private get currentValue();
+    /** Whether there is non-whitespace text to send. */
+    private get canSend();
+    connectedCallback(): void;
+    /** Whether the consumer supplied content for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    private region;
+    private setValue;
+    private readonly handleValueChange;
+    private readonly send;
+    private readonly handleKeyDown;
+    protected updated(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-chat-composer': SkdxChatComposer;
+    }
+}

package/dist/chat-composer/ChatComposer.d.ts

@@ -0,0 +1,125 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/button';
+import '@skdx/web-components/textarea';
+/** Which key combination sends the message from inside the textarea. */
+export type SkdxChatComposerSubmitKey = 'enter' | 'mod-enter' | 'none';
+/** What a `send` event carries: the composed message as it stood when the send was triggered. */
+export interface SkdxChatComposerSendDetail {
+    /** The composed message text as it stood when the send was triggered. */
+    value: string;
+}
+/** What a `value-change` event carries: the new text, the text it replaced, and what drove the edit. */
+export interface SkdxChatComposerValueChangeDetail {
+    /** The message text as it stands after the edit. */
+    value: string;
+    /** The text held immediately before, or `null` when nothing was. */
+    previousValue: string | null;
+    /** What drove the change: a key press, a pointer, or the application. */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+}
+/**
+ * Message composer block: an auto-growing Textarea and a send Button inside a
+ * field, with consumer-supplied attachment, leading, trailing and footer
+ * regions and configurable Enter-to-send behaviour.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-chat-composer` on the host, then `__attachments`, `__field`,
+ * `__leading`, `__textarea`, `__trailing`, `__send` and `__footer`.
+ * `data-state` on the host reads `pending` while a send is in flight.
+ *
+ * @example
+ * ```html
+ * <skdx-chat-composer
+ *   id="composer"
+ *   placeholder="Send a message…"
+ * ></skdx-chat-composer>
+ * <script>
+ *   document
+ *     .getElementById('composer')
+ *     .addEventListener('send', (event) => post(event.detail.value));
+ * </script>
+ * ```
+ *
+ * @slot leading - Controls rendered inside the field before the textarea, such as an attach button.
+ * @slot trailing - Controls rendered inside the field after the textarea, such as a model picker.
+ * @slot attachments - Attached files or chips rendered in a row above the field.
+ * @slot footer - Usage counters or hints rendered in a row below the field.
+ * @slot send-icon - Glyph rendered inside the send button in place of its text, making it icon-only.
+ * @fires value-change - Fires with the new text on every edit, including the clear that follows an uncontrolled send.
+ * @fires send - Fires with the message text when the send button is activated or the configured submit key is pressed.
+ */
+export declare class SkdxChatComposer extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * Current message text, for controlled usage paired with `value-change`.
+     * @default undefined — uncontrolled, seeded from `defaultValue`.
+     */
+    value?: string | undefined;
+    /**
+     * Initial message text for uncontrolled usage, read only on mount.
+     * @default ''
+     */
+    defaultValue: string;
+    /**
+     * Hint text shown in the empty textarea, rendered as the native placeholder.
+     * @default undefined — no placeholder text renders.
+     */
+    placeholder?: string | undefined;
+    /**
+     * Accessible name of the message textarea, read by assistive technology.
+     * @default 'Message'
+     */
+    label: string;
+    /**
+     * Text of the send button, and its accessible name when the `send-icon` slot is filled.
+     * @default 'Send'
+     */
+    sendLabel: string;
+    /**
+     * Which key sends from the textarea; the other Enter presses insert a newline.
+     * @default 'enter'
+     */
+    submitKey: SkdxChatComposerSubmitKey;
+    /**
+     * Caps how far the auto-growing textarea grows, in rows, before it scrolls.
+     * @default 8
+     */
+    maxRows: number;
+    /**
+     * Native `maxlength` of the textarea — the longest message it accepts.
+     * @default undefined — no upper bound on the message length.
+     */
+    maxLength?: number | undefined;
+    /**
+     * Disables the textarea and the send button, blocking every send path.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Marks a send in flight: the button is busy and inert, the textarea stays editable.
+     * @default false
+     */
+    pending: boolean;
+    /** What the textarea last held; outranked by `value` whenever the consumer controls it. */
+    private uncontrolledValue?;
+    /** The message text right now, controlled or not. */
+    private get currentValue();
+    /** Whether there is non-whitespace text to send. */
+    private get canSend();
+    connectedCallback(): void;
+    /** Whether the consumer supplied content for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    private region;
+    private setValue;
+    private readonly handleValueChange;
+    private readonly send;
+    private readonly handleKeyDown;
+    protected updated(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-chat-composer': SkdxChatComposer;
+    }
+}

package/dist/chat-composer/ChatComposer.js

@@ -0,0 +1,41 @@
+var p=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=(d,l,e,i)=>{for(var r=i>1?void 0:i?m(l,e):l,u=d.length-1,h;u>=0;u--)(h=d[u])&&(r=(i?h(l,e,r):h(r))||r);return i&&r&&p(l,e,r),r};import{html as o,LitElement as g,nothing as n}from"lit";import{property as s}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{emit as c}from"../internal/events.js";import{placeSlotted as b}from"../internal/slots.js";import"@skdx/web-components/button";import"@skdx/web-components/textarea";var y="data-skdx-chat-composer-generated",t=class extends g{constructor(){super(...arguments);this.defaultValue="";this.label="Message";this.sendLabel="Send";this.submitKey="enter";this.maxRows=8;this.disabled=!1;this.pending=!1;this.handleValueChange=e=>{e.stopPropagation(),this.setValue(e.detail,"keyboard")};this.send=()=>{let e=this.currentValue;this.disabled||this.pending||e.trim().length===0||(c(this,"send",{value:e}),this.value===void 0&&this.setValue("","programmatic"))};this.handleKeyDown=e=>{this.submitKey==="none"||e.key!=="Enter"||e.isComposing||!(this.submitKey==="enter"?!e.shiftKey:e.metaKey||e.ctrlKey)||(e.preventDefault(),this.send())}}createRenderRoot(){return this}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}get canSend(){return this.currentValue.trim().length>0}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.requestUpdate())}hasSlotted(e){return this.querySelector(`[slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-chat-composer__${e}`)}setValue(e,i){let r=this.currentValue;this.uncontrolledValue=e,this.requestUpdate(),c(this,"value-change",{value:e,previousValue:r,reason:i})}updated(){this.pending?this.setAttribute("data-state","pending"):this.removeAttribute("data-state");let e=this.querySelector(".skdx-chat-composer__textarea");e&&(e.value=this.currentValue),b(this,y,{attachments:this.region("attachments"),leading:this.region("leading"),trailing:this.region("trailing"),footer:this.region("footer"),"send-icon":this.region("send")},null)}render(){let e=this.currentValue,i=this.hasSlotted("send-icon");return o`
+      ${this.hasSlotted("attachments")?o`<div
+              class="skdx-chat-composer__attachments"
+              data-skdx-chat-composer-generated
+            ></div>`:n}
+      <div
+        class="skdx-chat-composer__field"
+        data-skdx-chat-composer-generated
+      >
+        ${this.hasSlotted("leading")?o`<div class="skdx-chat-composer__leading"></div>`:n}
+        <skdx-textarea
+          class="skdx-chat-composer__textarea"
+          aria-label=${this.label}
+          placeholder=${this.placeholder??n}
+          .value=${e}
+          auto-resize
+          min-rows="1"
+          max-rows=${this.maxRows}
+          maxlength=${this.maxLength??n}
+          ?disabled=${this.disabled}
+          @value-change=${this.handleValueChange}
+          @keydown=${this.handleKeyDown}
+        ></skdx-textarea>
+        ${this.hasSlotted("trailing")?o`<div class="skdx-chat-composer__trailing"></div>`:n}
+        <skdx-button
+          class="skdx-chat-composer__send"
+          type="button"
+          .variant=${"primary"}
+          .iconOnly=${i}
+          aria-label=${i?this.sendLabel:n}
+          ?loading=${this.pending}
+          ?disabled=${this.disabled||this.pending||!this.canSend}
+          @click=${this.send}
+          >${i?n:this.sendLabel}</skdx-button
+        >
+      </div>
+      ${this.hasSlotted("footer")?o`<div
+              class="skdx-chat-composer__footer"
+              data-skdx-chat-composer-generated
+            ></div>`:n}
+    `}};a([s({type:String})],t.prototype,"value",2),a([s({type:String,attribute:"default-value"})],t.prototype,"defaultValue",2),a([s({type:String})],t.prototype,"placeholder",2),a([s({type:String})],t.prototype,"label",2),a([s({type:String,attribute:"send-label"})],t.prototype,"sendLabel",2),a([s({type:String,attribute:"submit-key"})],t.prototype,"submitKey",2),a([s({type:Number,attribute:"max-rows"})],t.prototype,"maxRows",2),a([s({type:Number,attribute:"max-length"})],t.prototype,"maxLength",2),a([s({type:Boolean})],t.prototype,"disabled",2),a([s({type:Boolean})],t.prototype,"pending",2),t=a([v("skdx-chat-composer","chat-composer","root")],t);export{t as SkdxChatComposer};

package/dist/chat-composer/index.cjs

@@ -0,0 +1 @@
+"use strict";var a=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var h=(t,e)=>{for(var C in e)a(t,C,{get:e[C],enumerable:!0})},x=(t,e,C,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of S(e))!d.call(t,o)&&o!==C&&a(t,o,{get:()=>e[o],enumerable:!(p=r(e,o))||p.enumerable});return t};var k=t=>x(a({},"__esModule",{value:!0}),t);var s={};h(s,{SkdxChatComposer:()=>m.SkdxChatComposer});module.exports=k(s);var m=require("./ChatComposer.cjs");0&&(module.exports={SkdxChatComposer});

package/dist/chat-composer/index.d.cts

@@ -0,0 +1 @@
+export { SkdxChatComposer, type SkdxChatComposerSendDetail, type SkdxChatComposerSubmitKey, type SkdxChatComposerValueChangeDetail, } from './ChatComposer.cjs';

package/dist/chat-composer/index.d.ts

@@ -0,0 +1 @@
+export { SkdxChatComposer, type SkdxChatComposerSendDetail, type SkdxChatComposerSubmitKey, type SkdxChatComposerValueChangeDetail, } from './ChatComposer.js';

package/dist/chat-composer/index.js

@@ -0,0 +1 @@
+import{SkdxChatComposer as o}from"./ChatComposer.js";export{o as SkdxChatComposer};

package/dist/chat-message/ChatMessage.cjs

@@ -0,0 +1,26 @@
+"use strict";var h=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var f=(a,e)=>{for(var r in e)h(a,r,{get:e[r],enumerable:!0})},_=(a,e,r,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of p(e))!v.call(a,s)&&s!==r&&h(a,s,{get:()=>e[s],enumerable:!(d=c(e,s))||d.enumerable});return a};var b=a=>_(h({},"__esModule",{value:!0}),a),n=(a,e,r,d)=>{for(var s=d>1?void 0:d?c(e,r):e,u=a.length-1,m;u>=0;u--)(m=a[u])&&(s=(d?m(e,r,s):m(s))||s);return d&&s&&h(e,r,s),s};var k={};f(k,{SkdxChatMessage:()=>i});module.exports=b(k);var t=require("lit"),o=require("lit/decorators.js"),l=require("../internal/define.cjs"),g=require("../internal/slots.cjs"),y=require("@skdx/web-components/time");var $="data-skdx-chat-message-generated",i=class extends t.LitElement{createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","article"),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-chat-message__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"]`)!==null}updated(){this.setAttribute("data-sender",this.sender??""),this.status===void 0?this.removeAttribute("data-status"):this.setAttribute("data-status",this.status),this.status==="pending"?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy"),(0,g.placeSlotted)(this,$,{avatar:this.region("avatar"),attachments:this.region("attachments"),footer:this.region("footer"),actions:this.region("actions")},this.region("content"))}render(){let e=this.author!==void 0||this.timestamp!==void 0||this.statusLabel!==void 0;return t.html`
+      ${this.hasSlotted("avatar")?t.html`<div
+              class="skdx-chat-message__avatar"
+              aria-hidden="true"
+              data-skdx-chat-message-generated
+            ></div>`:t.nothing}
+      <div
+        class="skdx-chat-message__main"
+        data-skdx-chat-message-generated
+      >
+        ${e?t.html`<div class="skdx-chat-message__header">
+                ${this.author===void 0?t.nothing:t.html`<span class="skdx-chat-message__author">${this.author}</span>`}
+                ${this.timestamp===void 0?t.nothing:t.html`<skdx-time
+                        class="skdx-chat-message__time"
+                        relative
+                        .value=${this.timestamp}
+                        .now=${this.now}
+                      ></skdx-time>`}
+                ${this.statusLabel===void 0?t.nothing:t.html`<span class="skdx-chat-message__status">${this.statusLabel}</span>`}
+              </div>`:t.nothing}
+        <div class="skdx-chat-message__content"></div>
+        ${this.hasSlotted("attachments")?t.html`<div class="skdx-chat-message__attachments"></div>`:t.nothing}
+        ${this.hasSlotted("footer")?t.html`<div class="skdx-chat-message__footer"></div>`:t.nothing}
+        ${this.hasSlotted("actions")?t.html`<div class="skdx-chat-message__actions"></div>`:t.nothing}
+      </div>
+    `}};n([(0,o.property)({type:String})],i.prototype,"sender",2),n([(0,o.property)({type:String})],i.prototype,"author",2),n([(0,o.property)({type:String})],i.prototype,"timestamp",2),n([(0,o.property)({attribute:!1})],i.prototype,"now",2),n([(0,o.property)({type:String})],i.prototype,"status",2),n([(0,o.property)({type:String,attribute:"status-label"})],i.prototype,"statusLabel",2),i=n([(0,l.customElement)("skdx-chat-message","chat-message","root")],i);0&&(module.exports={SkdxChatMessage});

package/dist/chat-message/ChatMessage.d.cts

@@ -0,0 +1,74 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/time';
+/**
+ * One message in a conversation — assistant, support agent, human or system —
+ * with an author, avatar, timestamp, delivery status, content, attachments,
+ * actions and a footer, composing Time; the block parses nothing.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-chat-message` on the host, then `__avatar`, `__main`,
+ * `__header`, `__author`, `__time`, `__status`, `__content`, `__attachments`,
+ * `__footer` and `__actions`. `data-sender` and `data-status` sit on the host
+ * for the skin to read.
+ *
+ * @example
+ * ```html
+ * <skdx-chat-message
+ *   sender="assistant"
+ *   author="Assistant"
+ *   timestamp="2026-08-10T09:00:00Z"
+ * >
+ *   <skdx-avatar slot="avatar" name="Assistant"></skdx-avatar>
+ *   Here is the summary you asked for.
+ *   <skdx-button slot="actions">Copy</skdx-button>
+ * </skdx-chat-message>
+ * ```
+ *
+ * @slot - The message content: markdown output, code, citations or tool results.
+ * @slot avatar - Decorative avatar rendered beside the message, always `aria-hidden`.
+ * @slot attachments - Files, links or previews attached to the message, below the content.
+ * @slot actions - Controls such as copy, regenerate or react, below the footer.
+ * @slot footer - Citations, token counts or other metadata, below the content.
+ */
+export declare class SkdxChatMessage extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** Who sent the message, written to `data-sender`; the skin aligns a user message to the end. */
+    sender: 'user' | 'assistant' | 'system' | (string & {});
+    /**
+     * Name of the person, model or system that sent the message, rendered as visible text.
+     * @default undefined — no author region renders.
+     */
+    author?: string | undefined;
+    /**
+     * Instant the message was sent, rendered through a composed Time.
+     * @default undefined — no time region renders.
+     */
+    timestamp?: Date | string | undefined;
+    /**
+     * Reference instant the timestamp's relative label renders against, forwarded to Time.
+     * @default undefined — read once at render, since this block starts no timer.
+     */
+    now?: Date | number | undefined;
+    /**
+     * Delivery state, written to `data-status`; `'pending'` also sets `aria-busy` on the host.
+     * @default undefined — no delivery state is written.
+     */
+    status?: 'pending' | 'sent' | 'error' | (string & {}) | undefined;
+    /**
+     * Visible text for the delivery state, in the app's own wording such as "Sending…".
+     * @default undefined — no status region renders.
+     */
+    statusLabel?: string | undefined;
+    connectedCallback(): void;
+    private region;
+    /** Whether the consumer supplied anything for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    protected updated(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-chat-message': SkdxChatMessage;
+    }
+}

package/dist/chat-message/ChatMessage.d.ts

@@ -0,0 +1,74 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/time';
+/**
+ * One message in a conversation — assistant, support agent, human or system —
+ * with an author, avatar, timestamp, delivery status, content, attachments,
+ * actions and a footer, composing Time; the block parses nothing.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-chat-message` on the host, then `__avatar`, `__main`,
+ * `__header`, `__author`, `__time`, `__status`, `__content`, `__attachments`,
+ * `__footer` and `__actions`. `data-sender` and `data-status` sit on the host
+ * for the skin to read.
+ *
+ * @example
+ * ```html
+ * <skdx-chat-message
+ *   sender="assistant"
+ *   author="Assistant"
+ *   timestamp="2026-08-10T09:00:00Z"
+ * >
+ *   <skdx-avatar slot="avatar" name="Assistant"></skdx-avatar>
+ *   Here is the summary you asked for.
+ *   <skdx-button slot="actions">Copy</skdx-button>
+ * </skdx-chat-message>
+ * ```
+ *
+ * @slot - The message content: markdown output, code, citations or tool results.
+ * @slot avatar - Decorative avatar rendered beside the message, always `aria-hidden`.
+ * @slot attachments - Files, links or previews attached to the message, below the content.
+ * @slot actions - Controls such as copy, regenerate or react, below the footer.
+ * @slot footer - Citations, token counts or other metadata, below the content.
+ */
+export declare class SkdxChatMessage extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** Who sent the message, written to `data-sender`; the skin aligns a user message to the end. */
+    sender: 'user' | 'assistant' | 'system' | (string & {});
+    /**
+     * Name of the person, model or system that sent the message, rendered as visible text.
+     * @default undefined — no author region renders.
+     */
+    author?: string | undefined;
+    /**
+     * Instant the message was sent, rendered through a composed Time.
+     * @default undefined — no time region renders.
+     */
+    timestamp?: Date | string | undefined;
+    /**
+     * Reference instant the timestamp's relative label renders against, forwarded to Time.
+     * @default undefined — read once at render, since this block starts no timer.
+     */
+    now?: Date | number | undefined;
+    /**
+     * Delivery state, written to `data-status`; `'pending'` also sets `aria-busy` on the host.
+     * @default undefined — no delivery state is written.
+     */
+    status?: 'pending' | 'sent' | 'error' | (string & {}) | undefined;
+    /**
+     * Visible text for the delivery state, in the app's own wording such as "Sending…".
+     * @default undefined — no status region renders.
+     */
+    statusLabel?: string | undefined;
+    connectedCallback(): void;
+    private region;
+    /** Whether the consumer supplied anything for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    protected updated(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-chat-message': SkdxChatMessage;
+    }
+}

package/dist/chat-message/ChatMessage.js

@@ -0,0 +1,26 @@
+var c=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var a=(o,t,h,d)=>{for(var r=d>1?void 0:d?l(t,h):t,u=o.length-1,m;u>=0;u--)(m=o[u])&&(r=(d?m(t,h,r):m(r))||r);return d&&r&&c(t,h,r),r};import{html as s,LitElement as g,nothing as i}from"lit";import{property as n}from"lit/decorators.js";import{customElement as p}from"../internal/define.js";import{placeSlotted as v}from"../internal/slots.js";import"@skdx/web-components/time";var f="data-skdx-chat-message-generated",e=class extends g{createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","article"),queueMicrotask(()=>this.requestUpdate())}region(t){return this.querySelector(`.skdx-chat-message__${t}`)}hasSlotted(t){return this.querySelector(`[slot="${t}"]`)!==null}updated(){this.setAttribute("data-sender",this.sender??""),this.status===void 0?this.removeAttribute("data-status"):this.setAttribute("data-status",this.status),this.status==="pending"?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy"),v(this,f,{avatar:this.region("avatar"),attachments:this.region("attachments"),footer:this.region("footer"),actions:this.region("actions")},this.region("content"))}render(){let t=this.author!==void 0||this.timestamp!==void 0||this.statusLabel!==void 0;return s`
+      ${this.hasSlotted("avatar")?s`<div
+              class="skdx-chat-message__avatar"
+              aria-hidden="true"
+              data-skdx-chat-message-generated
+            ></div>`:i}
+      <div
+        class="skdx-chat-message__main"
+        data-skdx-chat-message-generated
+      >
+        ${t?s`<div class="skdx-chat-message__header">
+                ${this.author===void 0?i:s`<span class="skdx-chat-message__author">${this.author}</span>`}
+                ${this.timestamp===void 0?i:s`<skdx-time
+                        class="skdx-chat-message__time"
+                        relative
+                        .value=${this.timestamp}
+                        .now=${this.now}
+                      ></skdx-time>`}
+                ${this.statusLabel===void 0?i:s`<span class="skdx-chat-message__status">${this.statusLabel}</span>`}
+              </div>`:i}
+        <div class="skdx-chat-message__content"></div>
+        ${this.hasSlotted("attachments")?s`<div class="skdx-chat-message__attachments"></div>`:i}
+        ${this.hasSlotted("footer")?s`<div class="skdx-chat-message__footer"></div>`:i}
+        ${this.hasSlotted("actions")?s`<div class="skdx-chat-message__actions"></div>`:i}
+      </div>
+    `}};a([n({type:String})],e.prototype,"sender",2),a([n({type:String})],e.prototype,"author",2),a([n({type:String})],e.prototype,"timestamp",2),a([n({attribute:!1})],e.prototype,"now",2),a([n({type:String})],e.prototype,"status",2),a([n({type:String,attribute:"status-label"})],e.prototype,"statusLabel",2),e=a([p("skdx-chat-message","chat-message","root")],e);export{e as SkdxChatMessage};

package/dist/chat-message/index.cjs

@@ -0,0 +1 @@
+"use strict";var s=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var h=(a,e)=>{for(var r in e)s(a,r,{get:e[r],enumerable:!0})},k=(a,e,r,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of f(e))!g.call(a,o)&&o!==r&&s(a,o,{get:()=>e[o],enumerable:!(t=d(e,o))||t.enumerable});return a};var m=a=>k(s({},"__esModule",{value:!0}),a);var p={};h(p,{SkdxChatMessage:()=>x.SkdxChatMessage});module.exports=m(p);var x=require("./ChatMessage.cjs");0&&(module.exports={SkdxChatMessage});

package/dist/chat-message/index.d.cts

@@ -0,0 +1 @@
+export { SkdxChatMessage } from './ChatMessage.cjs';

package/dist/chat-message/index.d.ts

@@ -0,0 +1 @@
+export { SkdxChatMessage } from './ChatMessage.js';

package/dist/chat-message/index.js

@@ -0,0 +1 @@
+import{SkdxChatMessage as o}from"./ChatMessage.js";export{o as SkdxChatMessage};

package/dist/comment/Comment.cjs

@@ -0,0 +1,26 @@
+"use strict";var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var _=Object.prototype.hasOwnProperty;var g=(i,e)=>{for(var s in e)m(i,s,{get:e[s],enumerable:!0})},k=(i,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of v(e))!_.call(i,a)&&a!==s&&m(i,a,{get:()=>e[a],enumerable:!(r=h(e,a))||r.enumerable});return i};var x=i=>k(m({},"__esModule",{value:!0}),i),d=(i,e,s,r)=>{for(var a=r>1?void 0:r?h(e,s):e,c=i.length-1,l;c>=0;c--)(l=i[c])&&(a=(r?l(e,s,a):l(a))||a);return r&&a&&m(e,s,a),a};var b={};g(b,{SkdxComment:()=>n});module.exports=x(b);var t=require("lit"),o=require("lit/decorators.js"),p=require("../internal/define.cjs"),u=require("../internal/slots.cjs"),E=require("@skdx/web-components/time");var $="data-skdx-comment-generated",n=class extends t.LitElement{constructor(){super(...arguments);this.edited=!1;this.editedLabel="Edited"}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","article"),queueMicrotask(()=>this.requestUpdate())}region(s){return this.querySelector(`.skdx-comment__${s}`)}hasSlotted(s){return this.querySelector(`[slot="${s}"]`)!==null}updated(){(0,u.placeSlotted)(this,$,{avatar:this.region("avatar"),metadata:this.region("metadata"),attachments:this.region("attachments"),actions:this.region("actions")},this.region("content"))}render(){return t.html`
+      ${this.hasSlotted("avatar")?t.html`<div
+              class="skdx-comment__avatar"
+              aria-hidden="true"
+              data-skdx-comment-generated
+            ></div>`:t.nothing}
+      <div
+        class="skdx-comment__main"
+        data-skdx-comment-generated
+      >
+        <div class="skdx-comment__header">
+          <span class="skdx-comment__author">${this.author??""}</span>
+          ${this.hasSlotted("metadata")?t.html`<span class="skdx-comment__metadata"></span>`:t.nothing}
+          ${this.timestamp===void 0?t.nothing:t.html`<skdx-time
+                  class="skdx-comment__time"
+                  relative
+                  .value=${this.timestamp}
+                  .now=${this.now}
+                ></skdx-time>`}
+          ${this.edited?t.html`<span class="skdx-comment__edited">${this.editedLabel}</span>`:t.nothing}
+        </div>
+        <div class="skdx-comment__content"></div>
+        ${this.hasSlotted("attachments")?t.html`<div class="skdx-comment__attachments"></div>`:t.nothing}
+        ${this.hasSlotted("actions")?t.html`<div class="skdx-comment__actions"></div>`:t.nothing}
+      </div>
+    `}};d([(0,o.property)({type:String})],n.prototype,"author",2),d([(0,o.property)({type:String})],n.prototype,"timestamp",2),d([(0,o.property)({attribute:!1})],n.prototype,"now",2),d([(0,o.property)({type:Boolean})],n.prototype,"edited",2),d([(0,o.property)({type:String,attribute:"edited-label"})],n.prototype,"editedLabel",2),n=d([(0,p.customElement)("skdx-comment","comment","root")],n);0&&(module.exports={SkdxComment});