@luzmo/lucero 1.0.1-alpha.46 → 1.0.1-alpha.48

package/components/prompt-box/index.js

@@ -17,11 +17,11 @@
  * */
 import { luzmoClear as $, luzmoCheck as C, luzmoMicrophone as k, luzmoArrowUp as S } from "@luzmo/icons";
 import { unsafeCSS as B, html as s, nothing as f } from "lit";
-import { property as m, state as h, query as w } from "lit/decorators.js";
+import { property as m, state as h, query as _ } from "lit/decorators.js";
 import { repeat as E } from "lit/directives/repeat.js";
 import { a as F } from "../base-BUViEg_7.js";
 import { S as L } from "../sized-mixin-cJbo3PKR.js";
-import { V as _ } from "../voice-recorder-BRq_gEkz.js";
+import { V as w } from "../voice-recorder-BRq_gEkz.js";
 import "../action-button/index.js";
 import "../button/index.js";
 import "../icon/index.js";
@@ -35,28 +35,28 @@ const A = () => {
 };
 A();
 const I = ":host{display:flex;flex-direction:column;font-family:var(--luzmo-prompt-box-font-family, var(--prompt-box-font-family));font-size:var(--luzmo-prompt-box-font-size, var(--prompt-box-font-size));line-height:var(--luzmo-prompt-box-line-height, var(--prompt-box-line-height));color:var(--highcontrast-prompt-box-text-color, var(--luzmo-prompt-box-text-color, var(--prompt-box-text-color)));width:100%}:host([disabled]){opacity:var(--luzmo-prompt-box-disabled-opacity, var(--prompt-box-disabled-opacity));pointer-events:none}.container{display:flex;flex-direction:column;gap:var(--luzmo-prompt-box-gap, var(--prompt-box-gap));padding:var(--luzmo-prompt-box-vertical-padding, var(--prompt-box-vertical-padding)) var(--luzmo-prompt-box-horizontal-padding, var(--prompt-box-horizontal-padding));background-color:var(--highcontrast-prompt-box-background-color, var(--luzmo-prompt-box-background-color, var(--prompt-box-background-color)));border-radius:var(--luzmo-prompt-box-border-radius, var(--prompt-box-border-radius));border-width:var(--luzmo-prompt-box-border-width, var(--prompt-box-border-width));border-style:solid;border-color:var(--highcontrast-prompt-box-border-color, var(--luzmo-prompt-box-border-color, var(--prompt-box-border-color)));box-shadow:var(--luzmo-prompt-box-shadow, var(--prompt-box-shadow));transition:border-color var(--luzmo-prompt-box-animation-duration, var(--prompt-box-animation-duration)) ease-in-out,box-shadow var(--luzmo-prompt-box-animation-duration, var(--prompt-box-animation-duration)) ease-in-out}:host(:focus-visible) .container{border-color:var(--luzmo-prompt-box-border-color-focus, var(--prompt-box-border-color-focus));box-shadow:var(--luzmo-prompt-box-shadow-focus, var(--prompt-box-shadow-focus))}:host(.focus-visible) .container{border-color:var(--luzmo-prompt-box-border-color-focus, var(--prompt-box-border-color-focus));box-shadow:var(--luzmo-prompt-box-shadow-focus, var(--prompt-box-shadow-focus))}:host(:focus){outline:none}.top-actions{display:flex;align-items:center;gap:var(--luzmo-prompt-box-top-actions-gap, var(--prompt-box-top-actions-gap));flex-wrap:wrap;opacity:var(--luzmo-prompt-box-actions-opacity, var(--prompt-box-actions-opacity, 1));transition:opacity var(--luzmo-prompt-box-animation-duration, var(--prompt-box-animation-duration)) ease-in-out}.top-actions.empty{display:none}.hidden-file-input{position:absolute;width:0;height:0;opacity:0;overflow:hidden;pointer-events:none}.attachments{display:flex;flex-direction:column;gap:var(--luzmo-prompt-box-attachments-gap, var(--prompt-box-attachments-gap, 8px))}.image-attachments{display:flex;flex-wrap:wrap;gap:var(--luzmo-prompt-box-image-attachments-gap, var(--prompt-box-image-attachments-gap, 8px))}.image-attachment{position:relative;display:inline-flex;width:var(--luzmo-prompt-box-image-preview-size, var(--prompt-box-image-preview-size, 80px));height:var(--luzmo-prompt-box-image-preview-size, var(--prompt-box-image-preview-size, 80px));border-radius:var(--luzmo-prompt-box-image-border-radius, var(--prompt-box-image-border-radius, 8px));overflow:hidden;background-color:var(--luzmo-prompt-box-image-background, var(--prompt-box-image-background, rgba(0, 0, 0, .05)))}.image-preview{width:100%;height:100%;object-fit:cover}.attachment-remove{position:absolute;top:4px;right:4px;width:var(--luzmo-prompt-box-remove-button-size, var(--prompt-box-remove-button-size, 24px));height:var(--luzmo-prompt-box-remove-button-size, var(--prompt-box-remove-button-size, 24px));background-color:var(--luzmo-prompt-box-remove-button-background, var(--prompt-box-remove-button-background, rgba(0, 0, 0, .5)));border-radius:50%;--luzmo-clear-button-icon-color: var( --luzmo-prompt-box-remove-button-icon-color, var(--prompt-box-remove-button-icon-color, #fff) )}.attachment-remove:hover{background-color:var(--luzmo-prompt-box-remove-button-background-hover, var(--prompt-box-remove-button-background-hover, rgba(0, 0, 0, .7)))}.file-attachments{--luzmo-tag-border-radius: 16px;display:flex;flex-wrap:wrap;gap:var(--luzmo-prompt-box-file-attachments-gap, var(--prompt-box-file-attachments-gap, 4px))}.file-attachment{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-wrapper{position:relative;display:flex;flex:1}.input-field{flex:1;width:100%;min-width:0;--luzmo-text-field-focus-indicator-width: 0;--luzmo-text-field-border-width: 0;--luzmo-text-field-width: 100%;--luzmo-text-field-min-width: 0;--luzmo-text-field-placeholder-text-color-default: var( --luzmo-prompt-box-placeholder-color, var(--prompt-box-placeholder-color) )}.actions-row{display:flex;align-items:center;justify-content:space-between;gap:var(--luzmo-prompt-box-actions-gap, var(--prompt-box-actions-gap))}.bottom-actions{display:flex;align-items:center;gap:var(--luzmo-prompt-box-bottom-actions-gap, var(--prompt-box-bottom-actions-gap));flex-wrap:wrap;flex:1;opacity:var(--luzmo-prompt-box-actions-opacity, var(--prompt-box-actions-opacity, 1));transition:opacity var(--luzmo-prompt-box-animation-duration, var(--prompt-box-animation-duration)) ease-in-out}.button-group{display:flex;align-items:center;gap:var(--luzmo-prompt-box-button-group-gap, var(--prompt-box-button-group-gap));margin-left:auto}.record-button,.cancel-recording-button{--luzmo-action-button-border-radius: var( --luzmo-prompt-box-record-button-border-radius, 50% );--luzmo-action-button-focus-indicator-border-radius: var( --luzmo-prompt-box-record-button-focus-indicator-border-radius, 50% )}.submit-button{margin-inline-start:var(--luzmo-prompt-box-submit-button-margin-inline-start, var(--prompt-box-submit-button-margin-inline-start))}.recording-ui{display:flex;align-items:center;gap:var(--luzmo-prompt-box-recording-gap, var(--prompt-box-recording-gap))}.waveform{display:flex;align-items:center;gap:var(--luzmo-prompt-box-waveform-gap, var(--prompt-box-waveform-gap, 3px));height:var(--luzmo-prompt-box-waveform-height, var(--prompt-box-waveform-height, 24px));padding:0 4px}.waveform-bar{width:var(--luzmo-prompt-box-waveform-bar-width, var(--prompt-box-waveform-bar-width, 3px));height:calc(var(--bar-height, .3) * var(--luzmo-prompt-box-waveform-height, var(--prompt-box-waveform-height, 24px)));min-height:4px;background-color:var(--luzmo-prompt-box-waveform-bar-color, var(--prompt-box-waveform-bar-color, currentColor));border-radius:var(--luzmo-prompt-box-waveform-bar-radius, var(--prompt-box-waveform-bar-radius, 2px));transition:height .05s ease-out;animation:waveform-pulse 1s ease-in-out infinite}.waveform-bar:nth-child(1){animation-delay:0s}.waveform-bar:nth-child(2){animation-delay:.1s}.waveform-bar:nth-child(3){animation-delay:.2s}.waveform-bar:nth-child(4){animation-delay:.1s}.waveform-bar:nth-child(5){animation-delay:0s}@keyframes waveform-pulse{0%,to{opacity:.6}50%{opacity:1}}.recording-duration{font-family:var(--luzmo-prompt-box-recording-duration-font-family, var(--prompt-box-recording-duration-font-family, monospace));font-size:var(--luzmo-prompt-box-recording-duration-font-size, var(--prompt-box-recording-duration-font-size, 14px));font-weight:var(--luzmo-prompt-box-recording-duration-font-weight, var(--prompt-box-recording-duration-font-weight, 500));color:var(--luzmo-prompt-box-recording-duration-color, var(--prompt-box-recording-duration-color, currentColor));text-align:center}::slotted([slot=top-actions]){display:inline-flex;align-items:center}::slotted([slot=bottom-actions]){display:inline-flex;align-items:center}::slotted([slot=record-button]){display:inline-flex}::slotted([slot=submit-button]){display:inline-flex;margin-inline-start:var(--luzmo-prompt-box-submit-button-margin-inline-start, var(--prompt-box-submit-button-margin-inline-start))}@media (forced-colors: active){:host{--highcontrast-prompt-box-background-color: Canvas;--highcontrast-prompt-box-border-color: CanvasText;--highcontrast-prompt-box-text-color: CanvasText}}:host{--prompt-box-font-family: var(--luzmo-font-family);--prompt-box-font-size: var(--luzmo-font-size);--prompt-box-line-height: 1.5;--prompt-box-text-color: var(--luzmo-font-color);--prompt-box-background-color: var(--luzmo-background-color);--prompt-box-border-radius: var(--luzmo-border-radius-xl);--prompt-box-border-width: var(--luzmo-border-width);--prompt-box-border-color: var(--luzmo-border-color);--prompt-box-border-color-focus: var(--luzmo-primary);--prompt-box-shadow: 0 2px 8px rgba(var(--luzmo-border-color-rgb), .08);--prompt-box-shadow-focus: 0 2px 12px rgba(var(--luzmo-primary-rgb), .15);--prompt-box-gap: var(--luzmo-spacing-5);--prompt-box-recording-gap: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--prompt-box-vertical-padding: var(--luzmo-spacing-4);--prompt-box-horizontal-padding: var(--luzmo-spacing-5);--prompt-box-actions-gap: var(--luzmo-spacing-3);--prompt-box-top-actions-gap: var(--luzmo-spacing-2);--prompt-box-bottom-actions-gap: var(--luzmo-spacing-2);--prompt-box-button-group-gap: var(--luzmo-spacing-2);--prompt-box-submit-button-margin-inline-start: var(--luzmo-spacing-3);--prompt-box-max-height: 200px;--prompt-box-placeholder-color: var(--luzmo-font-color-extra-dimmed);--prompt-box-placeholder-opacity: 1;--prompt-box-animation-duration: var(--luzmo-animation-duration, .15s);--prompt-box-disabled-opacity: .5;--prompt-box-attachments-gap: var(--luzmo-spacing-1);--prompt-box-image-attachments-gap: var(--luzmo-spacing-2);--prompt-box-file-attachments-gap: var(--luzmo-spacing-2);--prompt-box-image-preview-size: 64px;--prompt-box-image-border-radius: var(--luzmo-border-radius);--prompt-box-image-background: rgba(0, 0, 0, .05);--prompt-box-remove-button-size: 20px;--prompt-box-remove-button-background: rgba(0, 0, 0, .5);--prompt-box-remove-button-background-hover: rgba(0, 0, 0, .7);--prompt-box-remove-button-icon-color: #fff}:host([size=s]){--prompt-box-font-size: var(--luzmo-font-size-s);--prompt-box-border-radius: var(--luzmo-border-radius-l);--prompt-box-vertical-padding: var(--luzmo-spacing-3);--prompt-box-horizontal-padding: var(--luzmo-spacing-4);--prompt-box-gap: var(--luzmo-spacing-4);--prompt-box-attachments-gap: 0;--prompt-box-image-attachments-gap: var(--luzmo-spacing-1);--prompt-box-recording-gap: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--prompt-box-max-height: 150px;--prompt-box-image-preview-size: 48px;--prompt-box-remove-button-size: 18px}:host([size=l]){--prompt-box-font-size: var(--luzmo-font-size-l);--prompt-box-border-radius: var(--luzmo-border-radius-xl);--prompt-box-vertical-padding: var(--luzmo-spacing-5);--prompt-box-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--prompt-box-gap: var(--luzmo-spacing-4);--prompt-box-attachments-gap: var(--luzmo-spacing-1);--prompt-box-image-attachments-gap: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--prompt-box-recording-gap: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--prompt-box-max-height: 250px;--prompt-box-image-preview-size: 72px;--prompt-box-remove-button-size: 24px}:host([size=xl]){--prompt-box-font-size: var(--luzmo-font-size-xl);--prompt-box-border-radius: var(--luzmo-border-radius-xl);--prompt-box-vertical-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--prompt-box-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--prompt-box-gap: var(--luzmo-spacing-5);--prompt-box-attachments-gap: var(--luzmo-spacing-2);--prompt-box-image-attachments-gap: var(--luzmo-spacing-3);--prompt-box-max-height: 300px;--prompt-box-image-preview-size: 96px;--prompt-box-remove-button-size: 28px}:host([pending]){--prompt-box-actions-opacity: .75}";
-var T = Object.defineProperty, n = (b, t, o, e) => {
-  for (var a = void 0, r = b.length - 1, l; r >= 0; r--)
-    (l = b[r]) && (a = l(t, o, a) || a);
-  return a && T(t, o, a), a;
+var T = Object.defineProperty, a = (b, t, o, e) => {
+  for (var n = void 0, r = b.length - 1, l; r >= 0; r--)
+    (l = b[r]) && (n = l(t, o, n) || n);
+  return n && T(t, o, n), n;
 };
-let z = !1;
+let x = !1;
 typeof window < "u" && (document.addEventListener(
   "keydown",
   () => {
-    z = !0;
+    x = !0;
   },
   !0
 ), document.addEventListener(
   "mousedown",
   () => {
-    z = !1;
+    x = !1;
   },
   !0
 ), document.addEventListener(
   "pointerdown",
   () => {
-    z = !1;
+    x = !1;
   },
   !0
 ));
@@ -66,15 +66,15 @@ const i = (d = class extends L(F, {
   defaultSize: "m"
 }) {
   constructor() {
-    super(...arguments), this.rows = 1, this.grows = !1, this.recording = !1, this.hideSubmit = !1, this.placeholder = "", this.value = "", this.disabled = !1, this.readonly = !1, this.maxlength = -1, this.pending = !1, this.allowImages = !1, this.allowFiles = !1, this.acceptedFileTypes = [], this._hasTopActions = !1, this._hasBottomActions = !1, this._hasRecordButton = !1, this._hasSubmitButton = !1, this._attachments = [], this._isRecording = !1, this._recordingDuration = 0, this._audioLevel = 0, this._voiceRecorder = null, this._shouldFocusFinishButton = !1, this._attachmentIdCounter = 0, this._handleHostFocus = () => {
-      z && this.classList.add("focus-visible");
+    super(...arguments), this.rows = 1, this.grows = !1, this.maxRows = -1, this.recording = !1, this.hideSubmit = !1, this.placeholder = "", this.value = "", this.disabled = !1, this.readonly = !1, this.maxlength = -1, this.pending = !1, this.allowImages = !1, this.allowFiles = !1, this.acceptedFileTypes = [], this._hasTopActions = !1, this._hasBottomActions = !1, this._hasRecordButton = !1, this._hasSubmitButton = !1, this._attachments = [], this._isRecording = !1, this._recordingDuration = 0, this._audioLevel = 0, this._voiceRecorder = null, this._shouldFocusFinishButton = !1, this._attachmentIdCounter = 0, this._handleHostFocus = () => {
+      x && this.classList.add("focus-visible");
     }, this._handleHostBlur = () => {
       this.classList.remove("focus-visible");
     }, this._handlePaste = (t) => {
-      var a;
+      var n;
       if (!this.allowImages || this.disabled || this.readonly || this.pending)
         return;
-      const o = (a = t.clipboardData) == null ? void 0 : a.items;
+      const o = (n = t.clipboardData) == null ? void 0 : n.items;
       if (!o) return;
       const e = [];
       for (const r of o)
@@ -91,7 +91,7 @@ const i = (d = class extends L(F, {
   /**
    * Get the appropriate tag size based on the prompt box size.
    * Tags are one level smaller than the prompt box, with 's' being the minimum.
-   * @private
+   * @internal
    */
   get _tagSize() {
     switch (this.size) {
@@ -115,22 +115,42 @@ const i = (d = class extends L(F, {
     for (const t of this._attachments)
       t.previewUrl && URL.revokeObjectURL(t.previewUrl);
   }
+  /**
+   * Handles the change event for the top actions slot.
+   * @internal
+   */
   _handleTopActionsSlotChange(t) {
     const o = t.target;
     this._hasTopActions = o.assignedNodes().length > 0;
   }
+  /**
+   * Handles the change event for the bottom actions slot.
+   * @internal
+   */
   _handleBottomActionsSlotChange(t) {
     const o = t.target;
     this._hasBottomActions = o.assignedNodes().length > 0;
   }
+  /**
+   * Handles the change event for the record button slot.
+   * @internal
+   */
   _handleRecordButtonSlotChange(t) {
     const o = t.target;
     this._hasRecordButton = o.assignedNodes().length > 0;
   }
+  /**
+   * Handles the change event for the submit button slot.
+   * @internal
+   */
   _handleSubmitButtonSlotChange(t) {
     const o = t.target;
     this._hasSubmitButton = o.assignedNodes().length > 0;
   }
+  /**
+   * Handles the input event for the input element.
+   * @internal
+   */
   _handleInput(t) {
     const o = t.target;
     this.value = o.value, this.dispatchEvent(
@@ -140,6 +160,10 @@ const i = (d = class extends L(F, {
       })
     );
   }
+  /**
+   * Handles the keydown event for the input element.
+   * @internal
+   */
   _handleKeydown(t) {
     t.key === "Enter" && !t.shiftKey && (t.preventDefault(), this._submit());
   }
@@ -151,8 +175,8 @@ const i = (d = class extends L(F, {
     if (this.acceptedFileTypes.length === 0)
       return !0;
     const o = t.name.toLowerCase(), e = t.type.toLowerCase();
-    for (const a of this.acceptedFileTypes) {
-      const r = a.toLowerCase();
+    for (const n of this.acceptedFileTypes) {
+      const r = n.toLowerCase();
       if (r.endsWith("/*")) {
         const l = r.slice(0, -2);
         if (e.startsWith(l + "/"))
@@ -184,11 +208,11 @@ const i = (d = class extends L(F, {
     for (const e of t) {
       if (this._isImageFile(e) && !this.allowImages || !this._isImageFile(e) && !this.allowFiles || !this._isFileTypeAccepted(e))
         continue;
-      const a = this._generateAttachmentId(), r = {
+      const n = this._generateAttachmentId(), r = {
         file: e,
-        id: a
+        id: n
       };
-      this._isImageFile(e) && (r.previewUrl = URL.createObjectURL(e)), this._attachments = [...this._attachments, r], o.push(a);
+      this._isImageFile(e) && (r.previewUrl = URL.createObjectURL(e)), this._attachments = [...this._attachments, r], o.push(n);
     }
     return o.length > 0 && this.dispatchEvent(
       new CustomEvent("luzmo-attachments-change", {
@@ -252,8 +276,8 @@ const i = (d = class extends L(F, {
   _extractActionValues(t) {
     const o = [];
     for (const e of t) {
-      const a = this._getInteractiveElements(e);
-      for (const r of a) {
+      const n = this._getInteractiveElements(e);
+      for (const r of n) {
         const l = {
           element: r,
           name: r.getAttribute("name") || r.getAttribute("label") || void 0
@@ -275,13 +299,13 @@ const i = (d = class extends L(F, {
       'slot[name="top-actions"]'
     ), o = (u = this.shadowRoot) == null ? void 0 : u.querySelector(
       'slot[name="bottom-actions"]'
-    ), e = (t == null ? void 0 : t.assignedElements()) ?? [], a = (o == null ? void 0 : o.assignedElements()) ?? [], r = this._extractActionValues([
+    ), e = (t == null ? void 0 : t.assignedElements()) ?? [], n = (o == null ? void 0 : o.assignedElements()) ?? [], r = this._extractActionValues([
       ...e,
-      ...a
+      ...n
     ]), l = {
       value: this.value,
       topActions: [...e],
-      bottomActions: [...a],
+      bottomActions: [...n],
       actionValues: r,
       attachments: [...this._attachments]
     };
@@ -294,7 +318,7 @@ const i = (d = class extends L(F, {
     );
   }
   async _handleRecordClick(t) {
-    if (!_.isSupported()) {
+    if (!w.isSupported()) {
       this.dispatchEvent(
         new CustomEvent("luzmo-record-error", {
           bubbles: !0,
@@ -358,7 +382,7 @@ const i = (d = class extends L(F, {
    * @private
    */
   _initVoiceRecorder() {
-    this._voiceRecorder || (this._voiceRecorder = new _({
+    this._voiceRecorder || (this._voiceRecorder = new w({
       maxDuration: 3e5
       // 5 minutes
     }), this._voiceRecorder.onStart(() => {
@@ -401,7 +425,7 @@ const i = (d = class extends L(F, {
    * @private
    */
   _formatRecordingDuration() {
-    return _.formatDuration(this._recordingDuration);
+    return w.formatDuration(this._recordingDuration);
   }
   /**
    * Focus the input element.
@@ -465,21 +489,21 @@ const i = (d = class extends L(F, {
     const t = (p = this.shadowRoot) == null ? void 0 : p.querySelector(
       'slot[name="submit-button"]'
     ), o = (t == null ? void 0 : t.assignedElements()) ?? [];
-    for (const x of o) {
-      const y = this._getInteractiveElements(x);
+    for (const z of o) {
+      const y = this._getInteractiveElements(z);
       for (const c of y)
         this.pending ? (c.setAttribute("pending", ""), c.removeAttribute("disabled"), c.removeAttribute("readonly")) : this.disabled ? (c.removeAttribute("pending"), c.setAttribute("disabled", ""), c.removeAttribute("readonly")) : (c.removeAttribute("pending"), c.removeAttribute("disabled"), c.removeAttribute("readonly"));
     }
-    const e = (x) => {
-      for (const y of x) {
+    const e = (z) => {
+      for (const y of z) {
         const c = this._getInteractiveElements(y);
         for (const g of c)
           this.disabled ? (g.setAttribute("disabled", ""), g.removeAttribute("readonly")) : this.pending ? (g.removeAttribute("disabled"), g.setAttribute("readonly", "")) : (g.removeAttribute("disabled"), g.removeAttribute("readonly"));
       }
-    }, a = (u = this.shadowRoot) == null ? void 0 : u.querySelector(
+    }, n = (u = this.shadowRoot) == null ? void 0 : u.querySelector(
       'slot[name="top-actions"]'
     );
-    e((a == null ? void 0 : a.assignedElements()) ?? []);
+    e((n == null ? void 0 : n.assignedElements()) ?? []);
     const r = (v = this.shadowRoot) == null ? void 0 : v.querySelector(
       'slot[name="bottom-actions"]'
     );
@@ -637,6 +661,7 @@ const i = (d = class extends L(F, {
         .size=${this.size}
         rows=${this.rows}
         ?grows=${this.grows}
+        max-rows=${this.maxRows}
         ?readonly=${this.readonly || this.pending || this.disabled}
         maxlength=${this.maxlength > 0 ? this.maxlength : -1}
         multiline
@@ -644,6 +669,7 @@ const i = (d = class extends L(F, {
         label=${this.placeholder || "Enter your message"}
         @input=${this._handleInput}
         @keydown=${this._handleKeydown}
+        hide-validation-icons
       ></luzmo-text-field>
     `;
   }
@@ -753,77 +779,80 @@ const i = (d = class extends L(F, {
     `;
   }
 }, d.INTERACTIVE_ELEMENTS_SELECTOR = "luzmo-button, luzmo-action-button, luzmo-switch, luzmo-picker, luzmo-picker-button, luzmo-select, luzmo-text-field, luzmo-number-field", d);
-n([
+a([
   m({ type: Number })
 ], i.prototype, "rows");
-n([
+a([
   m({ type: Boolean, reflect: !0 })
 ], i.prototype, "grows");
-n([
+a([
+  m({ type: Number, attribute: "max-rows" })
+], i.prototype, "maxRows");
+a([
   m({ type: Boolean, reflect: !0 })
 ], i.prototype, "recording");
-n([
+a([
   m({ type: Boolean, reflect: !0, attribute: "hide-submit" })
 ], i.prototype, "hideSubmit");
-n([
+a([
   m({ type: String })
 ], i.prototype, "placeholder");
-n([
+a([
   m({ type: String })
 ], i.prototype, "value");
-n([
+a([
   m({ type: Boolean, reflect: !0 })
 ], i.prototype, "disabled");
-n([
+a([
   m({ type: Boolean, reflect: !0 })
 ], i.prototype, "readonly");
-n([
+a([
   m({ type: Number })
 ], i.prototype, "maxlength");
-n([
+a([
   m({ type: Boolean, reflect: !0 })
 ], i.prototype, "pending");
-n([
+a([
   m({ type: Boolean, reflect: !0, attribute: "allow-images" })
 ], i.prototype, "allowImages");
-n([
+a([
   m({ type: Boolean, reflect: !0, attribute: "allow-files" })
 ], i.prototype, "allowFiles");
-n([
+a([
   m({ type: Array, attribute: "accepted-file-types" })
 ], i.prototype, "acceptedFileTypes");
-n([
+a([
   h()
 ], i.prototype, "_hasTopActions");
-n([
+a([
   h()
 ], i.prototype, "_hasBottomActions");
-n([
+a([
   h()
 ], i.prototype, "_hasRecordButton");
-n([
+a([
   h()
 ], i.prototype, "_hasSubmitButton");
-n([
+a([
   h()
 ], i.prototype, "_attachments");
-n([
+a([
   h()
 ], i.prototype, "_isRecording");
-n([
+a([
   h()
 ], i.prototype, "_recordingDuration");
-n([
+a([
   h()
 ], i.prototype, "_audioLevel");
-n([
-  w("luzmo-text-field")
+a([
+  _("luzmo-text-field")
 ], i.prototype, "_inputElement");
-n([
-  w('input[type="file"]')
+a([
+  _('input[type="file"]')
 ], i.prototype, "_fileInput");
-n([
-  w(".finish-recording-button")
+a([
+  _(".finish-recording-button")
 ], i.prototype, "_finishRecordingButton");
 let D = i;
 customElements.get("luzmo-prompt-box") || customElements.define("luzmo-prompt-box", D);

package/components/prompt-box/prompt-box.d.ts

@@ -53,6 +53,14 @@ export declare class LuzmoPromptBox extends LuzmoPromptBox_base {
      * @attr grows
      */
     grows: boolean;
+    /**
+     * The maximum number of rows the textarea should grow to when `grows` is enabled.
+     * When content exceeds this limit, the textarea will show a scrollbar.
+     * A value of -1 means no maximum (unlimited growth).
+     * When set, the value must be >= 1; values < 1 will be disregarded.
+     * @attr max-rows
+     */
+    maxRows: number;
     /**
      * Whether to show the record/voice button.
      * @attr recording
@@ -113,75 +121,127 @@ export declare class LuzmoPromptBox extends LuzmoPromptBox_base {
     acceptedFileTypes: string[];
     /**
      * Whether the prompt box has a top-actions slot.
-     * @private
+     * @internal
      */
     private _hasTopActions;
     /**
      * Whether the prompt box has a bottom-actions slot.
-     * @private
+     * @internal
      */
     private _hasBottomActions;
     /**
      * Whether the prompt box has a custom record-button slot.
-     * @private
+     * @internal
      */
     private _hasRecordButton;
     /**
      * Whether the prompt box has a custom submit-button slot.
-     * @private
+     * @internal
      */
     private _hasSubmitButton;
     /**
      * List of attachments (files and images).
-     * @private
+     * @internal
      */
     private _attachments;
     /**
      * Whether the component is currently recording audio.
-     * @private
+     * @internal
      */
     private _isRecording;
     /**
      * Current recording duration in milliseconds.
-     * @private
+     * @internal
      */
     private _recordingDuration;
     /**
      * Current audio level for waveform visualization (0-1).
-     * @private
+     * @internal
      */
     private _audioLevel;
     /**
      * Voice recorder instance.
-     * @private
+     * @internal
      */
     private _voiceRecorder;
     /**
      * Whether to focus the finish button after render.
-     * @private
+     * @internal
      */
     private _shouldFocusFinishButton;
+    /**
+     * The input element.
+     * @internal
+     */
     private _inputElement;
+    /**
+     * The file input element.
+     * @internal
+     */
     private _fileInput;
+    /**
+     * The finish recording button element.
+     * @internal
+     */
     private _finishRecordingButton;
+    /**
+     * The attachment ID counter.
+     * @internal
+     */
     private _attachmentIdCounter;
     /**
      * Get the appropriate tag size based on the prompt box size.
      * Tags are one level smaller than the prompt box, with 's' being the minimum.
-     * @private
+     * @internal
      */
     private get _tagSize();
     connectedCallback(): void;
     disconnectedCallback(): void;
     private _revokeAllPreviewUrls;
+    /**
+     * Handles the focus event for the host element.
+     * @internal
+     */
     private _handleHostFocus;
+    /**
+     * Handles the blur event for the host element.
+     * @internal
+     */
     private _handleHostBlur;
+    /**
+     * Handles the change event for the top actions slot.
+     * @internal
+     */
     private _handleTopActionsSlotChange;
+    /**
+     * Handles the change event for the bottom actions slot.
+     * @internal
+     */
     private _handleBottomActionsSlotChange;
+    /**
+     * Handles the change event for the record button slot.
+     * @internal
+     */
     private _handleRecordButtonSlotChange;
+    /**
+     * Handles the change event for the submit button slot.
+     * @internal
+     */
     private _handleSubmitButtonSlotChange;
+    /**
+     * Handles the input event for the input element.
+     * @internal
+     */
     private _handleInput;
+    /**
+     * Handles the keydown event for the input element.
+     * @internal
+     */
     private _handleKeydown;
+    /**
+     * Handles the paste event for the input element.
+     * @internal
+     */
     private _handlePaste;
     private _handleFileInputChange;
     private _isFileTypeAccepted;
@@ -273,7 +333,7 @@ export declare class LuzmoPromptBox extends LuzmoPromptBox_base {
     protected updated(changedProperties: PropertyValues): void;
     /**
      * Selector for interactive elements that should be disabled.
-     * @private
+     * @internal
      */
     private static readonly INTERACTIVE_ELEMENTS_SELECTOR;
     /**

package/components/search/index.cjs

@@ -15,7 +15,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("lit"),a=require("lit/decorators.js"),u=require("lit/directives/if-defined.js"),n=require("@luzmo/icons");require("../button/index.cjs");require("../icon/index.cjs");const d=require("../text-field-CclDsK1X.cjs"),v="@media (forced-colors: active){#text-field #text-field,#text-field #text-field .input{--highcontrast-search-color-default: CanvasText;--highcontrast-search-color-hover: CanvasText;--highcontrast-search-color-focus: CanvasText;--highcontrast-search-color-disabled: GrayText}#text-field #button .luzmo-ClearButton-fill{forced-color-adjust:none;background-color:initial}}#text-field{--search-button-inline-size: var(--search-block-size);--search-min-inline-size: calc( var(--search-min-inline-multiplier) * var(--search-block-size) );--luzmo-text-field-font-family: var( --luzmo-search-font-family, var(--search-font-family) );--luzmo-text-field-font-weight: var( --luzmo-search-font-weight, var(--search-font-weight) );--luzmo-text-field-corner-radius: var( --luzmo-search-border-radius, var(--search-border-radius) );--luzmo-text-field-border-width: var( --luzmo-search-border-width, var(--search-border-width) );--luzmo-text-field-focus-indicator-gap: var( --luzmo-search-focus-indicator-gap, var(--search-focus-indicator-gap) );--luzmo-text-field-focus-indicator-width: var( --luzmo-search-focus-indicator-width, var(--search-focus-indicator-width) );--luzmo-text-field-focus-indicator-color: var( --luzmo-search-focus-indicator-color, var(--search-focus-indicator-color) );--luzmo-text-field-text-color-default: var( --luzmo-search-color-default, var(--search-color-default) );--luzmo-text-field-text-color-hover: var( --luzmo-search-color-hover, var(--search-color-hover) );--luzmo-text-field-text-color-focus: var( --luzmo-search-color-focus, var(--search-color-focus) );--luzmo-text-field-text-color-focus-hover: var( --luzmo-search-color-focus-hover, var(--search-color-focus-hover) );--luzmo-text-field-text-color-keyboard-focus: var( --luzmo-search-color-key-focus, var(--search-color-key-focus) );--luzmo-text-field-text-color-disabled: var( --luzmo-search-color-disabled, var(--search-color-disabled) );--luzmo-text-field-border-color: var( --luzmo-search-border-color-default, var(--search-border-color-default) );--luzmo-text-field-border-color-hover: var( --luzmo-search-border-color-hover, var(--search-border-color-hover) );--luzmo-text-field-border-color-focus: var( --luzmo-search-border-color-focus, var(--search-border-color-focus) );--luzmo-text-field-border-color-focus-hover: var( --luzmo-search-border-color-focus-hover, var(--search-border-color-focus-hover) );--luzmo-text-field-border-color-keyboard-focus: var( --luzmo-search-border-color-key-focus, var(--search-border-color-key-focus) );--luzmo-text-field-border-color-disabled: var( --luzmo-search-border-color-disabled, var(--search-border-color-disabled) );--luzmo-text-field-background-color: var( --luzmo-search-background-color, var(--search-background-color) );--luzmo-text-field-background-color-disabled: var( --luzmo-search-background-color-disabled, var(--search-background-color-disabled) );inline-size:var(--luzmo-search-inline-size, var(--search-inline-size));min-inline-size:var(--luzmo-search-min-inline-size, var(--search-min-inline-size));display:inline-block;position:relative}#text-field .luzmo-HelpText{margin-block-start:var(--luzmo-search-to-help-text, var(--search-to-help-text))}#button{position:absolute;inset-block-start:0;inset-inline-end:0;height:var(--search-block-size);width:var(--search-block-size)}#button,#button .luzmo-ClearButton-fill{border-radius:var(--luzmo-search-border-radius, var(--search-border-radius))}#text-field.is-disabled #button{display:none}#text-field{inline-size:100%}.icon-search{--search-color: var( --highcontrast-search-color-default, var(--luzmo-search-color-default, var(--search-color-default)) );color:var(--search-color);margin-block:auto;display:block;position:absolute;inset-block:0}#text-field.is-focused .icon-search{--search-color: var( --highcontrast-search-color-focus, var(--luzmo-search-color-focus, var(--search-color-focus)) )}#text-field.is-disabled .icon-search{--search-color: var( --highcontrast-search-color-disabled, var(--luzmo-search-color-disabled, var(--search-color-disabled)) )}@media (hover: hover){#text-field:hover .icon-search{--search-color: var( --highcontrast-search-color-hover, var(--luzmo-search-color-hover, var(--search-color-hover)) )}#text-field.is-focused:hover .icon-search{--search-color: var( --highcontrast-search-color-focus, var(--luzmo-search-color-focus-hover, var(--search-color-focus-hover)) )}#text-field.is-disabled:hover .icon-search{--search-color: var( --highcontrast-search-color-disabled, var(--luzmo-search-color-disabled, var(--search-color-disabled)) )}}.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;block-size:var(--luzmo-search-block-size, var(--search-block-size));font-style:var(--luzmo-search-font-style, var(--search-font-style));line-height:var(--luzmo-search-line-height, var(--search-line-height));padding-block-start:calc(var(--luzmo-search-top-to-text, var(--search-top-to-text)) - var(--luzmo-search-border-width, var(--search-border-width)));padding-block-end:calc(var(--luzmo-search-bottom-to-text, var(--search-bottom-to-text)) - var(--luzmo-search-border-width, var(--search-border-width)))}.input::-webkit-search-cancel-button,.input::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(:not([quiet])) #text-field .icon-search{inset-inline-start:var(--luzmo-search-edge-to-visual, var(--search-edge-to-visual))}:host(:not([quiet])) #text-field .input{padding-inline-start:calc(var(--luzmo-search-edge-to-visual, var(--search-edge-to-visual)) - var(--luzmo-search-border-width, var(--search-border-width)) + var(--luzmo-search-icon-size, var(--search-icon-size)) + var(--luzmo-search-text-to-icon, var(--search-text-to-icon)));padding-inline-end:calc(var(--luzmo-search-button-inline-size, var(--search-button-inline-size)) - var(--luzmo-search-border-width, var(--search-border-width)))}:host([quiet]){--search-quiet-button-offset: var( --luzmo-search-quiet-button-offset, calc( var(--luzmo-search-block-size, var(--search-block-size)) / 2 - var(--luzmo-search-icon-size, var(--search-icon-size)) / 2 ) )}:host([quiet]) #button .luzmo-ClearButton-icon{transform:translate(var(--search-quiet-button-offset))}:host([quiet]) #text-field .input{border-radius:var(--luzmo-search-border-radius, var(--search-border-radius));padding-block-start:var(--luzmo-search-top-to-text, var(--search-top-to-text));padding-inline-start:calc(var(--luzmo-search-edge-to-visual, var(--search-edge-to-visual)) + var(--luzmo-search-icon-size, var(--search-icon-size)) + var(--luzmo-search-text-to-icon, var(--search-text-to-icon)));padding-inline-end:calc(var(--luzmo-search-button-inline-size, var(--search-button-inline-size)) - var(--search-quiet-button-offset))}:host{--search-border-color-default: var(--luzmo-border-color);--search-border-color-hover: rgba(var(--luzmo-primary-rgb), .3);--search-border-color-focus: var(--luzmo-primary);--search-border-color-focus-hover: var(--luzmo-primary);--search-border-color-key-focus: var(--luzmo-primary);--search-inline-size: 192px;--search-min-inline-multiplier: 3;--search-to-help-text: 0px;--search-top-to-text: var(--luzmo-spacing-2);--search-bottom-to-text: var(--luzmo-spacing-2);--search-focus-indicator-width: var(--luzmo-indicator-width);--search-focus-indicator-gap: -1px;--search-focus-indicator-color: var(--luzmo-primary);--search-font-family: var(--luzmo-font-family);--search-font-weight: var(--luzmo-font-weight);--search-font-style: var(--luzmo-font-style);--search-line-height: var(--luzmo-line-height);--search-color-default: var(--luzmo-font-color);--search-color-hover: var(--luzmo-font-color-hover);--search-color-focus: var(--luzmo-font-color-focus);--search-color-focus-hover: var(--luzmo-font-focus);--search-color-key-focus: var(--luzmo-font-color-focus);--search-border-width: var(--luzmo-border-width);--search-background-color: var(--luzmo-background-color);--search-color-disabled: var(--luzmo-disabled-color);--search-background-color-disabled: var(--luzmo-background-color-disabled);--search-border-color-disabled: var(--luzmo-border-color-disabled)}:host #text-field{--search-border-radius: var(--luzmo-border-radius);--search-edge-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--search-block-size: var(--luzmo-component-height);--search-icon-size: var(--luzmo-font-size-l);--search-text-to-icon: calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=s]) #text-field{--search-border-radius: var(--luzmo-border-radius);--search-edge-to-visual: var(--luzmo-spacing-3);--search-block-size: var(--luzmo-component-height-s);--search-icon-size: var(--luzmo-font-size);--search-text-to-icon: var(--luzmo-spacing-3)}:host([size=l]) #text-field{--search-border-radius: var(--luzmo-border-radius);--search-edge-to-visual: var(--luzmo-spacing-4);--search-block-size: var(--luzmo-component-height-l);--search-icon-size: var(--luzmo-font-size-xl);--search-text-to-icon: calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=xl]) #text-field{--search-border-radius: var(--luzmo-border-radius);--search-edge-to-visual: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--search-block-size: var(--luzmo-component-height-xl);--search-icon-size: var(--luzmo-font-size-xxl);--search-text-to-icon: var(--luzmo-spacing-4)}:host([quiet]) #text-field{--search-background-color: transparent;--search-background-color-disabled: transparent;--search-border-color-disabled: var(--luzmo-border-color-disabled);--search-border-radius: 0;--search-edge-to-visual: 0px}:host{--luzmo-text-field-spacing-inline: var(--alias-infield-button-full-height-m)}input::-webkit-search-cancel-button{display:none}@media (forced-colors: active){luzmo-clear-button{--clear-button-fill-background-color: transparent;--clear-button-fill-background-color-disabled: transparent;--clear-button-fill-background-color-down: transparent;--clear-button-fill-background-color-hover: transparent;--clear-button-fill-background-color-key-focus: transparent}}";var m=Object.defineProperty,t=(o,r,c,f)=>{for(var s=void 0,i=o.length-1,h;i>=0;i--)(h=o[i])&&(s=h(r,c,s)||s);return s&&m(r,c,s),s};const b=o=>o.stopPropagation(),z=o=>o==="s"?n.luzmoSearch12:o==="l"?n.luzmoSearch:n.luzmoSearch14;class e extends d.LuzmoTextField{constructor(){super(...arguments),this.action="",this.label="Search",this.placeholder="Search"}static get styles(){return[...super.styles,l.unsafeCSS(v)]}handleSubmit(r){this.dispatchEvent(new Event("submit",{cancelable:!0,bubbles:!0}))||r.preventDefault()}handleKeydown(r){const{code:c}=r;c==="Escape"&&this.holdValueOnEscape||!this.value||c!=="Escape"||this.reset()}async reset(){this.value="",await this.updateComplete,this.focusElement.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.focusElement.dispatchEvent(new InputEvent("change",{bubbles:!0}))}renderField(){return l.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("lit"),a=require("lit/decorators.js"),u=require("lit/directives/if-defined.js"),n=require("@luzmo/icons");require("../button/index.cjs");require("../icon/index.cjs");const d=require("../text-field-DL5Qe8rI.cjs"),v="@media (forced-colors: active){#text-field #text-field,#text-field #text-field .input{--highcontrast-search-color-default: CanvasText;--highcontrast-search-color-hover: CanvasText;--highcontrast-search-color-focus: CanvasText;--highcontrast-search-color-disabled: GrayText}#text-field #button .luzmo-ClearButton-fill{forced-color-adjust:none;background-color:initial}}#text-field{--search-button-inline-size: var(--search-block-size);--search-min-inline-size: calc( var(--search-min-inline-multiplier) * var(--search-block-size) );--luzmo-text-field-font-family: var( --luzmo-search-font-family, var(--search-font-family) );--luzmo-text-field-font-weight: var( --luzmo-search-font-weight, var(--search-font-weight) );--luzmo-text-field-border-radius: var( --luzmo-search-border-radius, var(--search-border-radius) );--luzmo-text-field-border-width: var( --luzmo-search-border-width, var(--search-border-width) );--luzmo-text-field-focus-indicator-gap: var( --luzmo-search-focus-indicator-gap, var(--search-focus-indicator-gap) );--luzmo-text-field-focus-indicator-width: var( --luzmo-search-focus-indicator-width, var(--search-focus-indicator-width) );--luzmo-text-field-focus-indicator-color: var( --luzmo-search-focus-indicator-color, var(--search-focus-indicator-color) );--luzmo-text-field-text-color-default: var( --luzmo-search-color-default, var(--search-color-default) );--luzmo-text-field-text-color-hover: var( --luzmo-search-color-hover, var(--search-color-hover) );--luzmo-text-field-text-color-focus: var( --luzmo-search-color-focus, var(--search-color-focus) );--luzmo-text-field-text-color-focus-hover: var( --luzmo-search-color-focus-hover, var(--search-color-focus-hover) );--luzmo-text-field-text-color-keyboard-focus: var( --luzmo-search-color-key-focus, var(--search-color-key-focus) );--luzmo-text-field-text-color-disabled: var( --luzmo-search-color-disabled, var(--search-color-disabled) );--luzmo-text-field-border-color: var( --luzmo-search-border-color-default, var(--search-border-color-default) );--luzmo-text-field-border-color-hover: var( --luzmo-search-border-color-hover, var(--search-border-color-hover) );--luzmo-text-field-border-color-focus: var( --luzmo-search-border-color-focus, var(--search-border-color-focus) );--luzmo-text-field-border-color-focus-hover: var( --luzmo-search-border-color-focus-hover, var(--search-border-color-focus-hover) );--luzmo-text-field-border-color-keyboard-focus: var( --luzmo-search-border-color-key-focus, var(--search-border-color-key-focus) );--luzmo-text-field-border-color-disabled: var( --luzmo-search-border-color-disabled, var(--search-border-color-disabled) );--luzmo-text-field-background-color: var( --luzmo-search-background-color, var(--search-background-color) );--luzmo-text-field-background-color-disabled: var( --luzmo-search-background-color-disabled, var(--search-background-color-disabled) );inline-size:var(--luzmo-search-inline-size, var(--search-inline-size));min-inline-size:var(--luzmo-search-min-inline-size, var(--search-min-inline-size));display:inline-block;position:relative}#text-field .luzmo-HelpText{margin-block-start:var(--luzmo-search-to-help-text, var(--search-to-help-text))}#button{position:absolute;inset-block-start:0;inset-inline-end:0;height:var(--search-block-size);width:var(--search-block-size)}#button,#button .luzmo-ClearButton-fill{border-radius:var(--luzmo-search-border-radius, var(--search-border-radius))}#text-field.is-disabled #button{display:none}#text-field{inline-size:100%}.icon-search{--search-color: var( --highcontrast-search-color-default, var(--luzmo-search-color-default, var(--search-color-default)) );color:var(--search-color);margin-block:auto;display:block;position:absolute;inset-block:0}#text-field.is-focused .icon-search{--search-color: var( --highcontrast-search-color-focus, var(--luzmo-search-color-focus, var(--search-color-focus)) )}#text-field.is-disabled .icon-search{--search-color: var( --highcontrast-search-color-disabled, var(--luzmo-search-color-disabled, var(--search-color-disabled)) )}@media (hover: hover){#text-field:hover .icon-search{--search-color: var( --highcontrast-search-color-hover, var(--luzmo-search-color-hover, var(--search-color-hover)) )}#text-field.is-focused:hover .icon-search{--search-color: var( --highcontrast-search-color-focus, var(--luzmo-search-color-focus-hover, var(--search-color-focus-hover)) )}#text-field.is-disabled:hover .icon-search{--search-color: var( --highcontrast-search-color-disabled, var(--luzmo-search-color-disabled, var(--search-color-disabled)) )}}.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;block-size:var(--luzmo-search-block-size, var(--search-block-size));font-style:var(--luzmo-search-font-style, var(--search-font-style));line-height:var(--luzmo-search-line-height, var(--search-line-height));padding-block-start:calc(var(--luzmo-search-top-to-text, var(--search-top-to-text)) - var(--luzmo-search-border-width, var(--search-border-width)));padding-block-end:calc(var(--luzmo-search-bottom-to-text, var(--search-bottom-to-text)) - var(--luzmo-search-border-width, var(--search-border-width)))}.input::-webkit-search-cancel-button,.input::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(:not([quiet])) #text-field .icon-search{inset-inline-start:var(--luzmo-search-edge-to-visual, var(--search-edge-to-visual))}:host(:not([quiet])) #text-field .input{padding-inline-start:calc(var(--luzmo-search-edge-to-visual, var(--search-edge-to-visual)) - var(--luzmo-search-border-width, var(--search-border-width)) + var(--luzmo-search-icon-size, var(--search-icon-size)) + var(--luzmo-search-text-to-icon, var(--search-text-to-icon)));padding-inline-end:calc(var(--luzmo-search-button-inline-size, var(--search-button-inline-size)) - var(--luzmo-search-border-width, var(--search-border-width)))}:host([quiet]){--search-quiet-button-offset: var( --luzmo-search-quiet-button-offset, calc( var(--luzmo-search-block-size, var(--search-block-size)) / 2 - var(--luzmo-search-icon-size, var(--search-icon-size)) / 2 ) )}:host([quiet]) #button .luzmo-ClearButton-icon{transform:translate(var(--search-quiet-button-offset))}:host([quiet]) #text-field .input{border-radius:var(--luzmo-search-border-radius, var(--search-border-radius));padding-block-start:var(--luzmo-search-top-to-text, var(--search-top-to-text));padding-inline-start:calc(var(--luzmo-search-edge-to-visual, var(--search-edge-to-visual)) + var(--luzmo-search-icon-size, var(--search-icon-size)) + var(--luzmo-search-text-to-icon, var(--search-text-to-icon)));padding-inline-end:calc(var(--luzmo-search-button-inline-size, var(--search-button-inline-size)) - var(--search-quiet-button-offset))}:host{--search-border-color-default: var(--luzmo-border-color);--search-border-color-hover: rgba(var(--luzmo-primary-rgb), .3);--search-border-color-focus: var(--luzmo-primary);--search-border-color-focus-hover: var(--luzmo-primary);--search-border-color-key-focus: var(--luzmo-primary);--search-inline-size: 192px;--search-min-inline-multiplier: 3;--search-to-help-text: 0px;--search-top-to-text: var(--luzmo-spacing-2);--search-bottom-to-text: var(--luzmo-spacing-2);--search-focus-indicator-width: var(--luzmo-indicator-width);--search-focus-indicator-gap: -1px;--search-focus-indicator-color: var(--luzmo-primary);--search-font-family: var(--luzmo-font-family);--search-font-weight: var(--luzmo-font-weight);--search-font-style: var(--luzmo-font-style);--search-line-height: var(--luzmo-line-height);--search-color-default: var(--luzmo-font-color);--search-color-hover: var(--luzmo-font-color-hover);--search-color-focus: var(--luzmo-font-color-focus);--search-color-focus-hover: var(--luzmo-font-focus);--search-color-key-focus: var(--luzmo-font-color-focus);--search-border-width: var(--luzmo-border-width);--search-background-color: var(--luzmo-background-color);--search-color-disabled: var(--luzmo-disabled-color);--search-background-color-disabled: var(--luzmo-background-color-disabled);--search-border-color-disabled: var(--luzmo-border-color-disabled)}:host #text-field{--search-border-radius: var(--luzmo-border-radius);--search-edge-to-visual: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--search-block-size: var(--luzmo-component-height);--search-icon-size: var(--luzmo-font-size-l);--search-text-to-icon: calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=s]) #text-field{--search-border-radius: var(--luzmo-border-radius);--search-edge-to-visual: var(--luzmo-spacing-3);--search-block-size: var(--luzmo-component-height-s);--search-icon-size: var(--luzmo-font-size);--search-text-to-icon: var(--luzmo-spacing-3)}:host([size=l]) #text-field{--search-border-radius: var(--luzmo-border-radius);--search-edge-to-visual: var(--luzmo-spacing-4);--search-block-size: var(--luzmo-component-height-l);--search-icon-size: var(--luzmo-font-size-xl);--search-text-to-icon: calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=xl]) #text-field{--search-border-radius: var(--luzmo-border-radius);--search-edge-to-visual: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--search-block-size: var(--luzmo-component-height-xl);--search-icon-size: var(--luzmo-font-size-xxl);--search-text-to-icon: var(--luzmo-spacing-4)}:host([quiet]) #text-field{--search-background-color: transparent;--search-background-color-disabled: transparent;--search-border-color-disabled: var(--luzmo-border-color-disabled);--search-border-radius: 0;--search-edge-to-visual: 0px}:host{--luzmo-text-field-spacing-inline: var(--alias-infield-button-full-height-m)}input::-webkit-search-cancel-button{display:none}@media (forced-colors: active){luzmo-clear-button{--clear-button-fill-background-color: transparent;--clear-button-fill-background-color-disabled: transparent;--clear-button-fill-background-color-down: transparent;--clear-button-fill-background-color-hover: transparent;--clear-button-fill-background-color-key-focus: transparent}}";var m=Object.defineProperty,t=(o,r,c,f)=>{for(var s=void 0,i=o.length-1,h;i>=0;i--)(h=o[i])&&(s=h(r,c,s)||s);return s&&m(r,c,s),s};const b=o=>o.stopPropagation(),z=o=>o==="s"?n.luzmoSearch12:o==="l"?n.luzmoSearch:n.luzmoSearch14;class e extends d.LuzmoTextField{constructor(){super(...arguments),this.action="",this.label="Search",this.placeholder="Search"}static get styles(){return[...super.styles,l.unsafeCSS(v)]}handleSubmit(r){this.dispatchEvent(new Event("submit",{cancelable:!0,bubbles:!0}))||r.preventDefault()}handleKeydown(r){const{code:c}=r;c==="Escape"&&this.holdValueOnEscape||!this.value||c!=="Escape"||this.reset()}async reset(){this.value="",await this.updateComplete,this.focusElement.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.focusElement.dispatchEvent(new InputEvent("change",{bubbles:!0}))}renderField(){return l.html`
       <form
         action=${this.action}
         id="form"