@logosphere-ui/core 0.0.0-alpha.5 → 0.0.0-alpha.7

package/dist/tab-DcjAlXzU.cjs

@@ -1,40 +0,0 @@
-"use strict";const s=require("lit"),n=require("lit/decorators.js"),c=".tab{width:100%;font-family:var(--font-family-base)}.tab__list{display:flex;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid var(--color-border);scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.tab__list::-webkit-scrollbar{display:none}.tab__button{display:inline-flex;flex-direction:row;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-4);min-width:120px;position:relative;cursor:pointer;border:none;border-bottom:2px solid transparent;background:transparent;font-family:var(--font-family-base);white-space:nowrap;transition:background-color var(--transition-speed-base) var(--transition-timing),border-color var(--transition-speed-base) var(--transition-timing)}.tab__button:hover:not(.tab__button--disabled):not(.tab__button--active){background-color:var(--color-tertiary-bg)}.tab__button--active{border-bottom-color:var(--color-primary)}.tab__button--disabled{cursor:not-allowed;opacity:.4;pointer-events:none}.tab__icon{font-size:var(--font-size-xl);flex-shrink:0;color:inherit;line-height:1}.tab__content{display:flex;flex-direction:column;align-items:flex-start}.tab__label{font-weight:var(--font-weight-medium);font-size:var(--font-size-sm);color:var(--color-body-text)}.tab__label--inactive{color:var(--color-tertiary)}.tab__description{font-size:var(--font-size-xs);text-align:left;color:var(--color-tertiary)}.tab__description--active{color:var(--color-secondary)}.tab__panel{padding:var(--spacing-4);outline:none}.tab__panel--hidden{display:none}";var h=Object.defineProperty,p=Object.getOwnPropertyDescriptor,r=(d,e,a,t)=>{for(var i=t>1?void 0:t?p(e,a):e,o=d.length-1,l;o>=0;o--)(l=d[o])&&(i=(t?l(e,a,i):l(i))||i);return t&&i&&h(e,a,i),i};exports.LogosphereTab=class extends s.LitElement{constructor(){super(...arguments),this.tabs=[],this.activeTab="",this.lazy=!0,this.variant="default",this._focusedIndex=0,this._renderedTabs=new Set}connectedCallback(){super.connectedCallback(),!this.activeTab&&this.tabs.length>0&&(this.activeTab=this.tabs[0].id)}willUpdate(e){if(super.willUpdate(e),e.has("activeTab")&&this.activeTab){this._renderedTabs.add(this.activeTab);const a=this.tabs.findIndex(t=>t.id===this.activeTab);a!==-1&&(this._focusedIndex=a)}e.has("tabs")&&this.tabs.length>0&&(this.tabs.some(t=>t.id===this.activeTab)||(this.activeTab=this.tabs[0].id),this._focusedIndex=this.tabs.findIndex(t=>t.id===this.activeTab))}handleTabClick(e,a){if(a)return;const t=this.activeTab;this.activeTab=e,this._focusedIndex=this.tabs.findIndex(i=>i.id===e),this.dispatchEvent(new CustomEvent("tab-change",{detail:{oldTab:t,newTab:e},bubbles:!0,composed:!0}))}handleKeyDown(e){const{tabs:a}=this;if(a.filter(o=>!o.disabled).length===0)return;let t=this._focusedIndex;const i=this._focusedIndex;switch(e.key){case"ArrowLeft":e.preventDefault();do t=t>0?t-1:a.length-1;while(a[t]?.disabled&&t!==i);break;case"ArrowRight":e.preventDefault();do t=t<a.length-1?t+1:0;while(a[t]?.disabled&&t!==i);break;case"Home":for(e.preventDefault(),t=0;a[t]?.disabled&&t<a.length-1;)t++;break;case"End":for(e.preventDefault(),t=a.length-1;a[t]?.disabled&&t>0;)t--;break;default:return}if(t!==this._focusedIndex&&!a[t]?.disabled){const o=this.activeTab;this._focusedIndex=t,this.activeTab=a[t].id,this.updateComplete.then(()=>{this.shadowRoot?.querySelector(`[role="tab"][data-tab-id="${a[t].id}"]`)?.focus()}),this.dispatchEvent(new CustomEvent("tab-change",{detail:{oldTab:o,newTab:a[t].id},bubbles:!0,composed:!0}))}}scrollTabIntoView(e){this.updateComplete.then(()=>{const a=this.shadowRoot?.querySelector(`[role="tab"][data-tab-id="${e}"]`);if(a&&this.tablist){const t=this.tablist.getBoundingClientRect(),i=a.getBoundingClientRect();i.left<t.left?this.tablist.scrollLeft-=t.left-i.left+16:i.right>t.right&&(this.tablist.scrollLeft+=i.right-t.right+16)}})}renderTabButton(e,a){const t=this.activeTab===e.id,i=this._focusedIndex===a,o=["tab__button",t?"tab__button--active":"",e.disabled?"tab__button--disabled":""].filter(Boolean).join(" "),l=["tab__label",t?"":"tab__label--inactive"].filter(Boolean).join(" "),b=["tab__description",t?"tab__description--active":""].filter(Boolean).join(" ");return s.html`
-      <button
-        role="tab"
-        class=${o}
-        data-tab-id=${e.id}
-        aria-selected=${t?"true":"false"}
-        aria-controls="panel-${e.id}"
-        tabindex=${t||i?"0":"-1"}
-        ?disabled=${e.disabled}
-        @click=${()=>this.handleTabClick(e.id,e.disabled)}
-        @focus=${()=>this.scrollTabIntoView(e.id)}
-      >
-        ${e.icon?s.html`<i class="${e.icon} tab__icon"></i>`:s.nothing}
-        <div class="tab__content">
-          <span class=${l}>${e.label}</span>
-          ${e.description?s.html`<span class=${b}>${e.description}</span>`:s.nothing}
-        </div>
-      </button>
-    `}renderTabPanel(e){const a=this.activeTab===e.id;if(!(!this.lazy||this._renderedTabs.has(e.id)))return s.nothing;const i=["tab__panel",a?"":"tab__panel--hidden"].filter(Boolean).join(" ");return s.html`
-      <div
-        role="tabpanel"
-        id="panel-${e.id}"
-        aria-labelledby="tab-${e.id}"
-        class=${i}
-        tabindex="0"
-      >
-        <slot name=${`panel-${e.id}`}>
-          ${typeof e.content=="string"?s.html`${e.content}`:s.nothing}
-        </slot>
-      </div>
-    `}render(){return s.html`
-      <div class="tab">
-        <div role="tablist" aria-label="Tabs" class="tab__list" @keydown=${this.handleKeyDown}>
-          ${this.tabs.map((e,a)=>this.renderTabButton(e,a))}
-        </div>
-        <div class="tab__panels">${this.tabs.map(e=>this.renderTabPanel(e))}</div>
-      </div>
-    `}};exports.LogosphereTab.styles=[s.css`
-      ${s.unsafeCSS(c)}
-    `];r([n.property({type:Array})],exports.LogosphereTab.prototype,"tabs",2);r([n.property({type:String})],exports.LogosphereTab.prototype,"activeTab",2);r([n.property({type:Boolean})],exports.LogosphereTab.prototype,"lazy",2);r([n.property({type:String})],exports.LogosphereTab.prototype,"variant",2);r([n.state()],exports.LogosphereTab.prototype,"_focusedIndex",2);r([n.state()],exports.LogosphereTab.prototype,"_renderedTabs",2);r([n.query('[role="tablist"]')],exports.LogosphereTab.prototype,"tablist",2);exports.LogosphereTab=r([n.customElement("logosphere-tab")],exports.LogosphereTab);

package/dist/tab.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tab-DcjAlXzU.cjs");Object.defineProperty(exports,"LogosphereTab",{enumerable:!0,get:()=>e.LogosphereTab});

package/dist/tab.js

@@ -1,4 +0,0 @@
-import { L as r } from "./tab-BKdN4xAz.js";
-export {
-  r as LogosphereTab
-};

package/dist/text-area-BkHdLnZj.cjs

@@ -1,44 +0,0 @@
-"use strict";const i=require("lit"),t=require("lit/decorators.js"),p=require("lit/directives/live.js"),u=".textarea__field{width:100%;background:transparent;border:none;outline:none;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);box-sizing:border-box;line-height:1.5}.textarea__field::placeholder{color:var(--color-tertiary)}.textarea__field:disabled{cursor:not-allowed}.textarea__field--resize-none{resize:none}.textarea__field--resize-vertical{resize:vertical}.textarea__field--resize-horizontal{resize:horizontal}.textarea__field--resize-both{resize:both}.textarea__field--auto-resize{resize:none;overflow:hidden}.textarea__clear-btn{border:none;background:transparent;color:var(--color-gray-400);cursor:pointer;padding:0;display:inline-flex;align-items:flex-start;align-self:flex-start;margin-top:var(--spacing-1);outline:none;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.textarea__clear-btn:hover{color:var(--color-gray-600)}";var d=Object.defineProperty,y=Object.getOwnPropertyDescriptor,r=(l,e,a,o)=>{for(var s=o>1?void 0:o?y(e,a):e,n=l.length-1,h;n>=0;n--)(h=l[n])&&(s=(o?h(e,a,s):h(s))||s);return o&&s&&d(e,a,s),s};exports.TextArea=class extends i.LitElement{constructor(){super(...arguments),this.value="",this.placeholder="",this.name="",this.autocomplete="",this.rows=3,this.wrap="soft",this.resize="vertical",this.autoResize=!1,this.size="default",this.variant="default",this.showClear=!1,this.label="",this.helper="",this.error="",this.required=!1,this.disabled=!1,this.readonly=!1,this._internalError="",this.handleInput=e=>{const a=e.target;this.value=a.value,this.autoResize&&this.adjustHeight(),this._internalError&&(this._internalError="",this._textareaElement.setCustomValidity("")),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:this.value,originalEvent:e}}))},this.handleChange=e=>{const a=e.target;this.value=a.value,a.checkValidity()||(this._internalError=a.validationMessage),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value,originalEvent:e}}))},this.handleKeyDown=e=>{this.dispatchEvent(new CustomEvent("keydown",{bubbles:!0,composed:!0,detail:{key:e.key,originalEvent:e}}))},this.handleKeyUp=e=>{this.dispatchEvent(new CustomEvent("keyup",{bubbles:!0,composed:!0,detail:{key:e.key,originalEvent:e}}))},this.handleClear=()=>{this.value="",this._textareaElement&&(this._textareaElement.value="",this.autoResize&&this.adjustHeight()),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:"",originalEvent:null}}))}}get textareaElement(){return this._textareaElement}focus(){this._textareaElement?.focus()}blur(){this._textareaElement?.blur()}select(){this._textareaElement?.select()}setSelectionRange(e,a,o){this._textareaElement?.setSelectionRange(e,a,o)}checkValidity(){return this._textareaElement?.checkValidity()??!0}reportValidity(){return this._textareaElement?.reportValidity()??!0}setCustomValidity(e){this._textareaElement?.setCustomValidity(e),this._internalError=e,this.requestUpdate()}adjustHeight(){!this.autoResize||!this._textareaElement||(this._textareaElement.style.height="auto",this._textareaElement.style.height=`${this._textareaElement.scrollHeight}px`)}updated(e){super.updated(e),e.has("value")&&this.autoResize&&this.adjustHeight()}getResizeClass(){return this.autoResize?"textarea__field--auto-resize":{none:"textarea__field--resize-none",vertical:"textarea__field--resize-vertical",horizontal:"textarea__field--resize-horizontal",both:"textarea__field--resize-both"}[this.resize]}render(){const e=this.error||this._internalError,a=this.showClear&&this.value&&!this.disabled&&!this.readonly,o=`textarea__field ${this.getResizeClass()}`;return i.html`
-      <logosphere-formfield
-        .label=${this.label}
-        .helper=${this.helper}
-        .error=${e}
-        .required=${this.required}
-        .disabled=${this.disabled}
-        .readonly=${this.readonly}
-        .placeholder=${this.placeholder}
-        .size=${this.size}
-        .variant=${this.variant}
-      >
-        <textarea
-          class="${o}"
-          .value=${p.live(this.value)}
-          placeholder=${this.placeholder||i.nothing}
-          name=${this.name||i.nothing}
-          autocomplete=${this.autocomplete||i.nothing}
-          ?required=${this.required}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readonly}
-          minlength=${this.minlength??i.nothing}
-          maxlength=${this.maxlength??i.nothing}
-          rows=${this.rows}
-          cols=${this.cols??i.nothing}
-          wrap=${this.wrap}
-          @input=${this.handleInput}
-          @change=${this.handleChange}
-          @keydown=${this.handleKeyDown}
-          @keyup=${this.handleKeyUp}
-        ></textarea>
-        ${a?i.html`
-          <button
-            type="button"
-            slot="suffix"
-            class="textarea__clear-btn"
-            @click=${this.handleClear}
-            tabindex="-1"
-          >
-            <ui-icon name="uil-times" size="14"></ui-icon>
-          </button>
-        `:i.nothing}
-      </logosphere-formfield>
-    `}};exports.TextArea.styles=[i.css`${i.unsafeCSS(u)}`];r([t.query("textarea")],exports.TextArea.prototype,"_textareaElement",2);r([t.property({type:String})],exports.TextArea.prototype,"value",2);r([t.property({type:String})],exports.TextArea.prototype,"placeholder",2);r([t.property({type:String})],exports.TextArea.prototype,"name",2);r([t.property({type:String})],exports.TextArea.prototype,"autocomplete",2);r([t.property({type:Number})],exports.TextArea.prototype,"minlength",2);r([t.property({type:Number})],exports.TextArea.prototype,"maxlength",2);r([t.property({type:Number})],exports.TextArea.prototype,"rows",2);r([t.property({type:Number})],exports.TextArea.prototype,"cols",2);r([t.property({type:String})],exports.TextArea.prototype,"wrap",2);r([t.property({type:String})],exports.TextArea.prototype,"resize",2);r([t.property({type:Boolean})],exports.TextArea.prototype,"autoResize",2);r([t.property({type:String})],exports.TextArea.prototype,"size",2);r([t.property({type:String})],exports.TextArea.prototype,"variant",2);r([t.property({type:Boolean})],exports.TextArea.prototype,"showClear",2);r([t.property({type:String})],exports.TextArea.prototype,"label",2);r([t.property({type:String})],exports.TextArea.prototype,"helper",2);r([t.property({type:String})],exports.TextArea.prototype,"error",2);r([t.property({type:Boolean})],exports.TextArea.prototype,"required",2);r([t.property({type:Boolean})],exports.TextArea.prototype,"disabled",2);r([t.property({type:Boolean})],exports.TextArea.prototype,"readonly",2);r([t.state()],exports.TextArea.prototype,"_internalError",2);exports.TextArea=r([t.customElement("logosphere-textarea")],exports.TextArea);

package/dist/text-area-CC24lj8v.js

@@ -1,204 +0,0 @@
-import { LitElement as d, nothing as l, html as u, unsafeCSS as y, css as c } from "lit";
-import { query as m, property as a, state as _, customElement as v } from "lit/decorators.js";
-import { live as f } from "lit/directives/live.js";
-const b = ".textarea__field{width:100%;background:transparent;border:none;outline:none;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);box-sizing:border-box;line-height:1.5}.textarea__field::placeholder{color:var(--color-tertiary)}.textarea__field:disabled{cursor:not-allowed}.textarea__field--resize-none{resize:none}.textarea__field--resize-vertical{resize:vertical}.textarea__field--resize-horizontal{resize:horizontal}.textarea__field--resize-both{resize:both}.textarea__field--auto-resize{resize:none;overflow:hidden}.textarea__clear-btn{border:none;background:transparent;color:var(--color-gray-400);cursor:pointer;padding:0;display:inline-flex;align-items:flex-start;align-self:flex-start;margin-top:var(--spacing-1);outline:none;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.textarea__clear-btn:hover{color:var(--color-gray-600)}";
-var x = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (e, i, s, n) => {
-  for (var o = n > 1 ? void 0 : n ? g(i, s) : i, h = e.length - 1, p; h >= 0; h--)
-    (p = e[h]) && (o = (n ? p(i, s, o) : p(o)) || o);
-  return n && o && x(i, s, o), o;
-};
-let t = class extends d {
-  constructor() {
-    super(...arguments), this.value = "", this.placeholder = "", this.name = "", this.autocomplete = "", this.rows = 3, this.wrap = "soft", this.resize = "vertical", this.autoResize = !1, this.size = "default", this.variant = "default", this.showClear = !1, this.label = "", this.helper = "", this.error = "", this.required = !1, this.disabled = !1, this.readonly = !1, this._internalError = "", this.handleInput = (e) => {
-      const i = e.target;
-      this.value = i.value, this.autoResize && this.adjustHeight(), this._internalError && (this._internalError = "", this._textareaElement.setCustomValidity("")), this.dispatchEvent(new CustomEvent("input", {
-        bubbles: !0,
-        composed: !0,
-        detail: { value: this.value, originalEvent: e }
-      }));
-    }, this.handleChange = (e) => {
-      const i = e.target;
-      this.value = i.value, i.checkValidity() || (this._internalError = i.validationMessage), this.dispatchEvent(new CustomEvent("change", {
-        bubbles: !0,
-        composed: !0,
-        detail: { value: this.value, originalEvent: e }
-      }));
-    }, this.handleKeyDown = (e) => {
-      this.dispatchEvent(new CustomEvent("keydown", {
-        bubbles: !0,
-        composed: !0,
-        detail: { key: e.key, originalEvent: e }
-      }));
-    }, this.handleKeyUp = (e) => {
-      this.dispatchEvent(new CustomEvent("keyup", {
-        bubbles: !0,
-        composed: !0,
-        detail: { key: e.key, originalEvent: e }
-      }));
-    }, this.handleClear = () => {
-      this.value = "", this._textareaElement && (this._textareaElement.value = "", this.autoResize && this.adjustHeight()), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("input", {
-        bubbles: !0,
-        composed: !0,
-        detail: { value: "", originalEvent: null }
-      }));
-    };
-  }
-  get textareaElement() {
-    return this._textareaElement;
-  }
-  focus() {
-    this._textareaElement?.focus();
-  }
-  blur() {
-    this._textareaElement?.blur();
-  }
-  select() {
-    this._textareaElement?.select();
-  }
-  setSelectionRange(e, i, s) {
-    this._textareaElement?.setSelectionRange(e, i, s);
-  }
-  checkValidity() {
-    return this._textareaElement?.checkValidity() ?? !0;
-  }
-  reportValidity() {
-    return this._textareaElement?.reportValidity() ?? !0;
-  }
-  setCustomValidity(e) {
-    this._textareaElement?.setCustomValidity(e), this._internalError = e, this.requestUpdate();
-  }
-  adjustHeight() {
-    !this.autoResize || !this._textareaElement || (this._textareaElement.style.height = "auto", this._textareaElement.style.height = `${this._textareaElement.scrollHeight}px`);
-  }
-  updated(e) {
-    super.updated(e), e.has("value") && this.autoResize && this.adjustHeight();
-  }
-  getResizeClass() {
-    return this.autoResize ? "textarea__field--auto-resize" : {
-      none: "textarea__field--resize-none",
-      vertical: "textarea__field--resize-vertical",
-      horizontal: "textarea__field--resize-horizontal",
-      both: "textarea__field--resize-both"
-    }[this.resize];
-  }
-  render() {
-    const e = this.error || this._internalError, i = this.showClear && this.value && !this.disabled && !this.readonly, s = `textarea__field ${this.getResizeClass()}`;
-    return u`
-      <logosphere-formfield
-        .label=${this.label}
-        .helper=${this.helper}
-        .error=${e}
-        .required=${this.required}
-        .disabled=${this.disabled}
-        .readonly=${this.readonly}
-        .placeholder=${this.placeholder}
-        .size=${this.size}
-        .variant=${this.variant}
-      >
-        <textarea
-          class="${s}"
-          .value=${f(this.value)}
-          placeholder=${this.placeholder || l}
-          name=${this.name || l}
-          autocomplete=${this.autocomplete || l}
-          ?required=${this.required}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readonly}
-          minlength=${this.minlength ?? l}
-          maxlength=${this.maxlength ?? l}
-          rows=${this.rows}
-          cols=${this.cols ?? l}
-          wrap=${this.wrap}
-          @input=${this.handleInput}
-          @change=${this.handleChange}
-          @keydown=${this.handleKeyDown}
-          @keyup=${this.handleKeyUp}
-        ></textarea>
-        ${i ? u`
-          <button
-            type="button"
-            slot="suffix"
-            class="textarea__clear-btn"
-            @click=${this.handleClear}
-            tabindex="-1"
-          >
-            <ui-icon name="uil-times" size="14"></ui-icon>
-          </button>
-        ` : l}
-      </logosphere-formfield>
-    `;
-  }
-};
-t.styles = [c`${y(b)}`];
-r([
-  m("textarea")
-], t.prototype, "_textareaElement", 2);
-r([
-  a({ type: String })
-], t.prototype, "value", 2);
-r([
-  a({ type: String })
-], t.prototype, "placeholder", 2);
-r([
-  a({ type: String })
-], t.prototype, "name", 2);
-r([
-  a({ type: String })
-], t.prototype, "autocomplete", 2);
-r([
-  a({ type: Number })
-], t.prototype, "minlength", 2);
-r([
-  a({ type: Number })
-], t.prototype, "maxlength", 2);
-r([
-  a({ type: Number })
-], t.prototype, "rows", 2);
-r([
-  a({ type: Number })
-], t.prototype, "cols", 2);
-r([
-  a({ type: String })
-], t.prototype, "wrap", 2);
-r([
-  a({ type: String })
-], t.prototype, "resize", 2);
-r([
-  a({ type: Boolean })
-], t.prototype, "autoResize", 2);
-r([
-  a({ type: String })
-], t.prototype, "size", 2);
-r([
-  a({ type: String })
-], t.prototype, "variant", 2);
-r([
-  a({ type: Boolean })
-], t.prototype, "showClear", 2);
-r([
-  a({ type: String })
-], t.prototype, "label", 2);
-r([
-  a({ type: String })
-], t.prototype, "helper", 2);
-r([
-  a({ type: String })
-], t.prototype, "error", 2);
-r([
-  a({ type: Boolean })
-], t.prototype, "required", 2);
-r([
-  a({ type: Boolean })
-], t.prototype, "disabled", 2);
-r([
-  a({ type: Boolean })
-], t.prototype, "readonly", 2);
-r([
-  _()
-], t.prototype, "_internalError", 2);
-t = r([
-  v("logosphere-textarea")
-], t);
-export {
-  t as T
-};

package/dist/textarea.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./text-area-BkHdLnZj.cjs");Object.defineProperty(exports,"TextArea",{enumerable:!0,get:()=>e.TextArea});

package/dist/textarea.js

@@ -1,4 +0,0 @@
-import { T as a } from "./text-area-CC24lj8v.js";
-export {
-  a as TextArea
-};