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

package/dist/slider-ntLRajQa.js

@@ -0,0 +1,280 @@
+import { unsafeCSS as _, css as b, LitElement as v, html as l, nothing as p } from "lit";
+import { property as a, state as u, customElement as g } from "lit/decorators.js";
+const m = ':host{display:block}.slider{position:relative;width:100%;font-family:var(--font-family-base)}.slider--has-tooltip .slider__track-area{margin-top:var(--spacing-8)}.slider__track-area{position:relative;height:20px;display:flex;align-items:center}.slider__track{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:6px;border-radius:var(--radius-full);background:var(--color-border);pointer-events:none}.slider__fill{position:absolute;top:50%;transform:translateY(-50%);height:6px;border-radius:var(--radius-full);background:var(--color-primary);pointer-events:none}.slider__input{position:absolute;top:50%;transform:translateY(-50%);left:0;width:100%;height:6px;margin:0;padding:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;pointer-events:none;outline:none}.slider__input::-webkit-slider-runnable-track{background:transparent;height:6px}.slider__input::-moz-range-track{background:transparent;height:6px}.slider__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-5px;border-radius:50%;background:var(--color-body-bg);border:2px solid var(--color-border);pointer-events:all;cursor:pointer;box-shadow:var(--shadow-sm)}.slider__input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--color-body-bg);border:2px solid var(--color-border);pointer-events:all;cursor:pointer;box-shadow:var(--shadow-sm)}.slider__input:not(:disabled):focus-visible::-webkit-slider-thumb{outline:none;box-shadow:0 0 0 4px var(--color-primary-bg-subtle)}.slider__input:not(:disabled):focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--color-primary-bg-subtle)}.slider--disabled .slider__track{background:var(--color-border)}.slider--disabled .slider__fill{background:var(--color-primary-disabled)}.slider--disabled .slider__input{cursor:not-allowed}.slider--disabled .slider__input::-webkit-slider-thumb{background:var(--color-body-bg);border-color:var(--color-border);pointer-events:all;cursor:not-allowed;box-shadow:none}.slider--disabled .slider__input::-moz-range-thumb{background:var(--color-body-bg);border-color:var(--color-secondary-disabled);cursor:not-allowed;box-shadow:none}.slider--disabled .slider__scale-item{color:var(--color-secondary-disabled)}.slider--disabled .slider__scale-item:before{background:var(--color-secondary-disabled)}.slider--disabled .slider__tooltip{color:var(--color-secondary-disabled);border-color:var(--color-secondary-disabled)}.slider__tooltip{position:absolute;top:-34px;transform:translate(-50%);background:var(--color-body-bg);border:1px solid var(--color-border);color:var(--color-body-color);padding:var(--spacing-1) var(--spacing-2);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);font-family:var(--font-family-base);white-space:nowrap;pointer-events:none;z-index:var(--z-index-tooltip);line-height:var(--line-height-normal)}.slider__scale{position:relative;height:26px;margin-top:var(--spacing-1)}.slider__scale-item{position:absolute;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-1);font-size:var(--font-size-xs);color:var(--color-tertiary);font-family:var(--font-family-base);font-weight:var(--font-weight-regular);white-space:nowrap;line-height:1;-webkit-user-select:none;user-select:none}.slider__scale-item:before{content:"";display:block;width:1px;height:6px;background:var(--color-border);flex-shrink:0}.slider__input--start,.slider__input--end{position:absolute;pointer-events:none}.slider__input--start::-webkit-slider-thumb,.slider__input--end::-webkit-slider-thumb{pointer-events:all}.slider__input--start::-moz-range-thumb,.slider__input--end::-moz-range-thumb{pointer-events:all}';
+var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (t, e, s, n) => {
+  for (var o = n > 1 ? void 0 : n ? y(e, s) : e, d = t.length - 1, h; d >= 0; d--)
+    (h = t[d]) && (o = (n ? h(e, s, o) : h(o)) || o);
+  return n && o && f(e, s, o), o;
+};
+let r = class extends v {
+  constructor() {
+    super(...arguments), this.value = 50, this.min = 0, this.max = 100, this.step = 1, this.disabled = !1, this.range = !1, this.rangeStart = 25, this.rangeEnd = 75, this.minDistance = 0, this.tooltip = "never", this.showScale = !1, this.percentage = !1, this.labels = [], this._hoverStart = !1, this._hoverEnd = !1;
+  }
+  // ── Computed helpers ─────────────────────────────────────────────────────────
+  get _isLabeled() {
+    return this.labels.length > 0;
+  }
+  get _effectiveStep() {
+    return this._isLabeled && this.labels.length > 1 ? (this.max - this.min) / (this.labels.length - 1) : this.step;
+  }
+  get _valuePct() {
+    return (this.value - this.min) / (this.max - this.min) * 100;
+  }
+  get _startPct() {
+    return (this.rangeStart - this.min) / (this.max - this.min) * 100;
+  }
+  get _endPct() {
+    return (this.rangeEnd - this.min) / (this.max - this.min) * 100;
+  }
+  get _displayValue() {
+    if (this._isLabeled) {
+      const t = Math.round((this.value - this.min) / this._effectiveStep);
+      return this.labels[Math.min(t, this.labels.length - 1)] ?? String(this.value);
+    }
+    return this.percentage ? `${Math.round(this.value)}%` : String(this.value);
+  }
+  get _displayStart() {
+    return this.percentage ? `${Math.round(this.rangeStart)}%` : String(this.rangeStart);
+  }
+  get _displayEnd() {
+    return this.percentage ? `${Math.round(this.rangeEnd)}%` : String(this.rangeEnd);
+  }
+  /** CSS left value that correctly follows the native thumb position (accounts for thumb radius offset). */
+  _thumbLeft(t) {
+    return `calc(${t}% + ${(0.5 - t / 100) * 16}px)`;
+  }
+  // ── Event handlers ───────────────────────────────────────────────────────────
+  _onSingleChange(t) {
+    const e = t.target;
+    this.value = Number(e.value), this._emit("change", { value: this.value });
+  }
+  _onStartChange(t) {
+    const e = t.target, s = Math.min(Number(e.value), this.rangeEnd - this.minDistance);
+    this.rangeStart = s, this._emit("change", { rangeStart: this.rangeStart, rangeEnd: this.rangeEnd });
+  }
+  _onEndChange(t) {
+    const e = t.target, s = Math.max(Number(e.value), this.rangeStart + this.minDistance);
+    this.rangeEnd = s, this._emit("change", { rangeStart: this.rangeStart, rangeEnd: this.rangeEnd });
+  }
+  _emit(t, e) {
+    this.dispatchEvent(new CustomEvent(t, { detail: e, bubbles: !0, composed: !0 }));
+  }
+  // ── Render parts ─────────────────────────────────────────────────────────────
+  _renderFill() {
+    return this.range ? l`
+        <div
+          class="slider__fill"
+          style="left: ${this._startPct}%; width: ${this._endPct - this._startPct}%"
+        ></div>
+      ` : l`<div class="slider__fill" style="width: ${this._valuePct}%"></div>`;
+  }
+  _renderTooltip(t, e, s) {
+    return this.tooltip === "never" ? p : this.tooltip === "hover" && !s ? p : l`
+      <div class="slider__tooltip" style="left: ${this._thumbLeft(e)}">${t}</div>
+    `;
+  }
+  _renderScale() {
+    if (!this.showScale) return p;
+    const t = this.max - this.min, e = Math.min(Math.round(t / this.step) + 1, 11), s = Array.from({ length: e }, (n, o) => {
+      const d = e > 1 ? o / (e - 1) * 100 : 0, h = this.min + d / 100 * t, c = this.percentage ? `${Math.round(h)}%` : String(Math.round(h));
+      return { pct: d, display: c };
+    });
+    return l`
+      <div class="slider__scale">
+        ${s.map(({ pct: n, display: o }) => l`
+          <span class="slider__scale-item" style="left: ${this._thumbLeft(n)}">${o}</span>
+        `)}
+      </div>
+    `;
+  }
+  _renderLabels() {
+    if (!this._isLabeled) return p;
+    const t = this.labels.length;
+    return l`
+      <div class="slider__scale">
+        ${this.labels.map((e, s) => {
+      const n = t > 1 ? s / (t - 1) * 100 : 0;
+      return l`
+            <span class="slider__scale-item" style="left: ${this._thumbLeft(n)}">${e}</span>
+          `;
+    })}
+      </div>
+    `;
+  }
+  _renderSingleInput() {
+    const t = this.tooltip === "always" || this.tooltip === "hover" && this._hoverStart;
+    return l`
+      <div class="slider__track-area">
+        <div class="slider__track"></div>
+        ${this._renderFill()}
+        ${this._renderTooltip(this._displayValue, this._valuePct, t)}
+        <input
+          type="range"
+          class="slider__input"
+          .value=${String(this.value)}
+          min=${this.min}
+          max=${this.max}
+          step=${this._effectiveStep}
+          ?disabled=${this.disabled}
+          @input=${this._onSingleChange}
+          @mouseenter=${() => {
+      this._hoverStart = !0;
+    }}
+          @mouseleave=${() => {
+      this._hoverStart = !1;
+    }}
+          @focus=${() => {
+      this._hoverStart = !0;
+    }}
+          @blur=${() => {
+      this._hoverStart = !1;
+    }}
+          aria-label="Slider"
+          aria-valuemin=${this.min}
+          aria-valuemax=${this.max}
+          aria-valuenow=${this.value}
+          aria-valuetext=${this._displayValue}
+          aria-disabled=${this.disabled}
+        />
+      </div>
+    `;
+  }
+  _renderRangeInputs() {
+    const t = this.tooltip === "always" || this.tooltip === "hover" && this._hoverStart, e = this.tooltip === "always" || this.tooltip === "hover" && this._hoverEnd, s = this._startPct >= 100 ? 4 : 3, n = this._startPct >= 100 ? 3 : 4;
+    return l`
+      <div class="slider__track-area">
+        <div class="slider__track"></div>
+        ${this._renderFill()}
+        ${this._renderTooltip(this._displayStart, this._startPct, t)}
+        ${this._renderTooltip(this._displayEnd, this._endPct, e)}
+        <input
+          type="range"
+          class="slider__input slider__input--start"
+          style="z-index: ${s}"
+          .value=${String(this.rangeStart)}
+          min=${this.min}
+          max=${this.max}
+          step=${this._effectiveStep}
+          ?disabled=${this.disabled}
+          @input=${this._onStartChange}
+          @mouseenter=${() => {
+      this._hoverStart = !0;
+    }}
+          @mouseleave=${() => {
+      this._hoverStart = !1;
+    }}
+          @focus=${() => {
+      this._hoverStart = !0;
+    }}
+          @blur=${() => {
+      this._hoverStart = !1;
+    }}
+          aria-label="Range start"
+          aria-valuemin=${this.min}
+          aria-valuemax=${this.max}
+          aria-valuenow=${this.rangeStart}
+          aria-valuetext=${this._displayStart}
+          aria-disabled=${this.disabled}
+        />
+        <input
+          type="range"
+          class="slider__input slider__input--end"
+          style="z-index: ${n}"
+          .value=${String(this.rangeEnd)}
+          min=${this.min}
+          max=${this.max}
+          step=${this._effectiveStep}
+          ?disabled=${this.disabled}
+          @input=${this._onEndChange}
+          @mouseenter=${() => {
+      this._hoverEnd = !0;
+    }}
+          @mouseleave=${() => {
+      this._hoverEnd = !1;
+    }}
+          @focus=${() => {
+      this._hoverEnd = !0;
+    }}
+          @blur=${() => {
+      this._hoverEnd = !1;
+    }}
+          aria-label="Range end"
+          aria-valuemin=${this.min}
+          aria-valuemax=${this.max}
+          aria-valuenow=${this.rangeEnd}
+          aria-valuetext=${this._displayEnd}
+          aria-disabled=${this.disabled}
+        />
+      </div>
+    `;
+  }
+  render() {
+    const t = this.tooltip !== "never", e = this.showScale || this._isLabeled;
+    return l`
+      <div
+        class="slider
+          ${this.disabled ? "slider--disabled" : ""}
+          ${t ? "slider--has-tooltip" : ""}
+          ${e ? "slider--has-below" : ""}
+        "
+        role="presentation"
+      >
+        ${this.range ? this._renderRangeInputs() : this._renderSingleInput()}
+        ${this._renderScale()}
+        ${this._renderLabels()}
+      </div>
+    `;
+  }
+};
+r.styles = [b`${_(m)}`];
+i([
+  a({ type: Number })
+], r.prototype, "value", 2);
+i([
+  a({ type: Number })
+], r.prototype, "min", 2);
+i([
+  a({ type: Number })
+], r.prototype, "max", 2);
+i([
+  a({ type: Number })
+], r.prototype, "step", 2);
+i([
+  a({ type: Boolean })
+], r.prototype, "disabled", 2);
+i([
+  a({ type: Boolean })
+], r.prototype, "range", 2);
+i([
+  a({ type: Number })
+], r.prototype, "rangeStart", 2);
+i([
+  a({ type: Number })
+], r.prototype, "rangeEnd", 2);
+i([
+  a({ type: Number })
+], r.prototype, "minDistance", 2);
+i([
+  a({ type: String })
+], r.prototype, "tooltip", 2);
+i([
+  a({ type: Boolean })
+], r.prototype, "showScale", 2);
+i([
+  a({ type: Boolean })
+], r.prototype, "percentage", 2);
+i([
+  a({ type: Array })
+], r.prototype, "labels", 2);
+i([
+  u()
+], r.prototype, "_hoverStart", 2);
+i([
+  u()
+], r.prototype, "_hoverEnd", 2);
+r = i([
+  g("logosphere-slider")
+], r);
+export {
+  r as S
+};

package/dist/slider.cjs

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

package/dist/slider.js

@@ -0,0 +1,4 @@
+import { S as o } from "./slider-ntLRajQa.js";
+export {
+  o as Slider
+};

package/dist/split-button-BdBweoip.js

@@ -0,0 +1,177 @@
+import { unsafeCSS as u, css as _, LitElement as v, nothing as b, html as r } from "lit";
+import { property as l, state as g, query as c, customElement as h } from "lit/decorators.js";
+import { createPopper as f } from "@popperjs/core";
+import "./ui-icon-BeR-PaPg.js";
+const w = ":host{display:inline-block;position:relative}.split-button{display:inline-flex;align-items:stretch;gap:1px;font-family:var(--font-family-base);border-radius:var(--radius-base);overflow:hidden}.split-button__action,.split-button__dropdown{display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-family:inherit;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);line-height:1.25rem;letter-spacing:-.14px;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background-color var(--transition-speed-base) var(--transition-timing);outline:none}.split-button__action:focus-visible,.split-button__dropdown:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;position:relative;z-index:1}.split-button__action:disabled,.split-button__dropdown:disabled{cursor:not-allowed;pointer-events:none}.split-button__action{gap:var(--spacing-1)}.split-button__chevron{transition:transform var(--transition-speed-base) var(--transition-timing);display:inline-flex}.split-button__chevron--open{transform:rotate(180deg)}.split-button--sm .split-button__action{padding:var(--spacing-0-5) var(--spacing-2)}.split-button--sm .split-button__dropdown{padding:var(--spacing-0-5) var(--spacing-1-5)}.split-button--md .split-button__action{padding:var(--spacing-1-5) var(--spacing-3)}.split-button--md .split-button__dropdown{padding:var(--spacing-1-5) var(--spacing-2)}.split-button--lg .split-button__action{padding:var(--spacing-2-5) var(--spacing-3)}.split-button--lg .split-button__dropdown{padding:var(--spacing-2-5) var(--spacing-2)}.split-button{background-color:#fff6}.split-button--primary .split-button__action,.split-button--primary .split-button__dropdown{background-color:var(--color-primary);color:#fff}.split-button--primary .split-button__action:hover:not(:disabled),.split-button--primary .split-button__dropdown:hover:not(:disabled){background-color:var(--color-primary-hover)}.split-button--primary .split-button__action:active:not(:disabled),.split-button--primary .split-button__dropdown:active:not(:disabled){background-color:var(--color-primary-active)}.split-button--primary.split-button--disabled,.split-button--primary .split-button__action:disabled,.split-button--primary .split-button__dropdown:disabled{background-color:var(--color-primary-disabled)}.split-button--primary.split-button--disabled .split-button__action,.split-button--primary.split-button--disabled .split-button__dropdown{background-color:var(--color-primary-disabled)}.split-button--secondary .split-button__action,.split-button--secondary .split-button__dropdown{background-color:var(--color-secondary);color:#fff}.split-button--secondary .split-button__action:hover:not(:disabled),.split-button--secondary .split-button__dropdown:hover:not(:disabled){background-color:var(--color-secondary-hover)}.split-button--secondary .split-button__action:active:not(:disabled),.split-button--secondary .split-button__dropdown:active:not(:disabled){background-color:var(--color-secondary-active)}.split-button--secondary.split-button--disabled .split-button__action,.split-button--secondary.split-button--disabled .split-button__dropdown,.split-button--secondary .split-button__action:disabled,.split-button--secondary .split-button__dropdown:disabled{background-color:var(--color-secondary-disabled)}.split-button--success .split-button__action,.split-button--success .split-button__dropdown{background-color:var(--color-success);color:#fff}.split-button--success .split-button__action:hover:not(:disabled),.split-button--success .split-button__dropdown:hover:not(:disabled){background-color:var(--color-success-hover)}.split-button--success .split-button__action:active:not(:disabled),.split-button--success .split-button__dropdown:active:not(:disabled){background-color:var(--color-success-active)}.split-button--success.split-button--disabled .split-button__action,.split-button--success.split-button--disabled .split-button__dropdown,.split-button--success .split-button__action:disabled,.split-button--success .split-button__dropdown:disabled{background-color:var(--color-success-disabled)}.split-button--danger .split-button__action,.split-button--danger .split-button__dropdown{background-color:var(--color-danger);color:#fff}.split-button--danger .split-button__action:hover:not(:disabled),.split-button--danger .split-button__dropdown:hover:not(:disabled){background-color:var(--color-danger-hover)}.split-button--danger .split-button__action:active:not(:disabled),.split-button--danger .split-button__dropdown:active:not(:disabled){background-color:var(--color-danger-active)}.split-button--danger.split-button--disabled .split-button__action,.split-button--danger.split-button--disabled .split-button__dropdown,.split-button--danger .split-button__action:disabled,.split-button--danger .split-button__dropdown:disabled{background-color:var(--color-danger-disabled)}.split-button--info .split-button__action,.split-button--info .split-button__dropdown{background-color:var(--color-info);color:#fff}.split-button--info .split-button__action:hover:not(:disabled),.split-button--info .split-button__dropdown:hover:not(:disabled){background-color:var(--color-info-hover)}.split-button--info .split-button__action:active:not(:disabled),.split-button--info .split-button__dropdown:active:not(:disabled){background-color:var(--color-info-active)}.split-button--info.split-button--disabled .split-button__action,.split-button--info.split-button--disabled .split-button__dropdown,.split-button--info .split-button__action:disabled,.split-button--info .split-button__dropdown:disabled{background-color:var(--color-info-disabled)}.split-button--warning .split-button__action,.split-button--warning .split-button__dropdown{background-color:var(--color-warning);color:var(--color-warning-emphasis)}.split-button--warning .split-button__action:hover:not(:disabled),.split-button--warning .split-button__dropdown:hover:not(:disabled){background-color:var(--color-warning-hover)}.split-button--warning .split-button__action:active:not(:disabled),.split-button--warning .split-button__dropdown:active:not(:disabled){background-color:var(--color-warning-active)}.split-button--warning.split-button--disabled .split-button__action,.split-button--warning.split-button--disabled .split-button__dropdown,.split-button--warning .split-button__action:disabled,.split-button--warning .split-button__dropdown:disabled{background-color:var(--color-warning-disabled)}.split-button__panel{position:fixed;z-index:var(--z-index-dropdown);min-width:160px;background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-base);box-shadow:var(--shadow-lg);padding:var(--spacing-1) 0;outline:none}.split-button__panel-item{display:flex;align-items:center;gap:var(--spacing-2);width:100%;padding:var(--spacing-2) var(--spacing-3);background:none;border:none;cursor:pointer;font-family:var(--font-family-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-body-color);text-align:left;white-space:nowrap;transition:background-color var(--transition-speed-fast) var(--transition-timing);box-sizing:border-box}.split-button__panel-item:hover:not(:disabled){background-color:var(--color-body-bg-hover)}.split-button__panel-item:active:not(:disabled){background-color:var(--color-body-bg-active)}.split-button__panel-item--disabled,.split-button__panel-item:disabled{color:var(--color-secondary-disabled);cursor:not-allowed;pointer-events:none}.split-button__panel-divider{height:1px;background-color:var(--color-border);margin:var(--spacing-1) 0}";
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (t, o, s, a) => {
+  for (var e = a > 1 ? void 0 : a ? y(o, s) : o, d = t.length - 1, p; d >= 0; d--)
+    (p = t[d]) && (e = (a ? p(o, s, e) : p(e)) || e);
+  return a && e && m(o, s, e), e;
+};
+let n = class extends v {
+  constructor() {
+    super(...arguments), this.label = "Button", this.size = "md", this.theme = "primary", this.disabled = !1, this.dropdownDisabled = !1, this.items = [], this._open = !1, this._onDocClick = (t) => {
+      this._open && (t.composedPath().includes(this) || this._setOpen(!1));
+    }, this._onDocKeydown = (t) => {
+      t.key === "Escape" && this._open && this._setOpen(!1);
+    };
+  }
+  // ── Lifecycle ────────────────────────────────────────────────────────────
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._onDocClick, { capture: !0 }), document.addEventListener("keydown", this._onDocKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._onDocClick, { capture: !0 }), document.removeEventListener("keydown", this._onDocKeydown), this._destroyPopper();
+  }
+  updated(t) {
+    super.updated(t), t.has("_open") && (this._open ? this._initPopper() : this._destroyPopper());
+  }
+  // ── Popper ───────────────────────────────────────────────────────────────
+  _initPopper() {
+    !this._dropdownBtn || !this._panel || (this._popper = f(this._dropdownBtn, this._panel, {
+      placement: "bottom-end",
+      strategy: "fixed",
+      modifiers: [
+        { name: "offset", options: { offset: [0, 4] } },
+        { name: "preventOverflow", options: { padding: 8 } },
+        { name: "flip", options: { padding: 8 } }
+      ]
+    }));
+  }
+  _destroyPopper() {
+    this._popper?.destroy(), this._popper = void 0;
+  }
+  _setOpen(t) {
+    this._open !== t && (this._open = t, this.dispatchEvent(
+      new CustomEvent(t ? "dropdown-open" : "dropdown-close", {
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  // ── Event handlers ────────────────────────────────────────────────────────
+  _onActionClick(t) {
+    t.stopPropagation(), !this.disabled && this.dispatchEvent(new CustomEvent("action", { bubbles: !0, composed: !0 }));
+  }
+  _onDropdownClick(t) {
+    t.stopPropagation(), !(this.disabled || this.dropdownDisabled) && this._setOpen(!this._open);
+  }
+  _onItemClick(t) {
+    t.disabled || (this.dispatchEvent(
+      new CustomEvent("item-select", {
+        detail: { value: t.value, item: t },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this._setOpen(!1));
+  }
+  _onKeydown(t, o) {
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), o === "action" ? this._onActionClick(t) : this._onDropdownClick(t));
+  }
+  // ── Render ────────────────────────────────────────────────────────────────
+  _renderPanel() {
+    if (!this._open) return b;
+    const t = this.items.length > 0;
+    return r`
+      <div
+        class="split-button__panel"
+        role="menu"
+        aria-label="${this.label} options"
+      >
+        ${t ? this.items.map((o) => r`
+              ${o.divider ? r`<div class="split-button__panel-divider" role="separator"></div>` : b}
+              <button
+                class="split-button__panel-item ${o.disabled ? "split-button__panel-item--disabled" : ""}"
+                role="menuitem"
+                ?disabled=${o.disabled}
+                @click=${() => this._onItemClick(o)}
+              >
+                ${o.icon ? r`<ui-icon name=${o.icon} size="16"></ui-icon>` : b}
+                <span>${o.label}</span>
+              </button>
+            `) : r`<slot name="dropdown"></slot>`}
+      </div>
+    `;
+  }
+  render() {
+    const t = this.disabled, o = this.disabled || this.dropdownDisabled;
+    return r`
+      <div
+        class="split-button split-button--${this.size} split-button--${this.theme}
+               ${this.disabled ? "split-button--disabled" : ""}
+               ${this._open ? "split-button--open" : ""}"
+        role="group"
+      >
+        <!-- Main action -->
+        <button
+          class="split-button__action"
+          ?disabled=${t}
+          aria-label=${this.label}
+          @click=${this._onActionClick}
+          @keydown=${(s) => this._onKeydown(s, "action")}
+          type="button"
+        >
+          <slot name="prefix"></slot>
+          <span class="split-button__label">
+            <slot>${this.label}</slot>
+          </span>
+        </button>
+
+        <!-- Dropdown trigger -->
+        <button
+          class="split-button__dropdown"
+          ?disabled=${o}
+          aria-label="Open dropdown"
+          aria-haspopup="menu"
+          aria-expanded=${this._open ? "true" : "false"}
+          @click=${this._onDropdownClick}
+          @keydown=${(s) => this._onKeydown(s, "dropdown")}
+          type="button"
+        >
+          <ui-icon
+            name="uil-angle-down"
+            size="16"
+            class="split-button__chevron ${this._open ? "split-button__chevron--open" : ""}"
+          ></ui-icon>
+        </button>
+
+        <!-- Dropdown panel -->
+        ${this._renderPanel()}
+      </div>
+    `;
+  }
+};
+n.styles = [_`${u(w)}`];
+i([
+  l({ type: String })
+], n.prototype, "label", 2);
+i([
+  l({ type: String })
+], n.prototype, "size", 2);
+i([
+  l({ type: String })
+], n.prototype, "theme", 2);
+i([
+  l({ type: Boolean })
+], n.prototype, "disabled", 2);
+i([
+  l({ type: Boolean })
+], n.prototype, "dropdownDisabled", 2);
+i([
+  l({ attribute: !1 })
+], n.prototype, "items", 2);
+i([
+  g()
+], n.prototype, "_open", 2);
+i([
+  c(".split-button__dropdown")
+], n.prototype, "_dropdownBtn", 2);
+i([
+  c(".split-button__panel")
+], n.prototype, "_panel", 2);
+n = i([
+  h("logosphere-split-button")
+], n);
+export {
+  n as S
+};

package/dist/split-button-BpffPlVg.cjs

@@ -0,0 +1,63 @@
+"use strict";const n=require("lit"),i=require("lit/decorators.js"),d=require("@popperjs/core");require("./ui-icon-DWl7I5BQ.cjs");const b=":host{display:inline-block;position:relative}.split-button{display:inline-flex;align-items:stretch;gap:1px;font-family:var(--font-family-base);border-radius:var(--radius-base);overflow:hidden}.split-button__action,.split-button__dropdown{display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-family:inherit;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);line-height:1.25rem;letter-spacing:-.14px;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background-color var(--transition-speed-base) var(--transition-timing);outline:none}.split-button__action:focus-visible,.split-button__dropdown:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;position:relative;z-index:1}.split-button__action:disabled,.split-button__dropdown:disabled{cursor:not-allowed;pointer-events:none}.split-button__action{gap:var(--spacing-1)}.split-button__chevron{transition:transform var(--transition-speed-base) var(--transition-timing);display:inline-flex}.split-button__chevron--open{transform:rotate(180deg)}.split-button--sm .split-button__action{padding:var(--spacing-0-5) var(--spacing-2)}.split-button--sm .split-button__dropdown{padding:var(--spacing-0-5) var(--spacing-1-5)}.split-button--md .split-button__action{padding:var(--spacing-1-5) var(--spacing-3)}.split-button--md .split-button__dropdown{padding:var(--spacing-1-5) var(--spacing-2)}.split-button--lg .split-button__action{padding:var(--spacing-2-5) var(--spacing-3)}.split-button--lg .split-button__dropdown{padding:var(--spacing-2-5) var(--spacing-2)}.split-button{background-color:#fff6}.split-button--primary .split-button__action,.split-button--primary .split-button__dropdown{background-color:var(--color-primary);color:#fff}.split-button--primary .split-button__action:hover:not(:disabled),.split-button--primary .split-button__dropdown:hover:not(:disabled){background-color:var(--color-primary-hover)}.split-button--primary .split-button__action:active:not(:disabled),.split-button--primary .split-button__dropdown:active:not(:disabled){background-color:var(--color-primary-active)}.split-button--primary.split-button--disabled,.split-button--primary .split-button__action:disabled,.split-button--primary .split-button__dropdown:disabled{background-color:var(--color-primary-disabled)}.split-button--primary.split-button--disabled .split-button__action,.split-button--primary.split-button--disabled .split-button__dropdown{background-color:var(--color-primary-disabled)}.split-button--secondary .split-button__action,.split-button--secondary .split-button__dropdown{background-color:var(--color-secondary);color:#fff}.split-button--secondary .split-button__action:hover:not(:disabled),.split-button--secondary .split-button__dropdown:hover:not(:disabled){background-color:var(--color-secondary-hover)}.split-button--secondary .split-button__action:active:not(:disabled),.split-button--secondary .split-button__dropdown:active:not(:disabled){background-color:var(--color-secondary-active)}.split-button--secondary.split-button--disabled .split-button__action,.split-button--secondary.split-button--disabled .split-button__dropdown,.split-button--secondary .split-button__action:disabled,.split-button--secondary .split-button__dropdown:disabled{background-color:var(--color-secondary-disabled)}.split-button--success .split-button__action,.split-button--success .split-button__dropdown{background-color:var(--color-success);color:#fff}.split-button--success .split-button__action:hover:not(:disabled),.split-button--success .split-button__dropdown:hover:not(:disabled){background-color:var(--color-success-hover)}.split-button--success .split-button__action:active:not(:disabled),.split-button--success .split-button__dropdown:active:not(:disabled){background-color:var(--color-success-active)}.split-button--success.split-button--disabled .split-button__action,.split-button--success.split-button--disabled .split-button__dropdown,.split-button--success .split-button__action:disabled,.split-button--success .split-button__dropdown:disabled{background-color:var(--color-success-disabled)}.split-button--danger .split-button__action,.split-button--danger .split-button__dropdown{background-color:var(--color-danger);color:#fff}.split-button--danger .split-button__action:hover:not(:disabled),.split-button--danger .split-button__dropdown:hover:not(:disabled){background-color:var(--color-danger-hover)}.split-button--danger .split-button__action:active:not(:disabled),.split-button--danger .split-button__dropdown:active:not(:disabled){background-color:var(--color-danger-active)}.split-button--danger.split-button--disabled .split-button__action,.split-button--danger.split-button--disabled .split-button__dropdown,.split-button--danger .split-button__action:disabled,.split-button--danger .split-button__dropdown:disabled{background-color:var(--color-danger-disabled)}.split-button--info .split-button__action,.split-button--info .split-button__dropdown{background-color:var(--color-info);color:#fff}.split-button--info .split-button__action:hover:not(:disabled),.split-button--info .split-button__dropdown:hover:not(:disabled){background-color:var(--color-info-hover)}.split-button--info .split-button__action:active:not(:disabled),.split-button--info .split-button__dropdown:active:not(:disabled){background-color:var(--color-info-active)}.split-button--info.split-button--disabled .split-button__action,.split-button--info.split-button--disabled .split-button__dropdown,.split-button--info .split-button__action:disabled,.split-button--info .split-button__dropdown:disabled{background-color:var(--color-info-disabled)}.split-button--warning .split-button__action,.split-button--warning .split-button__dropdown{background-color:var(--color-warning);color:var(--color-warning-emphasis)}.split-button--warning .split-button__action:hover:not(:disabled),.split-button--warning .split-button__dropdown:hover:not(:disabled){background-color:var(--color-warning-hover)}.split-button--warning .split-button__action:active:not(:disabled),.split-button--warning .split-button__dropdown:active:not(:disabled){background-color:var(--color-warning-active)}.split-button--warning.split-button--disabled .split-button__action,.split-button--warning.split-button--disabled .split-button__dropdown,.split-button--warning .split-button__action:disabled,.split-button--warning .split-button__dropdown:disabled{background-color:var(--color-warning-disabled)}.split-button__panel{position:fixed;z-index:var(--z-index-dropdown);min-width:160px;background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-base);box-shadow:var(--shadow-lg);padding:var(--spacing-1) 0;outline:none}.split-button__panel-item{display:flex;align-items:center;gap:var(--spacing-2);width:100%;padding:var(--spacing-2) var(--spacing-3);background:none;border:none;cursor:pointer;font-family:var(--font-family-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-body-color);text-align:left;white-space:nowrap;transition:background-color var(--transition-speed-fast) var(--transition-timing);box-sizing:border-box}.split-button__panel-item:hover:not(:disabled){background-color:var(--color-body-bg-hover)}.split-button__panel-item:active:not(:disabled){background-color:var(--color-body-bg-active)}.split-button__panel-item--disabled,.split-button__panel-item:disabled{color:var(--color-secondary-disabled);cursor:not-allowed;pointer-events:none}.split-button__panel-divider{height:1px;background-color:var(--color-border);margin:var(--spacing-1) 0}";var c=Object.defineProperty,u=Object.getOwnPropertyDescriptor,s=(l,t,o,e)=>{for(var r=e>1?void 0:e?u(t,o):t,a=l.length-1,p;a>=0;a--)(p=l[a])&&(r=(e?p(t,o,r):p(r))||r);return e&&r&&c(t,o,r),r};exports.SplitButton=class extends n.LitElement{constructor(){super(...arguments),this.label="Button",this.size="md",this.theme="primary",this.disabled=!1,this.dropdownDisabled=!1,this.items=[],this._open=!1,this._onDocClick=t=>{this._open&&(t.composedPath().includes(this)||this._setOpen(!1))},this._onDocKeydown=t=>{t.key==="Escape"&&this._open&&this._setOpen(!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._onDocClick,{capture:!0}),document.addEventListener("keydown",this._onDocKeydown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._onDocClick,{capture:!0}),document.removeEventListener("keydown",this._onDocKeydown),this._destroyPopper()}updated(t){super.updated(t),t.has("_open")&&(this._open?this._initPopper():this._destroyPopper())}_initPopper(){!this._dropdownBtn||!this._panel||(this._popper=d.createPopper(this._dropdownBtn,this._panel,{placement:"bottom-end",strategy:"fixed",modifiers:[{name:"offset",options:{offset:[0,4]}},{name:"preventOverflow",options:{padding:8}},{name:"flip",options:{padding:8}}]}))}_destroyPopper(){this._popper?.destroy(),this._popper=void 0}_setOpen(t){this._open!==t&&(this._open=t,this.dispatchEvent(new CustomEvent(t?"dropdown-open":"dropdown-close",{bubbles:!0,composed:!0})))}_onActionClick(t){t.stopPropagation(),!this.disabled&&this.dispatchEvent(new CustomEvent("action",{bubbles:!0,composed:!0}))}_onDropdownClick(t){t.stopPropagation(),!(this.disabled||this.dropdownDisabled)&&this._setOpen(!this._open)}_onItemClick(t){t.disabled||(this.dispatchEvent(new CustomEvent("item-select",{detail:{value:t.value,item:t},bubbles:!0,composed:!0})),this._setOpen(!1))}_onKeydown(t,o){(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),o==="action"?this._onActionClick(t):this._onDropdownClick(t))}_renderPanel(){if(!this._open)return n.nothing;const t=this.items.length>0;return n.html`
+      <div
+        class="split-button__panel"
+        role="menu"
+        aria-label="${this.label} options"
+      >
+        ${t?this.items.map(o=>n.html`
+              ${o.divider?n.html`<div class="split-button__panel-divider" role="separator"></div>`:n.nothing}
+              <button
+                class="split-button__panel-item ${o.disabled?"split-button__panel-item--disabled":""}"
+                role="menuitem"
+                ?disabled=${o.disabled}
+                @click=${()=>this._onItemClick(o)}
+              >
+                ${o.icon?n.html`<ui-icon name=${o.icon} size="16"></ui-icon>`:n.nothing}
+                <span>${o.label}</span>
+              </button>
+            `):n.html`<slot name="dropdown"></slot>`}
+      </div>
+    `}render(){const t=this.disabled,o=this.disabled||this.dropdownDisabled;return n.html`
+      <div
+        class="split-button split-button--${this.size} split-button--${this.theme}
+               ${this.disabled?"split-button--disabled":""}
+               ${this._open?"split-button--open":""}"
+        role="group"
+      >
+        <!-- Main action -->
+        <button
+          class="split-button__action"
+          ?disabled=${t}
+          aria-label=${this.label}
+          @click=${this._onActionClick}
+          @keydown=${e=>this._onKeydown(e,"action")}
+          type="button"
+        >
+          <slot name="prefix"></slot>
+          <span class="split-button__label">
+            <slot>${this.label}</slot>
+          </span>
+        </button>
+
+        <!-- Dropdown trigger -->
+        <button
+          class="split-button__dropdown"
+          ?disabled=${o}
+          aria-label="Open dropdown"
+          aria-haspopup="menu"
+          aria-expanded=${this._open?"true":"false"}
+          @click=${this._onDropdownClick}
+          @keydown=${e=>this._onKeydown(e,"dropdown")}
+          type="button"
+        >
+          <ui-icon
+            name="uil-angle-down"
+            size="16"
+            class="split-button__chevron ${this._open?"split-button__chevron--open":""}"
+          ></ui-icon>
+        </button>
+
+        <!-- Dropdown panel -->
+        ${this._renderPanel()}
+      </div>
+    `}};exports.SplitButton.styles=[n.css`${n.unsafeCSS(b)}`];s([i.property({type:String})],exports.SplitButton.prototype,"label",2);s([i.property({type:String})],exports.SplitButton.prototype,"size",2);s([i.property({type:String})],exports.SplitButton.prototype,"theme",2);s([i.property({type:Boolean})],exports.SplitButton.prototype,"disabled",2);s([i.property({type:Boolean})],exports.SplitButton.prototype,"dropdownDisabled",2);s([i.property({attribute:!1})],exports.SplitButton.prototype,"items",2);s([i.state()],exports.SplitButton.prototype,"_open",2);s([i.query(".split-button__dropdown")],exports.SplitButton.prototype,"_dropdownBtn",2);s([i.query(".split-button__panel")],exports.SplitButton.prototype,"_panel",2);exports.SplitButton=s([i.customElement("logosphere-split-button")],exports.SplitButton);

package/dist/split-button.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./split-button-BpffPlVg.cjs");Object.defineProperty(exports,"SplitButton",{enumerable:!0,get:()=>t.SplitButton});

package/dist/split-button.js

@@ -0,0 +1,4 @@
+import { S as p } from "./split-button-BdBweoip.js";
+export {
+  p as SplitButton
+};