@logosphere-ui/core 0.0.0-alpha.35 → 0.0.0-alpha.38

package/dist/tab-BmrITzOL.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-light)}.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-Ca_OyNqQ.js

@@ -1,176 +0,0 @@
-import { unsafeCSS as p, css as f, LitElement as v, nothing as c, html as r } from "lit";
-import { property as b, state as h, query as _, customElement as u } from "lit/decorators.js";
-const y = ".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-light)}.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 g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, i, t, a) => {
-  for (var s = a > 1 ? void 0 : a ? w(i, t) : i, l = e.length - 1, d; l >= 0; l--)
-    (d = e[l]) && (s = (a ? d(i, t, s) : d(s)) || s);
-  return a && s && g(i, t, s), s;
-};
-let o = class extends v {
-  constructor() {
-    super(...arguments), this.tabs = [], this.activeTab = "", this.lazy = !0, this.variant = "default", this._focusedIndex = 0, this._renderedTabs = /* @__PURE__ */ 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 i = this.tabs.findIndex((t) => t.id === this.activeTab);
-      i !== -1 && (this._focusedIndex = i);
-    }
-    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));
-  }
-  // ==================== EVENTS ====================
-  handleTabClick(e, i) {
-    if (i) return;
-    const t = this.activeTab;
-    this.activeTab = e, this._focusedIndex = this.tabs.findIndex((a) => a.id === e), this.dispatchEvent(
-      new CustomEvent("tab-change", {
-        detail: { oldTab: t, newTab: e },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleKeyDown(e) {
-    const { tabs: i } = this;
-    if (i.filter((s) => !s.disabled).length === 0) return;
-    let t = this._focusedIndex;
-    const a = this._focusedIndex;
-    switch (e.key) {
-      case "ArrowLeft":
-        e.preventDefault();
-        do
-          t = t > 0 ? t - 1 : i.length - 1;
-        while (i[t]?.disabled && t !== a);
-        break;
-      case "ArrowRight":
-        e.preventDefault();
-        do
-          t = t < i.length - 1 ? t + 1 : 0;
-        while (i[t]?.disabled && t !== a);
-        break;
-      case "Home":
-        for (e.preventDefault(), t = 0; i[t]?.disabled && t < i.length - 1; ) t++;
-        break;
-      case "End":
-        for (e.preventDefault(), t = i.length - 1; i[t]?.disabled && t > 0; ) t--;
-        break;
-      default:
-        return;
-    }
-    if (t !== this._focusedIndex && !i[t]?.disabled) {
-      const s = this.activeTab;
-      this._focusedIndex = t, this.activeTab = i[t].id, this.updateComplete.then(() => {
-        this.shadowRoot?.querySelector(
-          `[role="tab"][data-tab-id="${i[t].id}"]`
-        )?.focus();
-      }), this.dispatchEvent(
-        new CustomEvent("tab-change", {
-          detail: { oldTab: s, newTab: i[t].id },
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    }
-  }
-  scrollTabIntoView(e) {
-    this.updateComplete.then(() => {
-      const i = this.shadowRoot?.querySelector(
-        `[role="tab"][data-tab-id="${e}"]`
-      );
-      if (i && this.tablist) {
-        const t = this.tablist.getBoundingClientRect(), a = i.getBoundingClientRect();
-        a.left < t.left ? this.tablist.scrollLeft -= t.left - a.left + 16 : a.right > t.right && (this.tablist.scrollLeft += a.right - t.right + 16);
-      }
-    });
-  }
-  // ==================== RENDER ====================
-  renderTabButton(e, i) {
-    const t = this.activeTab === e.id, a = this._focusedIndex === i, s = [
-      "tab__button",
-      t ? "tab__button--active" : "",
-      e.disabled ? "tab__button--disabled" : ""
-    ].filter(Boolean).join(" "), l = ["tab__label", t ? "" : "tab__label--inactive"].filter(Boolean).join(" "), d = ["tab__description", t ? "tab__description--active" : ""].filter(Boolean).join(" ");
-    return r`
-      <button
-        role="tab"
-        class=${s}
-        data-tab-id=${e.id}
-        aria-selected=${t ? "true" : "false"}
-        aria-controls="panel-${e.id}"
-        tabindex=${t || a ? "0" : "-1"}
-        ?disabled=${e.disabled}
-        @click=${() => this.handleTabClick(e.id, e.disabled)}
-        @focus=${() => this.scrollTabIntoView(e.id)}
-      >
-        ${e.icon ? r`<i class="${e.icon} tab__icon"></i>` : c}
-        <div class="tab__content">
-          <span class=${l}>${e.label}</span>
-          ${e.description ? r`<span class=${d}>${e.description}</span>` : c}
-        </div>
-      </button>
-    `;
-  }
-  renderTabPanel(e) {
-    const i = this.activeTab === e.id;
-    if (!(!this.lazy || this._renderedTabs.has(e.id))) return c;
-    const a = ["tab__panel", i ? "" : "tab__panel--hidden"].filter(Boolean).join(" ");
-    return r`
-      <div
-        role="tabpanel"
-        id="panel-${e.id}"
-        aria-labelledby="tab-${e.id}"
-        class=${a}
-        tabindex="0"
-      >
-        <slot name=${`panel-${e.id}`}>
-          ${typeof e.content == "string" ? r`${e.content}` : c}
-        </slot>
-      </div>
-    `;
-  }
-  render() {
-    return r`
-      <div class="tab">
-        <div role="tablist" aria-label="Tabs" class="tab__list" @keydown=${this.handleKeyDown}>
-          ${this.tabs.map((e, i) => this.renderTabButton(e, i))}
-        </div>
-        <div class="tab__panels">${this.tabs.map((e) => this.renderTabPanel(e))}</div>
-      </div>
-    `;
-  }
-};
-o.styles = [
-  f`
-      ${p(y)}
-    `
-];
-n([
-  b({ type: Array })
-], o.prototype, "tabs", 2);
-n([
-  b({ type: String })
-], o.prototype, "activeTab", 2);
-n([
-  b({ type: Boolean })
-], o.prototype, "lazy", 2);
-n([
-  b({ type: String })
-], o.prototype, "variant", 2);
-n([
-  h()
-], o.prototype, "_focusedIndex", 2);
-n([
-  h()
-], o.prototype, "_renderedTabs", 2);
-n([
-  _('[role="tablist"]')
-], o.prototype, "tablist", 2);
-o = n([
-  u("logosphere-tab")
-], o);
-export {
-  o as L
-};