@luzmo/lucero 2.2.1 → 2.4.0

package/standalone/date-range-picker.js

@@ -0,0 +1,182 @@
+/*!* Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2026 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"./tokens.js";import{c as e,i as t,y as n}from"./chunks/lit-BN_lRQbJ.js";import{a as r,c as i,g as a,i as o,l as s,s as c,v as l,y as u}from"./chunks/lucero-runtime-DGJ9-isg.js";import{g as d,o as f}from"./chunks/luzmo-icons-CJa-aByT.js";import{t as p}from"./chunks/when-BWvpqCBs.js";import"./chunks/icon-Dy6J1QeX.js";import"./chunks/popover-BsB3dmQe.js";import{t as m}from"./chunks/class-map-CxQ0PcQP.js";import"./chunks/overlay-C_XW8yry.js";import{_ as h,d as g,g as _,h as v,l as y,n as b,p as x,s as S,y as C}from"./chunks/calendar-ZwUYkzVq.js";import{t as w}from"./chunks/NumberParser-r_jv94LA.js";import{t as T}from"./chunks/manage-help-text-Cl9OJ2xf.js";import{t as E}from"./chunks/text-field.module-ClDE7laI.js";import"./chunks/picker-button-BeXTIgUt.js";import{a as D,c as O,f as k,i as A,l as j,n as M,o as N,p as P,r as F,s as I,t as L,u as R}from"./chunks/segments-factory-Ch3AAizU.js";var z=`:host{font-family:var(--luzmo-font-family);--date-range-picker-border-radius:var(--luzmo-date-range-picker-border-radius,var(--luzmo-border-radius));--date-range-picker-border-width:var(--luzmo-border-width);--date-range-picker-button-border-color:var(--luzmo-date-range-picker-pickerbutton-border-color,var(--luzmo-border-color));--date-range-picker-button-border-color-focus:var(--luzmo-date-range-picker-pickerbutton-border-color-focus,var(--luzmo-primary));--date-range-picker-button-border-color-invalid:var(--luzmo-date-range-picker-pickerbutton-border-color-invalid,var(--luzmo-negative-color));--date-range-picker-dash-color:var(--luzmo-date-range-picker-dash-color,var(--luzmo-font-color));--date-range-picker-dash-font-size:var(--luzmo-date-range-picker-dash-font-size,var(--luzmo-font-size));--date-range-picker-focus-ring-color:var(--luzmo-date-range-picker-focus-ring-color,var(--luzmo-indicator-color));--date-range-picker-focus-ring-gap:var(--luzmo-date-range-picker-focus-ring-gap,0px);--date-range-picker-focus-ring-width:var(--luzmo-date-range-picker-focus-ring-width,var(--luzmo-border-width));--date-range-picker-focus-animation:var(--luzmo-date-range-picker-focus-animation,var(--luzmo-animation-duration));--date-range-picker-calendar-padding:var(--luzmo-date-range-picker-calendar-padding,var(--luzmo-spacing-4));--luzmo-text-field-width:var(--luzmo-date-range-picker-width,var(--date-range-picker-width));border-radius:var(--date-range-picker-border-radius);flex-flow:row;max-inline-size:100%;display:inline-flex;position:relative}:host([disabled]) luzmo-picker-button{cursor:default}:host([disabled]){--luzmo-date-range-picker-dash-color:var(--luzmo-date-range-picker-dash-color-disabled,var(--luzmo-font-color-disabled))}:host([disabled]) .luzmo-DatePicker-rangeDash{background-color:var(--luzmo-text-field-background-color-disabled,var(--luzmo-background-color-disabled));border-block-color:#0000}:host([readonly]) .luzmo-DatePicker-rangeDash{background-color:initial;border-block-color:#0000}:host([invalid]:not([quiet])) .range-wrapper:after{border-color:var(--date-range-picker-button-border-color-invalid)}:host([invalid]:not([quiet])) .range-wrapper .input,:host([invalid]:not([quiet])) .range-wrapper .input:read-only{border-color:#0000}:host([invalid]:not([quiet])) .luzmo-DatePicker-rangeDash{background-color:#0000;border-block-color:#0000}:host(:not([quiet],[disabled])){--luzmo-picker-button-border-color:var(--date-range-picker-button-border-color)}:host([focused]),:host([focused]:not([quiet],[disabled])){--luzmo-picker-button-border-color:var(--date-range-picker-button-border-color-focus)}:host([invalid]:not([quiet],[disabled])){--luzmo-picker-button-border-color:var(--date-range-picker-button-border-color-invalid)}.range-wrapper{border-radius:var(--date-range-picker-border-radius);flex-flow:row;flex:1;align-items:stretch;inline-size:100%;min-inline-size:0;display:inline-flex;position:relative}.range-wrapper:after{pointer-events:none;content:"";border:var(--date-range-picker-focus-ring-width) solid transparent;border-radius:var(--date-range-picker-border-radius);transition:border-color var(--date-range-picker-focus-animation) ease-in-out;position:absolute;inset:0}:host([focused]) .range-wrapper:not(.luzmo-DatePicker--quiet):after{border-color:var(--date-range-picker-focus-ring-color)}:host([focused]) .range-wrapper:not(.luzmo-DatePicker--quiet) #text-field:after{display:none}:host([focused]) .range-wrapper .input,:host([focused]) .range-wrapper .input:read-only,:host([focused]) .range-wrapper #text-field .input,:host([focused]) .range-wrapper #text-field:hover .input{border-color:var(--date-range-picker-focus-ring-color);outline:none}:host([focused]) .range-wrapper .luzmo-DatePicker-rangeDash{border-block-color:var(--date-range-picker-focus-ring-color)}:host .input:read-only{border-color:var(--luzmo-date-range-picker-border-color,var(--luzmo-border-color))}:host(:not([quiet],[readonly],[disabled])) .input:read-only{background-color:var(--luzmo-text-field-background-color,var(--luzmo-background-color))}:host([disabled]:not([quiet])) .input:read-only{background-color:var(--luzmo-text-field-background-color-disabled,var(--luzmo-background-color-disabled))}.input.luzmo-DatePicker-startField{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.input.luzmo-DatePicker-endField{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.luzmo-DatePicker-rangeDash{color:var(--date-range-picker-dash-color);font-size:var(--date-range-picker-dash-font-size);flex:initial;z-index:1;background-color:var(--luzmo-text-field-background-color,var(--luzmo-background-color,#fff));border-block:var(--date-range-picker-border-width) solid var(--luzmo-border-color,#ccc);transition:border-block-color var(--luzmo-text-field-animation-duration,var(--luzmo-animation-duration)) ease-in-out;align-items:center;display:flex}.luzmo-DatePicker-rangeDash:before{content:"→";margin-inline:var(--luzmo-spacing-2,4px);text-align:center;display:inline-block}luzmo-picker-button{cursor:pointer;z-index:2;position:absolute;inset-inline-end:0}:host([quiet]) .luzmo-DatePicker-rangeDash{background-color:#0000;border-block-start-width:0;border-inline-width:0;border-radius:0}:host([quiet]) .range-wrapper:after{display:none}:host([quiet][focused]) .range-wrapper:after{border-color:#0000;border-block-end-color:var(--date-range-picker-focus-ring-color);border-radius:0;display:block;inset-block-end:0}:host([quiet]) luzmo-picker-button{inline-size:auto}:host([quiet]) luzmo-picker-button:not(:disabled,.is-open){--luzmo-picker-button-background-color:transparent}@media (hover:hover){:host(:hover:not([focused],[disabled],[invalid],[readonly])){--luzmo-picker-button-border-color:var(--highcontrast-text-field-border-color-hover,var(--luzmo-text-field-border-color-hover,rgba(var(--luzmo-primary-rgb), .3)))}:host(:hover:not([focused],[disabled],[invalid],[readonly])) .range-wrapper #text-field .input{border-color:var(--highcontrast-text-field-border-color-hover,var(--luzmo-text-field-border-color-hover,rgba(var(--luzmo-primary-rgb), .3)))}:host(:hover:not([focused],[disabled],[invalid],[readonly])) .luzmo-DatePicker-rangeDash{border-block-color:var(--highcontrast-text-field-border-color-hover,var(--luzmo-text-field-border-color-hover,rgba(var(--luzmo-primary-rgb), .3)))}:host([focused]:hover:not([disabled],[invalid],[readonly])) .luzmo-DatePicker-rangeDash{border-block-color:var(--highcontrast-text-field-border-color-focus-hover,var(--luzmo-text-field-border-color-focus-hover,var(--luzmo-primary)))}}@media (forced-colors:active){:host{--date-range-picker-dash-color:CanvasText;--date-range-picker-focus-ring-color:Highlight}:host([disabled]){--date-range-picker-dash-color:GrayText}}:host{--date-range-picker-calendar-padding:var(--luzmo-spacing-4);--date-range-picker-icon-size:18px;--date-range-picker-dash-font-size:var(--luzmo-font-size);--date-range-picker-width:auto;--text-field-focus-indicator-color:var(--luzmo-background-color-highlight)}:host([size=s]){--date-range-picker-calendar-padding:var(--luzmo-spacing-3);--date-range-picker-icon-size:16px;--date-range-picker-dash-font-size:var(--luzmo-font-size-s)}:host([size=m]){--date-range-picker-calendar-padding:var(--luzmo-spacing-4);--date-range-picker-icon-size:18px;--date-range-picker-dash-font-size:var(--luzmo-font-size-m)}:host([size=l]){--date-range-picker-calendar-padding:var(--luzmo-spacing-5);--date-range-picker-icon-size:20px;--date-range-picker-dash-font-size:var(--luzmo-font-size-l)}:host([size=xl]){--date-range-picker-calendar-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--date-range-picker-icon-size:22px;--date-range-picker-dash-font-size:var(--luzmo-font-size-xl)}:host{--picker-button-size:var(--luzmo-text-field-height,var(--text-field-height));--input-spacing:var(--luzmo-text-field-spacing-inline,var(--text-field-spacing-inline));--input-border-width:var(--luzmo-text-field-border-width,var(--luzmo-border-width));--status-icon-size:var(--luzmo-text-field-icon-size-invalid,var(--text-field-icon-size-invalid));flex-wrap:wrap}:host #text-field{flex:auto;inline-size:auto;min-inline-size:0;display:inline-block}:host #text-field .input,:host([quiet]) #text-field .input,:host([invalid]) #text-field .input{inline-size:100%}:host #text-field:last-of-type .input{padding-inline-end:calc(var(--picker-button-size) + var(--input-spacing) - var(--input-border-width))}:host([invalid]) .input.luzmo-DatePicker-startField{padding-inline-end:calc(var(--input-spacing) - var(--input-border-width))}:host([invalid]) #text-field:last-of-type .input{padding-inline-end:calc(var(--picker-button-size) + var(--status-icon-size) + 2 * var(--luzmo-text-field-icon-spacing-inline-end-invalid,var(--text-field-icon-spacing-inline-end-invalid)))}:host([invalid]) .range-wrapper .icon{z-index:3;pointer-events:none;font-size:var(--luzmo-text-field-icon-size-invalid,var(--text-field-icon-size-invalid));color:var(--luzmo-negative-color);justify-content:center;align-items:center;display:flex;position:absolute;inset-block-start:var(--luzmo-text-field-icon-spacing-block-invalid,var(--text-field-icon-spacing-block-invalid));inset-block-end:var(--luzmo-text-field-icon-spacing-block-invalid,var(--text-field-icon-spacing-block-invalid));inset-inline-end:calc(var(--picker-button-size) + var(--luzmo-text-field-icon-spacing-inline-end-invalid,var(--text-field-icon-spacing-inline-end-invalid)))}luzmo-picker-button:focus-visible{outline:none}luzmo-popover{overflow-y:auto}luzmo-popover .popover-content{padding:var(--luzmo-date-range-picker-calendar-padding,var(--date-range-picker-calendar-padding))}.input-content{scrollbar-width:none;align-items:center;height:100%;line-height:normal;display:flex;overflow:auto hidden}.input-content::-webkit-scrollbar{width:0;height:0;display:none}.literal-segment,.editable-segment{color:var(--luzmo-date-range-picker-font-color-default,var(--luzmo-font-color));display:inline-block}.editable-segment{font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap;caret-color:#0000;outline:none;padding:0 .15em}[dir=ltr] .editable-segment{text-align:start}.literal-segment{white-space:pre;-webkit-user-select:none;user-select:none}.is-placeholder,.is-placeholder+.literal-segment{color:var(--luzmo-font-color-disabled)}.editable-segment:focus-visible{color:var(--luzmo-date-range-picker-segment-text-color-focus,var(--luzmo-font-color));background-color:var(--highcontrast-text-field-focus-indicator-color,var(--luzmo-text-field-focus-indicator-color,var(--text-field-focus-indicator-color)))}.editable-segment::selection{background-color:#0000}.calendar-layout,.calendar-layout--dual .calendars-row{gap:var(--luzmo-spacing-4,16px);flex-direction:row;display:flex}.calendar-container{flex-shrink:0}.defined-ranges{gap:var(--luzmo-spacing-1,2px);border-inline-start:var(--luzmo-border-width,1px) solid var(--luzmo-border-color,#e0e0e0);flex-direction:column;min-inline-size:120px;padding-inline-start:var(--luzmo-spacing-4,16px);display:flex}.defined-range-item{inline-size:100%;padding:var(--luzmo-spacing-2,4px) var(--luzmo-spacing-3,8px);border-radius:var(--luzmo-border-radius,4px);color:var(--luzmo-font-color,inherit);font-family:var(--luzmo-font-family,inherit);font-size:var(--luzmo-font-size,inherit);text-align:start;cursor:pointer;transition:background-color var(--luzmo-animation-duration,.13s) ease;white-space:nowrap;background:0 0;border:none;display:block}.defined-range-item:hover{background-color:var(--luzmo-background-color-hover,#0000000d)}.defined-range-item:focus-visible{outline:var(--luzmo-indicator-width,2px) solid var(--luzmo-indicator-color,var(--luzmo-primary));outline-offset:var(--luzmo-indicator-gap,2px)}.defined-range-item[aria-selected=true]{background-color:var(--luzmo-background-color-highlight,#00000014);font-weight:var(--bold-font-weight,bold)}`;function B(){let e=new Date;e.setHours(0,0,0,0);let t=new Date(e);t.setDate(t.getDate()-1);let n=new Date(e),r=n.getDay();n.setDate(n.getDate()-r);let i=new Date(n);i.setDate(i.getDate()+6);let a=new Date(n);a.setDate(a.getDate()-7);let o=new Date(n);o.setDate(o.getDate()-1);let s=new Date(e.getFullYear(),e.getMonth(),1),c=new Date(e.getFullYear(),e.getMonth()+1,0),l=new Date(e.getFullYear(),e.getMonth()-1,1),u=new Date(e.getFullYear(),e.getMonth(),0);return[{label:`Today`,startDate:e,endDate:e},{label:`Yesterday`,startDate:t,endDate:t},{label:`This Week`,startDate:n,endDate:i},{label:`Last Week`,startDate:a,endDate:o},{label:`This Month`,startDate:s,endDate:c},{label:`Last Month`,startDate:l,endDate:u}]}function V(e){return`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,`0`)}-${String(e.getDate()).padStart(2,`0`)}`}var H=class extends T(i(r,{validSizes:Object.values(c)})){static get styles(){return[n(z),n(E)]}get _language(){try{return this.language?new Intl.Locale(this.language).language:`en`}catch{return`en`}}get focusElement(){return this.firstEditableSegment}clear(){this._startDate=void 0,this._endDate=void 0,this.startDate=void 0,this.endDate=void 0,this.setStartSegments(),this.setEndSegments()}constructor(){super(),this.precision=k.Day,this.calendars=1,this.showDefinedRanges=!1,this.definedRanges=B(),this.invalid=!1,this.readonly=!1,this.quiet=!1,this.placement=`bottom`,this.language=`en`,this.labels={previous:`Previous`,next:`Next`,today:`Today`,selected:`Selected`,empty:`Empty`,calendar:`Calendar`,startDate:`Start date`,endDate:`End date`},this.focused=!1,this.startSegments=new N([]),this.endSegments=new N([]),this.isCalendarOpen=!1,this._timeZone=this.timeZone??h(),this._skipMonthSync=!1,this.handleFocusIn=()=>{this.focused=!this.readonly},this.handleFocusOut=()=>{this.focused=!1},this.setNumberParser(),this.setDateFormatter(),this.setAriaDateFormatter(),this.addEventListener(`focusin`,this.handleFocusIn),this.addEventListener(`focusout`,this.handleFocusOut)}willUpdate(e){let t=e.has(`startDate`),n=e.has(`endDate`),r=e.has(`min`),i=e.has(`max`),a=e.has(`language`),o=e.has(`dateFormat`),s=e.has(`dateSeparator`),c=e.has(`precision`),l=e.has(`disabled`);e.has(`timeZone`)&&(this._timeZone=this.timeZone??h()),a&&this.setNumberParser(),(a||c)&&(this.setDateFormatter(),this.setAriaDateFormatter()),(t||n||r||i)&&this.parseAllDates(),(t||a||c||o||s)&&this.setStartSegments(),(n||a||c||o||s)&&this.setEndSegments(),l&&this.isCalendarOpen&&(this.isCalendarOpen=!1);let u=e.has(`isCalendarOpen`)&&this.isCalendarOpen;(t||n)&&(this._skipMonthSync||this.syncCalendarMonths(),this._skipMonthSync=!1),u&&this.calendars===2&&this.syncCalendarMonths(),this.updateAriaLabel()}initCalendarMonths(){let e=this._startDate??g(C(this._timeZone)),t=_(e);this._leftMonth=t.toString(),this._rightMonth=this._endDate&&!v(e,this._endDate)?_(this._endDate).toString():t.add({months:1}).toString()}syncCalendarMonths(){if(this.calendars!==2)return;let e=this._startDate??g(C(this._timeZone)),t=_(e);this._endDate&&!v(e,this._endDate)?(this._leftMonth=t.toString(),this._rightMonth=_(this._endDate).toString()):(this._leftMonth=t.toString(),this._rightMonth=t.add({months:1}).toString())}parseDateValue(e){return e?e.includes(`T`)?S(e).set({era:`AD`}):g(y(e)).set({era:`AD`}):void 0}parseAllDates(){this._startDate=this.parseDateValue(this.startDate),this._endDate=this.parseDateValue(this.endDate)}updateAriaLabel(){if(this._startDate&&this._endDate){let e=this.ariaDateFormatter.format(I(this._startDate)),t=this.ariaDateFormatter.format(I(this._endDate));this.setAttribute(`aria-label`,`${this.labels.selected}: ${e} – ${t}`)}else this.setAttribute(`aria-label`,this.labels.empty)}render(){return e`
+      <div class="luzmo-DatePicker--range range-wrapper">
+        <div id="text-field">${this.renderStartInput()}</div>
+        <div class="luzmo-DatePicker-rangeDash"></div>
+        <div id="text-field">${this.renderEndInput()}</div>
+        ${this.renderStateIcons()} ${this.renderPicker()}
+      </div>
+      ${this.renderHelpText(this.invalid)}
+    `}renderStateIcons(){return this.invalid?e`
+        <luzmo-icon
+          .icon=${f}
+          .size=${this.size}
+          id="invalid"
+          class="icon"
+        ></luzmo-icon>
+      `:t}renderPicker(){return this.readonly?t:e`
+      <luzmo-picker-button
+        ?open=${this.isCalendarOpen}
+        ?quiet=${this.quiet}
+        ?invalid=${this.invalid}
+        ?disabled=${this.disabled}
+        .size=${this.size}
+        @click=${()=>this.isCalendarOpen=!0}
+        label=${this.labels.calendar}
+      >
+        <slot name="calendar-icon" slot="icon">
+          <luzmo-icon
+            .icon=${d}
+            .size=${this.size}
+            block
+          ></luzmo-icon>
+        </slot>
+      </luzmo-picker-button>
+
+      <luzmo-overlay
+        .triggerElement=${this.rangeWrapper}
+        type="modal"
+        placement=${this.placement??`bottom`}
+        offset="0"
+        ?open=${this.isCalendarOpen}
+        @luzmo-closed=${()=>this.isCalendarOpen=!1}
+      >
+        <luzmo-popover>
+          <div class="popover-content">${this.renderPopoverContent()}</div>
+        </luzmo-popover>
+      </luzmo-overlay>
+    `}renderPopoverContent(){return this.calendars===2?this.renderDualCalendar():this.renderSingleCalendar()}renderSingleCalendar(){return e`
+      <div class="calendar-layout">
+        <div class="calendar-container">
+          <luzmo-calendar
+            selection-mode="range"
+            .startDate=${this.startDate}
+            .endDate=${this.endDate}
+            .min=${this.min}
+            .max=${this.max}
+            .labels=${this.labels}
+            .size=${this.size}
+            .language=${this.language}
+            @range-select=${this.handleRangeSelect}
+          ></luzmo-calendar>
+        </div>
+        ${this.renderDefinedRanges()}
+      </div>
+    `}renderDualCalendar(){return(!this._leftMonth||!this._rightMonth)&&this.initCalendarMonths(),e`
+      <div class="calendar-layout calendar-layout--dual">
+        <div class="calendars-row">
+          <div class="calendar-container">
+            <luzmo-calendar
+              selection-mode="range"
+              .startDate=${this.startDate}
+              .endDate=${this.endDate}
+              .value=${this._leftMonth}
+              .min=${this.min}
+              .max=${this.max}
+              .labels=${this.labels}
+              .size=${this.size}
+              .language=${this.language}
+              @range-select=${this.handleRangeSelect}
+              @hover-date=${this.handleHoverDateLeft}
+              @month-change=${this.handleLeftMonthChange}
+            ></luzmo-calendar>
+          </div>
+          <div class="calendar-container">
+            <luzmo-calendar
+              selection-mode="range"
+              .startDate=${this.startDate}
+              .endDate=${this.endDate}
+              .value=${this._rightMonth}
+              .min=${this.min}
+              .max=${this.max}
+              .labels=${this.labels}
+              .size=${this.size}
+              .language=${this.language}
+              @range-select=${this.handleRangeSelect}
+              @hover-date=${this.handleHoverDateRight}
+              @month-change=${this.handleRightMonthChange}
+            ></luzmo-calendar>
+          </div>
+        </div>
+        ${this.renderDefinedRanges()}
+      </div>
+    `}renderDefinedRanges(){return!this.showDefinedRanges||!this.definedRanges||this.definedRanges.length===0?t:e`
+      <div
+        class="defined-ranges"
+        role="listbox"
+        aria-label="Predefined date ranges"
+      >
+        ${this.definedRanges.map(t=>e`
+            <button
+              class="defined-range-item"
+              role="option"
+              aria-selected=${this.isDefinedRangeSelected(t)}
+              @click=${()=>this.selectDefinedRange(t)}
+            >
+              ${t.label}
+            </button>
+          `)}
+      </div>
+    `}isDefinedRangeSelected(e){return!this.startDate||!this.endDate?!1:this.startDate===V(e.startDate)&&this.endDate===V(e.endDate)}selectDefinedRange(e){this.startDate=V(e.startDate),this.endDate=V(e.endDate),this.isCalendarOpen=!1,this.dispatchChange()}handleRangeSelect(e){e.stopPropagation();let{startDate:t,endDate:n}=e.detail;this._skipMonthSync=!0,this.startDate=t,this.endDate=n??void 0,t&&n&&(this.isCalendarOpen=!1,this.dispatchChange())}handleHoverDateLeft(e){let t=this.shadowRoot?.querySelectorAll(`luzmo-calendar`)[1];t&&(t.hoveredDate=y(e.detail.date))}handleHoverDateRight(e){let t=this.shadowRoot?.querySelectorAll(`luzmo-calendar`)[0];t&&(t.hoveredDate=y(e.detail.date))}renderStartInput(){return e`
+      <div class="input luzmo-DatePicker-startField">
+        <span
+          class="input-content"
+          aria-label=${this.labels.startDate}
+          @keydown=${e=>this.handleKeydown(e,`start`)}
+          @input=${e=>this.handleInput(e,`start`)}
+        >
+          ${this.renderSegmentsFor(this.startSegments)}
+        </span>
+      </div>
+    `}renderEndInput(){return e`
+      <div class="input luzmo-DatePicker-endField">
+        <span
+          class="input-content"
+          aria-label=${this.labels.endDate}
+          @keydown=${e=>this.handleKeydown(e,`end`)}
+          @input=${e=>this.handleInput(e,`end`)}
+        >
+          ${this.renderSegmentsFor(this.endSegments)}
+        </span>
+      </div>
+    `}renderSegmentsFor(e){return e.all.map(e=>p(e.type===P.Literal,()=>this.renderLiteralSegment(e),()=>this.renderEditableSegment(e)))}renderLiteralSegment(t){return e`
+        <span
+            class="literal-segment"
+            data-test-id=${t.type}
+            aria-hidden="true"
+        >${t.formatted}</span>
+    `}renderEditableSegment(t){let n=!this.disabled&&!this.readonly,r={"editable-segment":!0,"is-placeholder":t.value===void 0},i=t.type===P.Year?void 0:String(t.maxValue).length;return e`
+      <div
+        role="spinbutton"
+        aria-valuenow=${o(t.value)}
+        aria-valuemin=${t.minValue}
+        aria-valuemax=${t.maxValue}
+        aria-label=${t.label}
+        aria-valuetext=${o(t.value===void 0?this.labels.empty:t.formatted)}
+        contenteditable=${o(n?!0:void 0)}
+        inputmode=${o(n?`numeric`:void 0)}
+        tabindex=${o(n?`0`:void 0)}
+        class=${m(r)}
+        style=${i?`min-inline-size: ${i}ch`:``}
+        data-type=${t.type}
+        .innerText=${t.value===void 0?t.placeholder??``:t.formatted??``}
+      ></div>
+    `}getSegments(e){return e===`start`?this.startSegments:this.endSegments}setSegmentsForField(e,t){e===`start`?this.startSegments=t:this.endSegments=t}getModifierParams(e){return{dateFormatter:this.dateFormatter,segments:this.getSegments(e),currentDate:x(this._timeZone)}}handleKeydown(e,t){let n=e.target,r=n.dataset.type;if(r)switch(e.code){case`ArrowUp`:{let e=new F(this.getModifierParams(t));this.setSegmentsForField(t,e.modify(r)),this.updateValueFromSegments(t),this.dispatchInputEvent();break}case`ArrowDown`:{let e=new A(this.getModifierParams(t));this.setSegmentsForField(t,e.modify(r)),this.updateValueFromSegments(t),this.dispatchInputEvent();break}case`ArrowRight`:this.focusSegment(n,`next`);break;case`ArrowLeft`:this.focusSegment(n,`previous`);break;case`Enter`:case`Space`:this.commitValue();break;case`Backspace`:case`Delete`:if(e.preventDefault(),this.getSegments(t).getByType(r)?.value===void 0)this.focusSegment(n,`previous`);else{let e=new D(this.getModifierParams(t));this.setSegmentsForField(t,e.modify(r)),this.updateValueFromSegments(t),this.dispatchInputEvent()}break}}handleInput(e,t){e.stopPropagation();let n=e.target.dataset.type,r=this.getSegments(t).editableValues,i=new M({...this.getModifierParams(t),eventData:e.data,numberParser:this.numberParser}).modify(n);this.setSegmentsForField(t,i);let a=i.getByType(n),o=e.target;o.textContent=a.value===void 0?a.placeholder:a.formatted,this.updateValueFromSegments(t);let s=i.editableValues;O(r,s)||this.dispatchInputEvent()}focusSegment(e,t){let n=e;for(;;){let e=t===`previous`?n.previousElementSibling:n.nextElementSibling;if(!e)break;if(e.getAttribute(`contenteditable`)){e.focus();return}n=e}}updateValueFromSegments(e){let t=this.getSegments(e).getFormattedDate(this.precision);if(t&&(j(t)||R(t))){let n=t.toString();e===`start`?(this._startDate=t,this.startDate=n):(this._endDate=t,this.endDate=n)}else e===`start`?(this._startDate=void 0,this.startDate=void 0):(this._endDate=void 0,this.endDate=void 0)}commitValue(){if(this._startDate&&this._endDate){if(this._startDate.compare(this._endDate)>0){let e=this._startDate;this._startDate=this._endDate,this._endDate=e,this.startDate=this._startDate.toString(),this.endDate=this._endDate.toString(),this.setStartSegments(),this.setEndSegments()}this.dispatchChange()}}handleLeftMonthChange(e){let t=e.detail,n=y(t.date);this._leftMonth=t.date,this._rightMonth&&v(n,y(this._rightMonth))&&(this._rightMonth=_(n).add({months:1}).toString())}handleRightMonthChange(e){let t=e.detail,n=y(t.date);this._rightMonth=t.date,this._leftMonth&&v(n,y(this._leftMonth))&&(this._leftMonth=_(n).subtract({months:1}).toString())}dispatchChange(){this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,cancelable:!0,detail:{startDate:this.startDate??``,endDate:this.endDate??``}}))}dispatchInputEvent(){this.dispatchEvent(new CustomEvent(`input`,{bubbles:!0,composed:!0,cancelable:!0,detail:{startDate:this.startDate??``,endDate:this.endDate??``}}))}setStartSegments(){this.startSegments=this.createSegmentsFromDate(this._startDate)}setEndSegments(){this.endSegments=this.createSegmentsFromDate(this._endDate)}createSegmentsFromDate(e){let t=x(this._timeZone),n=e?{year:e.year,month:e.month,day:e.day}:{};e&&R(e)&&(n.hour=e.hour,n.minute=e.minute,n.second=e.second,n.millisecond=e.millisecond);let r=e?t.set(n):t,i=new L(this.dateFormatter).createSegments(r,e!==void 0);if(this.dateFormat){let e=i.all.findIndex(e=>e.type===P.Month),t=i.all.findIndex(e=>e.type===P.Day);if(e!==-1&&t!==-1){if(this.dateFormat===`mmdd`&&e>t){let n=i.all[e];i.all[e]=i.all[t],i.all[t]=n}else if(this.dateFormat===`ddmm`&&t>e){let n=i.all[t];i.all[t]=i.all[e],i.all[e]=n}}}return typeof this.dateSeparator==`string`&&this.dateSeparator&&(i.all?.[1]?.type===P.Literal&&(i.all[1].formatted=this.dateSeparator),i.all?.[3]?.type===P.Literal&&(i.all[3].formatted=this.dateSeparator)),this.precision===k.Day?new N(i.all.filter(e=>{let t=e.type;return t===P.Year||t===P.Month||t===P.Day||t===P.Literal})):i}setNumberParser(){this.numberParser=new w(this._language,{maximumFractionDigits:0})}setDateFormatter(){this.dateFormatter=new b(this._language,{day:`2-digit`,month:`2-digit`,year:`numeric`,...this.getTimeOptions(`2-digit`)})}setAriaDateFormatter(){this.ariaDateFormatter=new b(this._language,{day:`numeric`,month:`long`,year:`numeric`,...this.getTimeOptions(`numeric`)})}getTimeOptions(e){switch(this.precision){case k.Millisecond:return{hour:e,minute:e,second:e,fractionalSecondDigits:3};case k.Second:return{hour:e,minute:e,second:e};case k.Minute:return{hour:e,minute:e};case k.Hour:return{hour:e};default:return{}}}};s([u({type:String,attribute:`start-date`,reflect:!0})],H.prototype,`startDate`,void 0),s([u({type:String,attribute:`end-date`,reflect:!0})],H.prototype,`endDate`,void 0),s([u({type:String,reflect:!0})],H.prototype,`min`,void 0),s([u({type:String,reflect:!0})],H.prototype,`max`,void 0),s([u({type:String,attribute:`date-format`,reflect:!0})],H.prototype,`dateFormat`,void 0),s([u({type:String,attribute:`date-separator`,reflect:!0})],H.prototype,`dateSeparator`,void 0),s([u({type:String,reflect:!0})],H.prototype,`precision`,void 0),s([u({type:Number,reflect:!0})],H.prototype,`calendars`,void 0),s([u({type:Boolean,attribute:`show-defined-ranges`,reflect:!0})],H.prototype,`showDefinedRanges`,void 0),s([u({attribute:!1})],H.prototype,`definedRanges`,void 0),s([u({type:Boolean,reflect:!0})],H.prototype,`invalid`,void 0),s([u({type:Boolean,reflect:!0})],H.prototype,`readonly`,void 0),s([u({type:Boolean,reflect:!0})],H.prototype,`quiet`,void 0),s([u({type:String,reflect:!0})],H.prototype,`placement`,void 0),s([u({type:String,attribute:`time-zone`,reflect:!0})],H.prototype,`timeZone`,void 0),s([u({type:String,reflect:!0})],H.prototype,`language`,void 0),s([u({attribute:!1})],H.prototype,`labels`,void 0),s([u({type:Boolean,reflect:!0})],H.prototype,`focused`,void 0),s([l()],H.prototype,`_startDate`,void 0),s([l()],H.prototype,`_endDate`,void 0),s([l()],H.prototype,`startSegments`,void 0),s([l()],H.prototype,`endSegments`,void 0),s([l()],H.prototype,`isCalendarOpen`,void 0),s([l()],H.prototype,`_leftMonth`,void 0),s([l()],H.prototype,`_rightMonth`,void 0),s([a(`.editable-segment`)],H.prototype,`firstEditableSegment`,void 0),s([a(`.range-wrapper`)],H.prototype,`rangeWrapper`,void 0),customElements.get(`luzmo-date-range-picker`)||customElements.define(`luzmo-date-range-picker`,H);export{H as LuzmoDateRangePicker};

package/standalone/date-time-picker.js

@@ -0,0 +1,107 @@
+/*!* Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2026 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"./tokens.js";import{c as e,i as t,y as n}from"./chunks/lit-BN_lRQbJ.js";import{a as r,c as i,g as a,i as o,l as s,s as c,v as l,y as u}from"./chunks/lucero-runtime-DGJ9-isg.js";import{g as d,o as f}from"./chunks/luzmo-icons-CJa-aByT.js";import{t as p}from"./chunks/when-BWvpqCBs.js";import"./chunks/icon-Dy6J1QeX.js";import"./chunks/popover-BsB3dmQe.js";import{t as m}from"./chunks/class-map-CxQ0PcQP.js";import{t as h}from"./chunks/style-map-D4QeV3m0.js";import"./chunks/overlay-C_XW8yry.js";import{_ as g,c as _,d as v,f as y,l as b,n as x,p as S,r as C,u as w}from"./chunks/calendar-ZwUYkzVq.js";import{t as T}from"./chunks/NumberParser-r_jv94LA.js";import{t as E}from"./chunks/manage-help-text-Cl9OJ2xf.js";import{t as D}from"./chunks/text-field.module-ClDE7laI.js";import"./chunks/picker-button-BeXTIgUt.js";import{a as O,c as k,d as A,f as j,i as M,l as N,n as P,o as F,p as I,r as L,s as R,t as z,u as B}from"./chunks/segments-factory-Ch3AAizU.js";var V=`:host{font-family:var(--luzmo-font-family);--date-time-picker-border-radius:var(--luzmo-date-time-picker-border-radius,var(--luzmo-border-radius));--date-time-picker-border-radius-quiet:var(--luzmo-date-time-picker-border-radius-quiet,0);--date-time-picker-border-width:var(--luzmo-border-width);--date-time-picker-button-border-color:var(--highcontrast-datepicker-pickerbutton-border-color,var(--luzmo-date-time-picker-pickerbutton-border-color,var(--luzmo-border-color)));--date-time-picker-button-border-color-focus:var(--highcontrast-datepicker-pickerbutton-border-color,var(--luzmo-date-time-picker-pickerbutton-border-color-focus,var(--luzmo-primary)));--date-time-picker-button-border-color-invalid:var(--highcontrast-datepicker-pickerbutton-border-color,var(--luzmo-date-time-picker-pickerbutton-border-color-invalid,var(--luzmo-negative-color)));--date-time-picker-button-width:calc(var(--date-time-picker-edge-to-disclosure-icon) * 2 + var(--date-time-picker-icon-size));--date-time-picker-quiet-button-offset:var(--luzmo-date-time-picker-quiet-button-offset,var(--date-time-picker-text-to-visual));--date-time-picker-icon-to-text:var(--date-time-picker-edge-to-text);--date-time-picker-button-width-quiet:calc(var(--date-time-picker-button-width) - var(--date-time-picker-quiet-button-offset));--date-time-picker-focus-ring-gap:var(--luzmo-date-time-picker-focus-ring-gap,var(--luzmo-indicator-gap));--date-time-picker-focus-thickness:var(--luzmo-date-time-picker-focus-thickness,var(--luzmo-indicator-width));--date-time-picker-focus-animation:var(--luzmo-date-time-picker-focus-animation,var(--luzmo-animation-duration));--date-time-picker-focus-ring-width:var(--luzmo-date-time-picker-focus-ring-width,var(--luzmo-border-width));--date-time-picker-focus-ring-color:var(--highcontrast-datepicker-focus-ring-color,var(--luzmo-date-time-picker-focus-ring-color,var(--luzmo-indicator-color)));--date-time-picker-focus-line-gap:var(--luzmo-date-time-picker-focus-line-gap,var(--luzmo-spacing-2));--date-time-picker-invalid-quiet-color:var(--luzmo-date-time-picker-invalid-quiet-color,var(--luzmo-negative-color));--date-time-picker-quiet-border-color-hover:var(--luzmo-date-time-picker-quiet-border-color-hover,var(--luzmo-border-color-hover));--date-time-picker-border-color-disabled:var(--luzmo-date-time-picker-border-color-disabled,var(--luzmo-border-color-disabled));--date-time-picker-dash-font-size:var(--luzmo-date-time-picker-dash-font-size,var(--date-time-picker-dash-font-size));--date-time-picker-dash-color:var(--highcontrast-datepicker-dash-color,var(--luzmo-date-time-picker-dash-color,var(--luzmo-font-color)));--date-time-picker-range-dash-padding-top:var(--luzmo-date-time-picker-range-dash-padding-top,0);--date-time-picker-range-dash-margin-inline-start:var(--luzmo-date-time-picker-range-dash-margin-left,calc(var(--date-time-picker-dash-font-size) * -.5));--date-time-picker-range-input-width-first:var(--luzmo-date-time-picker-range-input-width-first,calc(var(--date-time-picker-initial-width) - var(--date-time-picker-generic-padding) * 2));--date-time-picker-input-width-base:calc(var(--date-time-picker-range-input-width-first) + var(--date-time-picker-icon-size));--date-time-picker-input-width:var(--luzmo-date-time-picker-input-width,calc(var(--date-time-picker-input-width-base) + var(--date-time-picker-initial-height)));--date-time-picker-range-input-width-quiet-first:var(--luzmo-date-time-picker-range-input-width-quiet-first,calc(var(--date-time-picker-width-quiet-first) + var(--date-time-picker-width-quiet-second)));--date-time-picker-input-width-quiet:var(--luzmo-date-time-picker-input-width-quiet,calc(var(--date-time-picker-range-input-width-quiet-first) + var(--date-time-picker-icon-size) + var(--date-time-picker-initial-height)));--date-time-picker-datetime-input-width-first:var(--luzmo-date-time-picker-datetime-input-width-first,calc(var(--date-time-picker-input-width-base) + var(--date-time-picker-datetime-width-first)));--date-time-picker-datetime-input-width:var(--luzmo-date-time-picker-datetime-input-width,calc(var(--date-time-picker-datetime-input-width-first) + var(--date-time-picker-icon-size) + var(--date-time-picker-initial-height)));--date-time-picker-datetime-quiet-input-width-first:var(--luzmo-date-time-picker-datetime-quiet-input-width-first,calc(var(--date-time-picker-input-width-base) + var(--date-time-picker-input-datetime-width)));--date-time-picker-datetime-quiet-input-width:var(--luzmo-date-time-picker-datetime-quiet-input-width,calc(var(--date-time-picker-datetime-quiet-input-width-first) + var(--date-time-picker-icon-size) + var(--date-time-picker-initial-height)));--date-time-picker-padding-inline-end:var(--luzmo-date-time-picker-padding-inline,calc(var(--date-time-picker-button-width) + var(--date-time-picker-edge-to-text) - var(--date-time-picker-border-width) * 2));--date-time-picker-padding-inline-end-quiet:var(--luzmo-date-time-picker-padding-inline-quiet,calc(var(--date-time-picker-button-width) + var(--date-time-picker-edge-to-text) - var(--date-time-picker-quiet-button-offset)));--date-time-picker-padding-inline-end-invalid-quiet:var(--luzmo-date-time-picker-padding-inline-end-invalid-quiet,calc(var(--date-time-picker-button-width-quiet) + var(--date-time-picker-icon-size) + var(--date-time-picker-icon-to-text)));min-inline-size:var(--luzmo-date-time-picker-min-width,var(--date-time-picker-min-width));border-radius:var(--date-time-picker-border-radius);flex-flow:row;display:inline-flex;position:relative}:host([disabled]) luzmo-picker-button{cursor:default}:host([disabled]){--luzmo-date-time-picker-dash-color:var(--luzmo-date-time-picker-dash-color-disabled,var(--disabled-content-color));--luzmo-text-field-border-color-disabled:transparent}:host([invalid]),:host([invalid]) #text-field .icon{--luzmo-text-field-icon-spacing-inline-end-invalid:calc(var(--date-time-picker-button-width) + var(--date-time-picker-invalid-icon-to-button));--luzmo-text-field-icon-spacing-inline-end-quiet-invalid:calc(var(--date-time-picker-button-width-quiet) + var(--date-time-picker-invalid-icon-to-button-quiet))}:host(:not([quiet])){inline-size:var(--luzmo-date-time-picker-width,var(--date-time-picker-width))}:host([quiet]){inline-size:var(--luzmo-date-time-picker-width-quiet,var(--date-time-picker-width-quiet,var(--date-time-picker-width)))}:host(:not([quiet],[disabled])){--luzmo-picker-button-border-color:var(--date-time-picker-button-border-color)}:host([focused]),:host([focused]:not([quiet],[disabled])){--luzmo-picker-button-border-color:var(--date-time-picker-button-border-color-focus)}:host([invalid]:not([quiet],[disabled])){--luzmo-picker-button-border-color:var(--date-time-picker-button-border-color-invalid)}.input{inline-size:100%;border-color:var(--luzmo-date-time-picker-border-color,var(--datepicker-border-color));flex:1;padding-inline-end:var(--date-time-picker-padding-inline-end)}:host .input:read-only{border-color:var(--luzmo-date-time-picker-border-color,var(--datepicker-border-color))}:host(:not([quiet],[readonly],[disabled])) .input:read-only{background-color:var(--luzmo-text-field-background-color,var(--luzmo-background-color))}:host([disabled]:not([quiet])) .input:read-only{background-color:var(--luzmo-text-field-background-color-disabled,var(--luzmo-background-color-disabled))}.input.luzmo-DatePicker-startField{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0;padding-inline-end:var(--luzmo-date-time-picker-generic-padding,var(--date-time-picker-generic-padding))}.input.luzmo-DatePicker-endField{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0;padding-inline-start:var(--luzmo-date-time-picker-generic-padding,var(--date-time-picker-generic-padding))}luzmo-picker-button{cursor:pointer;position:absolute;inset-inline-end:0}.luzmo-DatePicker-rangeDash{color:var(--date-time-picker-dash-color);line-height:var(--luzmo-date-time-picker-dash-line-height,var(--date-time-picker-dash-line-height));flex:initial;z-index:1;inline-size:0;padding-block-start:var(--date-time-picker-range-dash-padding-top)}.luzmo-DatePicker-rangeDash:before{content:"–";margin-block:0;margin-inline:var(--date-time-picker-range-dash-margin-inline-start);text-align:center;vertical-align:middle;inline-size:var(--date-time-picker-dash-font-size);display:inline-block;overflow:hidden}:host([quiet]){--luzmo-date-time-picker-border-radius:var(--date-time-picker-border-radius-quiet);--luzmo-date-time-picker-padding-inline:var(--date-time-picker-padding-inline-end-quiet);--luzmo-picker-button-border-color-disabled:var(--date-time-picker-border-color-disabled);--luzmo-picker-button-background-color-hover-disabled:var(--date-time-picker-border-color-disabled)}:host([quiet][disabled]){--luzmo-text-field-border-color-disabled:var(--date-time-picker-border-color-disabled)}:host([quiet][invalid]) .input:not(.luzmo-DatePicker-startField){padding-inline-end:var(--date-time-picker-padding-inline-end-invalid-quiet)}@media (hover:hover){:host(:hover):not([focused],[disabled],[invalid]){--luzmo-picker-button-border-color:var(--date-time-picker-quiet-border-color-hover)}}:host([quiet][invalid]){--luzmo-picker-button-border-color:var(--date-time-picker-invalid-quiet-color)}:host([quiet]) luzmo-picker-button{inline-size:auto;inset-inline-end:calc(var(--date-time-picker-quiet-button-offset) * -1)}:host([quiet]) luzmo-picker-button:not(.is-open){--luzmo-picker-button-border-color-disabled:transparent}:host([quiet]) luzmo-picker-button:not(:disabled,.is-open){--luzmo-picker-button-background-color:transparent}.luzmo-DatePicker--range{--luzmo-date-time-picker-border-radius:var(--date-time-picker-border-radius)}.luzmo-DatePicker--range:after{pointer-events:none;content:"";margin:calc(var(--date-time-picker-focus-ring-gap) * -1);border-radius:calc(var(--date-time-picker-border-radius) + var(--date-time-picker-focus-ring-gap));transition:box-shadow var(--date-time-picker-focus-animation) ease-in-out, border-color var(--date-time-picker-focus-animation) ease-in-out;border-color:#0000;position:absolute;inset:0}:host([focused]) .luzmo-DatePicker--range:not(.luzmo-DatePicker--quiet):after{box-shadow:0 0 0 var(--date-time-picker-focus-ring-width) var(--date-time-picker-focus-ring-color)}:host([focused]) .luzmo-DatePicker--range:not(.luzmo-DatePicker--quiet) #text-field:after{display:none}:host([quiet]) .luzmo-DatePicker--range{--luzmo-date-time-picker-border-radius:var(--date-time-picker-border-radius-quiet)}:host([quiet][focused]) .luzmo-DatePicker--range:after{box-shadow:none;border-block-end:var(--date-time-picker-focus-thickness) solid var(--date-time-picker-focus-ring-color);border-radius:0;margin:0;inset-block-end:calc(var(--date-time-picker-focus-line-gap) * -1)}:host([quiet]) .luzmo-DatePicker--range #text-field{min-inline-size:0;inline-size:var(--date-time-picker-input-width-quiet)}:host([quiet]) .luzmo-DatePicker--range #text-field:first-of-type{inline-size:var(--date-time-picker-range-input-width-quiet-first)}.luzmo-DatePicker--range.luzmo-DatePicker--datetimeRange #text-field{inline-size:var(--date-time-picker-datetime-input-width);min-inline-size:0}.luzmo-DatePicker--range.luzmo-DatePicker--datetimeRange #text-field:first-of-type{inline-size:var(--date-time-picker-datetime-input-width-first)}:host([quiet]) .luzmo-DatePicker--range.luzmo-DatePicker--datetimeRange #text-field{inline-size:var(--date-time-picker-datetime-quiet-input-width)}:host([quiet]) .luzmo-DatePicker--range.luzmo-DatePicker--datetimeRange #text-field:first-of-type{inline-size:var(--date-time-picker-datetime-quiet-input-width-first)}.luzmo-DatePicker--range #text-field{flex:initial;min-inline-size:0;inline-size:var(--date-time-picker-input-width)}.luzmo-DatePicker--range #text-field:first-of-type{inline-size:var(--date-time-picker-range-input-width-first)}@media (forced-colors:active){:host{--highcontrast-datepicker-dash-color:CanvasText;--highcontrast-datepicker-focus-ring-color:Highlight;--highcontrast-datepicker-pickerbutton-border-color:Highlight}:host([disabled]){--highcontrast-datepicker-dash-color:GrayText}:host([quiet][invalid]){--highcontrast-datepicker-pickerbutton-border-color:Highlight}}:host{--date-time-picker-width:auto;--date-time-picker-initial-height:var(--system-date-picker-initial-height);--date-time-picker-font-color-default:var(--luzmo-font-color);--datepicker-border-color:var(--luzmo-border-color);--date-time-picker-button-indicator-color:var(--luzmo-indicator-color);--text-field-focus-indicator-color:var(--luzmo-background-color-highlight);--date-time-picker-initial-width:120px;--date-time-picker-min-width:160px;--date-time-picker-calendar-padding:var(--luzmo-spacing-4);--date-time-picker-icon-size:18px;--date-time-picker-dash-font-size:var(--luzmo-font-size);--date-time-picker-text-to-visual:var(--luzmo-spacing-3);--date-time-picker-edge-to-disclosure-icon:var(--luzmo-spacing-3);--date-time-picker-edge-to-text:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--date-time-picker-icon-to-text:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--date-time-picker-invalid-icon-to-button:var(--luzmo-spacing-3);--date-time-picker-generic-padding:var(--luzmo-spacing-4)}:host([size=s]){--date-time-picker-min-width:140px;--date-time-picker-calendar-padding:var(--luzmo-spacing-3);--date-time-picker-icon-size:16px;--date-time-picker-dash-font-size:var(--luzmo-font-size-s);--date-time-picker-text-to-visual:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--date-time-picker-edge-to-disclosure-icon:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--date-time-picker-edge-to-text:var(--luzmo-spacing-3);--date-time-picker-invalid-icon-to-button:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--date-time-picker-icon-to-text:var(--luzmo-spacing-3)}:host([invalid][size=s]){--text-field-icon-spacing-block-invalid:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1))}:host([size=m]){--date-time-picker-min-width:160px;--date-time-picker-calendar-padding:var(--luzmo-spacing-4);--date-time-picker-icon-size:18px;--date-time-picker-dash-font-size:var(--luzmo-font-size-m);--date-time-picker-text-to-visual:var(--luzmo-spacing-3);--date-time-picker-edge-to-disclosure-icon:var(--luzmo-spacing-3);--date-time-picker-edge-to-text:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--date-time-picker-invalid-icon-to-button:var(--luzmo-spacing-3);--date-time-picker-icon-to-text:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=l]){--date-time-picker-min-width:180px;--date-time-picker-calendar-padding:var(--luzmo-spacing-5);--date-time-picker-icon-size:20px;--date-time-picker-dash-font-size:var(--luzmo-font-size-l);--date-time-picker-text-to-visual:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--date-time-picker-edge-to-disclosure-icon:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--date-time-picker-edge-to-text:var(--luzmo-spacing-4);--date-time-picker-invalid-icon-to-button:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--date-time-picker-icon-to-text:var(--luzmo-spacing-4)}:host([size=xl]){--date-time-picker-min-width:200px;--date-time-picker-calendar-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--date-time-picker-icon-size:22px;--date-time-picker-dash-font-size:var(--luzmo-font-size-xl);--date-time-picker-text-to-visual:var(--luzmo-spacing-4);--date-time-picker-edge-to-disclosure-icon:var(--luzmo-spacing-4);--date-time-picker-edge-to-text:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--date-time-picker-invalid-icon-to-button:var(--luzmo-spacing-4);--date-time-picker-icon-to-text:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1))}:host{--status-icon-size:var(--luzmo-text-field-icon-size-invalid,var(--text-field-icon-size-invalid));--picker-button-size:var(--luzmo-text-field-height,var(--text-field-height));--input-spacing:var(--luzmo-text-field-spacing-inline,var(--text-field-spacing-inline));--input-border-width:var(--luzmo-text-field-border-width,var(--luzmo-border-width));--text-to-icon:var(--luzmo-text-field-icon-spacing-inline-start-invalid,var(--text-field-icon-spacing-inline-start-invalid));--date-time-picker-input-width:var(--date-time-picker-width);flex-wrap:wrap}:host #text-field{display:inline-block}:host #text-field .input,:host([quiet]) #text-field .input,:host([valid]) #text-field .input,:host([invalid]) #text-field .input{inline-size:100%}:host #text-field .input,:host([quiet]) #text-field .input{padding-inline-end:calc(var(--picker-button-size) + var(--input-spacing) - var(--input-border-width))}:host([valid]) #text-field .input,:host([invalid]) #text-field .input{inline-size:100%;padding-inline-end:calc(var(--status-icon-size) + var(--picker-button-size) + var(--input-spacing) - var(--input-border-width) + var(--text-to-icon))}@media (hover:hover){:host([invalid]) #text-field:hover .input,:host([focused][invalid]) .input:hover,:host([focused][invalid]) #text-field:hover .input{border-color:var(--highcontrast-text-field-border-color-invalid-default,var(--luzmo-text-field-border-color-invalid-default,var(--luzmo-negative-color-hover)))}}luzmo-picker-button:focus-visible{outline:none}luzmo-popover{overflow-y:auto}luzmo-popover .popover-content{padding:var(--luzmo-date-time-picker-calendar-padding,var(--date-time-picker-calendar-padding))}.input-content{scrollbar-width:none;align-items:center;height:100%;line-height:normal;display:flex;overflow:auto hidden}.input-content::-webkit-scrollbar{width:0;height:0;display:none}.literal-segment,.editable-segment{color:var(--luzmo-date-time-picker-font-color-default,var(--date-time-picker-font-color-default));display:inline-block}.editable-segment{font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap;caret-color:#0000;outline:none;padding:0 .15em}[dir=ltr] .editable-segment{text-align:start}.literal-segment{white-space:pre;-webkit-user-select:none;user-select:none}.is-placeholder,.is-placeholder+.literal-segment{color:var(--luzmo-font-color-disabled)}.editable-segment:focus-visible{color:var(--white);background-color:var(--highcontrast-text-field-focus-indicator-color,var(--luzmo-text-field-focus-indicator-color,var(--text-field-focus-indicator-color)))}.editable-segment::selection{background-color:#0000}`,H=class extends E(i(r,{validSizes:Object.values(c)})){static get styles(){return[n(V),n(D)]}get precision(){return this._precision}set precision(e){this.isUserSetPrecision=!0;let t=this._precision;e!==t&&(this._precision=e,this.requestUpdate(`precision`,t))}get _language(){try{return this.language?new Intl.Locale(this.language).language:`en`}catch{return`en`}}get focusElement(){return this.firstEditableSegment}get currentDate(){return this._value?w(this._value,this._timeZone):this.cachedLocalTime}get includesTime(){return[j.Hour,j.Minute,j.Second,j.Millisecond].includes(this.precision)}clear(){this._value=void 0,this.setSegments()}constructor(){super(),this._precision=j.Minute,this.isUserSetPrecision=!1,this.invalid=!1,this.readonly=!1,this.quiet=!1,this.placement=`bottom`,this.language=`en`,this.labels={previous:`Previous`,next:`Next`,today:`Today`,selected:`Selected`,empty:`Empty`,calendar:`Calendar`},this.focused=!1,this.segments=new F([]),this.isCalendarOpen=!1,this._timeZone=this.timeZone??g(),this.cachedLocalTime=S(this._timeZone),this.setNumberParser(),this.setDateFormatter(),this.setAriaDateFormatter(),this.addEventListener(`focusin`,()=>this.previousCommitedValue=this._value),this.addEventListener(`focusout`,()=>this.commitValue())}willUpdate(e){let t=e.has(`value`),n=e.has(`timeZone`),r=e.has(`min`),i=e.has(`max`),a=e.has(`language`),o=e.has(`dateFormat`),s=e.has(`dateSeparator`),c=e.has(`precision`),l=e.has(`segments`),u=e.has(`disabled`);if(a&&this.setNumberParser(),(a||c)&&(this.setDateFormatter(),this.setAriaDateFormatter()),t||r||i||n){this._value=this.value?_(new Date(this.value).toISOString(),`UTC`):void 0,this._min=this.min?_(new Date(this.min).toISOString(),`UTC`):void 0,this._max=this.max?_(new Date(this.max).toISOString(),`UTC`):void 0;let e=this.mostSpecificDateValue;e&&(this.convertDatePropsToMatch(e),this.checkDatePropsCompliance(r||i),this.updateDateProps(),this.updateDefaultPrecision())}(t||a||c||o||n||s)&&this.setSegments(),l&&this.setValueFromSegments(),u&&this.isCalendarOpen&&(this.isCalendarOpen=!1);let d=this._value&&this.labels.selected+`: `+this.ariaDateFormatter.format(R(this._value));this.setAttribute(`aria-label`,d??this.labels.empty)}get mostSpecificDateValue(){let e=[this._value,this._min,this._max].filter(e=>e!==void 0);if(e.length===0)return;let t=e.filter(e=>A(e));if(t.length>0)return t[0];let n=e.filter(e=>B(e));return n.length>0?n[0]:e.find(e=>N(e))}convertDatePropsToMatch(e){if(A(e)){this._timeZone=this.timeZone??e.timeZone,this._value=this._value&&w(this._value,this._timeZone),this._min=this._min&&w(this._min,this._timeZone),this._max=this._max&&w(this._max,this._timeZone);return}if(this._timeZone=this.timeZone??g(),B(e)){this._value=this._value&&y(this._value),this._min=this._min&&y(this._min),this._max=this._max&&y(this._max);return}this._value=this._value&&v(this._value),this._min=this._min&&v(this._min),this._max=this._max&&v(this._max)}checkDatePropsCompliance(e){e&&this._min&&this._max&&(this._min.compare(this._max)<0||(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.isNonCompliantValue()&&(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),!this._min&&!this._max&&!this._value&&(this._timeZone=g())}isNonCompliantValue(){return this._value!==void 0&&!!(this._min&&this._value.compare(this._min)<0||this._max&&this._value.compare(this._max)>0)}updateDateProps(){let e=this.mostSpecificDateValue;!e||!this.isUserSetPrecision||this.includesTime&&N(e)&&this.convertDatePropsToMatch(y(e))}updateDefaultPrecision(){if(this.isUserSetPrecision)return;let e=this.mostSpecificDateValue;e&&(this._precision=N(e)?j.Day:j.Minute)}render(){return e`
+      <div id="text-field">
+        ${this.renderStateIcons()} ${this.renderInputContent()}
+      </div>
+      ${this.renderHelpText(this.invalid)}${this.renderPicker()}
+    `}renderStateIcons(){return this.invalid?e`
+        <luzmo-icon
+          .icon=${f}
+          .size=${this.size}
+          id="invalid"
+          class="icon"
+        ></luzmo-icon>
+      `:t}renderPicker(){return this.readonly?t:e`
+      <luzmo-picker-button
+        ?open=${this.isCalendarOpen}
+        ?quiet=${this.quiet}
+        ?invalid=${this.invalid}
+        ?disabled=${this.disabled}
+        .size=${this.size}
+        @click=${()=>this.isCalendarOpen=!0}
+        label=${this.labels.calendar}
+      >
+        <slot name="calendar-icon" slot="icon">
+          <luzmo-icon
+            .icon=${d}
+            .size=${this.size}
+            block
+          ></luzmo-icon>
+        </slot>
+      </luzmo-picker-button>
+
+      <luzmo-overlay
+        .triggerElement=${this.input}
+        type="modal"
+        placement=${this.placement??`bottom`}
+        offset="0"
+        ?open=${this.isCalendarOpen}
+        @luzmo-closed=${()=>this.isCalendarOpen=!1}
+      >
+        <luzmo-popover>
+          <div class="popover-content">
+            <luzmo-calendar
+              .value=${this._value?this._value.toString().slice(0,10):void 0}
+              .min=${this._min?this._min.toString():void 0}
+              .max=${this._max?this._max.toString():void 0}
+              .labels=${this.labels}
+              .size=${this.size}
+              .language=${this.language}
+              @change=${this.handleChange}
+            ></luzmo-calendar>
+          </div>
+        </luzmo-popover>
+      </luzmo-overlay>
+    `}handleChange(e){e.stopPropagation(),this.isCalendarOpen=!1,e.target?.value&&(this.value=e.target?.value);let t=b(e.target?.value??``);if(this.includesTime){let e=new C(this.segments.hour?.value??0,this.segments.minute?.value??0,this.segments.second?.value??0,this.segments.millisecond?.value??0),n=this.mostSpecificDateValue;this._value=y(t,e),n&&A(n)&&(this._value=w(this._value,this._timeZone))}else this._value=t;this.commitValue()}renderInputContent(){return e`
+      <div class="input">
+        <span
+          class="input-content"
+          @focusin=${()=>this.focused=!this.readonly}
+          @focusout=${()=>this.focused=!1}
+          @keydown=${this.handleKeydown}
+          @input=${this.handleInput}
+        >
+          ${this.renderSegments()}
+        </span>
+      </div>
+    `}renderSegments(){return this.segments.all.map(e=>p(e.type===I.Literal,()=>this.renderLiteralSegment(e),()=>this.renderEditableSegment(e)))}renderLiteralSegment(t){return e`
+        <span
+            class="literal-segment"
+            data-test-id=${t.type}
+            aria-hidden="true"
+        >${t.formatted}</span>
+    `}renderEditableSegment(t){let n=!this.disabled&&!this.readonly,r=t.value===void 0,i=t.type===I.DayPeriod?`text`:`numeric`,a={"editable-segment":!0,"is-placeholder":r},s=t.type!==I.Year&&String(t.maxValue).length>0,c={minWidth:s?`${s}ch`:void 0};return e`
+      <div
+        role="spinbutton"
+        aria-valuenow=${o(t.value)}
+        aria-valuemin=${t.minValue}
+        aria-valuemax=${t.maxValue}
+        aria-label=${t.label}
+        aria-valuetext=${o(t.value===void 0?this.labels.empty:t.formatted)}
+        contenteditable=${o(n?!0:void 0)}
+        inputmode=${o(n?i:void 0)}
+        tabindex=${o(n?`0`:void 0)}
+        class=${m(a)}
+        style=${h(c)}
+        data-type=${t.type}
+        .innerText=${this.renderSegmentText(t)}
+      ></div>
+    `}renderSegmentText(e){return p(e.value===void 0,()=>e.placeholder??``,()=>e.formatted??``)}handleKeydown(e){let t=e.target,n=t.dataset.type;if(n)switch(e.code){case`ArrowUp`:this.incrementValue(n);break;case`ArrowDown`:this.decrementValue(n);break;case`ArrowRight`:this.focusSegment(t,`next`);break;case`ArrowLeft`:this.focusSegment(t,`previous`);break;case`Enter`:case`Space`:this.commitValue();break;case`Backspace`:case`Delete`:e.preventDefault(),this.segments.getByType(n)?.value===void 0?this.focusSegment(t,`previous`):this.clearSegmentContent(n);break}}get modifierParams(){return{dateFormatter:this.dateFormatter,segments:this.segments,currentDate:this.currentDate}}incrementValue(e){let t=new L(this.modifierParams);this.segments=t.modify(e),this.dispatchInput()}decrementValue(e){let t=new M(this.modifierParams);this.segments=t.modify(e),this.dispatchInput()}focusSegment(e,t){let n=!1,r=e;for(;!n;){let e=t===`previous`?r.previousElementSibling:r.nextElementSibling;if(!e)break;e.getAttribute(`contenteditable`)&&(e.focus(),n=!0),r=e}}commitValue(){if(!(this._value&&this.previousCommitedValue&&this._value.compare(this.previousCommitedValue)===0)){if(this._value===void 0&&this.previousCommitedValue===void 0){let e=this.segments.editableValues.every(e=>e===void 0);this.invalid=!e;return}this.invalid=!!(this._value===void 0||this.isNonCompliantValue()),this.previousCommitedValue=this._value,this.dispatchChange()}}clearSegmentContent(e){let t=this.segments.editableValues,n=new O(this.modifierParams);this.segments=n.modify(e);let r=this.segments.editableValues;k(t,r)||this.dispatchInput()}handleInput(e){e.stopPropagation();let t=e.target.dataset.type,n=this.segments.editableValues,r=new P({...this.modifierParams,eventData:e.data,numberParser:this.numberParser});this.segments=r.modify(t),this.updateSegmentContent(this.segments.getByType(t),e.target);let i=this.segments.editableValues;k(n,i)||this.dispatchInput()}updateSegmentContent(e,t){t.textContent=e.value===void 0?e.placeholder:e.formatted}createOutputString(e){return e?A(e)?this._value.toAbsoluteString():new Date(this._value.toString()).toISOString():``}dispatchChange(){let e=this.createOutputString(this._value);this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,composed:!0,cancelable:!0,detail:{value:e}}))}dispatchInput(){let e=this.createOutputString(this._value);this.dispatchEvent(new CustomEvent(`input`,{bubbles:!0,composed:!0,cancelable:!0,detail:{value:e}}))}setValueFromSegments(){let e=this.segments.getFormattedDate(this.precision);if(!e){this._value&&this.dispatchChange(),this._value=void 0;return}this._value===void 0&&this.dispatchChange();let t=this.mostSpecificDateValue;t?A(t)?this._value=w(e,this._timeZone):B(t)?this._value=y(e):this._value=v(e):this._value=e}setSegments(){let e=new z(this.dateFormatter).createSegments(this.currentDate,this._value!==void 0);if(this.dateFormat){let t=e.all.findIndex(e=>e.type===I.Month),n=e.all.findIndex(e=>e.type===I.Day);if(t!==-1&&n!==-1){if(this.dateFormat===`mmdd`&&t>n){let r=e.all[t];e.all[t]=e.all[n],e.all[n]=r}else if(this.dateFormat===`ddmm`&&n>t){let r=e.all[n];e.all[n]=e.all[t],e.all[t]=r}}}typeof this.dateSeparator==`string`&&this.dateSeparator&&(e.all?.[1]?.type===I.Literal&&(e.all[1].formatted=this.dateSeparator),e.all?.[3]?.type===I.Literal&&(e.all[3].formatted=this.dateSeparator)),this.segments=e}setNumberParser(){this.numberParser=new T(this._language,{maximumFractionDigits:0})}setDateFormatter(){this.dateFormatter=new x(this._language,{day:`2-digit`,month:`2-digit`,year:`numeric`,...this.getTimeOptions(`2-digit`)})}setAriaDateFormatter(){this.ariaDateFormatter=new x(this._language,{day:`numeric`,month:`long`,year:`numeric`,...this.getTimeOptions(`numeric`)})}getTimeOptions(e){switch(this.precision){case j.Millisecond:return{hour:e,minute:e,second:e,fractionalSecondDigits:3};case j.Second:return{hour:e,minute:e,second:e};case j.Minute:return{hour:e,minute:e};case j.Hour:return{hour:e};default:return{}}}};s([u({type:String,reflect:!0})],H.prototype,`value`,void 0),s([u({type:String,reflect:!0})],H.prototype,`min`,void 0),s([u({type:String,reflect:!0})],H.prototype,`max`,void 0),s([u({type:String,attribute:`date-format`,reflect:!0})],H.prototype,`dateFormat`,void 0),s([u({type:String,attribute:`date-separator`,reflect:!0})],H.prototype,`dateSeparator`,void 0),s([u({type:String,reflect:!0})],H.prototype,`precision`,null),s([u({type:Boolean,reflect:!0})],H.prototype,`invalid`,void 0),s([u({type:Boolean,reflect:!0})],H.prototype,`readonly`,void 0),s([u({type:Boolean,reflect:!0})],H.prototype,`quiet`,void 0),s([u({type:String,reflect:!0})],H.prototype,`placement`,void 0),s([u({type:String,attribute:`time-zone`,reflect:!0})],H.prototype,`timeZone`,void 0),s([u({type:String,reflect:!0})],H.prototype,`language`,void 0),s([u({attribute:!1})],H.prototype,`labels`,void 0),s([u({type:Boolean,reflect:!0})],H.prototype,`focused`,void 0),s([l()],H.prototype,`_value`,void 0),s([l()],H.prototype,`_min`,void 0),s([l()],H.prototype,`_max`,void 0),s([l()],H.prototype,`segments`,void 0),s([l()],H.prototype,`isCalendarOpen`,void 0),s([a(`.editable-segment`)],H.prototype,`firstEditableSegment`,void 0),s([a(`.input`)],H.prototype,`input`,void 0),customElements.get(`luzmo-date-time-picker`)||customElements.define(`luzmo-date-time-picker`,H);export{H as LuzmoDateTimePicker};

package/standalone/divider.js

@@ -0,0 +1,20 @@
+/*!* Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2026 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"./tokens.js";import{t as e}from"./chunks/divider-Bf9Drp2z.js";export{e as LuzmoDivider};

package/standalone/field-group.js

@@ -0,0 +1,20 @@
+/*!* Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2026 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"./tokens.js";import{t as e}from"./chunks/field-group-D8EjgC6F.js";customElements.get(`luzmo-field-group`)||customElements.define(`luzmo-field-group`,e);export{e as LuzmoFieldGroup};

package/standalone/field-label.js

@@ -0,0 +1,20 @@
+/*!* Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2026 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"./tokens.js";import{t as e}from"./chunks/field-label-VWHDlW9_.js";export{e as LuzmoFieldLabel};

package/standalone/icon.js

@@ -0,0 +1,20 @@
+/*!* Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2026 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"./tokens.js";import{t as e}from"./chunks/icon-Dy6J1QeX.js";export{e as LuzmoIcon};

package/standalone/infield-button.js

@@ -0,0 +1,20 @@
+/*!* Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2026 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"./tokens.js";import{t as e}from"./chunks/infield-button-D03MpU_s.js";export{e as LuzmoInfieldButton};

package/standalone/label.js

@@ -0,0 +1,20 @@
+/*!* Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2026 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"./tokens.js";import{c as e,y as t}from"./chunks/lit-BN_lRQbJ.js";import{l as n,u as r,y as i}from"./chunks/lucero-runtime-DGJ9-isg.js";var a=class extends r{constructor(...e){super(...e),this.label=``,this.tooltip=``}static{this.styles=t(``)}render(){return e` <span> ${this.label} </span> `}};n([i({type:String})],a.prototype,`label`,void 0),n([i({type:String,reflect:!0,attribute:`tooltip`})],a.prototype,`tooltip`,void 0),customElements.get(`luzmo-label`)||customElements.define(`luzmo-label`,a);export{a as LuzmoLabel};

package/standalone/lit.js

@@ -0,0 +1,20 @@
+/*!* Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2026 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{_ as e,a as t,c as n,d as r,f as i,g as a,h as o,i as s,l as c,m as l,n as u,o as d,p as f,r as p,s as m,t as h,u as g,v as _,y as v}from"./chunks/lit-BN_lRQbJ.js";import{_ as y,b,f as x,g as S,h as C,i as w,m as T,p as E,v as D,x as O,y as k}from"./chunks/lucero-runtime-DGJ9-isg.js";import{n as A,r as j,t as M}from"./chunks/directive-Du_3lDov.js";import{t as N}from"./chunks/class-map-CxQ0PcQP.js";import{t as P}from"./chunks/style-map-D4QeV3m0.js";import{t as F}from"./chunks/async-directive-BA2_dM-5.js";import"./chunks/async-directive-CPdA0BOw.js";import{n as I,t as L}from"./chunks/unsafe-html-BPQaWy0v.js";import{t as R}from"./chunks/repeat-CZdNcszA.js";import{t as z}from"./chunks/keyed-CNWmQd2J.js";var B={},V=M(class extends A{constructor(){super(...arguments),this.ot=B}render(e,t){return t()}update(e,[t,n]){if(Array.isArray(t)){if(Array.isArray(this.ot)&&this.ot.length===t.length&&t.every((e,t)=>e===this.ot[t]))return d}else if(this.ot===t)return d;return this.ot=Array.isArray(t)?Array.from(t):t,this.render(t,n)}});export{F as AsyncDirective,_ as CSSResult,A as Directive,u as LitElement,j as PartType,f as ReactiveElement,L as UnsafeHTMLDirective,p as _$LE,c as _$LH,l as adoptStyles,N as classMap,e as css,O as customElement,i as defaultConverter,M as directive,y as eventOptions,o as getCompatibleStyle,V as guard,n as html,w as ifDefined,h as isServer,z as keyed,m as mathml,d as noChange,r as notEqual,s as nothing,k as property,S as query,C as queryAll,E as queryAssignedElements,x as queryAssignedNodes,T as queryAsync,t as render,R as repeat,b as standardProperty,D as state,P as styleMap,a as supportsAdoptingStyleSheets,g as svg,v as unsafeCSS,I as unsafeHTML};