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

package/dist/checkbox-CTfbav6M.js

@@ -0,0 +1,152 @@
+import { unsafeCSS as b, css as k, LitElement as u, nothing as h, html as a } from "lit";
+import { property as s, state as f, customElement as v } from "lit/decorators.js";
+import { ref as p } from "lit/directives/ref.js";
+const m = ':host{display:inline-block}.checkbox-wrapper{display:inline-flex;align-items:center;gap:var(--spacing-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base)}.checkbox-wrapper--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.checkbox-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.checkbox-control{box-sizing:border-box;width:16px;height:16px;flex-shrink:0;position:relative;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-body-bg);transition:background-color var(--transition-speed-fast) var(--transition-timing),border-color var(--transition-speed-fast) var(--transition-timing)}.checkbox-control--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-control--checked:after{content:"";position:absolute;top:50%;left:50%;width:9px;height:5px;border-left:2px solid #ffffff;border-bottom:2px solid #ffffff;transform:translate(-50%,-65%) rotate(-45deg)}.checkbox-control--indeterminate{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-control--indeterminate:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:2px;background-color:#fff;border-radius:1px;transform:translate(-50%,-50%)}.checkbox-label{font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-body-text)}.radio-control{box-sizing:border-box;width:16px;height:16px;flex-shrink:0;position:relative;border:1.5px solid var(--color-border);border-radius:var(--radius-full);background-color:var(--color-body-bg);transition:background-color var(--transition-speed-fast) var(--transition-timing),border-color var(--transition-speed-fast) var(--transition-timing)}.checkbox-wrapper:hover .radio-control{border-color:var(--color-border-emphasis);background-color:var(--color-body-bg-hover)}.radio-control--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-wrapper:hover .radio-control--checked{background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.radio-control--checked:after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:var(--radius-full);background-color:#fff;transform:translate(-50%,-50%)}.checkbox-wrapper--disabled .radio-control--checked{background-color:var(--color-primary-disabled);border-color:var(--color-primary-disabled)}.switch-wrapper{display:inline-flex;align-items:center;gap:var(--spacing-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base)}.switch-wrapper--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.switch-track{width:36px;height:20px;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-border);position:relative;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.switch-track--checked{background-color:var(--color-primary)}.switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:var(--radius-full);background-color:#fff;box-shadow:var(--shadow-xs);transition:transform var(--transition-speed-fast) var(--transition-timing)}.switch-track--checked .switch-thumb{transform:translate(16px)}';
+var x = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (e, r, c, n) => {
+  for (var i = n > 1 ? void 0 : n ? g(r, c) : r, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (i = (n ? d(r, c, i) : d(i)) || i);
+  return n && i && x(r, c, i), i;
+};
+let t = class extends u {
+  constructor() {
+    super(...arguments), this.label = "", this.value = "", this.type = "checkbox", this.disabled = !1, this.indeterminate = !1, this.internalChecked = !1, this._checked = !1;
+  }
+  get checked() {
+    return this._checked;
+  }
+  set checked(e) {
+    const r = this._checked;
+    this._checked = e, this.internalChecked = e, this.requestUpdate("checked", r);
+  }
+  firstUpdated() {
+    this.setIndeterminate();
+  }
+  updated(e) {
+    e.has("indeterminate") && this.setIndeterminate();
+  }
+  setIndeterminate() {
+    this.inputElement && (this.inputElement.indeterminate = this.indeterminate);
+  }
+  toggleChecked() {
+    if (!this.disabled) {
+      if (this.type === "radio") {
+        if (this.internalChecked) return;
+        this.internalChecked = !0;
+      } else this.indeterminate ? (this.indeterminate = !1, this.internalChecked = !0) : this.internalChecked = !this.internalChecked;
+      this.dispatchEvent(
+        new CustomEvent("lgsChange", {
+          detail: {
+            checked: this.internalChecked,
+            indeterminate: this.indeterminate,
+            value: this.value
+          },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }
+  }
+  renderCheckbox() {
+    const e = [
+      "checkbox-control",
+      this.internalChecked ? "checkbox-control--checked" : "",
+      this.indeterminate ? "checkbox-control--indeterminate" : ""
+    ].filter(Boolean).join(" ");
+    return a`
+      <div
+        class="checkbox-wrapper ${this.disabled ? "checkbox-wrapper--disabled" : ""}"
+        @click=${this.toggleChecked}
+      >
+        <input
+          type="checkbox"
+          class="checkbox-input"
+          .checked=${this.internalChecked}
+          ?disabled=${this.disabled}
+          .value=${this.value}
+          ${p((r) => this.inputElement = r)}
+        />
+        <span class="${e}"></span>
+        ${this.label ? a`<span class="checkbox-label">${this.label}</span>` : h}
+      </div>
+    `;
+  }
+  renderRadio() {
+    const e = [
+      "radio-control",
+      this.internalChecked ? "radio-control--checked" : ""
+    ].filter(Boolean).join(" ");
+    return a`
+      <div
+        class="checkbox-wrapper ${this.disabled ? "checkbox-wrapper--disabled" : ""}"
+        @click=${this.toggleChecked}
+      >
+        <input
+          type="radio"
+          class="checkbox-input"
+          .checked=${this.internalChecked}
+          ?disabled=${this.disabled}
+          .value=${this.value}
+          ${p((r) => this.inputElement = r)}
+        />
+        <span class="${e}"></span>
+        ${this.label ? a`<span class="checkbox-label">${this.label}</span>` : h}
+      </div>
+    `;
+  }
+  renderSwitch() {
+    return a`
+      <div
+        class="switch-wrapper ${this.disabled ? "switch-wrapper--disabled" : ""}"
+        @click=${this.toggleChecked}
+      >
+        <input
+          type="checkbox"
+          class="checkbox-input"
+          .checked=${this.internalChecked}
+          ?disabled=${this.disabled}
+          .value=${this.value}
+          ${p((e) => this.inputElement = e)}
+        />
+        <div class="switch-track ${this.internalChecked ? "switch-track--checked" : ""}">
+          <div class="switch-thumb"></div>
+        </div>
+        ${this.label ? a`<span class="checkbox-label">${this.label}</span>` : h}
+      </div>
+    `;
+  }
+  render() {
+    return this.type === "switch" ? this.renderSwitch() : this.type === "radio" ? this.renderRadio() : this.renderCheckbox();
+  }
+};
+t.styles = [
+  k`
+      ${b(m)}
+    `
+];
+o([
+  s({ type: String })
+], t.prototype, "label", 2);
+o([
+  s({ type: String })
+], t.prototype, "value", 2);
+o([
+  s({ type: String })
+], t.prototype, "type", 2);
+o([
+  s({ type: Boolean })
+], t.prototype, "disabled", 2);
+o([
+  s({ type: Boolean })
+], t.prototype, "indeterminate", 2);
+o([
+  f()
+], t.prototype, "internalChecked", 2);
+o([
+  s({ type: Boolean })
+], t.prototype, "checked", 1);
+t = o([
+  v("logosphere-checkbox")
+], t);
+export {
+  t as C
+};

package/dist/checkbox.cjs

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

package/dist/checkbox.js

@@ -1,4 +1,4 @@
-import { C as r } from "./checkbox-7Rb3WKGx.js";
+import { C as r } from "./checkbox-CTfbav6M.js";
 export {
   r as Checkbox
 };

package/dist/chip-group-D4DwnC37.cjs

@@ -0,0 +1,26 @@
+"use strict";const p=require("lit"),c=require("lit/decorators.js");require("./ui-icon-DWl7I5BQ.cjs");const n=":host{display:block}.chip-group{display:flex;flex-wrap:wrap;align-items:center}.chip-group__chip{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:6px var(--spacing-3);border-radius:1000px;border:1px solid var(--color-border);background-color:var(--color-body-bg);cursor:pointer;font-family:var(--font-family-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:20px;letter-spacing:-.14px;color:var(--color-secondary);white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none;transition:background-color var(--transition-speed-base) var(--transition-timing),border-color var(--transition-speed-base) var(--transition-timing),color var(--transition-speed-base) var(--transition-timing)}.chip-group__chip:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.chip-group__chip:hover:not(.chip-group__chip--disabled):not(.chip-group__chip--selected){background-color:var(--color-light)}.chip-group__chip-icon{display:inline-flex;align-items:center;flex-shrink:0;color:inherit}.chip-group__chip-label{color:inherit}.chip-group__chip--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.chip-group__chip--selected{border-color:transparent;color:#fff}.chip-group__chip--default.chip-group__chip--selected{background-color:var(--color-secondary)}.chip-group__chip--primary.chip-group__chip--selected{background-color:var(--color-primary)}.chip-group__chip--secondary.chip-group__chip--selected{background-color:var(--color-secondary)}.chip-group__chip--purple.chip-group__chip--selected{background-color:#543985}.chip-group__chip--success.chip-group__chip--selected{background-color:var(--color-success)}.chip-group__chip--danger.chip-group__chip--selected{background-color:var(--color-danger)}.chip-group__chip--info.chip-group__chip--selected{background-color:var(--color-info)}.chip-group__chip--warning.chip-group__chip--selected{background-color:var(--color-warning);color:var(--color-body-text)}";var h=Object.defineProperty,u=Object.getOwnPropertyDescriptor,t=(s,e,r,o)=>{for(var i=o>1?void 0:o?u(e,r):e,l=s.length-1,a;l>=0;l--)(a=s[l])&&(i=(o?a(e,r,i):a(i))||i);return o&&i&&h(e,r,i),i};exports.ChipGroup=class extends p.LitElement{constructor(){super(...arguments),this.items=[],this.value=[],this.theme="default",this.gap="var(--spacing-2)"}_isSelected(e){return this.value.includes(e)}_handleChipClick(e){if(e.disabled)return;const r=this._isSelected(e.value),o=r?this.value.filter(i=>i!==e.value):[...this.value,e.value];this.value=o,this.dispatchEvent(new CustomEvent("chip-group-change",{detail:{value:o,item:e,selected:!r},bubbles:!0,composed:!0}))}_onChipKeydown(e,r){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this._handleChipClick(r))}_renderChip(e){const r=this._isSelected(e.value),o=["chip-group__chip",`chip-group__chip--${this.theme}`,r?"chip-group__chip--selected":"",e.disabled?"chip-group__chip--disabled":""].filter(Boolean).join(" ");return p.html`
+      <button
+        class=${o}
+        type="button"
+        role="checkbox"
+        aria-checked=${r?"true":"false"}
+        aria-disabled=${e.disabled?"true":"false"}
+        tabindex=${e.disabled?"-1":"0"}
+        @click=${()=>this._handleChipClick(e)}
+        @keydown=${i=>this._onChipKeydown(i,e)}
+      >
+        <span class="chip-group__chip-icon" aria-hidden="true">
+          ${r?p.html`<ui-icon name="uil-check" size="16"></ui-icon>`:p.html`<ui-icon name="uil-plus"  size="16"></ui-icon>`}
+        </span>
+        <span class="chip-group__chip-label">${e.label}</span>
+      </button>
+    `}render(){return p.html`
+      <div
+        class="chip-group"
+        style="gap: ${this.gap}"
+        role="group"
+        aria-label="Chip group"
+      >
+        ${this.items.map(e=>this._renderChip(e))}
+      </div>
+    `}};exports.ChipGroup.styles=[p.css`${p.unsafeCSS(n)}`];t([c.property({attribute:!1})],exports.ChipGroup.prototype,"items",2);t([c.property({attribute:!1})],exports.ChipGroup.prototype,"value",2);t([c.property({type:String})],exports.ChipGroup.prototype,"theme",2);t([c.property({type:String})],exports.ChipGroup.prototype,"gap",2);exports.ChipGroup=t([c.customElement("logosphere-chip-group")],exports.ChipGroup);

package/dist/chip-group-DzfOd6Vw.js

@@ -0,0 +1,89 @@
+import { unsafeCSS as h, css as u, LitElement as d, html as a } from "lit";
+import { property as s, customElement as g } from "lit/decorators.js";
+import "./ui-icon-BeR-PaPg.js";
+const _ = ":host{display:block}.chip-group{display:flex;flex-wrap:wrap;align-items:center}.chip-group__chip{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:6px var(--spacing-3);border-radius:1000px;border:1px solid var(--color-border);background-color:var(--color-body-bg);cursor:pointer;font-family:var(--font-family-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:20px;letter-spacing:-.14px;color:var(--color-secondary);white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none;transition:background-color var(--transition-speed-base) var(--transition-timing),border-color var(--transition-speed-base) var(--transition-timing),color var(--transition-speed-base) var(--transition-timing)}.chip-group__chip:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.chip-group__chip:hover:not(.chip-group__chip--disabled):not(.chip-group__chip--selected){background-color:var(--color-light)}.chip-group__chip-icon{display:inline-flex;align-items:center;flex-shrink:0;color:inherit}.chip-group__chip-label{color:inherit}.chip-group__chip--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.chip-group__chip--selected{border-color:transparent;color:#fff}.chip-group__chip--default.chip-group__chip--selected{background-color:var(--color-secondary)}.chip-group__chip--primary.chip-group__chip--selected{background-color:var(--color-primary)}.chip-group__chip--secondary.chip-group__chip--selected{background-color:var(--color-secondary)}.chip-group__chip--purple.chip-group__chip--selected{background-color:#543985}.chip-group__chip--success.chip-group__chip--selected{background-color:var(--color-success)}.chip-group__chip--danger.chip-group__chip--selected{background-color:var(--color-danger)}.chip-group__chip--info.chip-group__chip--selected{background-color:var(--color-info)}.chip-group__chip--warning.chip-group__chip--selected{background-color:var(--color-warning);color:var(--color-body-text)}";
+var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, t = (e, r, o, i) => {
+  for (var c = i > 1 ? void 0 : i ? v(r, o) : r, l = e.length - 1, n; l >= 0; l--)
+    (n = e[l]) && (c = (i ? n(r, o, c) : n(c)) || c);
+  return i && c && b(r, o, c), c;
+};
+let p = class extends d {
+  constructor() {
+    super(...arguments), this.items = [], this.value = [], this.theme = "default", this.gap = "var(--spacing-2)";
+  }
+  // ── Helpers ──────────────────────────────────────────────────────────────
+  _isSelected(e) {
+    return this.value.includes(e);
+  }
+  _handleChipClick(e) {
+    if (e.disabled) return;
+    const r = this._isSelected(e.value), o = r ? this.value.filter((i) => i !== e.value) : [...this.value, e.value];
+    this.value = o, this.dispatchEvent(
+      new CustomEvent("chip-group-change", {
+        detail: { value: o, item: e, selected: !r },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _onChipKeydown(e, r) {
+    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._handleChipClick(r));
+  }
+  _renderChip(e) {
+    const r = this._isSelected(e.value), o = [
+      "chip-group__chip",
+      `chip-group__chip--${this.theme}`,
+      r ? "chip-group__chip--selected" : "",
+      e.disabled ? "chip-group__chip--disabled" : ""
+    ].filter(Boolean).join(" ");
+    return a`
+      <button
+        class=${o}
+        type="button"
+        role="checkbox"
+        aria-checked=${r ? "true" : "false"}
+        aria-disabled=${e.disabled ? "true" : "false"}
+        tabindex=${e.disabled ? "-1" : "0"}
+        @click=${() => this._handleChipClick(e)}
+        @keydown=${(i) => this._onChipKeydown(i, e)}
+      >
+        <span class="chip-group__chip-icon" aria-hidden="true">
+          ${r ? a`<ui-icon name="uil-check" size="16"></ui-icon>` : a`<ui-icon name="uil-plus"  size="16"></ui-icon>`}
+        </span>
+        <span class="chip-group__chip-label">${e.label}</span>
+      </button>
+    `;
+  }
+  // ── Render ────────────────────────────────────────────────────────────────
+  render() {
+    return a`
+      <div
+        class="chip-group"
+        style="gap: ${this.gap}"
+        role="group"
+        aria-label="Chip group"
+      >
+        ${this.items.map((e) => this._renderChip(e))}
+      </div>
+    `;
+  }
+};
+p.styles = [u`${h(_)}`];
+t([
+  s({ attribute: !1 })
+], p.prototype, "items", 2);
+t([
+  s({ attribute: !1 })
+], p.prototype, "value", 2);
+t([
+  s({ type: String })
+], p.prototype, "theme", 2);
+t([
+  s({ type: String })
+], p.prototype, "gap", 2);
+p = t([
+  g("logosphere-chip-group")
+], p);
+export {
+  p as C
+};

package/dist/chip-group.cjs

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

package/dist/chip-group.js

@@ -0,0 +1,4 @@
+import { C as r } from "./chip-group-DzfOd6Vw.js";
+export {
+  r as ChipGroup
+};

package/dist/collapse-CbRE8ABx.cjs

@@ -0,0 +1,47 @@
+"use strict";const t=require("lit"),s=require("lit/decorators.js");require("./ui-icon-DWl7I5BQ.cjs");const c=":host{display:block}.collapse{font-family:var(--font-family-base);background-color:var(--color-body-bg);overflow:hidden}.collapse--full{border:1px solid var(--color-border);border-radius:var(--radius-base)}.collapse--bottom{border-bottom:1px solid var(--color-border);border-radius:0}.collapse__header{display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-4) var(--spacing-4);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--transition-speed-fast) var(--transition-timing);outline:none}.collapse--small .collapse__header{padding:var(--spacing-2) var(--spacing-4)}.collapse--full .collapse__header{border-radius:calc(var(--radius-base) - 1px)}.collapse--full.collapse--expanded .collapse__header{border-radius:calc(var(--radius-base) - 1px) calc(var(--radius-base) - 1px) 0 0}.collapse--full .collapse__header:hover:not(.collapse--disabled .collapse__header){background-color:var(--color-body-bg-hover)}.collapse--bottom .collapse__header:hover:not(.collapse--disabled .collapse__header){background-color:var(--color-body-bg-hover)}.collapse__header:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:calc(var(--radius-base) - 1px)}.collapse__title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);line-height:1.2;letter-spacing:-.16px;color:var(--color-body-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.collapse__header-extra:empty{display:none}.collapse__header-extra{display:flex;align-items:center;gap:var(--spacing-2);flex-shrink:0}.collapse__header-spacer{flex:1}.collapse__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-secondary);transition:transform var(--transition-speed-base) var(--transition-timing)}.collapse__icon--expanded{transform:rotate(180deg)}.collapse__body{height:0;overflow:hidden;transition:height var(--transition-speed-slow) var(--transition-timing)}.collapse__body-inner{padding:0 var(--spacing-4) var(--spacing-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-body-color)}.collapse--bottom .collapse__body-inner{padding-top:var(--spacing-2)}.collapse--disabled .collapse__header{cursor:not-allowed;pointer-events:none}.collapse--disabled .collapse__title,.collapse--disabled .collapse__icon{color:var(--color-secondary-disabled)}.collapse--disabled.collapse--full{border-color:var(--color-secondary-disabled);background-color:var(--color-light-bg)}.collapse--disabled.collapse--bottom{border-bottom-color:var(--color-secondary-disabled);background-color:transparent}";var h=Object.defineProperty,b=Object.getOwnPropertyDescriptor,a=(i,e,o,r)=>{for(var l=r>1?void 0:r?b(e,o):e,d=i.length-1,p;d>=0;d--)(p=i[d])&&(l=(r?p(e,o,l):p(l))||l);return r&&l&&h(e,o,l),l};const n=typeof requestAnimationFrame<"u"?requestAnimationFrame.bind(window):i=>setTimeout(()=>i(Date.now()),16);exports.Collapse=class extends t.LitElement{constructor(){super(...arguments),this.title="",this.expanded=!1,this.disabled=!1,this.iconPosition="right",this.border="full",this.size="default"}_toggle(){this.disabled||(this.expanded=!this.expanded,this.dispatchEvent(new CustomEvent("toggle",{detail:{expanded:this.expanded},bubbles:!0,composed:!0})))}_onKeydown(e){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this._toggle())}_lockHeightForClose(){const e=this._body;if(!e)return;const o=e.getBoundingClientRect().height;e.style.height=`${o}px`,e.style.overflow="hidden"}willUpdate(e){super.willUpdate(e),e.has("expanded")&&!this.expanded&&this._lockHeightForClose()}updated(e){if(super.updated(e),!e.has("expanded")||!this._body||!this._inner)return;const o=this._body,r=this._inner;this.expanded?(o.style.height="0px",o.style.overflow="hidden",n(()=>{n(()=>{o.style.height=`${r.scrollHeight}px`,o.addEventListener("transitionend",function l(){o.style.height="auto",o.style.overflow="",o.removeEventListener("transitionend",l)},{once:!0})})})):(o.getBoundingClientRect(),n(()=>{n(()=>{o.style.height="0px"})}))}_renderIcon(){return t.html`
+      <span class="collapse__icon ${this.expanded?"collapse__icon--expanded":""}">
+        <ui-icon name="uil-angle-down" size="22"></ui-icon>
+      </span>
+    `}render(){return t.html`
+      <div
+        class="collapse
+               collapse--${this.border}
+               collapse--${this.size}
+               ${this.expanded?"collapse--expanded":""}
+               ${this.disabled?"collapse--disabled":""}"
+      >
+        <!-- Header -->
+        <div
+          class="collapse__header"
+          role="button"
+          tabindex=${this.disabled?"-1":"0"}
+          aria-expanded=${this.expanded?"true":"false"}
+          aria-disabled=${this.disabled?"true":t.nothing}
+          @click=${this._toggle}
+          @keydown=${this._onKeydown}
+        >
+          ${this.iconPosition==="left"?this._renderIcon():t.nothing}
+
+          <div class="collapse__title">
+            <slot name="title">${this.title}</slot>
+          </div>
+
+          <div class="collapse__header-extra">
+            <slot name="extra"></slot>
+          </div>
+
+          <!-- pushes extra to title side, icon stays at far right -->
+          <span class="collapse__header-spacer"></span>
+
+          ${this.iconPosition==="right"?this._renderIcon():t.nothing}
+        </div>
+
+        <!-- Body (animated) -->
+        <div class="collapse__body ${this.expanded?"collapse__body--visible":""}">
+          <div class="collapse__body-inner">
+            <!-- slot="body" for explicit usage; default slot as fallback -->
+            <slot name="body"><slot></slot></slot>
+          </div>
+        </div>
+      </div>
+    `}};exports.Collapse.styles=[t.css`${t.unsafeCSS(c)}`];a([s.property({type:String})],exports.Collapse.prototype,"title",2);a([s.property({type:Boolean,reflect:!0})],exports.Collapse.prototype,"expanded",2);a([s.property({type:Boolean,reflect:!0})],exports.Collapse.prototype,"disabled",2);a([s.property({type:String})],exports.Collapse.prototype,"iconPosition",2);a([s.property({type:String})],exports.Collapse.prototype,"border",2);a([s.property({type:String})],exports.Collapse.prototype,"size",2);a([s.query(".collapse__body-inner")],exports.Collapse.prototype,"_inner",2);a([s.query(".collapse__body")],exports.Collapse.prototype,"_body",2);exports.Collapse=a([s.customElement("logosphere-collapse")],exports.Collapse);

package/dist/collapse-DY6SJ9jS.js

@@ -0,0 +1,141 @@
+import { unsafeCSS as _, css as v, LitElement as g, html as h, nothing as p } from "lit";
+import { property as r, query as b, customElement as u } from "lit/decorators.js";
+import "./ui-icon-BeR-PaPg.js";
+const y = ":host{display:block}.collapse{font-family:var(--font-family-base);background-color:var(--color-body-bg);overflow:hidden}.collapse--full{border:1px solid var(--color-border);border-radius:var(--radius-base)}.collapse--bottom{border-bottom:1px solid var(--color-border);border-radius:0}.collapse__header{display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-4) var(--spacing-4);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--transition-speed-fast) var(--transition-timing);outline:none}.collapse--small .collapse__header{padding:var(--spacing-2) var(--spacing-4)}.collapse--full .collapse__header{border-radius:calc(var(--radius-base) - 1px)}.collapse--full.collapse--expanded .collapse__header{border-radius:calc(var(--radius-base) - 1px) calc(var(--radius-base) - 1px) 0 0}.collapse--full .collapse__header:hover:not(.collapse--disabled .collapse__header){background-color:var(--color-body-bg-hover)}.collapse--bottom .collapse__header:hover:not(.collapse--disabled .collapse__header){background-color:var(--color-body-bg-hover)}.collapse__header:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:calc(var(--radius-base) - 1px)}.collapse__title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);line-height:1.2;letter-spacing:-.16px;color:var(--color-body-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.collapse__header-extra:empty{display:none}.collapse__header-extra{display:flex;align-items:center;gap:var(--spacing-2);flex-shrink:0}.collapse__header-spacer{flex:1}.collapse__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-secondary);transition:transform var(--transition-speed-base) var(--transition-timing)}.collapse__icon--expanded{transform:rotate(180deg)}.collapse__body{height:0;overflow:hidden;transition:height var(--transition-speed-slow) var(--transition-timing)}.collapse__body-inner{padding:0 var(--spacing-4) var(--spacing-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-body-color)}.collapse--bottom .collapse__body-inner{padding-top:var(--spacing-2)}.collapse--disabled .collapse__header{cursor:not-allowed;pointer-events:none}.collapse--disabled .collapse__title,.collapse--disabled .collapse__icon{color:var(--color-secondary-disabled)}.collapse--disabled.collapse--full{border-color:var(--color-secondary-disabled);background-color:var(--color-light-bg)}.collapse--disabled.collapse--bottom{border-bottom-color:var(--color-secondary-disabled);background-color:transparent}";
+var f = Object.defineProperty, x = Object.getOwnPropertyDescriptor, t = (e, o, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? x(o, i) : o, d = e.length - 1, c; d >= 0; d--)
+    (c = e[d]) && (s = (a ? c(o, i, s) : c(s)) || s);
+  return a && s && f(o, i, s), s;
+};
+const n = typeof requestAnimationFrame < "u" ? requestAnimationFrame.bind(window) : (e) => setTimeout(() => e(Date.now()), 16);
+let l = class extends g {
+  constructor() {
+    super(...arguments), this.title = "", this.expanded = !1, this.disabled = !1, this.iconPosition = "right", this.border = "full", this.size = "default";
+  }
+  // ── Toggle ────────────────────────────────────────────────────────────────
+  _toggle() {
+    this.disabled || (this.expanded = !this.expanded, this.dispatchEvent(
+      new CustomEvent("toggle", {
+        detail: { expanded: this.expanded },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  _onKeydown(e) {
+    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._toggle());
+  }
+  // ── Animated height ───────────────────────────────────────────────────────
+  /**
+   * CLOSING: Called inside willUpdate — BEFORE Lit re-renders — so we can
+   * capture and lock the current height before the CSS class is removed.
+   */
+  _lockHeightForClose() {
+    const e = this._body;
+    if (!e) return;
+    const o = e.getBoundingClientRect().height;
+    e.style.height = `${o}px`, e.style.overflow = "hidden";
+  }
+  willUpdate(e) {
+    super.willUpdate(e), e.has("expanded") && !this.expanded && this._lockHeightForClose();
+  }
+  updated(e) {
+    if (super.updated(e), !e.has("expanded") || !this._body || !this._inner) return;
+    const o = this._body, i = this._inner;
+    this.expanded ? (o.style.height = "0px", o.style.overflow = "hidden", n(() => {
+      n(() => {
+        o.style.height = `${i.scrollHeight}px`, o.addEventListener("transitionend", function a() {
+          o.style.height = "auto", o.style.overflow = "", o.removeEventListener("transitionend", a);
+        }, { once: !0 });
+      });
+    })) : (o.getBoundingClientRect(), n(() => {
+      n(() => {
+        o.style.height = "0px";
+      });
+    }));
+  }
+  // ── Render ────────────────────────────────────────────────────────────────
+  _renderIcon() {
+    return h`
+      <span class="collapse__icon ${this.expanded ? "collapse__icon--expanded" : ""}">
+        <ui-icon name="uil-angle-down" size="22"></ui-icon>
+      </span>
+    `;
+  }
+  render() {
+    return h`
+      <div
+        class="collapse
+               collapse--${this.border}
+               collapse--${this.size}
+               ${this.expanded ? "collapse--expanded" : ""}
+               ${this.disabled ? "collapse--disabled" : ""}"
+      >
+        <!-- Header -->
+        <div
+          class="collapse__header"
+          role="button"
+          tabindex=${this.disabled ? "-1" : "0"}
+          aria-expanded=${this.expanded ? "true" : "false"}
+          aria-disabled=${this.disabled ? "true" : p}
+          @click=${this._toggle}
+          @keydown=${this._onKeydown}
+        >
+          ${this.iconPosition === "left" ? this._renderIcon() : p}
+
+          <div class="collapse__title">
+            <slot name="title">${this.title}</slot>
+          </div>
+
+          <div class="collapse__header-extra">
+            <slot name="extra"></slot>
+          </div>
+
+          <!-- pushes extra to title side, icon stays at far right -->
+          <span class="collapse__header-spacer"></span>
+
+          ${this.iconPosition === "right" ? this._renderIcon() : p}
+        </div>
+
+        <!-- Body (animated) -->
+        <div class="collapse__body ${this.expanded ? "collapse__body--visible" : ""}">
+          <div class="collapse__body-inner">
+            <!-- slot="body" for explicit usage; default slot as fallback -->
+            <slot name="body"><slot></slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+l.styles = [v`${_(y)}`];
+t([
+  r({ type: String })
+], l.prototype, "title", 2);
+t([
+  r({ type: Boolean, reflect: !0 })
+], l.prototype, "expanded", 2);
+t([
+  r({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+t([
+  r({ type: String })
+], l.prototype, "iconPosition", 2);
+t([
+  r({ type: String })
+], l.prototype, "border", 2);
+t([
+  r({ type: String })
+], l.prototype, "size", 2);
+t([
+  b(".collapse__body-inner")
+], l.prototype, "_inner", 2);
+t([
+  b(".collapse__body")
+], l.prototype, "_body", 2);
+l = t([
+  u("logosphere-collapse")
+], l);
+export {
+  l as C
+};

package/dist/collapse.cjs

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

package/dist/collapse.js

@@ -0,0 +1,4 @@
+import { C as e } from "./collapse-DY6SJ9jS.js";
+export {
+  e as Collapse
+};