@logosphere-ui/core 0.0.0-alpha.4 → 0.0.0-alpha.42

package/dist/tab-CuBCFGoO.js

@@ -0,0 +1,204 @@
+import { unsafeCSS as _, css as u, LitElement as v, nothing as b, html as d } from "lit";
+import { property as c, state as h, query as f, customElement as g } from "lit/decorators.js";
+const m = ".tab{width:100%;font-family:var(--font-family-base)}.tab__list{display:flex;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid var(--color-border);scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.tab__list::-webkit-scrollbar{display:none}.tab__button{display:inline-flex;flex-direction:row;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-4);min-width:120px;position:relative;cursor:pointer;border:none;border-bottom:2px solid transparent;background:transparent;font-family:var(--font-family-base);white-space:nowrap;transition:background-color var(--transition-speed-base) var(--transition-timing),border-color var(--transition-speed-base) var(--transition-timing)}.tab__button:hover:not(.tab__button--disabled):not(.tab__button--active){background-color:var(--color-light)}.tab__button--active{border-bottom-color:var(--color-primary)}.tab__button--disabled{cursor:not-allowed;opacity:.4;pointer-events:none}.tab__icon{font-size:var(--font-size-xl);flex-shrink:0;color:inherit;line-height:1}.tab__content{display:flex;flex-direction:column;align-items:flex-start}.tab__label{font-weight:var(--font-weight-medium);font-size:var(--font-size-sm);color:var(--color-body-text)}.tab__label--inactive{color:var(--color-tertiary)}.tab__description{font-size:var(--font-size-xs);text-align:left;color:var(--color-tertiary)}.tab__description--active{color:var(--color-secondary)}.tab__panel{padding:var(--spacing-4);outline:none}.tab__panel--hidden{display:none}.tab--segmented .tab__list{display:inline-flex;position:relative;border-bottom:none;background-color:var(--color-light);border-radius:var(--radius-base);padding:0;gap:0;overflow:visible}.tab__segment-pill{position:absolute;top:0;bottom:0;left:0;width:0;background-color:var(--color-white, #ffffff);border:1px solid var(--color-border);border-radius:var(--radius-base);pointer-events:none;z-index:0;transition:transform .22s cubic-bezier(.35,0,.25,1),width .22s cubic-bezier(.35,0,.25,1)}.tab--segmented .tab__button{position:relative;z-index:1;min-width:unset;height:32px;padding:var(--spacing-1) var(--spacing-3);border:1px solid transparent;border-bottom:1px solid transparent;border-radius:var(--radius-base);background:transparent;transition:color var(--transition-speed-base) var(--transition-timing)}.tab--segmented .tab__button:hover:not(.tab__button--disabled):not(.tab__button--active){background-color:transparent}.tab--segmented .tab__button--active{background-color:transparent;border-color:transparent}.tab--segmented .tab__label{color:var(--color-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:20px;letter-spacing:-.14px}.tab--segmented .tab__label--inactive{color:var(--color-secondary)}.tab--segmented .tab__button--active .tab__label,.tab--segmented .tab__button--active .tab__label--inactive{color:var(--color-primary)}.tab--segmented .tab__icon{color:inherit;font-size:var(--font-size-base)}.tab--segmented .tab__panels{margin-top:var(--spacing-3)}.tab--segmented .tab__panel{padding:0}";
+var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (t, i, e, a) => {
+  for (var s = a > 1 ? void 0 : a ? w(i, e) : i, o = t.length - 1, r; o >= 0; o--)
+    (r = t[o]) && (s = (a ? r(i, e, s) : r(s)) || s);
+  return a && s && y(i, e, s), s;
+};
+let n = class extends v {
+  constructor() {
+    super(...arguments), this.tabs = [], this.activeTab = "", this.lazy = !0, this.variant = "default", this._focusedIndex = 0, this._renderedTabs = /* @__PURE__ */ new Set(), this._pillInitialized = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), !this.activeTab && this.tabs.length > 0 && (this.activeTab = this.tabs[0].id);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._pillResizeObserver?.disconnect(), this._pillResizeObserver = void 0;
+  }
+  willUpdate(t) {
+    if (super.willUpdate(t), t.has("activeTab") && this.activeTab) {
+      this._renderedTabs.add(this.activeTab);
+      const i = this.tabs.findIndex((e) => e.id === this.activeTab);
+      i !== -1 && (this._focusedIndex = i);
+    }
+    t.has("tabs") && this.tabs.length > 0 && (this.tabs.some((e) => e.id === this.activeTab) || (this.activeTab = this.tabs[0].id), this._focusedIndex = this.tabs.findIndex((e) => e.id === this.activeTab));
+  }
+  // ==================== EVENTS ====================
+  handleTabClick(t, i) {
+    if (i) return;
+    const e = this.activeTab;
+    this.activeTab = t, this._focusedIndex = this.tabs.findIndex((a) => a.id === t), this.dispatchEvent(
+      new CustomEvent("tab-change", {
+        detail: { oldTab: e, newTab: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleKeyDown(t) {
+    const { tabs: i } = this;
+    if (i.filter((s) => !s.disabled).length === 0) return;
+    let e = this._focusedIndex;
+    const a = this._focusedIndex;
+    switch (t.key) {
+      case "ArrowLeft":
+        t.preventDefault();
+        do
+          e = e > 0 ? e - 1 : i.length - 1;
+        while (i[e]?.disabled && e !== a);
+        break;
+      case "ArrowRight":
+        t.preventDefault();
+        do
+          e = e < i.length - 1 ? e + 1 : 0;
+        while (i[e]?.disabled && e !== a);
+        break;
+      case "Home":
+        for (t.preventDefault(), e = 0; i[e]?.disabled && e < i.length - 1; ) e++;
+        break;
+      case "End":
+        for (t.preventDefault(), e = i.length - 1; i[e]?.disabled && e > 0; ) e--;
+        break;
+      default:
+        return;
+    }
+    if (e !== this._focusedIndex && !i[e]?.disabled) {
+      const s = this.activeTab;
+      this._focusedIndex = e, this.activeTab = i[e].id, this.updateComplete.then(() => {
+        this.shadowRoot?.querySelector(
+          `[role="tab"][data-tab-id="${i[e].id}"]`
+        )?.focus();
+      }), this.dispatchEvent(
+        new CustomEvent("tab-change", {
+          detail: { oldTab: s, newTab: i[e].id },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }
+  }
+  updated(t) {
+    super.updated(t), this.variant === "segmented" && (this._ensurePillObserver(), this._updateSegmentPill());
+  }
+  /**
+   * Observe the tablist so the pill is repositioned whenever the list gains or
+   * changes size — this covers the cases where the first render happens while
+   * the tab is hidden (nested/lazy panels) or before web fonts load, when
+   * layout measurements would otherwise be 0 / stale.
+   */
+  _ensurePillObserver() {
+    if (this._pillResizeObserver) return;
+    const t = this.shadowRoot?.querySelector(".tab__list");
+    !t || typeof ResizeObserver > "u" || (this._pillResizeObserver = new ResizeObserver(() => this._updateSegmentPill()), this._pillResizeObserver.observe(t));
+  }
+  _updateSegmentPill() {
+    const t = this.shadowRoot?.querySelector(".tab__segment-pill"), i = this.shadowRoot?.querySelector(".tab__button--active"), e = this.shadowRoot?.querySelector(".tab__list");
+    if (!t || !i || !e) return;
+    const a = e.getBoundingClientRect(), s = i.getBoundingClientRect();
+    if (s.width === 0) return;
+    const o = parseFloat(getComputedStyle(e).paddingLeft) || 0, r = s.left - a.left - e.clientLeft - o + e.scrollLeft, p = s.width;
+    this._pillInitialized ? (t.style.transform = `translateX(${r}px)`, t.style.width = `${p}px`) : (t.style.transition = "none", t.style.transform = `translateX(${r}px)`, t.style.width = `${p}px`, requestAnimationFrame(() => {
+      t.style.transition = "";
+    }), this._pillInitialized = !0);
+  }
+  scrollTabIntoView(t) {
+    this.updateComplete.then(() => {
+      const i = this.shadowRoot?.querySelector(
+        `[role="tab"][data-tab-id="${t}"]`
+      );
+      if (i && this.tablist) {
+        const e = this.tablist.getBoundingClientRect(), a = i.getBoundingClientRect();
+        a.left < e.left ? this.tablist.scrollLeft -= e.left - a.left + 16 : a.right > e.right && (this.tablist.scrollLeft += a.right - e.right + 16);
+      }
+    });
+  }
+  // ==================== RENDER ====================
+  renderTabButton(t, i) {
+    const e = this.activeTab === t.id, a = this._focusedIndex === i, s = [
+      "tab__button",
+      e ? "tab__button--active" : "",
+      t.disabled ? "tab__button--disabled" : ""
+    ].filter(Boolean).join(" "), o = ["tab__label", e ? "" : "tab__label--inactive"].filter(Boolean).join(" "), r = ["tab__description", e ? "tab__description--active" : ""].filter(Boolean).join(" ");
+    return d`
+      <button
+        role="tab"
+        class=${s}
+        data-tab-id=${t.id}
+        aria-selected=${e ? "true" : "false"}
+        aria-controls="panel-${t.id}"
+        tabindex=${e || a ? "0" : "-1"}
+        ?disabled=${t.disabled}
+        @click=${() => this.handleTabClick(t.id, t.disabled)}
+        @focus=${() => this.scrollTabIntoView(t.id)}
+      >
+        ${t.icon ? d`<i class="${t.icon} tab__icon"></i>` : b}
+        <div class="tab__content">
+          <span class=${o}>${t.label}</span>
+          ${t.description ? d`<span class=${r}>${t.description}</span>` : b}
+        </div>
+      </button>
+    `;
+  }
+  renderTabPanel(t) {
+    const i = this.activeTab === t.id;
+    if (!(!this.lazy || this._renderedTabs.has(t.id))) return b;
+    const a = ["tab__panel", i ? "" : "tab__panel--hidden"].filter(Boolean).join(" ");
+    return d`
+      <div
+        role="tabpanel"
+        id="panel-${t.id}"
+        aria-labelledby="tab-${t.id}"
+        class=${a}
+        tabindex="0"
+      >
+        <slot name=${`panel-${t.id}`}>
+          ${typeof t.content == "string" ? d`${t.content}` : b}
+        </slot>
+      </div>
+    `;
+  }
+  render() {
+    return d`
+      <div class="tab tab--${this.variant}">
+        <div role="tablist" aria-label="Tabs" class="tab__list" @keydown=${this.handleKeyDown}>
+          ${this.variant === "segmented" ? d`<span class="tab__segment-pill" aria-hidden="true"></span>` : b}
+          ${this.tabs.map((t, i) => this.renderTabButton(t, i))}
+        </div>
+        <div class="tab__panels">${this.tabs.map((t) => this.renderTabPanel(t))}</div>
+      </div>
+    `;
+  }
+};
+n.styles = [
+  u`
+      ${_(m)}
+    `
+];
+l([
+  c({ type: Array })
+], n.prototype, "tabs", 2);
+l([
+  c({ type: String })
+], n.prototype, "activeTab", 2);
+l([
+  c({ type: Boolean })
+], n.prototype, "lazy", 2);
+l([
+  c({ type: String })
+], n.prototype, "variant", 2);
+l([
+  h()
+], n.prototype, "_focusedIndex", 2);
+l([
+  h()
+], n.prototype, "_renderedTabs", 2);
+l([
+  f('[role="tablist"]')
+], n.prototype, "tablist", 2);
+n = l([
+  g("logosphere-tab")
+], n);
+export {
+  n as L
+};

package/dist/tab.cjs

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

package/dist/tab.js

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

package/dist/text-area-C73JxnqH.js

@@ -0,0 +1,235 @@
+import { unsafeCSS as c, css as y, LitElement as m, nothing as n, html as u } from "lit";
+import { query as _, property as i, state as d, customElement as x } from "lit/decorators.js";
+import { live as g } from "lit/directives/live.js";
+import "./formfield-O327HYt0.js";
+import "./ui-icon-BMJNdIOq.js";
+const f = ".textarea__wrap{position:relative;flex:1;min-width:0}.textarea__field{display:block;width:100%;background:transparent;border:none;outline:none;font-size:14px;font-family:var(--font-family-base);font-weight:var(--font-weight-regular);line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text);box-sizing:border-box}.textarea__field::placeholder{color:var(--color-tertiary)}.textarea__field:disabled{cursor:not-allowed}.textarea__field--resize-none{resize:none}.textarea__field--resize-vertical{resize:vertical}.textarea__field--resize-horizontal{resize:horizontal}.textarea__field--resize-both{resize:both}.textarea__field--auto-resize{resize:none;overflow:hidden}.textarea__counter{position:absolute;bottom:5px;right:18px;font-size:11px;font-weight:var(--font-weight-medium);line-height:1rem;letter-spacing:-.11px;color:var(--color-secondary);background-color:var(--color-light-bg-2);border-radius:var(--radius-sm, 4px);padding:0 var(--spacing-1);white-space:nowrap;-webkit-user-select:none;user-select:none;pointer-events:none}.textarea__wrap--no-grip .textarea__counter{right:4px}.textarea__clear-btn{border:none;background:transparent;color:var(--color-tertiary);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;outline:none;line-height:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.textarea__clear-btn:hover{color:var(--color-body-text)}";
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, r = (e, a, s, o) => {
+  for (var l = o > 1 ? void 0 : o ? b(a, s) : a, h = e.length - 1, p; h >= 0; h--)
+    (p = e[h]) && (l = (o ? p(a, s, l) : p(l)) || l);
+  return o && l && v(a, s, l), l;
+};
+let t = class extends m {
+  constructor() {
+    super(...arguments), this.value = "", this.placeholder = "", this.name = "", this.autocomplete = "", this.rows = 3, this.maxRows = 8, this.wrap = "soft", this.resize = "vertical", this.autoResize = !0, this.size = "default", this.variant = "default", this.label = "", this.helper = "", this.error = "", this.required = !1, this.disabled = !1, this.readonly = !1, this._internalError = "", this._charCount = 0, this.handleInput = (e) => {
+      const a = e.target;
+      this.value = a.value, this._charCount = this.value.length, this.autoResize && this.adjustHeight(), this._internalError && (this._internalError = "", this._textareaElement.setCustomValidity("")), this.dispatchEvent(new CustomEvent("input", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this.value, originalEvent: e }
+      }));
+    }, this.handleChange = (e) => {
+      const a = e.target;
+      this.value = a.value, a.checkValidity() || (this._internalError = a.validationMessage), this.dispatchEvent(new CustomEvent("change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this.value, originalEvent: e }
+      }));
+    }, this.handleKeyDown = (e) => {
+      this.dispatchEvent(new CustomEvent("keydown", {
+        bubbles: !0,
+        composed: !0,
+        detail: { key: e.key, originalEvent: e }
+      }));
+    }, this.handleKeyUp = (e) => {
+      this.dispatchEvent(new CustomEvent("keyup", {
+        bubbles: !0,
+        composed: !0,
+        detail: { key: e.key, originalEvent: e }
+      }));
+    }, this.handleClear = () => {
+      this.value = "", this._charCount = 0, this._textareaElement && (this._textareaElement.value = "", this.autoResize && this.adjustHeight()), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("input", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: "", originalEvent: null }
+      }));
+    };
+  }
+  get textareaElement() {
+    return this._textareaElement;
+  }
+  focus() {
+    this._textareaElement?.focus();
+  }
+  blur() {
+    this._textareaElement?.blur();
+  }
+  select() {
+    this._textareaElement?.select();
+  }
+  setSelectionRange(e, a, s) {
+    this._textareaElement?.setSelectionRange(e, a, s);
+  }
+  checkValidity() {
+    return this._textareaElement?.checkValidity() ?? !0;
+  }
+  reportValidity() {
+    return this._textareaElement?.reportValidity() ?? !0;
+  }
+  setCustomValidity(e) {
+    this._textareaElement?.setCustomValidity(e), this._internalError = e, this.requestUpdate();
+  }
+  adjustHeight() {
+    if (!this.autoResize || !this._textareaElement) return;
+    const e = this._textareaElement;
+    e.style.height = "", e.style.overflow = "hidden";
+    const a = e.scrollHeight;
+    if (a !== 0) {
+      if (this.maxRows > 0) {
+        const s = parseFloat(getComputedStyle(e).lineHeight) || 20, o = Math.round(s * this.maxRows);
+        if (a >= o) {
+          e.style.height = `${o}px`, e.style.overflow = "auto";
+          return;
+        }
+      }
+      e.style.height = `${a}px`;
+    }
+  }
+  getResizeClass() {
+    return this.autoResize ? "textarea__field--auto-resize" : {
+      none: "textarea__field--resize-none",
+      vertical: "textarea__field--resize-vertical",
+      horizontal: "textarea__field--resize-horizontal",
+      both: "textarea__field--resize-both"
+    }[this.resize];
+  }
+  firstUpdated() {
+    this._charCount = this.value.length, this.autoResize && requestAnimationFrame(() => this.adjustHeight());
+  }
+  updated(e) {
+    super.updated(e), e.has("value") && (this._charCount = this.value.length, this.autoResize && this.adjustHeight());
+  }
+  getWrapClass() {
+    return this.autoResize || this.resize === "none" ? "textarea__wrap textarea__wrap--no-grip" : "textarea__wrap";
+  }
+  render() {
+    const e = this.error || this._internalError, a = !!this.value && !this.disabled && !this.readonly, s = this.maxlength != null, o = `textarea__field ${this.getResizeClass()}`;
+    return u`
+      <logosphere-formfield
+        .label=${this.label}
+        .helper=${this.helper}
+        .error=${e}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        .readonly=${this.readonly}
+        .size=${this.size}
+        .variant=${this.variant}
+        .multiline=${!0}
+      >
+        <slot name="prefix" slot="prefix"></slot>
+        <div class="${this.getWrapClass()}">
+          <textarea
+            class="${o}"
+            .value=${g(this.value)}
+            placeholder=${this.placeholder || n}
+            name=${this.name || n}
+            autocomplete=${this.autocomplete || n}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            minlength=${this.minlength ?? n}
+            maxlength=${this.maxlength ?? n}
+            rows=${this.rows}
+            cols=${this.cols ?? n}
+            wrap=${this.wrap}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+            @keydown=${this.handleKeyDown}
+            @keyup=${this.handleKeyUp}
+          ></textarea>
+          ${s ? u`
+            <span class="textarea__counter">${this._charCount}/${this.maxlength}</span>
+          ` : n}
+        </div>
+        ${a ? u`
+          <button
+            type="button"
+            slot="clear"
+            class="textarea__clear-btn"
+            @click=${this.handleClear}
+            tabindex="-1"
+          >
+            <ui-icon name="uil-times" size="14"></ui-icon>
+          </button>
+        ` : n}
+        <slot name="suffix" slot="suffix"></slot>
+      </logosphere-formfield>
+    `;
+  }
+};
+t.styles = [y`${c(f)}`];
+r([
+  _("textarea")
+], t.prototype, "_textareaElement", 2);
+r([
+  i({ type: String })
+], t.prototype, "value", 2);
+r([
+  i({ type: String })
+], t.prototype, "placeholder", 2);
+r([
+  i({ type: String })
+], t.prototype, "name", 2);
+r([
+  i({ type: String })
+], t.prototype, "autocomplete", 2);
+r([
+  i({ type: Number })
+], t.prototype, "minlength", 2);
+r([
+  i({ type: Number })
+], t.prototype, "maxlength", 2);
+r([
+  i({ type: Number })
+], t.prototype, "rows", 2);
+r([
+  i({ type: Number })
+], t.prototype, "maxRows", 2);
+r([
+  i({ type: Number })
+], t.prototype, "cols", 2);
+r([
+  i({ type: String })
+], t.prototype, "wrap", 2);
+r([
+  i({ type: String })
+], t.prototype, "resize", 2);
+r([
+  i({ type: Boolean })
+], t.prototype, "autoResize", 2);
+r([
+  i({ type: String })
+], t.prototype, "size", 2);
+r([
+  i({ type: String })
+], t.prototype, "variant", 2);
+r([
+  i({ type: String })
+], t.prototype, "label", 2);
+r([
+  i({ type: String })
+], t.prototype, "helper", 2);
+r([
+  i({ type: String })
+], t.prototype, "error", 2);
+r([
+  i({ type: Boolean })
+], t.prototype, "required", 2);
+r([
+  i({ type: Boolean })
+], t.prototype, "disabled", 2);
+r([
+  i({ type: Boolean })
+], t.prototype, "readonly", 2);
+r([
+  d()
+], t.prototype, "_internalError", 2);
+r([
+  d()
+], t.prototype, "_charCount", 2);
+t = r([
+  x("logosphere-textarea")
+], t);
+export {
+  t as T
+};

package/dist/text-area-Cprb-azV.cjs

@@ -0,0 +1,51 @@
+"use strict";const i=require("lit"),t=require("lit/decorators.js"),p=require("lit/directives/live.js");require("./formfield-CRcyUMvQ.cjs");require("./ui-icon-DIucAQC_.cjs");const u=".textarea__wrap{position:relative;flex:1;min-width:0}.textarea__field{display:block;width:100%;background:transparent;border:none;outline:none;font-size:14px;font-family:var(--font-family-base);font-weight:var(--font-weight-regular);line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text);box-sizing:border-box}.textarea__field::placeholder{color:var(--color-tertiary)}.textarea__field:disabled{cursor:not-allowed}.textarea__field--resize-none{resize:none}.textarea__field--resize-vertical{resize:vertical}.textarea__field--resize-horizontal{resize:horizontal}.textarea__field--resize-both{resize:both}.textarea__field--auto-resize{resize:none;overflow:hidden}.textarea__counter{position:absolute;bottom:5px;right:18px;font-size:11px;font-weight:var(--font-weight-medium);line-height:1rem;letter-spacing:-.11px;color:var(--color-secondary);background-color:var(--color-light-bg-2);border-radius:var(--radius-sm, 4px);padding:0 var(--spacing-1);white-space:nowrap;-webkit-user-select:none;user-select:none;pointer-events:none}.textarea__wrap--no-grip .textarea__counter{right:4px}.textarea__clear-btn{border:none;background:transparent;color:var(--color-tertiary);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;outline:none;line-height:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.textarea__clear-btn:hover{color:var(--color-body-text)}";var d=Object.defineProperty,c=Object.getOwnPropertyDescriptor,r=(n,e,a,s)=>{for(var o=s>1?void 0:s?c(e,a):e,l=n.length-1,h;l>=0;l--)(h=n[l])&&(o=(s?h(e,a,o):h(o))||o);return s&&o&&d(e,a,o),o};exports.TextArea=class extends i.LitElement{constructor(){super(...arguments),this.value="",this.placeholder="",this.name="",this.autocomplete="",this.rows=3,this.maxRows=8,this.wrap="soft",this.resize="vertical",this.autoResize=!0,this.size="default",this.variant="default",this.label="",this.helper="",this.error="",this.required=!1,this.disabled=!1,this.readonly=!1,this._internalError="",this._charCount=0,this.handleInput=e=>{const a=e.target;this.value=a.value,this._charCount=this.value.length,this.autoResize&&this.adjustHeight(),this._internalError&&(this._internalError="",this._textareaElement.setCustomValidity("")),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:this.value,originalEvent:e}}))},this.handleChange=e=>{const a=e.target;this.value=a.value,a.checkValidity()||(this._internalError=a.validationMessage),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value,originalEvent:e}}))},this.handleKeyDown=e=>{this.dispatchEvent(new CustomEvent("keydown",{bubbles:!0,composed:!0,detail:{key:e.key,originalEvent:e}}))},this.handleKeyUp=e=>{this.dispatchEvent(new CustomEvent("keyup",{bubbles:!0,composed:!0,detail:{key:e.key,originalEvent:e}}))},this.handleClear=()=>{this.value="",this._charCount=0,this._textareaElement&&(this._textareaElement.value="",this.autoResize&&this.adjustHeight()),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:"",originalEvent:null}}))}}get textareaElement(){return this._textareaElement}focus(){this._textareaElement?.focus()}blur(){this._textareaElement?.blur()}select(){this._textareaElement?.select()}setSelectionRange(e,a,s){this._textareaElement?.setSelectionRange(e,a,s)}checkValidity(){return this._textareaElement?.checkValidity()??!0}reportValidity(){return this._textareaElement?.reportValidity()??!0}setCustomValidity(e){this._textareaElement?.setCustomValidity(e),this._internalError=e,this.requestUpdate()}adjustHeight(){if(!this.autoResize||!this._textareaElement)return;const e=this._textareaElement;e.style.height="",e.style.overflow="hidden";const a=e.scrollHeight;if(a!==0){if(this.maxRows>0){const s=parseFloat(getComputedStyle(e).lineHeight)||20,o=Math.round(s*this.maxRows);if(a>=o){e.style.height=`${o}px`,e.style.overflow="auto";return}}e.style.height=`${a}px`}}getResizeClass(){return this.autoResize?"textarea__field--auto-resize":{none:"textarea__field--resize-none",vertical:"textarea__field--resize-vertical",horizontal:"textarea__field--resize-horizontal",both:"textarea__field--resize-both"}[this.resize]}firstUpdated(){this._charCount=this.value.length,this.autoResize&&requestAnimationFrame(()=>this.adjustHeight())}updated(e){super.updated(e),e.has("value")&&(this._charCount=this.value.length,this.autoResize&&this.adjustHeight())}getWrapClass(){return this.autoResize||this.resize==="none"?"textarea__wrap textarea__wrap--no-grip":"textarea__wrap"}render(){const e=this.error||this._internalError,a=!!this.value&&!this.disabled&&!this.readonly,s=this.maxlength!=null,o=`textarea__field ${this.getResizeClass()}`;return i.html`
+      <logosphere-formfield
+        .label=${this.label}
+        .helper=${this.helper}
+        .error=${e}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        .readonly=${this.readonly}
+        .size=${this.size}
+        .variant=${this.variant}
+        .multiline=${!0}
+      >
+        <slot name="prefix" slot="prefix"></slot>
+        <div class="${this.getWrapClass()}">
+          <textarea
+            class="${o}"
+            .value=${p.live(this.value)}
+            placeholder=${this.placeholder||i.nothing}
+            name=${this.name||i.nothing}
+            autocomplete=${this.autocomplete||i.nothing}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            minlength=${this.minlength??i.nothing}
+            maxlength=${this.maxlength??i.nothing}
+            rows=${this.rows}
+            cols=${this.cols??i.nothing}
+            wrap=${this.wrap}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+            @keydown=${this.handleKeyDown}
+            @keyup=${this.handleKeyUp}
+          ></textarea>
+          ${s?i.html`
+            <span class="textarea__counter">${this._charCount}/${this.maxlength}</span>
+          `:i.nothing}
+        </div>
+        ${a?i.html`
+          <button
+            type="button"
+            slot="clear"
+            class="textarea__clear-btn"
+            @click=${this.handleClear}
+            tabindex="-1"
+          >
+            <ui-icon name="uil-times" size="14"></ui-icon>
+          </button>
+        `:i.nothing}
+        <slot name="suffix" slot="suffix"></slot>
+      </logosphere-formfield>
+    `}};exports.TextArea.styles=[i.css`${i.unsafeCSS(u)}`];r([t.query("textarea")],exports.TextArea.prototype,"_textareaElement",2);r([t.property({type:String})],exports.TextArea.prototype,"value",2);r([t.property({type:String})],exports.TextArea.prototype,"placeholder",2);r([t.property({type:String})],exports.TextArea.prototype,"name",2);r([t.property({type:String})],exports.TextArea.prototype,"autocomplete",2);r([t.property({type:Number})],exports.TextArea.prototype,"minlength",2);r([t.property({type:Number})],exports.TextArea.prototype,"maxlength",2);r([t.property({type:Number})],exports.TextArea.prototype,"rows",2);r([t.property({type:Number})],exports.TextArea.prototype,"maxRows",2);r([t.property({type:Number})],exports.TextArea.prototype,"cols",2);r([t.property({type:String})],exports.TextArea.prototype,"wrap",2);r([t.property({type:String})],exports.TextArea.prototype,"resize",2);r([t.property({type:Boolean})],exports.TextArea.prototype,"autoResize",2);r([t.property({type:String})],exports.TextArea.prototype,"size",2);r([t.property({type:String})],exports.TextArea.prototype,"variant",2);r([t.property({type:String})],exports.TextArea.prototype,"label",2);r([t.property({type:String})],exports.TextArea.prototype,"helper",2);r([t.property({type:String})],exports.TextArea.prototype,"error",2);r([t.property({type:Boolean})],exports.TextArea.prototype,"required",2);r([t.property({type:Boolean})],exports.TextArea.prototype,"disabled",2);r([t.property({type:Boolean})],exports.TextArea.prototype,"readonly",2);r([t.state()],exports.TextArea.prototype,"_internalError",2);r([t.state()],exports.TextArea.prototype,"_charCount",2);exports.TextArea=r([t.customElement("logosphere-textarea")],exports.TextArea);

package/dist/textarea.cjs

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

package/dist/textarea.js

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

package/dist/timepicker-CLJKWWGm.cjs

@@ -0,0 +1,119 @@
+"use strict";const a=require("lit"),t=require("lit/decorators.js"),l=require("@popperjs/core");require("./input-CQS0LzF-.cjs");require("./ui-icon-DIucAQC_.cjs");const u=":host{display:block;width:100%}.timepicker__reference{display:block;width:100%}.timepicker__trigger{border:none;background:transparent;color:var(--color-tertiary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;height:100%;min-height:32px;outline:none;border-radius:0 var(--radius-base) var(--radius-base) 0;transition:color var(--transition-speed-fast) var(--transition-timing),background-color var(--transition-speed-fast) var(--transition-timing)}.timepicker__trigger:hover{color:var(--color-body-text);background-color:var(--color-body-bg-hover)}.timepicker__trigger--active{color:var(--color-body-text)}.timepicker__trigger:disabled{pointer-events:none;opacity:.4}.timepicker__popup[popover]{position:fixed;inset:unset;margin:0;padding:0;border:none;width:240px;background-color:var(--color-body-bg);border-radius:12px;box-shadow:0 4px 16px #7878783d;overflow:hidden;z-index:var(--z-index-dropdown, 1000)}.timepicker__spinner{display:flex;flex-direction:row;align-items:stretch;padding:var(--spacing-1) var(--spacing-2)}.timepicker__col{flex:1;display:flex;flex-direction:column;padding:0px var(--spacing-5)}.timepicker__col--left{align-items:flex-start}.timepicker__col--right{align-items:flex-end}.timepicker__col--sep{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--spacing-1)}.timepicker__spin-btn{height:32px;display:flex;align-items:center;justify-content:center;border:none;padding:var(--spacing-2);background:transparent;color:var(--color-secondary);border-radius:var(--radius-base);cursor:pointer;outline:none;box-sizing:border-box;transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.timepicker__spin-btn:hover{background-color:var(--color-body-bg-hover);color:var(--color-body-text)}.timepicker__spin-btn:active{background-color:var(--color-body-bg-active)}.timepicker__time-unit{height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;font-family:var(--font-family-base);font-weight:var(--font-weight-regular);line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text);text-align:center;box-sizing:border-box;padding:var(--spacing-2)}.timepicker__colon{height:32px;display:flex;align-items:center;justify-content:center;font-size:16px;font-family:var(--font-family-base);font-weight:var(--font-weight-medium);color:var(--color-secondary)}.timepicker__actions{display:flex;align-items:center;padding:var(--spacing-2);border-top:1px solid var(--color-border);gap:var(--spacing-1)}.timepicker__action-btn{flex:1 0 0;min-width:0;height:32px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--color-secondary);border-radius:var(--radius-full);cursor:pointer;padding:var(--spacing-2);outline:none;transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.timepicker__action-btn:hover{background-color:var(--color-body-bg-hover);color:var(--color-body-text)}.timepicker__action-btn:active{background-color:var(--color-body-bg-active)}";var h=Object.defineProperty,d=Object.getOwnPropertyDescriptor,i=(p,e,r,o)=>{for(var s=o>1?void 0:o?d(e,r):e,n=p.length-1,c;n>=0;n--)(c=p[n])&&(s=(o?c(e,r,s):c(s))||s);return o&&s&&h(e,r,s),s};exports.TimePicker=class extends a.LitElement{constructor(){super(...arguments),this.value="",this.label="",this.helper="",this.error="",this.placeholder="__:__",this.required=!1,this.disabled=!1,this.readonly=!1,this.size="default",this.variant="default",this._isOpen=!1,this._hour=0,this._minute=0,this._handleOutsideClick=e=>{this._isOpen&&!e.composedPath().includes(this)&&(this._isOpen=!1)},this._handleInputChange=e=>{e.stopPropagation();const r=e.detail?.value??"";if(/^\d{2}:\d{2}$/.test(r)){const[o,s]=this._parseValue(r);this._hour=o,this._minute=s;const n=`${this._pad(o)}:${this._pad(s)}`;this.value=n,this._emit(n)}},this._handleInputClear=e=>{e.stopPropagation(),this.value="",this._hour=0,this._minute=0,this._emit(""),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this._isOpen=!1},this._incrementHour=()=>{this._hour=(this._hour+1)%24,this._syncValue()},this._decrementHour=()=>{this._hour=(this._hour-1+24)%24,this._syncValue()},this._incrementMinute=()=>{this._minute=(this._minute+1)%60,this._syncValue()},this._decrementMinute=()=>{this._minute=(this._minute-1+60)%60,this._syncValue()}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick),this._destroyPopper()}willUpdate(e){if(e.has("value")&&/^\d{1,2}:\d{2}$/.test(this.value)){const[r,o]=this._parseValue(this.value);this._hour=r,this._minute=o}}updated(e){e.has("_isOpen")&&(this._isOpen?this.updateComplete.then(()=>{this._showPopover(),this._updatePopper()}):(this._hidePopover(),this._destroyPopper()))}_parseValue(e){const r=e.match(/^(\d{1,2}):(\d{2})$/);return r?[Math.min(23,Math.max(0,parseInt(r[1],10))),Math.min(59,Math.max(0,parseInt(r[2],10)))]:[0,0]}_pad(e){return String(e).padStart(2,"0")}_updatePopper(){!this._referenceEl||!this._popupEl||(this._popperInstance=l.createPopper(this._referenceEl,this._popupEl,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,4]}},{name:"flip",options:{fallbackPlacements:["top-start"]}},{name:"preventOverflow",options:{boundary:document.documentElement,padding:8}}]}))}_destroyPopper(){this._popperInstance?.destroy(),this._popperInstance=void 0}_showPopover(){this._popupEl?.showPopover?.()}_hidePopover(){const e=this._popupEl;try{e?.hidePopover?.()}catch{}}_togglePopup(){if(!(this.disabled||this.readonly))if(this._isOpen)this._isOpen=!1;else{const[e,r]=this._parseValue(this.value);this._hour=e,this._minute=r,this._isOpen=!0}}_clearValue(e){e?.stopPropagation(),this.value="",this._hour=0,this._minute=0,this._emit(""),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this._isOpen=!1}_setNow(){const e=new Date;this._hour=e.getHours(),this._minute=e.getMinutes(),this._syncValue()}_emit(e){this.onChange?.(e),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:e}}))}_syncValue(){const e=`${this._pad(this._hour)}:${this._pad(this._minute)}`;this.value=e,this._emit(e)}_startSpin(e){e(),this._spinInterval=setInterval(e,120)}_stopSpin(){clearInterval(this._spinInterval),this._spinInterval=void 0}_renderPopup(){return a.html`
+      <div data-timepicker-popup popover="manual" class="timepicker__popup">
+        <div class="timepicker__spinner">
+          <!-- Sol sütun: saat -->
+          <div class="timepicker__col timepicker__col--left">
+            <button
+              class="timepicker__spin-btn"
+              @mousedown=${()=>this._startSpin(this._incrementHour)}
+              @mouseup=${this._stopSpin}
+              @mouseleave=${this._stopSpin}
+              @touchstart=${e=>{e.preventDefault(),this._startSpin(this._incrementHour)}}
+              @touchend=${this._stopSpin}
+              tabindex="-1"
+              aria-label="Saat artır"
+            ><ui-icon name="uil-arrow-up" size="16"></ui-icon></button>
+            <div class="timepicker__time-unit">${this._pad(this._hour)}</div>
+            <button
+              class="timepicker__spin-btn"
+              @mousedown=${()=>this._startSpin(this._decrementHour)}
+              @mouseup=${this._stopSpin}
+              @mouseleave=${this._stopSpin}
+              @touchstart=${e=>{e.preventDefault(),this._startSpin(this._decrementHour)}}
+              @touchend=${this._stopSpin}
+              tabindex="-1"
+              aria-label="Saat azalt"
+            ><ui-icon name="uil-arrow-down" size="16"></ui-icon></button>
+          </div>
+
+          <!-- Orta sütun: iki nokta -->
+          <div class="timepicker__col timepicker__col--sep">
+            <div class="timepicker__colon">:</div>
+          </div>
+
+          <!-- Sağ sütun: dakika -->
+          <div class="timepicker__col timepicker__col--right">
+            <button
+              class="timepicker__spin-btn"
+              @mousedown=${()=>this._startSpin(this._incrementMinute)}
+              @mouseup=${this._stopSpin}
+              @mouseleave=${this._stopSpin}
+              @touchstart=${e=>{e.preventDefault(),this._startSpin(this._incrementMinute)}}
+              @touchend=${this._stopSpin}
+              tabindex="-1"
+              aria-label="Dakika artır"
+            ><ui-icon name="uil-arrow-up" size="16"></ui-icon></button>
+            <div class="timepicker__time-unit">${this._pad(this._minute)}</div>
+            <button
+              class="timepicker__spin-btn"
+              @mousedown=${()=>this._startSpin(this._decrementMinute)}
+              @mouseup=${this._stopSpin}
+              @mouseleave=${this._stopSpin}
+              @touchstart=${e=>{e.preventDefault(),this._startSpin(this._decrementMinute)}}
+              @touchend=${this._stopSpin}
+              tabindex="-1"
+              aria-label="Dakika azalt"
+            ><ui-icon name="uil-arrow-down" size="16"></ui-icon></button>
+          </div>
+        </div>
+
+        <!-- Action buttons -->
+        <div class="timepicker__actions">
+          <button
+            class="timepicker__action-btn"
+            @click=${this._setNow}
+            title="Şu anki saati seç"
+          >
+            <ui-icon name="uil-calendar-alt" size="16"></ui-icon>
+          </button>
+          <button
+            class="timepicker__action-btn"
+            @click=${()=>this._clearValue()}
+            title="Temizle"
+          >
+            <ui-icon name="uil-trash" size="16"></ui-icon>
+          </button>
+          <button
+            class="timepicker__action-btn"
+            @click=${()=>{this._isOpen=!1}}
+            title="Kapat"
+          >
+            <ui-icon name="uil-times" size="16"></ui-icon>
+          </button>
+        </div>
+      </div>
+    `}render(){return a.html`
+      <div class="timepicker__reference">
+        <logosphere-input
+          .label=${this.label}
+          .helper=${this.helper}
+          .error=${this.error}
+          .required=${this.required}
+          .disabled=${this.disabled}
+          .readonly=${this.readonly}
+          .size=${this.size}
+          .variant=${this.variant}
+          .placeholder=${this.placeholder}
+          .value=${this.value}
+          mask="00:00"
+          @input=${this._handleInputChange}
+          @clear=${this._handleInputClear}
+          @change=${e=>e.stopPropagation()}
+        >
+          <button
+            slot="suffix"
+            type="button"
+            class="timepicker__trigger ${this._isOpen?"timepicker__trigger--active":""}"
+            @click=${this._togglePopup}
+            ?disabled=${this.disabled}
+            tabindex=${this.disabled?"-1":"0"}
+            aria-label="Saat seç"
+            aria-expanded=${this._isOpen?"true":"false"}
+          >
+            <ui-icon name="uil-clock" size="16"></ui-icon>
+          </button>
+        </logosphere-input>
+      </div>
+
+      ${this._renderPopup()}
+    `}};exports.TimePicker.styles=[a.css`${a.unsafeCSS(u)}`];i([t.property({type:String})],exports.TimePicker.prototype,"value",2);i([t.property({type:String})],exports.TimePicker.prototype,"label",2);i([t.property({type:String})],exports.TimePicker.prototype,"helper",2);i([t.property({type:String})],exports.TimePicker.prototype,"error",2);i([t.property({type:String})],exports.TimePicker.prototype,"placeholder",2);i([t.property({type:Boolean})],exports.TimePicker.prototype,"required",2);i([t.property({type:Boolean})],exports.TimePicker.prototype,"disabled",2);i([t.property({type:Boolean})],exports.TimePicker.prototype,"readonly",2);i([t.property({type:String})],exports.TimePicker.prototype,"size",2);i([t.property({type:String})],exports.TimePicker.prototype,"variant",2);i([t.property({attribute:!1})],exports.TimePicker.prototype,"onChange",2);i([t.state()],exports.TimePicker.prototype,"_isOpen",2);i([t.state()],exports.TimePicker.prototype,"_hour",2);i([t.state()],exports.TimePicker.prototype,"_minute",2);i([t.query(".timepicker__reference")],exports.TimePicker.prototype,"_referenceEl",2);i([t.query("[data-timepicker-popup]")],exports.TimePicker.prototype,"_popupEl",2);exports.TimePicker=i([t.customElement("logosphere-timepicker")],exports.TimePicker);