@logosphere-ui/core 0.0.0-alpha.28 → 0.0.0-alpha.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logosphere-ui/core",
-  "version": "0.0.0-alpha.28",
+  "version": "0.0.0-alpha.30",
   "description": "A modern, framework-agnostic UI component library built with Lit and Web Components",
   "type": "module",
   "main": "./dist/index.js",

package/dist/formfield-DguRklXe.cjs

@@ -1,33 +0,0 @@
-"use strict";const l=require("lit"),o=require("lit/decorators.js"),f=":host{display:block}.formfield{position:relative;font-family:var(--font-family-base)}.formfield__label{display:block;font-size:12px;line-height:1.125rem;letter-spacing:-.12px;font-weight:var(--font-weight-medium);color:var(--color-tertiary);margin-bottom:var(--spacing-1)}.formfield__required{color:var(--color-danger);margin-left:var(--spacing-1)}.formfield__container{position:relative;display:flex;align-items:center;box-sizing:border-box;border-top-left-radius:var(--formfield-border-top-left-radius, var(--formfield-border-radius, var(--radius-base)));border-top-right-radius:var(--formfield-border-top-right-radius, var(--formfield-border-radius, var(--radius-base)));border-bottom-right-radius:var(--formfield-border-bottom-right-radius, var(--formfield-border-radius, var(--radius-base)));border-bottom-left-radius:var(--formfield-border-bottom-left-radius, var(--formfield-border-radius, var(--radius-base)));border-top:var(--formfield-border-top, var(--formfield-border-top-width, 1px) solid var(--formfield-border-color, var(--color-border)));border-right:var(--formfield-border-right, var(--formfield-border-right-width, 1px) solid var(--formfield-border-color, var(--color-border)));border-bottom:var(--formfield-border-bottom, var(--formfield-border-bottom-width, 1px) solid var(--formfield-border-color, var(--color-border)));border-left:var(--formfield-border-left, var(--formfield-border-left-width, 1px) solid var(--formfield-border-color, var(--color-border)));padding:0 var(--spacing-2) 0 var(--spacing-3);background-color:var(--color-body-bg);cursor:text;transition:border-color var(--transition-speed-base) var(--transition-timing),background-color var(--transition-speed-base) var(--transition-timing)}.formfield__container--cursor-text{cursor:text}.formfield__container--cursor-pointer{cursor:pointer}.formfield__container--cursor-default{cursor:default}.formfield__container--default{min-height:32px}.formfield__container--large{min-height:40px}.formfield__container--multiline{align-items:flex-start;min-height:64px;padding-top:var(--spacing-2);padding-bottom:var(--spacing-2)}.formfield__container--hovered:not(.formfield__container--focused):not(.formfield__container--error):not(.formfield__container--disabled){background-color:var(--color-light)}.formfield__container--focused{border-color:var(--color-body-text);background-color:var(--color-body-bg)}.formfield__container--error{border-color:var(--color-danger)}.formfield__container--disabled{background-color:var(--color-body-bg);opacity:.4;cursor:not-allowed;pointer-events:none}.formfield__container--subtle:not(.formfield__container--focused):not(.formfield__container--error){border-color:transparent;background-color:var(--color-light)}.formfield__input-area{flex:1;min-width:0;display:flex;align-items:center}.formfield__container--multiline .formfield__input-area{align-items:flex-start;align-self:stretch}.formfield__prefix,.formfield__clear,.formfield__suffix{display:flex;align-items:center;flex-shrink:0;align-self:stretch}.formfield__container--multiline .formfield__clear,.formfield__container--multiline .formfield__suffix{align-items:flex-start}.formfield__prefix{margin-right:var(--spacing-2)}.formfield__clear,.formfield__suffix{margin-left:var(--spacing-2)}.formfield__container--has-prefix .formfield__prefix{border-right:1px solid var(--color-border);padding-right:var(--spacing-2)}.formfield__container--has-suffix .formfield__suffix{border-left:1px solid var(--color-border);padding-left:var(--spacing-2)}.formfield__prefix:empty,.formfield__clear:empty,.formfield__suffix:empty{display:none}.formfield__helper{font-size:11px;line-height:1rem;letter-spacing:-.11px;font-weight:var(--font-weight-regular);color:var(--color-tertiary);margin-top:var(--spacing-1)}.formfield__error{font-size:11px;line-height:1rem;letter-spacing:-.11px;font-weight:var(--font-weight-regular);color:var(--color-danger);margin-top:var(--spacing-1)}::slotted(input),::slotted(textarea){width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text)}::slotted(input:disabled),::slotted(textarea:disabled){cursor:not-allowed}";var c=Object.defineProperty,m=Object.getOwnPropertyDescriptor,t=(d,e,r,a)=>{for(var i=a>1?void 0:a?m(e,r):e,s=d.length-1,n;s>=0;s--)(n=d[s])&&(i=(a?n(e,r,i):n(i))||i);return a&&i&&c(e,r,i),i};exports.FormField=class extends l.LitElement{constructor(){super(...arguments),this.label="",this.helper="",this.error="",this.placeholder="",this.size="default",this.variant="default",this.cursor="text",this.required=!1,this.disabled=!1,this.readonly=!1,this.multiline=!1,this.forceFocused=!1,this._focused=!1,this._hovered=!1,this._hasPrefix=!1,this._hasSuffix=!1,this.handleSlotFocus=e=>{const r=e.target;["INPUT","TEXTAREA","SELECT"].includes(r.tagName)&&(this._focused=!0,this.dispatchEvent(new CustomEvent("field-focus",{bubbles:!0,composed:!0,detail:{originalEvent:e}})))},this.handleSlotBlur=e=>{const r=e.target;["INPUT","TEXTAREA","SELECT"].includes(r.tagName)&&(this._focused=!1,this.dispatchEvent(new CustomEvent("field-blur",{bubbles:!0,composed:!0,detail:{originalEvent:e}})))},this.handleMouseEnter=()=>{this._hovered=!0},this.handleMouseLeave=()=>{this._hovered=!1},this.handleContainerClick=e=>{const r=e.target;if(["INPUT","TEXTAREA","SELECT","BUTTON"].includes(r.tagName))return;this.shadowRoot?.querySelector("slot:not([name])")?.assignedElements({flatten:!0}).find(s=>["INPUT","TEXTAREA","SELECT"].includes(s.tagName))?.focus()},this.handlePrefixSlotChange=e=>{const r=e.target;this._hasPrefix=r.assignedElements({flatten:!0}).length>0},this.handleSuffixSlotChange=e=>{const r=e.target;this._hasSuffix=r.assignedElements({flatten:!0}).length>0}}connectedCallback(){super.connectedCallback(),this.addEventListener("focus",this.handleSlotFocus,!0),this.addEventListener("blur",this.handleSlotBlur,!0)}firstUpdated(){const e=this.shadowRoot?.querySelector('slot[name="prefix"]'),r=this.shadowRoot?.querySelector('slot[name="suffix"]');e&&(this._hasPrefix=e.assignedElements({flatten:!0}).length>0),r&&(this._hasSuffix=r.assignedElements({flatten:!0}).length>0)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",this.handleSlotFocus,!0),this.removeEventListener("blur",this.handleSlotBlur,!0)}render(){const e=!!this.error,r=!e&&!!this.helper,a=["formfield__container",`formfield__container--${this.size}`,`formfield__container--cursor-${this.cursor}`,this._hasPrefix?"formfield__container--has-prefix":"",this._hasSuffix?"formfield__container--has-suffix":"",e?"formfield__container--error":"",this._focused||this.forceFocused?"formfield__container--focused":"",this._hovered?"formfield__container--hovered":"",this.disabled?"formfield__container--disabled":"",this.variant==="subtle"?"formfield__container--subtle":"",this.multiline?"formfield__container--multiline":""].filter(Boolean).join(" ");return l.html`
-      <div class="formfield">
-        ${this.label?l.html`
-          <label class="formfield__label">
-            ${this.label}
-            ${this.required?l.html`<span class="formfield__required">*</span>`:""}
-          </label>
-        `:""}
-
-        <div
-          class="${a}"
-          @mouseenter=${this.handleMouseEnter}
-          @mouseleave=${this.handleMouseLeave}
-          @click=${this.handleContainerClick}
-        >
-          <div class="formfield__prefix">
-            <slot name="prefix" @slotchange=${this.handlePrefixSlotChange}></slot>
-          </div>
-          <div class="formfield__input-area">
-            <slot></slot>
-          </div>
-          <div class="formfield__clear">
-            <slot name="clear"></slot>
-          </div>
-          <div class="formfield__suffix">
-            <slot name="suffix" @slotchange=${this.handleSuffixSlotChange}></slot>
-          </div>
-        </div>
-
-        ${r?l.html`<div class="formfield__helper">${this.helper}</div>`:""}
-        ${e?l.html`<div class="formfield__error">${this.error}</div>`:""}
-      </div>
-    `}};exports.FormField.styles=[l.css`${l.unsafeCSS(f)}`];t([o.property({type:String})],exports.FormField.prototype,"label",2);t([o.property({type:String})],exports.FormField.prototype,"helper",2);t([o.property({type:String})],exports.FormField.prototype,"error",2);t([o.property({type:String})],exports.FormField.prototype,"placeholder",2);t([o.property({type:String})],exports.FormField.prototype,"size",2);t([o.property({type:String})],exports.FormField.prototype,"variant",2);t([o.property({type:String})],exports.FormField.prototype,"cursor",2);t([o.property({type:Boolean})],exports.FormField.prototype,"required",2);t([o.property({type:Boolean})],exports.FormField.prototype,"disabled",2);t([o.property({type:Boolean})],exports.FormField.prototype,"readonly",2);t([o.property({type:Boolean})],exports.FormField.prototype,"multiline",2);t([o.property({type:Boolean})],exports.FormField.prototype,"forceFocused",2);t([o.state()],exports.FormField.prototype,"_focused",2);t([o.state()],exports.FormField.prototype,"_hovered",2);t([o.state()],exports.FormField.prototype,"_hasPrefix",2);t([o.state()],exports.FormField.prototype,"_hasSuffix",2);exports.FormField=t([o.customElement("logosphere-formfield")],exports.FormField);