@luzmo/lucero 1.0.1-alpha.9 → 1.0.2

package/components/calendar-WRhzTEyZ.cjs

@@ -0,0 +1,142 @@
+/*! * 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.
+ * */
+require(`./chunk-D-qHiVGv.cjs`);const e=require(`./decorate-B2wePfNm.cjs`),t=require(`./sized-mixin-StFA4y0J.cjs`);require(`./icon-B7hKwn_q.cjs`),require(`./action-button-G0PWSrZo.cjs`);let n=require(`lit`),r=require(`lit/decorators.js`),i=require(`@luzmo/icons`),a=require(`lit/directives/if-defined.js`),o=require(`lit/directives/class-map.js`),s=require(`@internationalized/date`),c=require(`@internationalized/number`);var l=`:host{inline-size:var(--luzmo-calendar-width,var(--calendar-width));display:inline-block}.header{align-items:center;inline-size:100%;display:flex}.title{color:var(--highcontrast-calendar-date-text-color,var(--luzmo-calendar-date-text-color,var(--calendar-date-text-color)));font-size:var(--luzmo-calendar-title-text-size,var(--calendar-title-text-size));font-weight:var(--luzmo-calendar-title-font-weight,var(--calendar-title-font-weight));line-height:var(--luzmo-calendar-title-height,var(--calendar-title-height));text-align:center;white-space:nowrap;text-overflow:ellipsis;flex-grow:1;order:1;margin:0;overflow:hidden}.nextMonth,.prevMonth{transform:var(--logical-rotation)}.nextMonth:not([disabled]),.prevMonth:not([disabled]){color:var(--highcontrast-calendar-button-icon-color,var(--luzmo-calendar-button-icon-color,var(--calendar-button-icon-color)))}.prevMonth{order:0}.nextMonth{order:2}.dayOfWeek{inline-size:var(--luzmo-calendar-day-width,var(--calendar-day-width));color:var(--highcontrast-calendar-day-title-text-color,var(--luzmo-calendar-day-title-text-color,var(--calendar-day-title-text-color)));font-size:var(--luzmo-calendar-day-title-text-size,var(--calendar-day-title-text-size));font-weight:var(--luzmo-calendar-day-title-text-font-weight,var(--calendar-day-title-text-font-weight));text-transform:uppercase;cursor:default;flex-direction:column;justify-content:flex-end;display:flex;border-block-end:none!important;-webkit-text-decoration:none!important;text-decoration:none!important}:host([title]) .dayOfWeek{letter-spacing:var(--luzmo-calendar-title-text-letter-spacing,var(--calendar-title-text-letter-spacing));text-decoration:underline;border-block-end:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.body{outline:none}.table{table-layout:fixed;border-collapse:collapse;border-spacing:0;-webkit-user-select:none;user-select:none}.table-cell{text-align:center;box-sizing:initial;block-size:var(--luzmo-calendar-day-height,var(--calendar-day-height));inline-size:var(--luzmo-calendar-day-width,var(--calendar-day-width));padding:var(--luzmo-calendar-day-padding,var(--calendar-day-padding));position:relative}.table-cell:focus{outline:0}.date{box-sizing:border-box;block-size:var(--luzmo-calendar-day-height,var(--calendar-day-height));inline-size:var(--luzmo-calendar-day-width,var(--calendar-day-width));margin:var(--luzmo-calendar-day-padding,var(--calendar-day-padding));border-radius:var(--luzmo-calendar-day-border-radius,var(--calendar-day-border-radius));border:var(--luzmo-calendar-day-border-size,var(--calendar-day-border-size)) solid transparent;font-size:var(--luzmo-calendar-day-text-size,var(--calendar-day-text-size));line-height:calc(var(--luzmo-calendar-day-width,var(--calendar-day-width)) - var(--luzmo-calendar-day-border-size,var(--calendar-day-border-size)) * 2);white-space:nowrap;cursor:pointer;display:block;position:absolute;inset-block-start:0;inset-inline-start:0}.date:lang(ja),.date:lang(ko),.date:lang(zh){font-size:var(--luzmo-calendar-day-text-size-han,var(--calendar-day-text-size-han))}.date.is-disabled{cursor:default;pointer-events:none}.date.is-outsideMonth{display:none}.date:before{content:"";box-sizing:border-box;inline-size:var(--luzmo-calendar-day-width,var(--calendar-day-width));block-size:var(--luzmo-calendar-day-height,var(--calendar-day-height));border-radius:var(--luzmo-calendar-day-border-radius,var(--calendar-day-border-radius));border:var(--luzmo-calendar-day-border-size,var(--calendar-day-border-size)) solid transparent;position:absolute;inset-block-start:calc(50% - var(--luzmo-calendar-day-width,var(--calendar-day-width)) / 2);inset-inline-start:calc(50% - var(--luzmo-calendar-day-width,var(--calendar-day-width)) / 2)}.date.is-selected:not(.is-range-selection){font-weight:var(--luzmo-calendar-day-text-font-weight-selected,var(--calendar-day-text-font-weight-selected))}.date.is-selected:not(.is-range-selection):before{display:none}.date.is-today{font-weight:var(--luzmo-calendar-day-today-text-font-weight,var(--calendar-day-today-text-font-weight))}.date.is-range-selection{margin:var(--luzmo-calendar-day-padding,var(--calendar-day-padding)) 0;border-width:var(--luzmo-calendar-border-width-reset,var(--calendar-border-width-reset));line-height:var(--luzmo-calendar-day-height,var(--calendar-day-height));border-radius:var(--luzmo-calendar-border-radius-reset,var(--calendar-border-radius-reset));inline-size:calc(var(--luzmo-calendar-day-width,var(--calendar-day-width)) + var(--luzmo-calendar-day-padding,var(--calendar-day-padding)) * 2)}.date.is-range-selection.is-range-end,.date.is-range-selection.is-range-start,.date.is-range-selection.is-selection-end,.date.is-range-selection.is-selection-start{inline-size:calc(var(--luzmo-calendar-day-width,var(--calendar-day-width)) + var(--luzmo-calendar-day-padding,var(--calendar-day-padding)))}.date.is-range-selection.is-selection-end,.date.is-range-selection.is-selection-start{font-weight:var(--luzmo-calendar-day-text-font-weight-cap-selected,var(--calendar-day-text-font-weight-cap-selected));z-index:0}.date.is-range-selection.is-selection-end:after,.date.is-range-selection.is-selection-start:after{block-size:var(--luzmo-calendar-day-height,var(--calendar-day-height));inline-size:var(--luzmo-calendar-day-width,var(--calendar-day-width));border-radius:var(--luzmo-calendar-day-width,var(--calendar-day-width));content:"";z-index:-1;display:block;position:absolute;inset-block-start:0}.date.is-range-selection.is-range-start,.date.is-range-selection.is-selection-start{border-start-start-radius:var(--luzmo-calendar-day-width,var(--calendar-day-width));border-end-start-radius:var(--luzmo-calendar-day-width,var(--calendar-day-width));margin-inline-start:var(--luzmo-calendar-day-padding,var(--calendar-day-padding));padding-inline-end:var(--luzmo-calendar-day-padding,var(--calendar-day-padding))}.date.is-range-selection.is-range-start:after,.date.is-range-selection.is-range-start:before,.date.is-range-selection.is-selection-start:after,.date.is-range-selection.is-selection-start:before{inset-inline-start:0}.date.is-range-selection.is-range-end,.date.is-range-selection.is-selection-end{border-start-end-radius:var(--luzmo-calendar-day-width,var(--calendar-day-width));border-end-end-radius:var(--luzmo-calendar-day-width,var(--calendar-day-width));margin-inline-end:var(--luzmo-calendar-day-padding,var(--calendar-day-padding));padding-inline-start:var(--luzmo-calendar-day-padding,var(--calendar-day-padding))}.date.is-range-selection.is-range-end:after,.date.is-range-selection.is-range-end:before,.date.is-range-selection.is-selection-end:after,.date.is-range-selection.is-selection-end:before{inset-inline:auto 0}.date.is-range-selection.is-range-start.is-range-end,.date.is-range-selection.is-selection-end.is-range-start,.date.is-range-selection.is-selection-start.is-range-end,.date.is-range-selection.is-selection-start.is-selection-end{inline-size:var(--luzmo-calendar-day-width,var(--calendar-day-width));border-radius:var(--luzmo-calendar-day-width,var(--calendar-day-width))}.date{color:var(--highcontrast-calendar-day-text-color,var(--luzmo-calendar-day-text-color,var(--calendar-day-text-color)))}.date:active{background-color:var(--highcontrast-calendar-day-background-color-down,var(--luzmo-calendar-day-background-color-down,var(--calendar-day-background-color-down)))}.date.is-selected{color:var(--highcontrast-calendar-day-text-color-selected,var(--luzmo-calendar-day-text-color-selected,var(--calendar-day-text-color-selected)));background:var(--highcontrast-calendar-day-background-color-selected,var(--luzmo-calendar-day-background-color-selected,var(--calendar-day-background-color-selected)))}.date.is-selected:not(.is-range-selection){background:var(--highcontrast-calendar-day-background-color-cap-selected,var(--luzmo-calendar-day-background-color-cap-selected,var(--calendar-day-background-color-cap-selected)));color:var(--highcontrast-calendar-day-text-color-cap-selected,var(--luzmo-calendar-day-text-color-cap-selected,var(--calendar-day-text-color-cap-selected)));border-color:var(--highcontrast-calendar-day-border-color-cap-selected,var(--luzmo-calendar-day-border-color-cap-selected,var(--calendar-day-border-color-cap-selected)))}.date.is-today{color:var(--highcontrast-calendar-day-today-text-color,var(--luzmo-calendar-day-today-text-color,var(--calendar-day-today-text-color)));background-color:var(--highcontrast-calendar-day-today-background-color,var(--luzmo-calendar-day-today-background-color,var(--calendar-day-today-background-color)))}.date.is-today,.date.is-today:before{border-color:var(--highcontrast-calendar-day-today-border-color,var(--luzmo-calendar-day-today-border-color,var(--calendar-day-today-border-color)))}@media (hover:hover){.date:hover{color:var(--highcontrast-calendar-day-text-color-hover,var(--luzmo-calendar-day-text-color-hover,var(--calendar-day-text-color-hover)))}.date:hover:not(.is-selection-end,.is-selection-start):before{background:var(--highcontrast-calendar-day-background-color-hover,var(--luzmo-calendar-day-background-color-hover,var(--calendar-day-background-color-hover)))}.date.is-range-selection:hover:before,.date.is-selected:hover:not(.is-selection-end,.is-selection-start):before{background:var(--highcontrast-calendar-day-background-color-selected-hover,var(--luzmo-calendar-day-background-color-selected-hover,var(--calendar-day-background-color-selected-hover)))}.date.is-today.is-selected:not(.is-range-selection):hover:before{background:var(--highcontrast-calendar-day-today-background-color-selected-hover,var(--luzmo-calendar-day-today-background-color-selected-hover,var(--calendar-day-today-background-color-selected-hover)))}}.date.is-today.is-disabled{color:var(--highcontrast-calendar-day-today-text-color-disabled,var(--luzmo-calendar-day-today-text-color-disabled,var(--calendar-day-today-text-color-disabled)))}.date.is-today.is-disabled,.date.is-today.is-disabled:before{border-color:var(--highcontrast-calendar-day-today-border-color-disabled,var(--luzmo-calendar-day-today-border-color-disabled,var(--calendar-day-today-border-color-disabled)))}.table-cell:focus-within .date:not(.is-range-selection){background:var(--highcontrast-calendar-day-background-color-key-focus,var(--luzmo-calendar-day-background-color-key-focus,var(--calendar-day-background-color-key-focus)));color:var(--highcontrast-calendar-day-text-color-key-focus,var(--luzmo-calendar-day-text-color-key-focus,var(--calendar-day-text-color-key-focus)))}.table-cell:focus-within .date.is-selected:not(.is-range-selection),.table-cell:focus-within .date.is-today:not(.is-range-selection),.table-cell:focus-within .date:not(.is-range-selection),.table-cell:focus-within .date:not(.is-range-selection):active{border-color:var(--highcontrast-calendar-day-border-color-key-focus,var(--luzmo-calendar-day-border-color-key-focus,var(--calendar-day-border-color-key-focus)))}.table-cell:focus-within .date.is-selected:not(.is-range-selection),.table-cell:focus-within .date:not(.is-range-selection):active{color:var(--highcontrast-calendar-day-text-color-selected,var(--luzmo-calendar-day-text-color-selected,var(--calendar-day-text-color-selected)));background:var(--highcontrast-calendar-day-background-color-cap-selected,var(--luzmo-calendar-day-background-color-cap-selected,var(--calendar-day-background-color-cap-selected)));border-color:var(--highcontrast-calendar-day-border-color-key-focus,var(--luzmo-calendar-day-border-color-cap-selected-focus,var(--calendar-day-border-color-cap-selected-focus)))}.table-cell:focus-within .date.is-range-selection:before,.table-cell:focus-within .date.is-selected:before{background:var(--highcontrast-calendar-day-background-color-selected-hover,var(--luzmo-calendar-day-background-color-selected-hover,var(--calendar-day-background-color-selected-hover)))}.table-cell:focus-within .date:before{border-color:var(--highcontrast-calendar-day-border-color-key-focus,var(--luzmo-calendar-day-border-color-key-focus,var(--calendar-day-border-color-key-focus)))}.date.is-disabled{color:var(--highcontrast-calendar-day-text-color-disabled,var(--luzmo-calendar-day-text-color-disabled,var(--calendar-day-text-color-disabled)))}.date.is-selection-end,.date.is-selection-start{color:var(--highcontrast-calendar-day-text-color-cap-selected,var(--luzmo-calendar-day-text-color-cap-selected,var(--calendar-day-text-color-cap-selected)))}.date.is-range-selection:not(.is-selection-start):not(.is-selection-end){color:var(--highcontrast-calendar-day-text-color,var(--luzmo-calendar-day-text-color-range-selection,var(--calendar-day-text-color-range-selection,var(--calendar-day-text-color))))}.date.is-selection-end:after,.date.is-selection-start:after{background-color:var(--highcontrast-calendar-day-background-color-cap-selected,var(--luzmo-calendar-day-background-color-cap-selected,var(--calendar-day-background-color-cap-selected)))}.date.is-selection-end.is-disabled,.date.is-selection-start.is-disabled{color:var(--highcontrast-calendar-day-text-color-disabled,var(--luzmo-calendar-day-text-color-disabled,var(--calendar-day-text-color-disabled)))}@media (forced-colors:active){.nextMonth,.prevMonth{--highcontrast-calendar-button-icon-color:ButtonText}.date{--highcontrast-calendar-day-background-color-cap-selected:Highlight;--highcontrast-calendar-day-background-color-down:ButtonFace;--highcontrast-calendar-day-background-color-hover:Transparent;--highcontrast-calendar-day-background-color-key-focus:ButtonFace;--highcontrast-calendar-day-background-color-selected-hover:Transparent;--highcontrast-calendar-day-background-color-selected:Highlight;--highcontrast-calendar-day-border-color-key-focus:ButtonText;--highcontrast-calendar-day-text-color-cap-selected:HighlightText;--highcontrast-calendar-day-text-color-disabled:GrayText;--highcontrast-calendar-day-text-color-hover:ButtonText;--highcontrast-calendar-day-text-color-key-focus:ButtonText;--highcontrast-calendar-day-text-color-selected:HighlightText;--highcontrast-calendar-day-text-color:CanvasText;--highcontrast-calendar-date-text-color:CanvasText;--highcontrast-calendar-day-title-text-color:CanvasText;--highcontrast-calendar-day-today-background-color-selected-hover:Highlight;--highcontrast-calendar-day-today-border-color-disabled:GrayText;--highcontrast-calendar-day-today-border-color:ButtonText;--highcontrast-calendar-day-today-text-color-disabled:GrayText;--highcontrast-calendar-day-today-text-color:ButtonText;forced-color-adjust:none}.date.is-range-selection.is-today{color:highlighttext}.date.is-range-selection.is-selection-end:after,.date.is-range-selection.is-selection-start:after{content:none}.date.is-disabled.is-range-selection,.date.is-disabled.is-selected{color:highlighttext;background:highlight}}:host{--calendar-background-color:var(--luzmo-background-color-white);font-family:var(--luzmo-font-family);--calendar-day-width:var(--luzmo-component-height);--calendar-day-height:var(--luzmo-component-height);--calendar-border-radius-reset:0;--calendar-border-width-reset:0;--calendar-day-border-size:var(--luzmo-border-width);--calendar-margin-y:calc(var(--luzmo-spacing) * 3);--calendar-margin-x:var(--luzmo-component-height);--calendar-day-padding:var(--luzmo-spacing-2);--calendar-width:calc((var(--calendar-day-width) + var(--calendar-day-padding) * 2) * 7);--calendar-title-text-letter-spacing:.06em;--calendar-day-title-text-font-weight:bold;--calendar-day-title-text-color:var(--luzmo-font-color-disabled);--calendar-title-height:var(--luzmo-component-height);--calendar-title-font-weight:bold;--calendar-title-text-size:var(--luzmo-font-size);--calendar-day-title-text-size:var(--luzmo-font-size);--calendar-day-text-size-han:var(--luzmo-font-size);--calendar-date-text-color:var(--luzmo-font-color);--calendar-day-text-color:var(--luzmo-font-color);--calendar-day-text-size:var(--luzmo-font-size);--calendar-day-border-radius:var(--luzmo-border-radius);--calendar-day-text-color-selected:var(--luzmo-primary-inverse-color);--calendar-day-text-color-hover:var(--luzmo-font-color-hover);--calendar-day-text-color-cap-selected:var(--luzmo-primary-inverse-color);--calendar-day-border-color-cap-selected:var(--luzmo-primary);--calendar-day-border-color-cap-selected-focus:var(--luzmo-primary-focus);--calendar-day-text-font-weight-selected:var(--bold-font-weight);--calendar-day-text-font-weight-cap-selected:var(--bold-font-weight);--calendar-day-today-text-color:var(--luzmo-primary);--calendar-day-today-background-color:var(--luzmo-background-color-hover);--calendar-day-today-text-font-weight:normal;--calendar-day-today-border-color:transparent;--calendar-day-today-text-color-disabled:var(--luzmo-font-color-disabled);--calendar-day-today-border-color-disabled:transparent;--calendar-day-text-color-disabled:var(--luzmo-font-color-disabled);--calendar-day-text-color-key-focus:var(--luzmo-primary-down);--calendar-day-background-color-selected:rgba(var(--luzmo-primary-rgb), .1);--calendar-day-text-color-range-selection:var(--luzmo-font-color);--calendar-day-background-color-cap-selected:var(--luzmo-primary);--calendar-button-icon-color:var(--luzmo-font-color)}:is(:host:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)),:host([dir=rtl])){--logical-rotation:matrix(-1, 0, 0, 1, 0, 0)}:host([size=s]){--calendar-day-width:var(--luzmo-component-height-s);--calendar-day-height:var(--luzmo-component-height-s);--calendar-day-border-radius:var(--luzmo-border-radius-s);--calendar-title-height:var(--luzmo-component-height-s);--calendar-title-text-size:var(--luzmo-font-size-s);--calendar-day-title-text-size:var(--luzmo-font-size-s);--calendar-day-text-size-han:var(--luzmo-font-size-s);--calendar-day-text-size:var(--luzmo-font-size-s)}:host([size=l]){--calendar-day-width:var(--luzmo-component-height-l);--calendar-day-height:var(--luzmo-component-height-l);--calendar-day-border-radius:var(--luzmo-border-radius-l);--calendar-title-height:var(--luzmo-component-height-l);--calendar-title-text-size:var(--luzmo-font-size-l);--calendar-day-title-text-size:var(--luzmo-font-size-l);--calendar-day-text-size-han:var(--luzmo-font-size-l);--calendar-day-text-size:var(--luzmo-font-size-l)}:host([size=xl]){--calendar-day-width:var(--luzmo-component-height-xl);--calendar-day-height:var(--luzmo-component-height-xl);--calendar-day-border-radius:var(--luzmo-border-radius-xl);--calendar-title-height:var(--luzmo-component-height-xl);--calendar-title-text-size:var(--luzmo-font-size-xl);--calendar-day-title-text-size:var(--luzmo-font-size-xl);--calendar-day-text-size-han:var(--luzmo-font-size-xl);--calendar-day-text-size:var(--luzmo-font-size-xl)}.table-cell span[role=button]{border-radius:var(--luzmo-calendar-day-width,var(--calendar-day-width))}.title-clickable{all:unset;cursor:pointer;-webkit-user-select:none;user-select:none;font:inherit;color:inherit;border-radius:var(--luzmo-border-radius,4px);padding-inline:var(--luzmo-spacing-2,4px);transition:background-color var(--luzmo-animation-duration,.13s) ease}.title-clickable:hover{background-color:var(--luzmo-calendar-title-background-color-hover,var(--luzmo-background-color-hover,#0000000d))}.title-clickable:focus-visible{outline:var(--luzmo-indicator-width,2px) solid var(--luzmo-indicator-color,var(--luzmo-primary));outline-offset:var(--luzmo-indicator-gap,2px)}.year-grid{gap:var(--luzmo-spacing-2,4px);padding:var(--luzmo-spacing-2,4px) 0;grid-template-columns:repeat(4,1fr);display:grid}.year-cell{block-size:var(--luzmo-calendar-day-height,var(--calendar-day-height));border:var(--luzmo-border-width,1px) solid transparent;border-radius:var(--luzmo-calendar-day-border-radius,var(--calendar-day-border-radius));color:var(--luzmo-calendar-day-text-color,var(--calendar-day-text-color));font-family:var(--luzmo-font-family,inherit);font-size:var(--luzmo-calendar-day-text-size,var(--calendar-day-text-size));cursor:pointer;transition:background-color var(--luzmo-animation-duration,.13s) ease;background:0 0;justify-content:center;align-items:center;padding:0;display:flex}.year-cell:hover{background-color:var(--luzmo-calendar-day-background-color-hover,var(--luzmo-background-color-hover,#0000000d));color:var(--luzmo-calendar-day-text-color-hover,var(--calendar-day-text-color-hover))}.year-cell:focus-visible{outline:var(--luzmo-indicator-width,2px) solid var(--luzmo-indicator-color,var(--luzmo-primary));outline-offset:var(--luzmo-indicator-gap,2px)}.year-cell.is-selected{background-color:var(--luzmo-calendar-day-background-color-cap-selected,var(--calendar-day-background-color-cap-selected));color:var(--luzmo-calendar-day-text-color-cap-selected,var(--calendar-day-text-color-cap-selected));font-weight:var(--luzmo-calendar-day-text-font-weight-cap-selected,var(--calendar-day-text-font-weight-cap-selected,bold))}.year-cell.is-current-year:not(.is-selected){color:var(--luzmo-calendar-day-today-text-color,var(--calendar-day-today-text-color));font-weight:var(--bold-font-weight,bold)}`,u=class extends t.n(e.n,{validSizes:[`s`,`m`,`l`,`xl`],noDefaultSize:!0}){static get styles(){return[(0,n.unsafeCSS)(l)]}get _language(){try{return this.language?new Intl.Locale(this.language).language:`en`}catch{return`en`}}get today(){return(0,s.today)(this.timeZone)}set isDateFocusIntent(e){this._isDateFocusIntent!==e&&(this._isDateFocusIntent=e,this.requestUpdate(`isDateFocusIntent`,!e))}get isDateFocusIntent(){return this._isDateFocusIntent}setDateFocusIntent(){this.isDateFocusIntent=!0}resetDateFocusIntent(){this.isDateFocusIntent=!1}connectedCallback(){super.connectedCallback(),document.addEventListener(`mousedown`,this.resetDateFocusIntent)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`mousedown`,this.resetDateFocusIntent)}clear(){this._value=void 0}constructor(){super(),this.disabled=!1,this.labels={previous:`Previous`,next:`Next`,today:`Today`,selected:`Selected`},this.selectionMode=`single`,this.currentDate=this.today,this.timeZone=(0,s.getLocalTimeZone)(),this.viewMode=`days`,this.yearGridStart=this.today.year-this.today.year%16,this.weekdays=[],this.currentMonthDates=[],this._isDateFocusIntent=!1,this.numberFormatter=new c.NumberFormatter(this._language),this.yearFormatter=new c.NumberFormatter(this._language,{useGrouping:!1}),this.setNumberFormatter(),this.setWeekdays(),this.setCurrentMonthDates()}willUpdate(e){e.has(`language`)&&(this.setNumberFormatter(),this.setWeekdays(),this.setCurrentMonthDates());let t=e.has(`min`),n=e.has(`max`),r=e.has(`value`),i=e.has(`startDate`),a=e.has(`endDate`),o=t||n||r,c=i||a;o&&(this.convertToCalendarDates(),this.checkDatePropsCompliance(t||n),this.updateCurrentDate()),c&&(this.convertRangeDates(),this._startDate&&!e.has(`value`)&&!this.value&&(this.currentDate=this._startDate));let l=e.get(`currentDate`);e.has(`currentDate`)&&(!l||!(0,s.isSameMonth)(l,this.currentDate))&&(this.setCurrentMonthDates(),this.setAttribute(`aria-label`,this.monthAndYear))}updated(e){if(e.has(`currentDate`)&&this.isDateFocusIntent&&this.focusCurrentDate(),e.has(`currentDate`)){let t=e.get(`currentDate`),n=e.has(`value`)||e.has(`startDate`)||e.has(`endDate`);t&&!(0,s.isSameMonth)(t,this.currentDate)&&!n&&this.dispatchEvent(new CustomEvent(`month-change`,{bubbles:!0,composed:!0,detail:{date:(0,s.startOfMonth)(this.currentDate).toString()}}))}}focusCurrentDate(){let e=this.shadowRoot?.querySelector(`td span[tabindex="0"]`);e&&e.focus()}parseDateOnly(e){return(0,s.parseDate)(e.includes(`T`)?e.split(`T`)[0]:e)}convertToCalendarDates(){this._min=this.min?this.parseDateOnly(this.min):void 0,this._max=this.max?this.parseDateOnly(this.max):void 0,this._value=this.value?this.parseDateOnly(this.value):void 0,this._min=this._min&&(0,s.toCalendarDate)(this._min).set({era:`AD`}),this._max=this._max&&(0,s.toCalendarDate)(this._max).set({era:`AD`}),this._value=this._value&&(0,s.toCalendarDate)(this._value).set({era:`AD`})}convertRangeDates(){this._startDate=this.startDate?(0,s.toCalendarDate)(this.parseDateOnly(this.startDate)).set({era:`AD`}):void 0,this._endDate=this.endDate?(0,s.toCalendarDate)(this.parseDateOnly(this.endDate)).set({era:`AD`}):void 0}checkDatePropsCompliance(e){e&&this._min&&this._max&&(this._min.compare(this._max)<0||(console.warn&&console.warn(this,`<${this.localName}> expects the 'min' to be less than 'max'. Please ensure that 'min' property's date is earlier than 'max' property's date.`),this._min=void 0,this._max=void 0)),this._value&&this.isNonCompliantDate(this._value)&&(console.warn&&console.warn(this,`<${this.localName}> expects the preselected value to comply with the min and max constraints. Please ensure that 'value' property's date is in between the dates for the 'min' and 'max' properties.`),this._value=void 0)}updateCurrentDate(){if(this._value){this.currentDate=this._value;return}this.isNonCompliantDate(this.today)?this._min?this.currentDate=this._min:this._max&&(this.currentDate=this._max):this.currentDate=this.today}isNonCompliantDate(e){return!!(this._min&&e.compare(this._min)<0||this._max&&e.compare(this._max)>0)}render(){return n.html`
+      ${this.renderCalendarHeader()}
+      ${this.viewMode===`years`?this.renderYearGrid():this.renderCalendarGrid()}
+    `}get monthAndYear(){return this.formatDate(this.currentDate,{month:`long`,year:`numeric`})}renderCalendarHeader(){let e=this.viewMode===`years`?`${this.formatYear(this.yearGridStart)} – ${this.formatYear(this.yearGridStart+16-1)}`:this.monthAndYear,t=this.viewMode===`years`?this.disabled:this.isPreviousMonthDisabled,r=this.viewMode===`years`?this.disabled:this.isNextMonthDisabled,a=this.viewMode===`years`?this.handlePreviousYearPage:this.handlePreviousMonth,o=this.viewMode===`years`?this.handleNextYearPage:this.handleNextMonth;return n.html`
+      <div class="header" @focusin=${this.resetDateFocusIntent}>
+        <h2
+          class="title"
+          aria-live="polite"
+          aria-atomic="true"
+        >
+          <button
+            class="title-clickable"
+            data-test-id="calendar-title"
+            @click=${this.toggleViewMode}
+          >
+            ${e}
+          </button>
+        </h2>
+
+        <luzmo-action-button
+          quiet
+          size="s"
+          label=${this.labels.previous}
+          class="prevMonth"
+          data-test-id="prev-btn"
+          ?disabled=${t}
+          @click=${a}
+        >
+          <div slot="icon">
+            <slot name="prev-icon">
+              <luzmo-icon
+                block
+                .size=${this.size}
+                .icon=${i.luzmoAngleLeft}
+              ></luzmo-icon>
+            </slot>
+          </div>
+        </luzmo-action-button>
+
+        <luzmo-action-button
+          quiet
+          size="s"
+          label=${this.labels.next}
+          class="nextMonth"
+          data-test-id="next-btn"
+          ?disabled=${r}
+          @click=${o}
+        >
+          <div slot="icon">
+            <slot name="next-icon">
+              <luzmo-icon
+                block
+                .size=${this.size}
+                .icon=${i.luzmoAngleRight}
+              ></luzmo-icon>
+            </slot>
+          </div>
+        </luzmo-action-button>
+      </div>
+    `}get isPreviousMonthDisabled(){if(this.disabled)return!0;let e=(0,s.startOfMonth)(this.currentDate),t=e.subtract({months:1});return e.era!==t.era||(0,s.isSameDay)(e,t)}get isNextMonthDisabled(){if(this.disabled)return!0;let e=(0,s.endOfMonth)(this.currentDate),t=e.add({months:1});return e.era!==t.era||(0,s.isSameDay)(e,t)}handlePreviousMonth(){let e=(0,s.startOfMonth)(this.currentDate).subtract({months:1});this._value&&(0,s.isSameMonth)(e,this._value)?e=this._value:(0,s.isSameMonth)(e,this.today)&&(e=this.today),this.currentDate=e}handleNextMonth(){let e=(0,s.startOfMonth)(this.currentDate).add({months:1});this._value&&(0,s.isSameMonth)(e,this._value)?e=this._value:(0,s.isSameMonth)(e,this.today)&&(e=this.today),this.currentDate=e}renderCalendarGrid(){return n.html`
+      <table
+        role="grid"
+        aria-readonly="true"
+        aria-disabled=${this.disabled}
+        role="presentation"
+        class="table body"
+        @keydown=${this.handleKeydown}
+      >
+        ${this.renderCalendarTableHead()} ${this.renderCalendarTableBody()}
+      </table>
+    `}renderCalendarTableHead(){return n.html`
+      <thead role="presentation">
+        <tr role="row">
+          ${this.renderWeekdayColumns()}
+        </tr>
+      </thead>
+    `}renderWeekdayColumns(){return this.weekdays.map(e=>this.renderWeekdayColumn(e))}renderWeekdayColumn(e){return n.html`
+      <th role="columnheader" scope="col" class="table-cell">
+        <abbr class="dayOfWeek" title=${e.long}> ${e.narrow} </abbr>
+      </th>
+    `}renderCalendarTableBody(){return n.html`
+      <tbody role="presentation">
+        ${this.renderCalendarWeeks()}
+      </tbody>
+    `}renderCalendarWeeks(){return this.currentMonthDates.map(e=>n.html`
+        <tr role="row">
+          ${this.renderDatesInWeek(e)}
+        </tr>
+      `)}renderDatesInWeek(e){return e.map(e=>this.renderCalendarTableCell(e))}parseDateCellProperties(e){let t={isOutsideMonth:!1,isSelected:!1,isToday:!1,isDisabled:!1,isTabbable:!1,isRangeSelection:!1,isRangeStart:!1,isRangeEnd:!1,isSelectionStart:!1,isSelectionEnd:!1};return t.isOutsideMonth=e.month!==this.currentDate.month,t.isOutsideMonth||(t.isDisabled=this.disabled||this.isMinLimitReached(e)||this.isMaxLimitReached(e),t.isToday=(0,s.isSameDay)(e,this.today),t.isDisabled)?t:(t.isTabbable=(0,s.isSameDay)(e,this.currentDate),this.selectionMode===`range`?this.computeRangeFlags(e,t):t.isSelected=!!(this._value&&(0,s.isSameDay)(this._value,e)),t)}computeRangeFlags(e,t){let n=this._startDate,r=this._endDate??this.hoveredDate;if(!n)return;let i=(0,s.isSameDay)(e,n);if(t.isSelectionStart=i,t.isSelected=i,!r){i&&(t.isRangeStart=!0,t.isRangeEnd=!0);return}let a=n,o=r;a.compare(o)>0&&(a=r,o=n);let c=e.compare(a)>=0,l=e.compare(o)<=0;c&&l&&(t.isRangeSelection=!0,t.isSelected=!0),t.isRangeStart=(0,s.isSameDay)(e,a),t.isRangeEnd=(0,s.isSameDay)(e,o),t.isSelectionStart=t.isRangeStart,t.isSelectionEnd=t.isRangeEnd}renderCalendarTableCell(e){let{isOutsideMonth:t,isSelected:r,isToday:i,isDisabled:s,isTabbable:c,isRangeSelection:l,isRangeStart:u,isRangeEnd:d,isSelectionStart:f,isSelectionEnd:p}=this.parseDateCellProperties(e),m={date:!0,"is-outsideMonth":t,"is-selected":r,"is-today":i,"is-disabled":s,"is-range-selection":l,"is-range-start":u,"is-range-end":d,"is-selection-start":f,"is-selection-end":p},h=``;i?h=`${this.labels.today}, `:r&&(h=`${this.labels.selected}, `);let g=h+this.formatDate(e,{weekday:`long`,year:`numeric`,month:`long`,day:`numeric`});return n.html`
+      <td role="gridcell" class="table-cell">
+        <span
+          role="button"
+          tabindex=${(0,a.ifDefined)(t?void 0:c?`0`:`-1`)}
+          aria-label=${g}
+          aria-disabled=${t||s}
+          data-value=${e.toString()}
+          @mousedown=${this.handleDaySelect}
+          @mouseenter=${this.handleDayHover}
+        >
+          <span role="presentation" class=${(0,o.classMap)(m)}>
+            ${this.formatNumber(e.day)}
+          </span>
+        </span>
+      </td>
+    `}handleKeydown(e){switch(this.setDateFocusIntent(),e.code){case`ArrowLeft`:this.moveToPreviousDay();break;case`ArrowDown`:this.moveToNextWeek();break;case`ArrowRight`:this.moveToNextDay();break;case`ArrowUp`:this.moveToPreviousWeek();break;case`Space`:case`Enter`:this.handleDaySelect(e);break;case`PageUp`:e.preventDefault(),e.shiftKey?this.moveToPreviousYear():this.moveToKeyboardPreviousMonth();break;case`PageDown`:e.preventDefault(),e.shiftKey?this.moveToNextYear():this.moveToKeyboardNextMonth();break;case`Home`:e.preventDefault(),this.moveToStartOfWeek();break;case`End`:e.preventDefault(),this.moveToEndOfWeek();break}}handleDaySelect(e){if(this.disabled){e.preventDefault();return}let t=e.target.closest(`span[role="button"]`),n=t&&t.dataset.value;if(!n)return;let r=(0,s.parseDate)(n);if(this.isMinLimitReached(r)||this.isMaxLimitReached(r)){e.preventDefault();return}if(this.selectionMode===`range`){this.handleRangeSelect(r);return}if(this._value&&(0,s.isSameDay)(this._value,r)){e.preventDefault();return}this._value=r,this.value=r.toString(),this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,cancelable:!0,detail:{value:this.value}}))}handleRangeSelect(e){if(!this._startDate||this._endDate){this._startDate=e,this._endDate=void 0,this.hoveredDate=void 0,this.startDate=e.toString(),this.endDate=void 0,this.dispatchEvent(new CustomEvent(`range-select`,{bubbles:!0,composed:!0,cancelable:!0,detail:{startDate:this.startDate,endDate:void 0}}));return}let t=this._startDate,n=e;t.compare(n)>0&&(n=t,t=e),this._startDate=t,this._endDate=n,this.hoveredDate=void 0,this.startDate=t.toString(),this.endDate=n.toString(),this.dispatchEvent(new CustomEvent(`range-select`,{bubbles:!0,composed:!0,cancelable:!0,detail:{startDate:this.startDate,endDate:this.endDate}}))}handleDayHover(e){if(this.selectionMode!==`range`||!this._startDate||this._endDate)return;let t=e.target.closest(`span[role="button"]`),n=t&&t.dataset.value;n&&(this.hoveredDate=(0,s.parseDate)(n),this.dispatchEvent(new CustomEvent(`hover-date`,{bubbles:!0,composed:!0,detail:{date:n}})))}toggleViewMode(){this.disabled||(this.viewMode===`days`?(this.yearGridStart=this.currentDate.year-this.currentDate.year%16,this.viewMode=`years`):this.viewMode=`days`)}handlePreviousYearPage(){this.yearGridStart-=16}handleNextYearPage(){this.yearGridStart+=16}handleYearSelect(e){this.currentDate=this.currentDate.set({year:e,month:1,day:1}),this.setCurrentMonthDates(),this.viewMode=`days`}renderYearGrid(){let e=Array.from({length:16},(e,t)=>this.yearGridStart+t),t=this.today.year;return n.html`
+      <div
+        class="year-grid"
+        role="grid"
+        aria-label="${this.formatYear(this.yearGridStart)} – ${this.formatYear(this.yearGridStart+16-1)}"
+        @keydown=${this.handleYearGridKeydown}
+      >
+        ${e.map(e=>{let r=this.currentDate.year===e;return n.html`
+            <button
+              class=${(0,o.classMap)({"year-cell":!0,"is-selected":r,"is-current-year":t===e})}
+              tabindex=${r?`0`:`-1`}
+              data-year=${e}
+              aria-label=${e.toString()}
+              aria-selected=${r}
+              @click=${()=>this.handleYearSelect(e)}
+            >
+              ${this.formatYear(e)}
+            </button>
+          `})}
+      </div>
+    `}handleYearGridKeydown(e){let t=e.target,n=Number(t.dataset.year);if(!n)return;let r;switch(e.code){case`ArrowLeft`:r=n-1;break;case`ArrowRight`:r=n+1;break;case`ArrowUp`:r=n-4;break;case`ArrowDown`:r=n+4;break;case`Enter`:case`Space`:e.preventDefault(),this.handleYearSelect(n);return}r!==void 0&&(e.preventDefault(),r<this.yearGridStart?this.yearGridStart-=16:r>=this.yearGridStart+16&&(this.yearGridStart+=16),this.updateComplete.then(()=>{(this.shadowRoot?.querySelector(`button[data-year="${r}"]`))?.focus()}))}moveToPreviousDay(){let e=this.currentDate.subtract({days:1});this.canMoveBackToDate(e)&&(this.currentDate=e)}moveToNextDay(){let e=this.currentDate.add({days:1});this.canMoveForwardToDate(e)&&(this.currentDate=e)}moveToPreviousWeek(){let e=this.currentDate.subtract({weeks:1});if(this.canMoveBackToDate(e)){this.currentDate=e;return}let t=e.add({days:1});for(;!this.canMoveBackToDate(t);)t=t.add({days:1});this.currentDate=t}moveToNextWeek(){let e=this.currentDate.add({weeks:1});if(this.canMoveForwardToDate(e)){this.currentDate=e;return}let t=e.subtract({days:1});for(;!this.canMoveForwardToDate(t);)t=t.subtract({days:1});this.currentDate=t}canMoveBackToDate(e){return this.isMinLimitReached(e)?!1:(0,s.isSameMonth)(this.currentDate,e)||!this.isPreviousMonthDisabled}canMoveForwardToDate(e){return this.isMaxLimitReached(e)?!1:(0,s.isSameMonth)(this.currentDate,e)||!this.isNextMonthDisabled}moveToKeyboardPreviousMonth(){if(this.isPreviousMonthDisabled)return;let e=this.currentDate.subtract({months:1}),t=(0,s.endOfMonth)(e).day,n=Math.min(this.currentDate.day,t),r=e.set({day:n});this.isMinLimitReached(r)||(this.currentDate=r)}moveToKeyboardNextMonth(){if(this.isNextMonthDisabled)return;let e=this.currentDate.add({months:1}),t=(0,s.endOfMonth)(e).day,n=Math.min(this.currentDate.day,t),r=e.set({day:n});this.isMaxLimitReached(r)||(this.currentDate=r)}moveToPreviousYear(){let e=this.currentDate.subtract({years:1}),t=(0,s.endOfMonth)(e).day,n=Math.min(this.currentDate.day,t),r=e.set({day:n});this.isMinLimitReached(r)||(this.currentDate=r)}moveToNextYear(){let e=this.currentDate.add({years:1}),t=(0,s.endOfMonth)(e).day,n=Math.min(this.currentDate.day,t),r=e.set({day:n});this.isMaxLimitReached(r)||(this.currentDate=r)}moveToStartOfWeek(){let e=(0,s.startOfWeek)(this.currentDate,this._language);this.isMinLimitReached(e)||(this.currentDate=e)}moveToEndOfWeek(){let e=(0,s.endOfWeek)(this.currentDate,this._language);this.isMaxLimitReached(e)||(this.currentDate=e)}setWeekdays(){let e=(0,s.startOfWeek)(this.currentDate,this._language);this.weekdays=[...Array.from({length:7}).keys()].map(t=>{let n=e.add({days:t});return{narrow:this.formatDate(n,{weekday:`narrow`}),long:this.formatDate(n,{weekday:`long`})}})}setCurrentMonthDates(){let e=(0,s.getWeeksInMonth)(this.currentDate,this._language),t=Array.from({length:e});for(let n of Array.from({length:e}).keys())t[n]=this.getDatesInWeek(this.currentDate,n);this.currentMonthDates=t}getDatesInWeek(e,t){let n=[],r=(0,s.startOfWeek)((0,s.startOfMonth)(e).add({weeks:t}),this._language);for(;n.length<7;){n.push(r);let e=r.add({days:1});if((0,s.isSameDay)(r,e))break;r=e}return n}isMinLimitReached(e){return!!(this._min&&e.compare(this._min)<0)}isMaxLimitReached(e){return!!(this._max&&e.compare(this._max)>0)}formatDate(e,t){return new s.DateFormatter(this._language,t).format(e.toDate(this.timeZone))}setNumberFormatter(){this.numberFormatter=new c.NumberFormatter(this._language),this.yearFormatter=new c.NumberFormatter(this._language,{useGrouping:!1})}formatNumber(e){return this.numberFormatter.format(e)}formatYear(e){return this.yearFormatter.format(e)}};e.t([(0,r.property)({type:String})],u.prototype,`value`,void 0),e.t([(0,r.property)({type:String})],u.prototype,`min`,void 0),e.t([(0,r.property)({type:String})],u.prototype,`max`,void 0),e.t([(0,r.property)({type:Boolean,reflect:!0})],u.prototype,`disabled`,void 0),e.t([(0,r.property)({type:String,reflect:!0})],u.prototype,`language`,void 0),e.t([(0,r.property)({type:Object})],u.prototype,`labels`,void 0),e.t([(0,r.property)({type:String,attribute:`selection-mode`,reflect:!0})],u.prototype,`selectionMode`,void 0),e.t([(0,r.property)({type:String,attribute:`start-date`})],u.prototype,`startDate`,void 0),e.t([(0,r.property)({type:String,attribute:`end-date`})],u.prototype,`endDate`,void 0),e.t([(0,r.state)()],u.prototype,`currentDate`,void 0),e.t([(0,r.state)()],u.prototype,`_value`,void 0),e.t([(0,r.state)()],u.prototype,`_min`,void 0),e.t([(0,r.state)()],u.prototype,`_max`,void 0),e.t([(0,r.state)()],u.prototype,`_startDate`,void 0),e.t([(0,r.state)()],u.prototype,`_endDate`,void 0),e.t([(0,r.state)()],u.prototype,`hoveredDate`,void 0),e.t([(0,r.state)()],u.prototype,`viewMode`,void 0),e.t([(0,r.state)()],u.prototype,`yearGridStart`,void 0),e.t([(0,r.state)()],u.prototype,`weekdays`,void 0),e.t([(0,r.state)()],u.prototype,`currentMonthDates`,void 0),e.t([(0,r.state)()],u.prototype,`isDateFocusIntent`,null),customElements.get(`luzmo-calendar`)||customElements.define(`luzmo-calendar`,u),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return u}});

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

@@ -0,0 +1,139 @@
+import { CSSResultArray, TemplateResult } from 'lit';
+import { LuzmoElement } from '../../utils/base';
+export type ChatMessagePosition = 'left' | 'right' | 'middle';
+export type ChatMessageVariant = 'default' | 'primary' | 'secondary';
+export type ChatMessageTreatment = 'fill' | 'outline';
+export type ChatMessageMeta = 'inside' | 'outside';
+export type ChatMessageActions = 'inside' | 'outside';
+export type ChatMessageAvatarPlacement = 'top' | 'middle' | 'bottom';
+declare const LuzmoChatMessage_base: typeof LuzmoElement & {
+    new (...args: any[]): import("../..").SizedElementInterface;
+    prototype: import("../..").SizedElementInterface;
+};
+/**
+ * A chat message component for displaying conversation messages.
+ *
+ * @element luzmo-chat-message
+ *
+ * @slot - Default slot for message content
+ * @slot message - Alternative slot for message content (may include custom elements)
+ * @slot avatar - Slot for avatar element (use luzmo-avatar)
+ * @slot actions - Slot for message actions
+ * @slot extra-actions - Slot for extra actions that appear on hover/click/longclick (absolute positioned)
+ */
+export declare class LuzmoChatMessage extends LuzmoChatMessage_base {
+    private defaultSlotObserver;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get styles(): CSSResultArray;
+    /**
+     * The horizontal position of the message.
+     * @attr position
+     */
+    position: ChatMessagePosition;
+    /**
+     * The semantic variant of the message.
+     * - `default`: Standard neutral message
+     * - `primary`: Primary color theme
+     * - `secondary`: Secondary color theme
+     * @attr variant
+     */
+    variant: ChatMessageVariant;
+    /**
+     * The visual treatment of the message.
+     * - `fill`: Full background color (default)
+     * - `outline`: Border only with transparent background
+     * @attr treatment
+     */
+    treatment: ChatMessageTreatment;
+    /**
+     * Whether the message should have reduced visual emphasis.
+     * When quiet is true, removes border, background, and uses normal font color.
+     * @attr quiet
+     */
+    quiet: boolean;
+    /**
+     * The name of the user who sent the message.
+     * @attr name
+     */
+    name?: string;
+    /**
+     * The datetime when the message was sent (ISO 8601 string).
+     * @attr datetime
+     */
+    datetime?: string;
+    /**
+     * Intl.DateTimeFormatOptions object for formatting the datetime.
+     * @attr datetime-format-options
+     */
+    datetimeFormatOptions?: Intl.DateTimeFormatOptions;
+    /**
+     * The language to use for formatting the datetime.
+     * @attr datetime-language
+     */
+    datetimeLanguage?: string;
+    /**
+     * Controls whether name and datetime render inside the message header or outside.
+     * @attr meta
+     */
+    meta: ChatMessageMeta;
+    /**
+     * Controls whether the actions slot renders inside or outside the message.
+     * @attr actions
+     */
+    actionsPosition: ChatMessageActions;
+    /**
+     * The vertical placement of the avatar relative to the message.
+     * @attr avatar-placement
+     */
+    avatarPlacement: ChatMessageAvatarPlacement;
+    /**
+     * Whether the component has an avatar slot.
+     * @private
+     */
+    private _hasAvatar;
+    /**
+     * Whether the component has an actions slot.
+     * @private
+     */
+    private _hasActions;
+    /**
+     * Whether the component has an extra-actions slot.
+     * @private
+     */
+    private _hasExtraActions;
+    /**
+     * Language resolution controller for internationalization.
+     * @private
+     */
+    private languageResolver;
+    private _handleAvatarSlotChange;
+    private _handleActionsSlotChange;
+    private _handleExtraActionsSlotChange;
+    private shouldUpdateForDefaultSlotMutation;
+    private get defaultSlotMarkdown();
+    private renderDefaultSlotFallback;
+    /**
+     * Formats the message datetime using Intl.DateTimeFormat.
+     * @private
+     */
+    private get formattedDatetime();
+    /**
+     * Determines which corners should be squared based on position and avatar placement.
+     * @private
+     */
+    private get squaredCorners();
+    /**
+     * Renders the meta information (user name and datetime) inside the message header.
+     * @private
+     */
+    private renderMeta;
+    /**
+     * Renders the actions slot inside or outside the message.
+     * @private
+     */
+    private renderActions;
+    protected render(): TemplateResult;
+}
+export {};

package/components/{random-id-ByCz1xaq.js → chat-message/index.cjs}

@@ -15,12 +15,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-function n() {
-  return Array.from(
-    crypto.getRandomValues(new Uint8Array(4)),
-    (r) => `0${(r & 255).toString(16)}`.slice(-2)
-  ).join("");
-}
-export {
-  n as r
-};
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../chat-message-CNE-mGuP.cjs`);exports.LuzmoChatMessage=e.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,25 @@
+/*! * 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.
+ * */
+(() => {
+	if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+		let e = document.createElement("style");
+		e.setAttribute("data-luzmo-vars", ""), e.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: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), black 45%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--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-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: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), black 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-primary: #4434ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), black 20%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5%);--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 7%), black 1%);--luzmo-background-color-focus: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5%);--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), black 25%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 45%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 25%);--luzmo-secondary: #d000d0;--luzmo-secondary-hover: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-down: color-mix(in oklch, var(--luzmo-secondary), black 20%);--luzmo-secondary-focus: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 208, 0, 208;--luzmo-scrollbar-size: 6px;--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba( var(--luzmo-border-color-rgb), 0.4 );--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-width: thin;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), black 20%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-negative-inverse-color: #ffffff;--luzmo-positive-color: rgb(18, 133, 90);--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), black 20%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-rgb: 18, 133, 90;--luzmo-positive-inverse-color: #ffffff;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), black 45%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), black 45%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-informative-color: #1670dd;--luzmo-informative-color-rgb: 22, 112, 221;--luzmo-notice-color: rgb(229, 127, 0);--luzmo-seafoam-color: rgb(0, 140, 140);--luzmo-indigo-color: rgb(68, 52, 255);--luzmo-purple-color: rgb(112, 48, 210);--luzmo-fuchsia-color: rgb(205, 30, 170);--luzmo-magenta-color: rgb(203, 36, 98);--luzmo-yellow-color: rgb(228, 208, 0);--luzmo-gray-color: rgb(110, 110, 110);--luzmo-red-color: rgb(202, 34, 28);--luzmo-orange-color: rgb(218, 123, 17);--luzmo-chartreuse-color: rgb(85, 135, 0);--luzmo-celery-color: rgb(48, 134, 22);--luzmo-green-color: rgb(18, 133, 90);--luzmo-cyan-color: rgb(0, 134, 180);--luzmo-blue-color: rgb(22, 112, 221);--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(e);
+	}
+})();
+import { t as e } from "../chat-message-DJgocVNj.js";
+export { e as LuzmoChatMessage };