@logosphere-ui/core 0.0.0-alpha.43 → 0.0.0-alpha.45

package/dist/popover-M5ZcS5rj.js

@@ -0,0 +1,161 @@
+import { unsafeCSS as c, css as v, LitElement as m, html as a } from "lit";
+import { property as p, query as h, customElement as f } from "lit/decorators.js";
+import { createPopper as u } from "@popperjs/core";
+const g = ':host{display:inline-block}.popover__wrapper{position:relative;display:var(--popover-wrapper-display, inline-block);width:var(--popover-wrapper-width, auto);min-width:var(--popover-wrapper-min-width, auto);max-width:var(--popover-wrapper-max-width, none);font-family:var(--font-family-base)}.popover__trigger{display:var(--popover-trigger-display, inline-flex);width:var(--popover-trigger-width, auto);min-width:var(--popover-trigger-min-width, auto);max-width:var(--popover-trigger-max-width, none)}.popover__panel{position:relative;overflow:visible;z-index:var(--z-index-popover);min-width:var(--popover-min-width, 240px);max-width:var(--popover-max-width, none);border-radius:var(--radius-md);border:1px solid var(--color-border);background-color:var(--color-body-bg);box-shadow:var(--shadow-md)}.popover__content{position:relative;z-index:1;background-color:var(--color-body-bg);border-radius:var(--radius-md);overflow:hidden}.popover__content:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background-color:var(--color-body-bg);border-radius:var(--radius-md) var(--radius-md) 0 0;z-index:1;pointer-events:none}.popover__content>*{position:relative;z-index:2}.popover__title{padding:10px var(--spacing-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-body-text)}.popover__body{padding:var(--popover-body-padding, var(--spacing-3));font-size:var(--font-size-sm);color:var(--color-secondary)}.popover__body--with-border{border-top:1px solid var(--color-border)}.popper-arrow{position:absolute;width:12px;height:12px;pointer-events:none;z-index:0}.popper-arrow:before{content:"";position:absolute;inset:0;background:var(--color-border);transform:rotate(45deg)}.popper-arrow:after{content:"";position:absolute;inset:1px;background:var(--color-body-bg);transform:rotate(45deg)}[data-popper]{position:relative;overflow:visible}[data-popper-placement^=bottom]>.popper-arrow{top:-6px;left:50%;transform:translate(-50%,-50%)}[data-popper-placement^=top]>.popper-arrow{bottom:-6px;left:50%;transform:translate(-50%,50%)}[data-popper-placement^=left]>.popper-arrow{right:-6px;top:50%;transform:translate(50%,-50%)}[data-popper-placement^=right]>.popper-arrow{left:-6px;top:50%;transform:translate(-50%,-50%)}';
+var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (e, r, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? w(r, s) : r, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (i = (n ? d(r, s, i) : d(i)) || i);
+  return n && i && b(r, s, i), i;
+};
+let t = class extends m {
+  constructor() {
+    super(...arguments), this.title = "", this.trigger = "click", this.placement = "bottom", this.offset = 8, this.delay = 0, this.open = !1, this.closeOnOutsideClick = !0, this.noArrow = !1, this.disabled = !1, this.handleDocumentClick = (e) => {
+      !this.open || !this.closeOnOutsideClick || e.composedPath().includes(this) || this.setOpen(!1);
+    }, this.toggle = (e) => {
+      this.disabled || (this.trigger === "click" || this.trigger === "both") && (e?.stopPropagation(), this.clearHoverOpenTimer(), this.setOpen(!this.open));
+    }, this.handleMouseEnter = () => {
+      if (this.disabled || this.trigger !== "hover" && this.trigger !== "both") return;
+      this.clearHoverOpenTimer();
+      const e = Math.max(0, this.delay);
+      if (e === 0) {
+        this.setOpen(!0);
+        return;
+      }
+      this.hoverOpenTimer = setTimeout(() => {
+        this.hoverOpenTimer = void 0, this.setOpen(!0);
+      }, e);
+    }, this.handleMouseLeave = () => {
+      this.clearHoverOpenTimer(), !this.disabled && (this.trigger === "hover" || this.trigger === "both") && this.setOpen(!1);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this.handleDocumentClick, { capture: !0 });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleDocumentClick, { capture: !0 }), this.clearHoverOpenTimer(), this.destroyPopper();
+  }
+  updated(e) {
+    super.updated(e);
+    const r = e.has("placement"), s = e.has("open") && this.open;
+    if (e.has("open") && !this.open) {
+      this.destroyPopper();
+      return;
+    }
+    (s || r) && this.open && this.updatePopper();
+  }
+  setOpen(e) {
+    this.disabled && (e = !1), e || this.clearHoverOpenTimer(), this.open !== e && (this.open = e, this.dispatchEvent(new CustomEvent(e ? "popover-open" : "popover-close", {
+      bubbles: !0,
+      composed: !0
+    })));
+  }
+  clearHoverOpenTimer() {
+    this.hoverOpenTimer && (clearTimeout(this.hoverOpenTimer), this.hoverOpenTimer = void 0);
+  }
+  updatePopper() {
+    if (!this.isConnected || !this.open) return;
+    const e = this.triggerElement, r = this.popperElement;
+    if (!(!e || !r)) {
+      if (this.popperInstance) {
+        this.popperInstance.setOptions({
+          placement: this.placement,
+          modifiers: this.getPopperModifiers(),
+          strategy: "fixed"
+        }), this.popperInstance.update();
+        return;
+      }
+      this.popperInstance = u(e, r, {
+        placement: this.placement,
+        strategy: "fixed",
+        modifiers: this.getPopperModifiers()
+      });
+    }
+  }
+  getPopperModifiers() {
+    const e = [
+      { name: "offset", options: { offset: [0, this.offset] } },
+      { name: "preventOverflow", options: { padding: 8 } },
+      { name: "flip", options: { padding: 8 } }
+    ];
+    return !this.noArrow && this.popperArrowElement && e.push({ name: "arrow", options: { element: this.popperArrowElement, padding: 8 } }), e;
+  }
+  destroyPopper() {
+    this.popperInstance && (this.popperInstance.destroy(), this.popperInstance = void 0);
+  }
+  render() {
+    const e = !!this.title;
+    return a`
+      <div
+        class="popover__wrapper"
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+      >
+        <div class="popover__trigger" part="trigger" @click=${this.toggle}>
+          <slot name="trigger"></slot>
+        </div>
+
+        ${this.open ? a`
+          <div
+            data-popper
+            class="popover__panel"
+            role="dialog"
+            aria-hidden=${this.open ? "false" : "true"}
+          >
+            ${this.noArrow ? null : a`<div data-popper-arrow class="popper-arrow"></div>`}
+            <div class="popover__content">
+              ${this.title ? a`
+                <div class="popover__title">${this.title}</div>
+              ` : null}
+              <div class="popover__body ${e ? "popover__body--with-border" : ""}">
+                <slot></slot>
+              </div>
+            </div>
+          </div>
+        ` : null}
+      </div>
+    `;
+  }
+};
+t.styles = [v`${c(g)}`];
+o([
+  p({ type: String })
+], t.prototype, "title", 2);
+o([
+  p({ type: String })
+], t.prototype, "trigger", 2);
+o([
+  p({ type: String })
+], t.prototype, "placement", 2);
+o([
+  p({ type: Number })
+], t.prototype, "offset", 2);
+o([
+  p({ type: Number })
+], t.prototype, "delay", 2);
+o([
+  p({ type: Boolean, reflect: !0 })
+], t.prototype, "open", 2);
+o([
+  p({ type: Boolean })
+], t.prototype, "closeOnOutsideClick", 2);
+o([
+  p({ type: Boolean })
+], t.prototype, "noArrow", 2);
+o([
+  p({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+o([
+  h('[part="trigger"]')
+], t.prototype, "triggerElement", 2);
+o([
+  h("[data-popper]")
+], t.prototype, "popperElement", 2);
+o([
+  h("[data-popper-arrow]")
+], t.prototype, "popperArrowElement", 2);
+t = o([
+  f("logosphere-popover")
+], t);
+export {
+  t as P
+};

package/dist/popover.cjs

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

package/dist/popover.js

@@ -1,4 +1,4 @@
-import { P as e } from "./popover-DDaG8MSj.js";
+import { P as e } from "./popover-M5ZcS5rj.js";
 export {
   e as Popover
 };

package/dist/shared/icons/index.d.ts

@@ -0,0 +1 @@
+export { UiIcon } from "./ui-icon.js";

package/dist/slider-DSRs5uhl.cjs

@@ -0,0 +1,108 @@
+"use strict";const r=require("lit"),s=require("lit/decorators.js"),u=':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 c=Object.defineProperty,_=Object.getOwnPropertyDescriptor,a=(d,t,e,i)=>{for(var n=i>1?void 0:i?_(t,e):t,l=d.length-1,o;l>=0;l--)(o=d[l])&&(n=(i?o(t,e,n):o(n))||n);return i&&n&&c(t,e,n),n};exports.Slider=class extends r.LitElement{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}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)}_thumbLeft(t){return`calc(${t}% + ${(.5-t/100)*16}px)`}_onSingleChange(t){const e=t.target;this.value=Number(e.value),this._emit("change",{value:this.value})}_onStartChange(t){const e=t.target,i=Math.min(Number(e.value),this.rangeEnd-this.minDistance);this.rangeStart=i,this._emit("change",{rangeStart:this.rangeStart,rangeEnd:this.rangeEnd})}_onEndChange(t){const e=t.target,i=Math.max(Number(e.value),this.rangeStart+this.minDistance);this.rangeEnd=i,this._emit("change",{rangeStart:this.rangeStart,rangeEnd:this.rangeEnd})}_emit(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}_renderFill(){return this.range?r.html`
+        <div
+          class="slider__fill"
+          style="left: ${this._startPct}%; width: ${this._endPct-this._startPct}%"
+        ></div>
+      `:r.html`<div class="slider__fill" style="width: ${this._valuePct}%"></div>`}_renderTooltip(t,e,i){return this.tooltip==="never"||this.tooltip==="hover"&&!i?r.nothing:r.html`
+      <div class="slider__tooltip" style="left: ${this._thumbLeft(e)}">${t}</div>
+    `}_renderScale(){if(!this.showScale)return r.nothing;const t=this.max-this.min,e=Math.min(Math.round(t/this.step)+1,11),i=Array.from({length:e},(n,l)=>{const o=e>1?l/(e-1)*100:0,h=this.min+o/100*t,p=this.percentage?`${Math.round(h)}%`:String(Math.round(h));return{pct:o,display:p}});return r.html`
+      <div class="slider__scale">
+        ${i.map(({pct:n,display:l})=>r.html`
+          <span class="slider__scale-item" style="left: ${this._thumbLeft(n)}">${l}</span>
+        `)}
+      </div>
+    `}_renderLabels(){if(!this._isLabeled)return r.nothing;const t=this.labels.length;return r.html`
+      <div class="slider__scale">
+        ${this.labels.map((e,i)=>{const n=t>1?i/(t-1)*100:0;return r.html`
+            <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 r.html`
+      <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,i=this._startPct>=100?4:3,n=this._startPct>=100?3:4;return r.html`
+      <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: ${i}"
+          .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 r.html`
+      <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>
+    `}};exports.Slider.styles=[r.css`${r.unsafeCSS(u)}`];a([s.property({type:Number})],exports.Slider.prototype,"value",2);a([s.property({type:Number})],exports.Slider.prototype,"min",2);a([s.property({type:Number})],exports.Slider.prototype,"max",2);a([s.property({type:Number})],exports.Slider.prototype,"step",2);a([s.property({type:Boolean})],exports.Slider.prototype,"disabled",2);a([s.property({type:Boolean})],exports.Slider.prototype,"range",2);a([s.property({type:Number})],exports.Slider.prototype,"rangeStart",2);a([s.property({type:Number})],exports.Slider.prototype,"rangeEnd",2);a([s.property({type:Number})],exports.Slider.prototype,"minDistance",2);a([s.property({type:String})],exports.Slider.prototype,"tooltip",2);a([s.property({type:Boolean})],exports.Slider.prototype,"showScale",2);a([s.property({type:Boolean})],exports.Slider.prototype,"percentage",2);a([s.property({type:Array})],exports.Slider.prototype,"labels",2);a([s.state()],exports.Slider.prototype,"_hoverStart",2);a([s.state()],exports.Slider.prototype,"_hoverEnd",2);exports.Slider=a([s.customElement("logosphere-slider")],exports.Slider);

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
+};