@luzmo/lucero 1.0.1-alpha.45 → 1.0.1-alpha.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luzmo/lucero",
-  "version": "1.0.1-alpha.45",
+  "version": "1.0.1-alpha.47",
   "homepage": "https://luzmo.com",
   "description": "Lucero - The design system for Luzmo",
   "type": "module",

package/components/text-field-CclDsK1X.cjs

@@ -1,81 +0,0 @@
-/*! * Lucero - The design system for Luzmo.
- * 
- * Copyright © 2025 Luzmo
- * All rights reserved.
- * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
- * This license allows users with a current active Luzmo account to use Lucero.
- * This license terminates automatically if a user no longer has an active Luzmo account.
- * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
- * 
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- * */
-"use strict";const n=require("lit"),i=require("lit/decorators.js"),s=require("lit/directives/if-defined.js"),y=require("lit/directives/live.js"),h=require("@luzmo/icons"),v=require("./focusable-agUxU61W.cjs"),f=require("./sized-mixin-DcvJLFeo.cjs"),m=require("./manage-help-text-Bat9yGvF.cjs"),g=require("./text-field.module-eAEqjvZu.cjs");var $=Object.defineProperty,x=Object.getOwnPropertyDescriptor,r=(p,e,l,a)=>{for(var o=a>1?void 0:a?x(e,l):e,u=p.length-1,d;u>=0;u--)(d=p[u])&&(o=(a?d(e,l,o):d(o))||o);return a&&o&&$(e,l,o),o};const b=["text","url","tel","email","password"];class t extends m.ManageHelpText(f.SizedMixin(v.Focusable,{noDefaultSize:!0})){constructor(){super(...arguments),this.allowedKeys="",this.focused=!1,this.invalid=!1,this.label="",this.placeholder="",this._type="text",this.grows=!1,this.maxlength=-1,this.minlength=-1,this.multiline=!1,this.readonly=!1,this.rows=-1,this.valid=!1,this._value="",this.quiet=!1,this.required=!1}static get styles(){return[n.unsafeCSS(g.textFieldStyles)]}set type(e){const l=this._type;this._type=e,this.requestUpdate("type",l)}get type(){return b.find(e=>e===this._type)??"text"}set value(e){if(e===this.value)return;const l=this._value;this._value=e,this.requestUpdate("value",l)}get value(){return this._value}get focusElement(){return this.inputElement}setSelectionRange(e,l,a="none"){this.inputElement.setSelectionRange(e,l,a)}select(){this.inputElement.select()}handleInput(e){if(this.allowedKeys&&this.inputElement.value&&!new RegExp(`^[${this.allowedKeys}]*$`,"u").test(this.inputElement.value)){const o=this.inputElement.selectionStart-1;this.inputElement.value=this.value.toString(),this.inputElement.setSelectionRange(o,o);return}this.value=this.inputElement.value}handleChange(){this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}onFocus(){this.focused=!this.readonly&&!0}onBlur(e){this.focused=!this.readonly&&!1}handleInputElementPointerdown(){}renderStateIcons(){return this.invalid?n.html`
-        <div id="invalid" class="icon">${h.luzmoIcon(h.luzmoAlert)}</div>
-      `:this.valid?n.html`
-        <div id="valid" class="icon">${h.luzmoIcon(h.luzmoCheck)}</div>
-      `:n.nothing}get displayValue(){return this.value.toString()}get renderMultiline(){return n.html`
-      ${this.multiline&&this.grows&&this.rows===-1?n.html`
-          <div id="sizer" class="input" aria-hidden="true">${this.value}&#8203;
-          </div>
-        `:n.nothing}
-      <!-- @ts-ignore -->
-      <textarea
-        name=${s.ifDefined(this.name||void 0)}
-        aria-describedby=${this.helpTextId}
-        aria-label=${this.label||this.appliedLabel||this.placeholder}
-        aria-invalid=${s.ifDefined(this.invalid||void 0)}
-        class="input"
-        maxlength=${s.ifDefined(this.maxlength>-1?this.maxlength:void 0)}
-        minlength=${s.ifDefined(this.minlength>-1?this.minlength:void 0)}
-        title=${this.invalid?"":n.nothing}
-        pattern=${s.ifDefined(this.pattern)}
-        placeholder=${this.placeholder}
-        .value=${this.displayValue}
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-        @focus=${this.onFocus}
-        @blur=${this.onBlur}
-        ?disabled=${this.disabled}
-        ?required=${this.required}
-        ?readonly=${this.readonly}
-        rows=${s.ifDefined(this.rows>-1?this.rows:void 0)}
-        autocomplete=${s.ifDefined(this.autocomplete)}
-      ></textarea>
-    `}get renderInput(){return n.html`
-      <!-- @ts-ignore -->
-      <input
-        name=${s.ifDefined(this.name||void 0)}
-        type=${this.type}
-        aria-describedby=${this.helpTextId}
-        aria-label=${this.label||this.appliedLabel||this.placeholder}
-        aria-invalid=${s.ifDefined(this.invalid||void 0)}
-        class="input"
-        title=${this.invalid?"":n.nothing}
-        maxlength=${s.ifDefined(this.maxlength>-1?this.maxlength:void 0)}
-        minlength=${s.ifDefined(this.minlength>-1?this.minlength:void 0)}
-        pattern=${s.ifDefined(this.pattern)}
-        placeholder=${this.placeholder}
-        .value=${y.live(this.displayValue)}
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-        @pointerdown=${this.handleInputElementPointerdown}
-        @focus=${this.onFocus}
-        @blur=${this.onBlur}
-        ?disabled=${this.disabled}
-        ?required=${this.required}
-        ?readonly=${this.readonly}
-        autocomplete=${s.ifDefined(this.autocomplete)}
-      />
-    `}renderField(){return n.html`
-      ${this.renderStateIcons()}
-      ${this.multiline?this.renderMultiline:this.renderInput}
-    `}render(){return n.html`
-      <div id="text-field">${this.renderField()}</div>
-      ${this.renderHelpText(this.invalid)}
-    `}update(e){(e.has("value")||e.has("required")&&this.required)&&this.updateComplete.then(()=>{this.checkValidity()}),super.update(e)}checkValidity(){let e=this.inputElement.checkValidity();return(this.required||this.value&&this.pattern)&&((this.disabled||this.multiline)&&this.pattern&&(e=new RegExp(`^${this.pattern}$`,"u").test(this.value.toString())),this.minlength!==void 0&&(e=e&&this.value.toString().length>=this.minlength),this.valid=e,this.invalid=!e),e}}r([i.state()],t.prototype,"appliedLabel",2);r([i.property({attribute:"allowed-keys"})],t.prototype,"allowedKeys",2);r([i.property({type:Boolean,reflect:!0})],t.prototype,"focused",2);r([i.query(".input:not(#sizer)")],t.prototype,"inputElement",2);r([i.property({type:Boolean,reflect:!0})],t.prototype,"invalid",2);r([i.property()],t.prototype,"label",2);r([i.property({type:String,reflect:!0})],t.prototype,"name",2);r([i.property()],t.prototype,"placeholder",2);r([i.state()],t.prototype,"type",1);r([i.property({attribute:"type",reflect:!0})],t.prototype,"_type",2);r([i.property()],t.prototype,"pattern",2);r([i.property({type:Boolean,reflect:!0})],t.prototype,"grows",2);r([i.property({type:Number})],t.prototype,"maxlength",2);r([i.property({type:Number})],t.prototype,"minlength",2);r([i.property({type:Boolean,reflect:!0})],t.prototype,"multiline",2);r([i.property({type:Boolean,reflect:!0})],t.prototype,"readonly",2);r([i.property({type:Number})],t.prototype,"rows",2);r([i.property({type:Boolean,reflect:!0})],t.prototype,"valid",2);r([i.property({type:String})],t.prototype,"value",1);r([i.property({type:Boolean,reflect:!0})],t.prototype,"quiet",2);r([i.property({type:Boolean,reflect:!0})],t.prototype,"required",2);r([i.property({type:String,reflect:!0})],t.prototype,"autocomplete",2);class c extends t{constructor(){super(...arguments),this._value=""}set value(e){if(e===this.value)return;const l=this._value;this._value=e,this.requestUpdate("value",l)}get value(){return this._value}}r([i.property({type:String})],c.prototype,"value",1);exports.LuzmoTextField=c;exports.LuzmoTextFieldBase=t;

package/components/text-field-Ckbe58fH.js

@@ -1,288 +0,0 @@
-/*! * Lucero - The design system for Luzmo.
- * 
- * Copyright © 2025 Luzmo
- * All rights reserved.
- * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
- * This license allows users with a current active Luzmo account to use Lucero.
- * This license terminates automatically if a user no longer has an active Luzmo account.
- * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
- * 
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- * */
-import { unsafeCSS as v, html as o, nothing as p } from "lit";
-import { state as m, property as l, query as y } from "lit/decorators.js";
-import { ifDefined as r } from "lit/directives/if-defined.js";
-import { live as f } from "lit/directives/live.js";
-import { luzmoIcon as c, luzmoAlert as g, luzmoCheck as $ } from "@luzmo/icons";
-import { F as x } from "./focusable-BM1nd-dI.js";
-import { S as b } from "./sized-mixin-cJbo3PKR.js";
-import { M as S } from "./manage-help-text-C9sCHK3R.js";
-import { t as w } from "./text-field.module-Bp4Mwuvj.js";
-var _ = Object.defineProperty, E = Object.getOwnPropertyDescriptor, t = (h, e, s, a) => {
-  for (var n = a > 1 ? void 0 : a ? E(e, s) : e, u = h.length - 1, d; u >= 0; u--)
-    (d = h[u]) && (n = (a ? d(e, s, n) : d(n)) || n);
-  return a && n && _(e, s, n), n;
-};
-const q = ["text", "url", "tel", "email", "password"];
-class i extends S(
-  b(x, {
-    noDefaultSize: !0
-  })
-) {
-  constructor() {
-    super(...arguments), this.allowedKeys = "", this.focused = !1, this.invalid = !1, this.label = "", this.placeholder = "", this._type = "text", this.grows = !1, this.maxlength = -1, this.minlength = -1, this.multiline = !1, this.readonly = !1, this.rows = -1, this.valid = !1, this._value = "", this.quiet = !1, this.required = !1;
-  }
-  static get styles() {
-    return [v(w)];
-  }
-  set type(e) {
-    const s = this._type;
-    this._type = e, this.requestUpdate("type", s);
-  }
-  get type() {
-    return q.find((e) => e === this._type) ?? "text";
-  }
-  set value(e) {
-    if (e === this.value)
-      return;
-    const s = this._value;
-    this._value = e, this.requestUpdate("value", s);
-  }
-  get value() {
-    return this._value;
-  }
-  get focusElement() {
-    return this.inputElement;
-  }
-  /**
-   * Sets the start and end positions of the current selection.
-   *
-   * @param selectionStart The 0-based index of the first selected character. An index greater than the length of the
-   * element's value is treated as pointing to the end of the value.
-   * @param selectionEnd The 0-based index of the character after the last selected character. An index greater than
-   * the length of the element's value is treated as pointing to the end of the value.
-   * @param [selectionDirection="none"] A string indicating the direction in which the selection is considered to
-   * have been performed.
-   */
-  setSelectionRange(e, s, a = "none") {
-    this.inputElement.setSelectionRange(
-      e,
-      s,
-      a
-    );
-  }
-  /**
-   * Selects all the text.
-   */
-  select() {
-    this.inputElement.select();
-  }
-  handleInput(e) {
-    if (this.allowedKeys && this.inputElement.value && !new RegExp(`^[${this.allowedKeys}]*$`, "u").test(this.inputElement.value)) {
-      const n = this.inputElement.selectionStart - 1;
-      this.inputElement.value = this.value.toString(), this.inputElement.setSelectionRange(n, n);
-      return;
-    }
-    this.value = this.inputElement.value;
-  }
-  handleChange() {
-    this.dispatchEvent(
-      new Event("change", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  onFocus() {
-    this.focused = !this.readonly && !0;
-  }
-  onBlur(e) {
-    this.focused = !this.readonly && !1;
-  }
-  handleInputElementPointerdown() {
-  }
-  renderStateIcons() {
-    return this.invalid ? o`
-        <div id="invalid" class="icon">${c(g)}</div>
-      ` : this.valid ? o`
-        <div id="valid" class="icon">${c($)}</div>
-      ` : p;
-  }
-  get displayValue() {
-    return this.value.toString();
-  }
-  // prettier-ignore
-  get renderMultiline() {
-    return o`
-      ${this.multiline && this.grows && this.rows === -1 ? o`
-          <div id="sizer" class="input" aria-hidden="true">${this.value}&#8203;
-          </div>
-        ` : p}
-      <!-- @ts-ignore -->
-      <textarea
-        name=${r(this.name || void 0)}
-        aria-describedby=${this.helpTextId}
-        aria-label=${this.label || this.appliedLabel || this.placeholder}
-        aria-invalid=${r(this.invalid || void 0)}
-        class="input"
-        maxlength=${r(this.maxlength > -1 ? this.maxlength : void 0)}
-        minlength=${r(this.minlength > -1 ? this.minlength : void 0)}
-        title=${this.invalid ? "" : p}
-        pattern=${r(this.pattern)}
-        placeholder=${this.placeholder}
-        .value=${this.displayValue}
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-        @focus=${this.onFocus}
-        @blur=${this.onBlur}
-        ?disabled=${this.disabled}
-        ?required=${this.required}
-        ?readonly=${this.readonly}
-        rows=${r(this.rows > -1 ? this.rows : void 0)}
-        autocomplete=${r(this.autocomplete)}
-      ></textarea>
-    `;
-  }
-  get renderInput() {
-    return o`
-      <!-- @ts-ignore -->
-      <input
-        name=${r(this.name || void 0)}
-        type=${this.type}
-        aria-describedby=${this.helpTextId}
-        aria-label=${this.label || this.appliedLabel || this.placeholder}
-        aria-invalid=${r(this.invalid || void 0)}
-        class="input"
-        title=${this.invalid ? "" : p}
-        maxlength=${r(this.maxlength > -1 ? this.maxlength : void 0)}
-        minlength=${r(this.minlength > -1 ? this.minlength : void 0)}
-        pattern=${r(this.pattern)}
-        placeholder=${this.placeholder}
-        .value=${f(this.displayValue)}
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-        @pointerdown=${this.handleInputElementPointerdown}
-        @focus=${this.onFocus}
-        @blur=${this.onBlur}
-        ?disabled=${this.disabled}
-        ?required=${this.required}
-        ?readonly=${this.readonly}
-        autocomplete=${r(this.autocomplete)}
-      />
-    `;
-  }
-  renderField() {
-    return o`
-      ${this.renderStateIcons()}
-      ${this.multiline ? this.renderMultiline : this.renderInput}
-    `;
-  }
-  render() {
-    return o`
-      <div id="text-field">${this.renderField()}</div>
-      ${this.renderHelpText(this.invalid)}
-    `;
-  }
-  update(e) {
-    (e.has("value") || e.has("required") && this.required) && this.updateComplete.then(() => {
-      this.checkValidity();
-    }), super.update(e);
-  }
-  checkValidity() {
-    let e = this.inputElement.checkValidity();
-    return (this.required || this.value && this.pattern) && ((this.disabled || this.multiline) && this.pattern && (e = new RegExp(`^${this.pattern}$`, "u").test(this.value.toString())), this.minlength !== void 0 && (e = e && this.value.toString().length >= this.minlength), this.valid = e, this.invalid = !e), e;
-  }
-}
-t([
-  m()
-], i.prototype, "appliedLabel", 2);
-t([
-  l({ attribute: "allowed-keys" })
-], i.prototype, "allowedKeys", 2);
-t([
-  l({ type: Boolean, reflect: !0 })
-], i.prototype, "focused", 2);
-t([
-  y(".input:not(#sizer)")
-], i.prototype, "inputElement", 2);
-t([
-  l({ type: Boolean, reflect: !0 })
-], i.prototype, "invalid", 2);
-t([
-  l()
-], i.prototype, "label", 2);
-t([
-  l({ type: String, reflect: !0 })
-], i.prototype, "name", 2);
-t([
-  l()
-], i.prototype, "placeholder", 2);
-t([
-  m()
-], i.prototype, "type", 1);
-t([
-  l({ attribute: "type", reflect: !0 })
-], i.prototype, "_type", 2);
-t([
-  l()
-], i.prototype, "pattern", 2);
-t([
-  l({ type: Boolean, reflect: !0 })
-], i.prototype, "grows", 2);
-t([
-  l({ type: Number })
-], i.prototype, "maxlength", 2);
-t([
-  l({ type: Number })
-], i.prototype, "minlength", 2);
-t([
-  l({ type: Boolean, reflect: !0 })
-], i.prototype, "multiline", 2);
-t([
-  l({ type: Boolean, reflect: !0 })
-], i.prototype, "readonly", 2);
-t([
-  l({ type: Number })
-], i.prototype, "rows", 2);
-t([
-  l({ type: Boolean, reflect: !0 })
-], i.prototype, "valid", 2);
-t([
-  l({ type: String })
-], i.prototype, "value", 1);
-t([
-  l({ type: Boolean, reflect: !0 })
-], i.prototype, "quiet", 2);
-t([
-  l({ type: Boolean, reflect: !0 })
-], i.prototype, "required", 2);
-t([
-  l({ type: String, reflect: !0 })
-], i.prototype, "autocomplete", 2);
-class B extends i {
-  constructor() {
-    super(...arguments), this._value = "";
-  }
-  set value(e) {
-    if (e === this.value)
-      return;
-    const s = this._value;
-    this._value = e, this.requestUpdate("value", s);
-  }
-  get value() {
-    return this._value;
-  }
-}
-t([
-  l({ type: String })
-], B.prototype, "value", 1);
-export {
-  B as L,
-  i as a
-};