@luzmo/lucero 1.0.1-alpha.40 → 1.0.1-alpha.43

package/components/chat-message/index.cjs

@@ -0,0 +1,80 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("lit"),s=require("lit/decorators.js"),d=require("lit/directives/class-map.js"),h=require("../base-5nDSSNeT.cjs"),l=require("../language-resolution-EUER43cg.cjs"),u=require("../sized-mixin-DcvJLFeo.cjs"),p=":host{display:flex;font-family:var(--luzmo-chat-message-font-family, var(--chat-message-font-family));font-size:var(--luzmo-chat-message-font-size, var(--chat-message-font-size));line-height:var(--luzmo-chat-message-line-height, var(--chat-message-line-height));color:var(--highcontrast-chat-message-text-color, var(--luzmo-chat-message-text-color, var(--chat-message-text-color)))}:host([position=left]){justify-content:flex-start}:host([position=right]){justify-content:flex-end}:host([position=middle]){justify-content:center}.container{display:flex;gap:var(--luzmo-chat-message-avatar-gap, var(--chat-message-avatar-gap));max-width:var(--luzmo-chat-message-max-width, var(--chat-message-max-width))}.position-left{flex-direction:row}.position-left .avatar-wrapper{order:0}.position-left .message-wrapper{order:1;align-items:flex-start}.position-left .message{border-top-left-radius:var(--luzmo-chat-message-message-border-radius-start, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius-bottom-start, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)))}.position-right{flex-direction:row-reverse}.position-right .avatar-wrapper{order:0}.position-right .message-wrapper{order:1;align-items:flex-end}.position-right .header{justify-content:flex-end}.position-right .message{border-top-right-radius:var(--luzmo-chat-message-message-border-radius-end, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius-bottom-end, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)))}.position-right .actions-outside{justify-content:flex-end}.position-middle .message-wrapper{align-items:center}.position-middle .header,.position-middle .actions-outside{justify-content:center}.avatar-wrapper{flex-shrink:0;display:flex;align-items:flex-start;margin-top:var(--luzmo-chat-message-avatar-margin-top, var(--chat-message-avatar-margin-top, 0));margin-bottom:var(--luzmo-chat-message-avatar-margin-bottom, var(--chat-message-avatar-margin-bottom, 0))}:host([data-in-group]) .avatar-wrapper{min-width:var(--chat-message-avatar-size, var(--luzmo-avatar-size, var(--avatar-size, 32px)));flex-basis:var(--chat-message-avatar-size, var(--luzmo-avatar-size, var(--avatar-size, 32px)))}:host([data-in-group]:not([data-group-square-corner])) .message{border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important;border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important;border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important;border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important}.avatar-top .avatar-wrapper{align-self:flex-start}.avatar-middle .avatar-wrapper{align-self:center}.avatar-bottom .avatar-wrapper{align-self:flex-end}.avatar-middle .message-wrapper,.avatar-bottom .message-wrapper{position:relative}.avatar-middle .actions-outside,.avatar-bottom .actions-outside{position:absolute;top:100%;margin-top:var(--luzmo-chat-message-gap, var(--chat-message-gap))}.avatar-middle.position-left .actions-outside,.avatar-bottom.position-left .actions-outside{left:0}.avatar-middle.position-right .actions-outside,.avatar-bottom.position-right .actions-outside{right:0}.avatar-bottom.position-left .message{--luzmo-chat-message-message-border-radius-bottom-start: 0}.avatar-bottom.position-right .message{--luzmo-chat-message-message-border-radius-bottom-end: 0}.message-wrapper{display:flex;flex-direction:column;gap:var(--luzmo-chat-message-gap, var(--chat-message-gap));min-width:0}.message{position:relative;padding:var(--luzmo-chat-message-content-vertical-padding, var(--chat-message-content-vertical-padding)) var(--luzmo-chat-message-content-horizontal-padding, var(--chat-message-content-horizontal-padding));border-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-width:var(--luzmo-chat-message-message-border-width, var(--chat-message-message-border-width));border-style:solid;border-color:var(--highcontrast-chat-message-message-border-color, var(--luzmo-chat-message-message-border-color, var(--chat-message-message-border-color)));background-color:var(--highcontrast-chat-message-message-background-color, var(--luzmo-chat-message-message-background-color, var(--chat-message-message-background-color)));box-shadow:var(--luzmo-chat-message-message-shadow, var(--chat-message-message-shadow));color:var(--luzmo-chat-message-message-text-color, var(--chat-message-message-text-color));word-wrap:break-word;overflow-wrap:break-word}.message .header,.message .user-name,.message .datetime,.message .actions-inside{color:inherit}.message.squared-top-left{border-top-left-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important}.message.squared-top-right{border-top-right-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important}.message.squared-bottom-left{border-bottom-left-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important}.message.squared-bottom-right{border-bottom-right-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important}:host([data-group-square-corner=top-left]) .message{border-top-left-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important;border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}:host([data-group-square-corner=top-right]) .message{border-top-right-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important;border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}:host([data-group-square-corner=bottom-left]) .message{border-bottom-left-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important;border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}:host([data-group-square-corner=bottom-right]) .message{border-bottom-right-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important;border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}.header{display:flex;align-items:baseline;gap:var(--luzmo-chat-message-header-gap, var(--chat-message-header-gap));margin-bottom:var(--luzmo-chat-message-header-margin-bottom, var(--chat-message-header-margin-bottom));flex-wrap:wrap}:host([meta=outside]) .header{margin-bottom:0}.user-name{font-weight:var(--luzmo-chat-message-user-name-font-weight, var(--chat-message-user-name-font-weight));color:var(--luzmo-chat-message-user-name-color, var(--chat-message-user-name-color))}.datetime{font-size:var(--luzmo-chat-message-datetime-font-size, var(--chat-message-datetime-font-size));color:var(--luzmo-chat-message-datetime-color, var(--chat-message-datetime-color));opacity:var(--luzmo-chat-message-datetime-opacity, var(--chat-message-datetime-opacity))}.content{display:block}.actions{display:flex;gap:var(--luzmo-chat-message-actions-gap, var(--chat-message-actions-gap));align-items:center}.actions-inside{margin-top:var(--luzmo-chat-message-actions-margin-top, var(--chat-message-actions-margin-top))}.actions-outside{opacity:var(--luzmo-chat-message-actions-opacity, var(--chat-message-actions-opacity));transition:opacity var(--luzmo-chat-message-animation-duration, var(--chat-message-animation-duration)) ease-in-out}:host(:hover) .actions-outside,:host(:focus-within) .actions-outside{opacity:var(--luzmo-chat-message-actions-opacity-hover, var(--chat-message-actions-opacity-hover))}::slotted([slot=avatar]){display:block}::slotted([slot=actions]){display:inline-flex;align-items:center}.extra-actions{position:absolute;top:var(--luzmo-chat-message-extra-actions-top, var(--chat-message-extra-actions-top));right:var(--luzmo-chat-message-extra-actions-right, var(--chat-message-extra-actions-right));bottom:var(--luzmo-chat-message-extra-actions-bottom, var(--chat-message-extra-actions-bottom));left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left));padding:var(--luzmo-chat-message-extra-actions-vertical-padding, var(--chat-message-extra-actions-vertical-padding)) var(--luzmo-chat-message-extra-actions-horizontal-padding, var(--chat-message-extra-actions-horizontal-padding));opacity:0;pointer-events:none;transition:opacity var(--luzmo-chat-message-animation-duration, var(--chat-message-animation-duration)) ease-in-out;z-index:10}:host([position=left]) .extra-actions{left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left), var(--luzmo-chat-message-content-horizontal-padding, var(--chat-message-content-horizontal-padding)));right:var(--luzmo-chat-message-extra-actions-right, var(--chat-message-extra-actions-right), auto)}:host([size=m]) .extra-actions{top:calc(-1 * var(--luzmo-spacing-5))}:host([size=m][position=right]) .extra-actions{left:calc(-1 * var(--luzmo-spacing-5));right:var(--luzmo-chat-message-extra-actions-right, var(--chat-message-extra-actions-right), auto)}:host([size=m][position=middle]) .extra-actions{right:calc(-1 * var(--luzmo-spacing-5));left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left), auto)}:host([size=m][position=left]) .extra-actions{right:calc(-1 * var(--luzmo-spacing-5));left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left), auto)}.extra-actions-wrapper{display:inline-flex;align-items:center;background-color:var(--luzmo-chat-message-extra-actions-wrapper-background-color, var(--luzmo-background-color));border-radius:var(--luzmo-chat-message-extra-actions-wrapper-border-radius, var(--luzmo-border-radius));border-width:var(--luzmo-chat-message-extra-actions-wrapper-border-width, var(--luzmo-border-width));border-style:var(--luzmo-chat-message-extra-actions-wrapper-border-style, solid);border-color:var(--luzmo-chat-message-extra-actions-wrapper-border, var(--luzmo-border-color));padding:var(--luzmo-chat-message-extra-actions-wrapper-vertical-padding, var(--chat-message-extra-actions-wrapper-vertical-padding)) var(--luzmo-chat-message-extra-actions-wrapper-horizontal-padding, var(--chat-message-extra-actions-wrapper-horizontal-padding));position:var(--luzmo-chat-message-extra-actions-wrapper-position, var(--chat-message-extra-actions-wrapper-position), relative);top:var(--luzmo-chat-message-extra-actions-wrapper-top, var(--chat-message-extra-actions-wrapper-top));right:var(--luzmo-chat-message-extra-actions-wrapper-right, var(--chat-message-extra-actions-wrapper-right));bottom:var(--luzmo-chat-message-extra-actions-wrapper-bottom, var(--chat-message-extra-actions-wrapper-bottom));left:var(--luzmo-chat-message-extra-actions-wrapper-left, var(--chat-message-extra-actions-wrapper-left))}:host(:hover) .extra-actions,:host(:focus-within) .extra-actions{opacity:1;pointer-events:auto}:host(:active) .extra-actions{opacity:1;pointer-events:auto}::slotted([slot=extra-actions]){display:inline-flex;align-items:center}@media (forced-colors: active){:host{--highcontrast-chat-message-message-background-color: Canvas;--highcontrast-chat-message-message-border-color: CanvasText;--highcontrast-chat-message-text-color: CanvasText}}:host{--chat-message-message-border-width: var(--luzmo-border-width);--chat-message-message-border-color: var(--luzmo-border-color);--chat-message-message-background-color: var( --luzmo-background-color-highlight );--chat-message-message-shadow: 0 1px 2px rgba(var(--luzmo-border-color-rgb), .05);--chat-message-message-text-color: inherit;--chat-message-font-family: var(--luzmo-font-family);--chat-message-font-size: var(--luzmo-font-size);--chat-message-line-height: 1.5;--chat-message-text-color: var(--luzmo-font-color);--chat-message-header-gap: var(--luzmo-spacing-2);--chat-message-header-margin-bottom: var(--luzmo-spacing-1);--chat-message-user-name-font-weight: var(--luzmo-font-weight-bold, 600);--chat-message-user-name-color: var(--luzmo-font-color);--chat-message-datetime-font-size: .75em;--chat-message-datetime-color: var(--luzmo-font-color-secondary);--chat-message-datetime-opacity: .7;--chat-message-actions-gap: var(--luzmo-spacing-1);--chat-message-actions-margin-top: var(--luzmo-spacing-2);--chat-message-actions-opacity: 1;--chat-message-actions-opacity-hover: 1;--chat-message-animation-duration: var(--luzmo-animation-duration, .15s);--chat-message-gap: var(--luzmo-spacing-4);--chat-message-avatar-gap: var(--luzmo-spacing-3);--chat-message-max-width: 80%;--chat-message-content-vertical-padding: var(--luzmo-spacing-3);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--chat-message-primary-background-color: var(--luzmo-primary);--chat-message-primary-border-color: var(--luzmo-primary);--chat-message-primary-text-color: var(--luzmo-primary-inverse-color);--chat-message-primary-text-color-outline: var(--luzmo-primary);--chat-message-secondary-background-color: var(--luzmo-secondary);--chat-message-secondary-border-color: var(--luzmo-secondary);--chat-message-secondary-text-color: var(--luzmo-secondary-inverse-color);--chat-message-secondary-text-color-outline: var(--luzmo-secondary)}:host([position=middle]){--chat-message-max-width: 90%}:host{--chat-message-message-border-radius: var(--luzmo-border-radius-xl);--chat-message-squared-corner-radius: var(--luzmo-border-radius-s);--chat-message-gap: var(--luzmo-spacing-2);--chat-message-avatar-gap: var(--luzmo-spacing-4);--chat-message-max-width: 80%;--chat-message-content-vertical-padding: var(--luzmo-spacing-4);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([size=xs]){--chat-message-message-border-radius: var(--luzmo-border-radius);--chat-message-squared-corner-radius: var(--luzmo-border-radius-xs);--chat-message-font-size: 11px;--chat-message-content-vertical-padding: var(--luzmo-spacing-3);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--chat-message-gap: var(--luzmo-spacing-1);--chat-message-avatar-gap: var(--luzmo-spacing-3)}:host([size=s]){--chat-message-message-border-radius: var(--luzmo-border-radius-l);--chat-message-squared-corner-radius: var(--luzmo-border-radius-xs);--chat-message-font-size: 12px;--chat-message-content-vertical-padding: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--chat-message-content-horizontal-padding: var(--luzmo-spacing-4);--chat-message-gap: var(--luzmo-spacing-2);--chat-message-avatar-gap: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=l]){--chat-message-message-border-radius: var(--luzmo-border-radius-xl);--chat-message-squared-corner-radius: var(--luzmo-border-radius-s);--chat-message-font-size: 16px;--chat-message-content-vertical-padding: var(--luzmo-spacing-5);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--chat-message-gap: var(--luzmo-spacing-3);--chat-message-avatar-gap: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([size=xl]){--chat-message-message-border-radius: var(--luzmo-border-radius-xl);--chat-message-squared-corner-radius: var(--luzmo-border-radius-s);--chat-message-font-size: 18px;--chat-message-content-vertical-padding: var(--luzmo-spacing-5);--chat-message-content-horizontal-padding: var(--luzmo-spacing-5);--chat-message-gap: var(--luzmo-spacing-4);--chat-message-avatar-gap: var(--luzmo-spacing-5)}:host([treatment=fill]){--chat-message-message-shadow: none}:host([variant=default][treatment=fill]){--chat-message-message-border-width: 0}:host([variant=primary][treatment=fill]){--chat-message-message-background-color: var( --chat-message-primary-background-color );--chat-message-message-border-color: var(--chat-message-primary-border-color);--chat-message-message-text-color: var(--chat-message-primary-text-color)}:host([variant=secondary][treatment=fill]){--chat-message-message-background-color: var( --chat-message-secondary-background-color );--chat-message-message-border-color: var( --chat-message-secondary-border-color );--chat-message-message-text-color: var(--chat-message-secondary-text-color)}:host([treatment=outline]){--chat-message-message-background-color: transparent;--chat-message-message-shadow: none}:host([variant=primary][treatment=outline]){--chat-message-message-border-color: var(--chat-message-primary-border-color);--chat-message-message-text-color: var( --chat-message-primary-text-color-outline )}:host([variant=secondary][treatment=outline]){--chat-message-message-border-color: var( --chat-message-secondary-border-color );--chat-message-message-text-color: var( --chat-message-secondary-text-color-outline )}:host([quiet]){--chat-message-message-background-color: transparent;--chat-message-message-border-color: transparent;--chat-message-message-border-width: 0;--chat-message-message-shadow: none;--chat-message-content-vertical-padding: 0;--chat-message-content-horizontal-padding: 0}:host([quiet][avatar-placement=top]){--chat-message-avatar-margin-top: calc( (var(--chat-message-line-height) - 1) / 2 * 1em )}:host([quiet][avatar-placement=bottom]){--chat-message-avatar-margin-bottom: calc( (var(--chat-message-line-height) - 1) / 2 * -1em )}:host([quiet][variant=primary]){--chat-message-primary-background-color: transparent;--chat-message-primary-border-color: transparent;--chat-message-primary-text-color: var(--luzmo-primary)}:host([quiet][variant=secondary]){--chat-message-secondary-background-color: transparent;--chat-message-secondary-border-color: transparent;--chat-message-secondary-text-color: var(--luzmo-secondary)}:host{--chat-message-extra-actions-top: var( --luzmo-chat-message-content-vertical-padding, var(--chat-message-content-vertical-padding) );--chat-message-extra-actions-right: var( --luzmo-chat-message-content-horizontal-padding, var(--chat-message-content-horizontal-padding) );--chat-message-extra-actions-bottom: auto;--chat-message-extra-actions-left: auto;--chat-message-extra-actions-vertical-padding: 0;--chat-message-extra-actions-horizontal-padding: 0;--chat-message-extra-actions-wrapper-background-color: var( --luzmo-border-color );--chat-message-extra-actions-wrapper-border-radius: var( --luzmo-border-radius );--chat-message-extra-actions-wrapper-border: none;--chat-message-extra-actions-wrapper-vertical-padding: var(--luzmo-spacing-1);--chat-message-extra-actions-wrapper-horizontal-padding: var( --luzmo-spacing-1 );--chat-message-extra-actions-wrapper-position: relative;--chat-message-extra-actions-wrapper-top: auto;--chat-message-extra-actions-wrapper-right: auto;--chat-message-extra-actions-wrapper-bottom: auto;--chat-message-extra-actions-wrapper-left: auto}";var v=Object.defineProperty,r=(m,a,o,n)=>{for(var i=void 0,c=m.length-1,g;c>=0;c--)(g=m[c])&&(i=g(a,o,i)||i);return i&&v(a,o,i),i};class t extends u.SizedMixin(h.LuzmoElement,{validSizes:["xs","s","m","l","xl"],defaultSize:"m"}){constructor(){super(...arguments),this.position="right",this.variant="default",this.treatment="fill",this.quiet=!1,this.meta="inside",this.actionsPosition="outside",this.avatarPlacement="top",this._hasAvatar=!1,this._hasActions=!1,this._hasExtraActions=!1,this.languageResolver=new l.LanguageResolutionController(this)}static get styles(){return[e.unsafeCSS(p)]}_handleAvatarSlotChange(a){const o=a.target;this._hasAvatar=o.assignedNodes().length>0}_handleActionsSlotChange(a){const o=a.target;this._hasActions=o.assignedNodes().length>0}_handleExtraActionsSlotChange(a){const o=a.target;this._hasExtraActions=o.assignedNodes().length>0}get formattedDatetime(){if(this.datetime)try{const a=new Date(this.datetime);if(Number.isNaN(a.getTime()))return;const o=this.datetimeFormatOptions||{hour:"numeric",minute:"numeric"};return new Intl.DateTimeFormat(this.languageResolver.language||void 0,o).format(a)}catch{return}}get squaredCorners(){const a={topLeft:!1,topRight:!1,bottomLeft:!1,bottomRight:!1};if(this.position==="left")switch(this.avatarPlacement){case"top":{a.topLeft=!0;break}case"middle":break;case"bottom":{a.bottomLeft=!0;break}}else if(this.position==="right")switch(this.avatarPlacement){case"top":{a.topRight=!0;break}case"middle":break;case"bottom":{a.bottomRight=!0;break}}return a}renderMeta(){return!this.name&&!this.formattedDatetime?e.nothing:e.html`
+      <div class="header" part="header">
+        ${this.name?e.html`<span class="user-name">${this.name}</span>`:e.nothing}
+        ${this.formattedDatetime?e.html`<time class="datetime" datetime=${this.datetime||""}>
+              ${this.formattedDatetime}
+            </time>`:e.nothing}
+      </div>
+    `}renderActions(a){return this.actionsPosition!==a?e.nothing:this._hasActions?e.html`
+      <div class="actions actions-${a}" part="actions">
+        <slot
+          name="actions"
+          @slotchange=${this._handleActionsSlotChange}
+        ></slot>
+      </div>
+    `:e.html`<slot
+        name="actions"
+        @slotchange=${this._handleActionsSlotChange}
+      ></slot>`}render(){const a=this.squaredCorners,o={message:!0,"squared-top-left":a.topLeft,"squared-top-right":a.topRight,"squared-bottom-left":a.bottomLeft,"squared-bottom-right":a.bottomRight,"has-avatar":this._hasAvatar},n={container:!0,[`position-${this.position}`]:!0,[`avatar-${this.avatarPlacement}`]:!0};return e.html`
+      <div class=${d.classMap(n)}>
+        <div class="avatar-wrapper">
+          <slot
+            name="avatar"
+            @slotchange=${this._handleAvatarSlotChange}
+          ></slot>
+        </div>
+
+        <div class="message-wrapper">
+          ${this.meta==="outside"?this.renderMeta():e.nothing}
+
+          <div class=${d.classMap(o)} part="message">
+            ${this.meta==="inside"?this.renderMeta():e.nothing}
+
+            <div class="content" part="content">
+              <slot name="message">
+                <slot></slot>
+              </slot>
+            </div>
+
+            ${this.renderActions("inside")}
+            ${this._hasExtraActions?e.html`
+                  <div class="extra-actions" part="extra-actions">
+                    <div
+                      class="extra-actions-wrapper"
+                      part="extra-actions-wrapper"
+                    >
+                      <slot
+                        name="extra-actions"
+                        @slotchange=${this._handleExtraActionsSlotChange}
+                      ></slot>
+                    </div>
+                  </div>
+                `:e.html`
+                  <slot
+                    name="extra-actions"
+                    @slotchange=${this._handleExtraActionsSlotChange}
+                  ></slot>
+                `}
+          </div>
+
+          ${this.renderActions("outside")}
+        </div>
+      </div>
+    `}}r([s.property({type:String,reflect:!0})],t.prototype,"position");r([s.property({type:String,reflect:!0})],t.prototype,"variant");r([s.property({type:String,reflect:!0})],t.prototype,"treatment");r([s.property({type:Boolean,reflect:!0})],t.prototype,"quiet");r([s.property({type:String,attribute:"name"})],t.prototype,"name");r([s.property({type:String,attribute:"datetime"})],t.prototype,"datetime");r([s.property({type:Object,attribute:"datetime-format-options"})],t.prototype,"datetimeFormatOptions");r([s.property({type:String,reflect:!0})],t.prototype,"meta");r([s.property({type:String,reflect:!0,attribute:"actions"})],t.prototype,"actionsPosition");r([s.property({type:String,reflect:!0,attribute:"avatar-placement"})],t.prototype,"avatarPlacement");r([s.state()],t.prototype,"_hasAvatar");r([s.state()],t.prototype,"_hasActions");r([s.state()],t.prototype,"_hasExtraActions");customElements.get("luzmo-chat-message")||customElements.define("luzmo-chat-message",t);exports.LuzmoChatMessage=t;

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

@@ -0,0 +1,8 @@
+import { LuzmoChatMessage } from './chat-message';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-chat-message': LuzmoChatMessage;
+    }
+}
+export { LuzmoChatMessage } from './chat-message';
+export type { ChatMessageActions, ChatMessageAvatarPlacement, ChatMessageMeta, ChatMessagePosition, ChatMessageTreatment, ChatMessageVariant } from './chat-message';

package/components/chat-message/index.js

@@ -0,0 +1,254 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { unsafeCSS as p, nothing as c, html as o } from "lit";
+import { property as s, state as l } from "lit/decorators.js";
+import { classMap as h } from "lit/directives/class-map.js";
+import { a as v } from "../base-CdYjmV_8.js";
+import { L as z } from "../language-resolution-B-wjV5bb.js";
+import { S as b } from "../sized-mixin-cJbo3PKR.js";
+const u = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const i = document.createElement("style");
+    i.setAttribute("data-luzmo-vars", ""), i.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 10px;--luzmo-icon-size-xs: 12px;--luzmo-icon-size-s: 14px;--luzmo-icon-size-m: 16px;--luzmo-icon-size-l: 18px;--luzmo-icon-size-xl: 20px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(i);
+  }
+};
+u();
+const f = ":host{display:flex;font-family:var(--luzmo-chat-message-font-family, var(--chat-message-font-family));font-size:var(--luzmo-chat-message-font-size, var(--chat-message-font-size));line-height:var(--luzmo-chat-message-line-height, var(--chat-message-line-height));color:var(--highcontrast-chat-message-text-color, var(--luzmo-chat-message-text-color, var(--chat-message-text-color)))}:host([position=left]){justify-content:flex-start}:host([position=right]){justify-content:flex-end}:host([position=middle]){justify-content:center}.container{display:flex;gap:var(--luzmo-chat-message-avatar-gap, var(--chat-message-avatar-gap));max-width:var(--luzmo-chat-message-max-width, var(--chat-message-max-width))}.position-left{flex-direction:row}.position-left .avatar-wrapper{order:0}.position-left .message-wrapper{order:1;align-items:flex-start}.position-left .message{border-top-left-radius:var(--luzmo-chat-message-message-border-radius-start, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius-bottom-start, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)))}.position-right{flex-direction:row-reverse}.position-right .avatar-wrapper{order:0}.position-right .message-wrapper{order:1;align-items:flex-end}.position-right .header{justify-content:flex-end}.position-right .message{border-top-right-radius:var(--luzmo-chat-message-message-border-radius-end, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius-bottom-end, var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius)))}.position-right .actions-outside{justify-content:flex-end}.position-middle .message-wrapper{align-items:center}.position-middle .header,.position-middle .actions-outside{justify-content:center}.avatar-wrapper{flex-shrink:0;display:flex;align-items:flex-start;margin-top:var(--luzmo-chat-message-avatar-margin-top, var(--chat-message-avatar-margin-top, 0));margin-bottom:var(--luzmo-chat-message-avatar-margin-bottom, var(--chat-message-avatar-margin-bottom, 0))}:host([data-in-group]) .avatar-wrapper{min-width:var(--chat-message-avatar-size, var(--luzmo-avatar-size, var(--avatar-size, 32px)));flex-basis:var(--chat-message-avatar-size, var(--luzmo-avatar-size, var(--avatar-size, 32px)))}:host([data-in-group]:not([data-group-square-corner])) .message{border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important;border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important;border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important;border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))!important}.avatar-top .avatar-wrapper{align-self:flex-start}.avatar-middle .avatar-wrapper{align-self:center}.avatar-bottom .avatar-wrapper{align-self:flex-end}.avatar-middle .message-wrapper,.avatar-bottom .message-wrapper{position:relative}.avatar-middle .actions-outside,.avatar-bottom .actions-outside{position:absolute;top:100%;margin-top:var(--luzmo-chat-message-gap, var(--chat-message-gap))}.avatar-middle.position-left .actions-outside,.avatar-bottom.position-left .actions-outside{left:0}.avatar-middle.position-right .actions-outside,.avatar-bottom.position-right .actions-outside{right:0}.avatar-bottom.position-left .message{--luzmo-chat-message-message-border-radius-bottom-start: 0}.avatar-bottom.position-right .message{--luzmo-chat-message-message-border-radius-bottom-end: 0}.message-wrapper{display:flex;flex-direction:column;gap:var(--luzmo-chat-message-gap, var(--chat-message-gap));min-width:0}.message{position:relative;padding:var(--luzmo-chat-message-content-vertical-padding, var(--chat-message-content-vertical-padding)) var(--luzmo-chat-message-content-horizontal-padding, var(--chat-message-content-horizontal-padding));border-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-width:var(--luzmo-chat-message-message-border-width, var(--chat-message-message-border-width));border-style:solid;border-color:var(--highcontrast-chat-message-message-border-color, var(--luzmo-chat-message-message-border-color, var(--chat-message-message-border-color)));background-color:var(--highcontrast-chat-message-message-background-color, var(--luzmo-chat-message-message-background-color, var(--chat-message-message-background-color)));box-shadow:var(--luzmo-chat-message-message-shadow, var(--chat-message-message-shadow));color:var(--luzmo-chat-message-message-text-color, var(--chat-message-message-text-color));word-wrap:break-word;overflow-wrap:break-word}.message .header,.message .user-name,.message .datetime,.message .actions-inside{color:inherit}.message.squared-top-left{border-top-left-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important}.message.squared-top-right{border-top-right-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important}.message.squared-bottom-left{border-bottom-left-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important}.message.squared-bottom-right{border-bottom-right-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important}:host([data-group-square-corner=top-left]) .message{border-top-left-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important;border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}:host([data-group-square-corner=top-right]) .message{border-top-right-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important;border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}:host([data-group-square-corner=bottom-left]) .message{border-bottom-left-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important;border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}:host([data-group-square-corner=bottom-right]) .message{border-bottom-right-radius:var(--luzmo-chat-message-squared-corner-radius, var(--chat-message-squared-corner-radius))!important;border-top-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-top-right-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius));border-bottom-left-radius:var(--luzmo-chat-message-message-border-radius, var(--chat-message-message-border-radius))}.header{display:flex;align-items:baseline;gap:var(--luzmo-chat-message-header-gap, var(--chat-message-header-gap));margin-bottom:var(--luzmo-chat-message-header-margin-bottom, var(--chat-message-header-margin-bottom));flex-wrap:wrap}:host([meta=outside]) .header{margin-bottom:0}.user-name{font-weight:var(--luzmo-chat-message-user-name-font-weight, var(--chat-message-user-name-font-weight));color:var(--luzmo-chat-message-user-name-color, var(--chat-message-user-name-color))}.datetime{font-size:var(--luzmo-chat-message-datetime-font-size, var(--chat-message-datetime-font-size));color:var(--luzmo-chat-message-datetime-color, var(--chat-message-datetime-color));opacity:var(--luzmo-chat-message-datetime-opacity, var(--chat-message-datetime-opacity))}.content{display:block}.actions{display:flex;gap:var(--luzmo-chat-message-actions-gap, var(--chat-message-actions-gap));align-items:center}.actions-inside{margin-top:var(--luzmo-chat-message-actions-margin-top, var(--chat-message-actions-margin-top))}.actions-outside{opacity:var(--luzmo-chat-message-actions-opacity, var(--chat-message-actions-opacity));transition:opacity var(--luzmo-chat-message-animation-duration, var(--chat-message-animation-duration)) ease-in-out}:host(:hover) .actions-outside,:host(:focus-within) .actions-outside{opacity:var(--luzmo-chat-message-actions-opacity-hover, var(--chat-message-actions-opacity-hover))}::slotted([slot=avatar]){display:block}::slotted([slot=actions]){display:inline-flex;align-items:center}.extra-actions{position:absolute;top:var(--luzmo-chat-message-extra-actions-top, var(--chat-message-extra-actions-top));right:var(--luzmo-chat-message-extra-actions-right, var(--chat-message-extra-actions-right));bottom:var(--luzmo-chat-message-extra-actions-bottom, var(--chat-message-extra-actions-bottom));left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left));padding:var(--luzmo-chat-message-extra-actions-vertical-padding, var(--chat-message-extra-actions-vertical-padding)) var(--luzmo-chat-message-extra-actions-horizontal-padding, var(--chat-message-extra-actions-horizontal-padding));opacity:0;pointer-events:none;transition:opacity var(--luzmo-chat-message-animation-duration, var(--chat-message-animation-duration)) ease-in-out;z-index:10}:host([position=left]) .extra-actions{left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left), var(--luzmo-chat-message-content-horizontal-padding, var(--chat-message-content-horizontal-padding)));right:var(--luzmo-chat-message-extra-actions-right, var(--chat-message-extra-actions-right), auto)}:host([size=m]) .extra-actions{top:calc(-1 * var(--luzmo-spacing-5))}:host([size=m][position=right]) .extra-actions{left:calc(-1 * var(--luzmo-spacing-5));right:var(--luzmo-chat-message-extra-actions-right, var(--chat-message-extra-actions-right), auto)}:host([size=m][position=middle]) .extra-actions{right:calc(-1 * var(--luzmo-spacing-5));left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left), auto)}:host([size=m][position=left]) .extra-actions{right:calc(-1 * var(--luzmo-spacing-5));left:var(--luzmo-chat-message-extra-actions-left, var(--chat-message-extra-actions-left), auto)}.extra-actions-wrapper{display:inline-flex;align-items:center;background-color:var(--luzmo-chat-message-extra-actions-wrapper-background-color, var(--luzmo-background-color));border-radius:var(--luzmo-chat-message-extra-actions-wrapper-border-radius, var(--luzmo-border-radius));border-width:var(--luzmo-chat-message-extra-actions-wrapper-border-width, var(--luzmo-border-width));border-style:var(--luzmo-chat-message-extra-actions-wrapper-border-style, solid);border-color:var(--luzmo-chat-message-extra-actions-wrapper-border, var(--luzmo-border-color));padding:var(--luzmo-chat-message-extra-actions-wrapper-vertical-padding, var(--chat-message-extra-actions-wrapper-vertical-padding)) var(--luzmo-chat-message-extra-actions-wrapper-horizontal-padding, var(--chat-message-extra-actions-wrapper-horizontal-padding));position:var(--luzmo-chat-message-extra-actions-wrapper-position, var(--chat-message-extra-actions-wrapper-position), relative);top:var(--luzmo-chat-message-extra-actions-wrapper-top, var(--chat-message-extra-actions-wrapper-top));right:var(--luzmo-chat-message-extra-actions-wrapper-right, var(--chat-message-extra-actions-wrapper-right));bottom:var(--luzmo-chat-message-extra-actions-wrapper-bottom, var(--chat-message-extra-actions-wrapper-bottom));left:var(--luzmo-chat-message-extra-actions-wrapper-left, var(--chat-message-extra-actions-wrapper-left))}:host(:hover) .extra-actions,:host(:focus-within) .extra-actions{opacity:1;pointer-events:auto}:host(:active) .extra-actions{opacity:1;pointer-events:auto}::slotted([slot=extra-actions]){display:inline-flex;align-items:center}@media (forced-colors: active){:host{--highcontrast-chat-message-message-background-color: Canvas;--highcontrast-chat-message-message-border-color: CanvasText;--highcontrast-chat-message-text-color: CanvasText}}:host{--chat-message-message-border-width: var(--luzmo-border-width);--chat-message-message-border-color: var(--luzmo-border-color);--chat-message-message-background-color: var( --luzmo-background-color-highlight );--chat-message-message-shadow: 0 1px 2px rgba(var(--luzmo-border-color-rgb), .05);--chat-message-message-text-color: inherit;--chat-message-font-family: var(--luzmo-font-family);--chat-message-font-size: var(--luzmo-font-size);--chat-message-line-height: 1.5;--chat-message-text-color: var(--luzmo-font-color);--chat-message-header-gap: var(--luzmo-spacing-2);--chat-message-header-margin-bottom: var(--luzmo-spacing-1);--chat-message-user-name-font-weight: var(--luzmo-font-weight-bold, 600);--chat-message-user-name-color: var(--luzmo-font-color);--chat-message-datetime-font-size: .75em;--chat-message-datetime-color: var(--luzmo-font-color-secondary);--chat-message-datetime-opacity: .7;--chat-message-actions-gap: var(--luzmo-spacing-1);--chat-message-actions-margin-top: var(--luzmo-spacing-2);--chat-message-actions-opacity: 1;--chat-message-actions-opacity-hover: 1;--chat-message-animation-duration: var(--luzmo-animation-duration, .15s);--chat-message-gap: var(--luzmo-spacing-4);--chat-message-avatar-gap: var(--luzmo-spacing-3);--chat-message-max-width: 80%;--chat-message-content-vertical-padding: var(--luzmo-spacing-3);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--chat-message-primary-background-color: var(--luzmo-primary);--chat-message-primary-border-color: var(--luzmo-primary);--chat-message-primary-text-color: var(--luzmo-primary-inverse-color);--chat-message-primary-text-color-outline: var(--luzmo-primary);--chat-message-secondary-background-color: var(--luzmo-secondary);--chat-message-secondary-border-color: var(--luzmo-secondary);--chat-message-secondary-text-color: var(--luzmo-secondary-inverse-color);--chat-message-secondary-text-color-outline: var(--luzmo-secondary)}:host([position=middle]){--chat-message-max-width: 90%}:host{--chat-message-message-border-radius: var(--luzmo-border-radius-xl);--chat-message-squared-corner-radius: var(--luzmo-border-radius-s);--chat-message-gap: var(--luzmo-spacing-2);--chat-message-avatar-gap: var(--luzmo-spacing-4);--chat-message-max-width: 80%;--chat-message-content-vertical-padding: var(--luzmo-spacing-4);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([size=xs]){--chat-message-message-border-radius: var(--luzmo-border-radius);--chat-message-squared-corner-radius: var(--luzmo-border-radius-xs);--chat-message-font-size: 11px;--chat-message-content-vertical-padding: var(--luzmo-spacing-3);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--chat-message-gap: var(--luzmo-spacing-1);--chat-message-avatar-gap: var(--luzmo-spacing-3)}:host([size=s]){--chat-message-message-border-radius: var(--luzmo-border-radius-l);--chat-message-squared-corner-radius: var(--luzmo-border-radius-xs);--chat-message-font-size: 12px;--chat-message-content-vertical-padding: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--chat-message-content-horizontal-padding: var(--luzmo-spacing-4);--chat-message-gap: var(--luzmo-spacing-2);--chat-message-avatar-gap: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host([size=l]){--chat-message-message-border-radius: var(--luzmo-border-radius-xl);--chat-message-squared-corner-radius: var(--luzmo-border-radius-s);--chat-message-font-size: 16px;--chat-message-content-vertical-padding: var(--luzmo-spacing-5);--chat-message-content-horizontal-padding: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--chat-message-gap: var(--luzmo-spacing-3);--chat-message-avatar-gap: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) )}:host([size=xl]){--chat-message-message-border-radius: var(--luzmo-border-radius-xl);--chat-message-squared-corner-radius: var(--luzmo-border-radius-s);--chat-message-font-size: 18px;--chat-message-content-vertical-padding: var(--luzmo-spacing-5);--chat-message-content-horizontal-padding: var(--luzmo-spacing-5);--chat-message-gap: var(--luzmo-spacing-4);--chat-message-avatar-gap: var(--luzmo-spacing-5)}:host([treatment=fill]){--chat-message-message-shadow: none}:host([variant=default][treatment=fill]){--chat-message-message-border-width: 0}:host([variant=primary][treatment=fill]){--chat-message-message-background-color: var( --chat-message-primary-background-color );--chat-message-message-border-color: var(--chat-message-primary-border-color);--chat-message-message-text-color: var(--chat-message-primary-text-color)}:host([variant=secondary][treatment=fill]){--chat-message-message-background-color: var( --chat-message-secondary-background-color );--chat-message-message-border-color: var( --chat-message-secondary-border-color );--chat-message-message-text-color: var(--chat-message-secondary-text-color)}:host([treatment=outline]){--chat-message-message-background-color: transparent;--chat-message-message-shadow: none}:host([variant=primary][treatment=outline]){--chat-message-message-border-color: var(--chat-message-primary-border-color);--chat-message-message-text-color: var( --chat-message-primary-text-color-outline )}:host([variant=secondary][treatment=outline]){--chat-message-message-border-color: var( --chat-message-secondary-border-color );--chat-message-message-text-color: var( --chat-message-secondary-text-color-outline )}:host([quiet]){--chat-message-message-background-color: transparent;--chat-message-message-border-color: transparent;--chat-message-message-border-width: 0;--chat-message-message-shadow: none;--chat-message-content-vertical-padding: 0;--chat-message-content-horizontal-padding: 0}:host([quiet][avatar-placement=top]){--chat-message-avatar-margin-top: calc( (var(--chat-message-line-height) - 1) / 2 * 1em )}:host([quiet][avatar-placement=bottom]){--chat-message-avatar-margin-bottom: calc( (var(--chat-message-line-height) - 1) / 2 * -1em )}:host([quiet][variant=primary]){--chat-message-primary-background-color: transparent;--chat-message-primary-border-color: transparent;--chat-message-primary-text-color: var(--luzmo-primary)}:host([quiet][variant=secondary]){--chat-message-secondary-background-color: transparent;--chat-message-secondary-border-color: transparent;--chat-message-secondary-text-color: var(--luzmo-secondary)}:host{--chat-message-extra-actions-top: var( --luzmo-chat-message-content-vertical-padding, var(--chat-message-content-vertical-padding) );--chat-message-extra-actions-right: var( --luzmo-chat-message-content-horizontal-padding, var(--chat-message-content-horizontal-padding) );--chat-message-extra-actions-bottom: auto;--chat-message-extra-actions-left: auto;--chat-message-extra-actions-vertical-padding: 0;--chat-message-extra-actions-horizontal-padding: 0;--chat-message-extra-actions-wrapper-background-color: var( --luzmo-border-color );--chat-message-extra-actions-wrapper-border-radius: var( --luzmo-border-radius );--chat-message-extra-actions-wrapper-border: none;--chat-message-extra-actions-wrapper-vertical-padding: var(--luzmo-spacing-1);--chat-message-extra-actions-wrapper-horizontal-padding: var( --luzmo-spacing-1 );--chat-message-extra-actions-wrapper-position: relative;--chat-message-extra-actions-wrapper-top: auto;--chat-message-extra-actions-wrapper-right: auto;--chat-message-extra-actions-wrapper-bottom: auto;--chat-message-extra-actions-wrapper-left: auto}";
+var x = Object.defineProperty, t = (i, a, r, g) => {
+  for (var m = void 0, n = i.length - 1, d; n >= 0; n--)
+    (d = i[n]) && (m = d(a, r, m) || m);
+  return m && x(a, r, m), m;
+};
+class e extends b(v, {
+  validSizes: ["xs", "s", "m", "l", "xl"],
+  defaultSize: "m"
+}) {
+  constructor() {
+    super(...arguments), this.position = "right", this.variant = "default", this.treatment = "fill", this.quiet = !1, this.meta = "inside", this.actionsPosition = "outside", this.avatarPlacement = "top", this._hasAvatar = !1, this._hasActions = !1, this._hasExtraActions = !1, this.languageResolver = new z(this);
+  }
+  static get styles() {
+    return [p(f)];
+  }
+  _handleAvatarSlotChange(a) {
+    const r = a.target;
+    this._hasAvatar = r.assignedNodes().length > 0;
+  }
+  _handleActionsSlotChange(a) {
+    const r = a.target;
+    this._hasActions = r.assignedNodes().length > 0;
+  }
+  _handleExtraActionsSlotChange(a) {
+    const r = a.target;
+    this._hasExtraActions = r.assignedNodes().length > 0;
+  }
+  /**
+   * Formats the message datetime using Intl.DateTimeFormat.
+   * @private
+   */
+  get formattedDatetime() {
+    if (this.datetime)
+      try {
+        const a = new Date(this.datetime);
+        if (Number.isNaN(a.getTime()))
+          return;
+        const r = this.datetimeFormatOptions || {
+          hour: "numeric",
+          minute: "numeric"
+        };
+        return new Intl.DateTimeFormat(
+          this.languageResolver.language || void 0,
+          r
+        ).format(a);
+      } catch {
+        return;
+      }
+  }
+  /**
+   * Determines which corners should be squared based on position and avatar placement.
+   * @private
+   */
+  get squaredCorners() {
+    const a = {
+      topLeft: !1,
+      topRight: !1,
+      bottomLeft: !1,
+      bottomRight: !1
+    };
+    if (this.position === "left")
+      switch (this.avatarPlacement) {
+        case "top": {
+          a.topLeft = !0;
+          break;
+        }
+        case "middle":
+          break;
+        case "bottom": {
+          a.bottomLeft = !0;
+          break;
+        }
+      }
+    else if (this.position === "right")
+      switch (this.avatarPlacement) {
+        case "top": {
+          a.topRight = !0;
+          break;
+        }
+        case "middle":
+          break;
+        case "bottom": {
+          a.bottomRight = !0;
+          break;
+        }
+      }
+    return a;
+  }
+  /**
+   * Renders the meta information (user name and datetime) inside the message header.
+   * @private
+   */
+  renderMeta() {
+    return !this.name && !this.formattedDatetime ? c : o`
+      <div class="header" part="header">
+        ${this.name ? o`<span class="user-name">${this.name}</span>` : c}
+        ${this.formattedDatetime ? o`<time class="datetime" datetime=${this.datetime || ""}>
+              ${this.formattedDatetime}
+            </time>` : c}
+      </div>
+    `;
+  }
+  /**
+   * Renders the actions slot inside or outside the message.
+   * @private
+   */
+  renderActions(a) {
+    return this.actionsPosition !== a ? c : this._hasActions ? o`
+      <div class="actions actions-${a}" part="actions">
+        <slot
+          name="actions"
+          @slotchange=${this._handleActionsSlotChange}
+        ></slot>
+      </div>
+    ` : o`<slot
+        name="actions"
+        @slotchange=${this._handleActionsSlotChange}
+      ></slot>`;
+  }
+  render() {
+    const a = this.squaredCorners, r = {
+      message: !0,
+      "squared-top-left": a.topLeft,
+      "squared-top-right": a.topRight,
+      "squared-bottom-left": a.bottomLeft,
+      "squared-bottom-right": a.bottomRight,
+      "has-avatar": this._hasAvatar
+    }, g = {
+      container: !0,
+      [`position-${this.position}`]: !0,
+      [`avatar-${this.avatarPlacement}`]: !0
+    };
+    return o`
+      <div class=${h(g)}>
+        <div class="avatar-wrapper">
+          <slot
+            name="avatar"
+            @slotchange=${this._handleAvatarSlotChange}
+          ></slot>
+        </div>
+
+        <div class="message-wrapper">
+          ${this.meta === "outside" ? this.renderMeta() : c}
+
+          <div class=${h(r)} part="message">
+            ${this.meta === "inside" ? this.renderMeta() : c}
+
+            <div class="content" part="content">
+              <slot name="message">
+                <slot></slot>
+              </slot>
+            </div>
+
+            ${this.renderActions("inside")}
+            ${this._hasExtraActions ? o`
+                  <div class="extra-actions" part="extra-actions">
+                    <div
+                      class="extra-actions-wrapper"
+                      part="extra-actions-wrapper"
+                    >
+                      <slot
+                        name="extra-actions"
+                        @slotchange=${this._handleExtraActionsSlotChange}
+                      ></slot>
+                    </div>
+                  </div>
+                ` : o`
+                  <slot
+                    name="extra-actions"
+                    @slotchange=${this._handleExtraActionsSlotChange}
+                  ></slot>
+                `}
+          </div>
+
+          ${this.renderActions("outside")}
+        </div>
+      </div>
+    `;
+  }
+}
+t([
+  s({ type: String, reflect: !0 })
+], e.prototype, "position");
+t([
+  s({ type: String, reflect: !0 })
+], e.prototype, "variant");
+t([
+  s({ type: String, reflect: !0 })
+], e.prototype, "treatment");
+t([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "quiet");
+t([
+  s({ type: String, attribute: "name" })
+], e.prototype, "name");
+t([
+  s({ type: String, attribute: "datetime" })
+], e.prototype, "datetime");
+t([
+  s({ type: Object, attribute: "datetime-format-options" })
+], e.prototype, "datetimeFormatOptions");
+t([
+  s({ type: String, reflect: !0 })
+], e.prototype, "meta");
+t([
+  s({ type: String, reflect: !0, attribute: "actions" })
+], e.prototype, "actionsPosition");
+t([
+  s({ type: String, reflect: !0, attribute: "avatar-placement" })
+], e.prototype, "avatarPlacement");
+t([
+  l()
+], e.prototype, "_hasAvatar");
+t([
+  l()
+], e.prototype, "_hasActions");
+t([
+  l()
+], e.prototype, "_hasExtraActions");
+customElements.get("luzmo-chat-message") || customElements.define("luzmo-chat-message", e);
+export {
+  e as LuzmoChatMessage
+};

package/components/chat-message-group/chat-message-group.d.ts

@@ -0,0 +1,50 @@
+import { CSSResultArray, TemplateResult } from 'lit';
+import { LuzmoElement } from '../../utils/base';
+import type { ChatMessageAvatarPlacement } from '../chat-message/chat-message';
+declare const LuzmoChatMessageGroup_base: typeof LuzmoElement & {
+    new (...args: any[]): import("../..").SizedElementInterface;
+    prototype: import("../..").SizedElementInterface;
+};
+/**
+ * A chat message group component for displaying consecutive messages from the same user.
+ *
+ * When multiple messages are grouped together, only the first or last message
+ * will display the name/date metadata and avatar, reducing visual clutter.
+ *
+ * @element luzmo-chat-message-group
+ * @slot - the luzmo-chat-message elements that make up the group
+ * @slot avatar - Optional avatar slot at the group level. If provided, this avatar will be used.
+ * If not provided, the first message's avatar will be reused.
+ */
+export declare class LuzmoChatMessageGroup extends LuzmoChatMessageGroup_base {
+    static get styles(): CSSResultArray;
+    /**
+     * The vertical placement of the avatar relative to the message group.
+     * - `top`: Avatar appears next to the first message
+     * - `middle`: Avatar appears centered relative to the group
+     * - `bottom`: Avatar appears next to the last message (default)
+     * @attr avatar-placement
+     */
+    avatarPlacement: ChatMessageAvatarPlacement;
+    private _messages;
+    private _hasGroupAvatar;
+    /**
+     * Handles group-level avatar slot changes.
+     */
+    private _handleGroupAvatarSlotChange;
+    /**
+     * Configures child chat messages.
+     * - Distributes size to all messages
+     * - Controls which message shows the avatar (from group slot or first message)
+     * - Controls which message shows the metadata (name/datetime)
+     * - Ensures consistent spacing for all messages
+     */
+    private configureMessages;
+    /**
+     * Handles message slot changes.
+     */
+    protected handleSlotchange(): void;
+    protected updated(changedProperties: Map<string, unknown>): void;
+    protected render(): TemplateResult;
+}
+export {};

package/components/chat-message-group/index.cjs

@@ -0,0 +1,24 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("lit"),f=require("lit/decorators.js"),b=require("../base-5nDSSNeT.cjs"),z=require("../sized-mixin-DcvJLFeo.cjs"),E=":host{gap:var(--luzmo-chat-message-group-spacing, var(--chat-message-group-spacing));display:flex;flex-direction:column}::slotted(*){flex-shrink:0}:host,:host([size=l]),:host([size=xl]){--chat-message-group-spacing: 4px}:host([size=s]),:host([size=xs]){--chat-message-group-spacing: 2px}:host([size=m]){--chat-message-group-spacing: 3px}";var q=Object.defineProperty,g=(u,e,a,m)=>{for(var s=void 0,n=u.length-1,l;n>=0;n--)(l=u[n])&&(s=l(e,a,s)||s);return s&&q(e,a,s),s};class c extends z.SizedMixin(b.LuzmoElement,{noDefaultSize:!0}){constructor(){super(...arguments),this.avatarPlacement="bottom",this._hasGroupAvatar=!1}static get styles(){return[S.unsafeCSS(E)]}_handleGroupAvatarSlotChange(e){const a=e.target;this._hasGroupAvatar=a.assignedNodes().length>0,this.configureMessages()}configureMessages(){const e=this._messages;if(!e||e.length===0)return;let a=-1;this.avatarPlacement==="top"?a=0:this.avatarPlacement==="bottom"?a=e.length-1:this.avatarPlacement==="middle"&&(a=Math.floor(e.length/2));const m=a>=0?e[a]:null;let s=null;const n=this.querySelector('slot[name="avatar"]');if(n instanceof HTMLSlotElement&&this._hasGroupAvatar){const t=n.assignedNodes();t.length>0&&t[0]instanceof HTMLElement&&(s=t[0])}let l=null;if(!s&&!this._hasGroupAvatar)for(const t of e){const o=t.querySelector('[slot="avatar"]');if(o instanceof HTMLElement){l=o;break}}const d=e[0],A=d.position,M=d.variant;e.forEach((t,o)=>{this.size&&(t.size=this.size),t.position=A,t.variant=M,t.dataset.inGroup="true";const P=o===a,v=t.querySelector('[slot="avatar"]'),r=v instanceof HTMLElement?v:null;if(P&&m===t)if(s){r&&r.remove();const i=s.cloneNode(!0);i.setAttribute("slot","avatar"),t.append(i)}else if(l)if(r===l)r.style.display="";else if(r)r.style.display="",l.style.display="none";else{const i=l.cloneNode(!0);i.setAttribute("slot","avatar"),t.append(i),l.style.display="none"}else r&&(r.style.display="");else r&&(r.style.display="none");let h=!1;this.avatarPlacement==="top"||this.avatarPlacement==="middle"?h=o===0:this.avatarPlacement==="bottom"&&(h=o===e.length-1),h?this.avatarPlacement==="bottom"&&o===e.length-1&&t.meta==="outside"&&(t.meta="inside"):(t.removeAttribute("name"),t.removeAttribute("datetime"));let p=!1;(this.avatarPlacement==="top"||this.avatarPlacement==="middle"||this.avatarPlacement==="bottom")&&(p=o===e.length-1);const y=t.querySelector('[slot="actions"]');y instanceof HTMLElement&&(y.style.display=p?"":"none"),t.avatarPlacement=this.avatarPlacement,delete t.dataset.groupSquareCorner,this.avatarPlacement==="top"&&o===0?t.position==="left"?t.dataset.groupSquareCorner="top-left":t.position==="right"&&(t.dataset.groupSquareCorner="top-right"):this.avatarPlacement==="bottom"&&o===e.length-1&&(t.position==="left"?t.dataset.groupSquareCorner="bottom-left":t.position==="right"&&(t.dataset.groupSquareCorner="bottom-right"))})}handleSlotchange(){this.configureMessages()}updated(e){super.updated(e),(e.has("avatarPlacement")||e.has("size"))&&this.configureMessages()}render(){return S.html`
+      <slot
+        name="avatar"
+        @slotchange=${this._handleGroupAvatarSlotChange}
+      ></slot>
+      <slot @slotchange=${this.handleSlotchange}></slot>
+    `}}g([f.property({type:String,reflect:!0,attribute:"avatar-placement"})],c.prototype,"avatarPlacement");g([f.queryAssignedElements()],c.prototype,"_messages");g([f.state()],c.prototype,"_hasGroupAvatar");customElements.get("luzmo-chat-message-group")||customElements.define("luzmo-chat-message-group",c);exports.LuzmoChatMessageGroup=c;

package/components/chat-message-group/index.d.ts

@@ -0,0 +1,7 @@
+import { LuzmoChatMessageGroup } from './chat-message-group';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-chat-message-group': LuzmoChatMessageGroup;
+    }
+}
+export { LuzmoChatMessageGroup } from './chat-message-group';