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

package/dist/toast-container-DxFwLT5S.js

@@ -0,0 +1,274 @@
+import { unsafeCSS as g, css as f, LitElement as v, nothing as p, html as h } from "lit";
+import { property as n, state as b, customElement as T } from "lit/decorators.js";
+import { repeat as y } from "lit/directives/repeat.js";
+import "./ui-icon-Ckljc9hg.js";
+import "./button-QWCkFTeJ.js";
+const _ = ":host{display:block}.toast{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;width:100%;box-sizing:border-box;border-radius:var(--radius-md);border-left:4px solid var(--toast-accent);background:#fff;box-shadow:var(--shadow-md);padding:var(--spacing-4);color:#3d3d3d;font-family:var(--font-family-base);animation:toast-enter .22s cubic-bezier(.2,.8,.2,1);transform-origin:top right}.toast__icon{display:inline-flex;margin-top:2px;color:var(--toast-accent)}.toast__content{min-width:0}.toast__title{margin:0;font-size:var(--font-size-lg);line-height:var(--line-height-tight);font-weight:var(--font-weight-semibold)}.toast__title--as-text{font-size:var(--font-size-base);line-height:var(--line-height-normal);font-weight:var(--font-weight-regular);color:#555}.toast__text{margin:4px 0 0;font-size:var(--font-size-base);line-height:var(--line-height-normal);color:#555}.toast__actions{display:flex;gap:10px;margin-top:12px}.toast__close{border:0;background:transparent;color:#5a5a5a;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;margin-top:2px}.toast__close:hover{color:#2f2f2f}.toast--success{--toast-accent: var(--color-success-active)}.toast--danger{--toast-accent: var(--color-danger-active)}.toast--warning{--toast-accent: var(--color-warning-active)}.toast--info{--toast-accent: var(--color-info-active)}.toast[data-closing=true]{pointer-events:none;animation:toast-exit .22s cubic-bezier(.4,0,1,1) forwards}@keyframes toast-enter{0%{opacity:0;transform:translate3d(18px,-8px,0) scale(.98)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes toast-exit{0%{opacity:1;transform:translateZ(0) scale(1);max-height:240px;margin-bottom:0}to{opacity:0;transform:translate3d(20px,-6px,0) scale(.97);max-height:0;margin-bottom:-12px}}";
+var $ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (t, e, s, r) => {
+  for (var i = r > 1 ? void 0 : r ? w(e, s) : e, c = t.length - 1, l; c >= 0; c--)
+    (l = t[c]) && (i = (r ? l(e, s, i) : l(i)) || i);
+  return r && i && $(e, s, i), i;
+};
+const m = 6e3, C = 220, D = {
+  success: "uil-check-circle",
+  danger: "uil-exclamation-octagon",
+  warning: "uil-exclamation-triangle",
+  info: "uil-info-circle"
+};
+let o = class extends v {
+  constructor() {
+    super(...arguments), this.type = "info", this.title = "", this.text = "", this.icon = "", this.closeable = !0, this.duration = m, this.autoDismiss = !0, this.isClosing = !1, this.remainingMs = m, this.startedAt = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.remainingMs = this.duration, this.startTimer();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.clearTimer(), this.closeTimerId && (clearTimeout(this.closeTimerId), this.closeTimerId = void 0);
+  }
+  updated(t) {
+    t.has("duration") && (this.remainingMs = this.duration, this.restartTimer()), (t.has("action") || t.has("autoDismiss") || t.has("type")) && this.restartTimer();
+  }
+  close(t = "manual") {
+    this.isClosing || (this.clearTimer(), this.isClosing = !0, this.closeTimerId = setTimeout(() => {
+      this.dispatchEvent(
+        new CustomEvent("toast-close", {
+          detail: { reason: t },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, C));
+  }
+  get canAutoDismiss() {
+    return this.autoDismiss && this.type !== "danger" && !this.hasActions;
+  }
+  get resolvedTitle() {
+    return this.title || this.text;
+  }
+  get resolvedText() {
+    return this.title ? this.text : "";
+  }
+  get resolvedIcon() {
+    return this.icon || D[this.type];
+  }
+  get hasActions() {
+    return !!this.action;
+  }
+  onActionClick(t) {
+    this.action && (t === "okay" ? this.action.onOkay?.() : this.action.onCancel?.(), (this.action.closeOnAction ?? !0) && this.close("manual"));
+  }
+  clearTimer() {
+    this.timerId && (clearTimeout(this.timerId), this.timerId = void 0);
+  }
+  startTimer() {
+    this.clearTimer(), !(!this.canAutoDismiss || this.remainingMs <= 0) && (this.startedAt = Date.now(), this.timerId = setTimeout(() => this.close("auto"), this.remainingMs));
+  }
+  pauseTimer() {
+    this.timerId && (this.clearTimer(), this.remainingMs = Math.max(0, this.remainingMs - (Date.now() - this.startedAt)));
+  }
+  resumeTimer() {
+    this.canAutoDismiss && this.startTimer();
+  }
+  restartTimer() {
+    this.clearTimer(), this.startTimer();
+  }
+  render() {
+    return h`
+      <article
+        class="toast toast--${this.type}"
+        data-closing=${this.isClosing ? "true" : "false"}
+        role="status"
+        aria-live=${this.type === "danger" ? "assertive" : "polite"}
+        @mouseenter=${this.pauseTimer}
+        @mouseleave=${this.resumeTimer}
+      >
+        <span class="toast__icon">
+          <ui-icon name=${this.resolvedIcon} size="20"></ui-icon>
+        </span>
+
+        <div class="toast__content">
+          <h4 class=${this.title ? "toast__title" : "toast__title toast__title--as-text"}>
+            ${this.resolvedTitle}
+          </h4>
+          ${this.resolvedText ? h`<p class="toast__text">${this.resolvedText}</p>` : p}
+          ${this.hasActions ? h`
+                <div class="toast__actions">
+                  <logosphere-button
+                    variant="outline"
+                    theme="primary"
+                    @click=${() => this.onActionClick("okay")}
+                  >
+                    ${this.action?.okayLabel || "Tamam"}
+                  </logosphere-button>
+                  <logosphere-button
+                    variant="text"
+                    theme="secondary"
+                    @click=${() => this.onActionClick("cancel")}
+                  >
+                    ${this.action?.cancelLabel || "İptal"}
+                  </logosphere-button>
+                </div>
+              ` : p}
+        </div>
+
+        ${this.closeable ? h`
+              <button class="toast__close" @click=${() => this.close("manual")} aria-label="Close">
+                <ui-icon name="uil-times" size="20"></ui-icon>
+              </button>
+            ` : p}
+      </article>
+    `;
+  }
+};
+o.styles = [
+  f`
+      ${g(_)}
+    `
+];
+a([
+  n({ type: String })
+], o.prototype, "type", 2);
+a([
+  n({ type: String })
+], o.prototype, "title", 2);
+a([
+  n({ type: String })
+], o.prototype, "text", 2);
+a([
+  n({ type: String })
+], o.prototype, "icon", 2);
+a([
+  n({ type: Boolean })
+], o.prototype, "closeable", 2);
+a([
+  n({ type: Number })
+], o.prototype, "duration", 2);
+a([
+  n({ type: Boolean })
+], o.prototype, "autoDismiss", 2);
+a([
+  n({ attribute: !1 })
+], o.prototype, "action", 2);
+a([
+  b()
+], o.prototype, "isClosing", 2);
+o = a([
+  T("logosphere-toast")
+], o);
+const I = ":host{position:fixed;top:16px;right:16px;z-index:9999;width:min(420px,calc(100vw - 24px));box-sizing:border-box}.toast-container{display:flex;flex-direction:column;gap:12px}";
+var A = Object.defineProperty, S = Object.getOwnPropertyDescriptor, x = (t, e, s, r) => {
+  for (var i = r > 1 ? void 0 : r ? S(e, s) : e, c = t.length - 1, l; c >= 0; c--)
+    (l = t[c]) && (i = (r ? l(e, s, i) : l(i)) || i);
+  return r && i && A(e, s, i), i;
+};
+const d = 4;
+let u = class extends v {
+  constructor() {
+    super(...arguments), this.visibleToasts = [], this.queuedToasts = [];
+  }
+  show(t) {
+    const e = this.toToast(t);
+    return this.visibleToasts.length < d ? (this.visibleToasts = [e, ...this.visibleToasts], e.id) : (this.queuedToasts.push(e), e.id);
+  }
+  close(t) {
+    const e = this.visibleToasts.findIndex((s) => s.id === t);
+    if (e !== -1) {
+      const s = this.visibleToasts.slice();
+      s.splice(e, 1), this.visibleToasts = s, this.dequeue();
+      return;
+    }
+    this.queuedToasts = this.queuedToasts.filter((s) => s.id !== t);
+  }
+  clear() {
+    this.visibleToasts = [], this.queuedToasts = [];
+  }
+  dequeue() {
+    if (!this.queuedToasts.length || this.visibleToasts.length >= d) return;
+    const t = this.queuedToasts.shift();
+    t && (this.visibleToasts = [t, ...this.visibleToasts]);
+  }
+  toToast(t) {
+    return {
+      id: t.id || this.createId(),
+      type: t.type || "info",
+      title: t.title || "",
+      text: t.text,
+      icon: t.icon || "",
+      closeable: t.closeable ?? !0,
+      autoDismiss: t.autoDismiss ?? !0,
+      duration: t.duration ?? 6e3,
+      action: t.action
+    };
+  }
+  createId() {
+    return `toast-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+  }
+  render() {
+    return h`
+      <div class="toast-container" role="region" aria-label="Notifications">
+        ${y(
+      this.visibleToasts,
+      (t) => t.id,
+      (t) => h`
+            <logosphere-toast
+              .type=${t.type}
+              .title=${t.title}
+              .text=${t.text}
+              .icon=${t.icon}
+              .closeable=${t.closeable}
+              .autoDismiss=${t.autoDismiss}
+              .duration=${t.duration}
+              .action=${t.action}
+              @toast-close=${() => this.close(t.id)}
+            >
+            </logosphere-toast>
+          `
+    )}
+      </div>
+    `;
+  }
+};
+u.styles = [f`${g(I)}`];
+x([
+  b()
+], u.prototype, "visibleToasts", 2);
+u = x([
+  T("logosphere-toast-container")
+], u);
+class E {
+  static show(e) {
+    return this.getContainer().show(e);
+  }
+  static success(e) {
+    return this.show({ ...e, type: "success" });
+  }
+  static danger(e) {
+    return this.show({ ...e, type: "danger", autoDismiss: !1 });
+  }
+  static warning(e) {
+    return this.show({ ...e, type: "warning" });
+  }
+  static info(e) {
+    return this.show({ ...e, type: "info" });
+  }
+  static close(e) {
+    this.getContainer().close(e);
+  }
+  static clear() {
+    this.getContainer().clear();
+  }
+  static getContainer() {
+    if (this.container && document.body.contains(this.container))
+      return this.container;
+    const e = document.querySelector("logosphere-toast-container");
+    if (e && e instanceof u)
+      return this.container = e, e;
+    const s = document.createElement("logosphere-toast-container");
+    return document.body.appendChild(s), this.container = s, s;
+  }
+}
+export {
+  o as L,
+  E as T,
+  u as a
+};

package/dist/toast-container-aY1lGjRi.cjs

@@ -0,0 +1,64 @@
+"use strict";const o=require("lit"),a=require("lit/decorators.js"),m=require("lit/directives/repeat.js");require("./ui-icon-Cd5YhUeQ.cjs");require("./button-MBxtvVqn.cjs");const d=":host{display:block}.toast{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;width:100%;box-sizing:border-box;border-radius:var(--radius-md);border-left:4px solid var(--toast-accent);background:#fff;box-shadow:var(--shadow-md);padding:var(--spacing-4);color:#3d3d3d;font-family:var(--font-family-base);animation:toast-enter .22s cubic-bezier(.2,.8,.2,1);transform-origin:top right}.toast__icon{display:inline-flex;margin-top:2px;color:var(--toast-accent)}.toast__content{min-width:0}.toast__title{margin:0;font-size:var(--font-size-lg);line-height:var(--line-height-tight);font-weight:var(--font-weight-semibold)}.toast__title--as-text{font-size:var(--font-size-base);line-height:var(--line-height-normal);font-weight:var(--font-weight-regular);color:#555}.toast__text{margin:4px 0 0;font-size:var(--font-size-base);line-height:var(--line-height-normal);color:#555}.toast__actions{display:flex;gap:10px;margin-top:12px}.toast__close{border:0;background:transparent;color:#5a5a5a;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;margin-top:2px}.toast__close:hover{color:#2f2f2f}.toast--success{--toast-accent: var(--color-success-active)}.toast--danger{--toast-accent: var(--color-danger-active)}.toast--warning{--toast-accent: var(--color-warning-active)}.toast--info{--toast-accent: var(--color-info-active)}.toast[data-closing=true]{pointer-events:none;animation:toast-exit .22s cubic-bezier(.4,0,1,1) forwards}@keyframes toast-enter{0%{opacity:0;transform:translate3d(18px,-8px,0) scale(.98)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes toast-exit{0%{opacity:1;transform:translateZ(0) scale(1);max-height:240px;margin-bottom:0}to{opacity:0;transform:translate3d(20px,-6px,0) scale(.97);max-height:0;margin-bottom:-12px}}";var g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,r=(n,t,e,s)=>{for(var i=s>1?void 0:s?f(t,e):t,c=n.length-1,l;c>=0;c--)(l=n[c])&&(i=(s?l(t,e,i):l(i))||i);return s&&i&&g(t,e,i),i};const h=6e3,T=220,v={success:"uil-check-circle",danger:"uil-exclamation-octagon",warning:"uil-exclamation-triangle",info:"uil-info-circle"};exports.LogosphereToast=class extends o.LitElement{constructor(){super(...arguments),this.type="info",this.title="",this.text="",this.icon="",this.closeable=!0,this.duration=h,this.autoDismiss=!0,this.isClosing=!1,this.remainingMs=h,this.startedAt=0}connectedCallback(){super.connectedCallback(),this.remainingMs=this.duration,this.startTimer()}disconnectedCallback(){super.disconnectedCallback(),this.clearTimer(),this.closeTimerId&&(clearTimeout(this.closeTimerId),this.closeTimerId=void 0)}updated(t){t.has("duration")&&(this.remainingMs=this.duration,this.restartTimer()),(t.has("action")||t.has("autoDismiss")||t.has("type"))&&this.restartTimer()}close(t="manual"){this.isClosing||(this.clearTimer(),this.isClosing=!0,this.closeTimerId=setTimeout(()=>{this.dispatchEvent(new CustomEvent("toast-close",{detail:{reason:t},bubbles:!0,composed:!0}))},T))}get canAutoDismiss(){return this.autoDismiss&&this.type!=="danger"&&!this.hasActions}get resolvedTitle(){return this.title||this.text}get resolvedText(){return this.title?this.text:""}get resolvedIcon(){return this.icon||v[this.type]}get hasActions(){return!!this.action}onActionClick(t){this.action&&(t==="okay"?this.action.onOkay?.():this.action.onCancel?.(),(this.action.closeOnAction??!0)&&this.close("manual"))}clearTimer(){this.timerId&&(clearTimeout(this.timerId),this.timerId=void 0)}startTimer(){this.clearTimer(),!(!this.canAutoDismiss||this.remainingMs<=0)&&(this.startedAt=Date.now(),this.timerId=setTimeout(()=>this.close("auto"),this.remainingMs))}pauseTimer(){this.timerId&&(this.clearTimer(),this.remainingMs=Math.max(0,this.remainingMs-(Date.now()-this.startedAt)))}resumeTimer(){this.canAutoDismiss&&this.startTimer()}restartTimer(){this.clearTimer(),this.startTimer()}render(){return o.html`
+      <article
+        class="toast toast--${this.type}"
+        data-closing=${this.isClosing?"true":"false"}
+        role="status"
+        aria-live=${this.type==="danger"?"assertive":"polite"}
+        @mouseenter=${this.pauseTimer}
+        @mouseleave=${this.resumeTimer}
+      >
+        <span class="toast__icon">
+          <ui-icon name=${this.resolvedIcon} size="20"></ui-icon>
+        </span>
+
+        <div class="toast__content">
+          <h4 class=${this.title?"toast__title":"toast__title toast__title--as-text"}>
+            ${this.resolvedTitle}
+          </h4>
+          ${this.resolvedText?o.html`<p class="toast__text">${this.resolvedText}</p>`:o.nothing}
+          ${this.hasActions?o.html`
+                <div class="toast__actions">
+                  <logosphere-button
+                    variant="outline"
+                    theme="primary"
+                    @click=${()=>this.onActionClick("okay")}
+                  >
+                    ${this.action?.okayLabel||"Tamam"}
+                  </logosphere-button>
+                  <logosphere-button
+                    variant="text"
+                    theme="secondary"
+                    @click=${()=>this.onActionClick("cancel")}
+                  >
+                    ${this.action?.cancelLabel||"İptal"}
+                  </logosphere-button>
+                </div>
+              `:o.nothing}
+        </div>
+
+        ${this.closeable?o.html`
+              <button class="toast__close" @click=${()=>this.close("manual")} aria-label="Close">
+                <ui-icon name="uil-times" size="20"></ui-icon>
+              </button>
+            `:o.nothing}
+      </article>
+    `}};exports.LogosphereToast.styles=[o.css`
+      ${o.unsafeCSS(d)}
+    `];r([a.property({type:String})],exports.LogosphereToast.prototype,"type",2);r([a.property({type:String})],exports.LogosphereToast.prototype,"title",2);r([a.property({type:String})],exports.LogosphereToast.prototype,"text",2);r([a.property({type:String})],exports.LogosphereToast.prototype,"icon",2);r([a.property({type:Boolean})],exports.LogosphereToast.prototype,"closeable",2);r([a.property({type:Number})],exports.LogosphereToast.prototype,"duration",2);r([a.property({type:Boolean})],exports.LogosphereToast.prototype,"autoDismiss",2);r([a.property({attribute:!1})],exports.LogosphereToast.prototype,"action",2);r([a.state()],exports.LogosphereToast.prototype,"isClosing",2);exports.LogosphereToast=r([a.customElement("logosphere-toast")],exports.LogosphereToast);const b=":host{position:fixed;top:16px;right:16px;z-index:9999;width:min(420px,calc(100vw - 24px));box-sizing:border-box}.toast-container{display:flex;flex-direction:column;gap:12px}";var y=Object.defineProperty,x=Object.getOwnPropertyDescriptor,p=(n,t,e,s)=>{for(var i=s>1?void 0:s?x(t,e):t,c=n.length-1,l;c>=0;c--)(l=n[c])&&(i=(s?l(t,e,i):l(i))||i);return s&&i&&y(t,e,i),i};const u=4;exports.LogosphereToastContainer=class extends o.LitElement{constructor(){super(...arguments),this.visibleToasts=[],this.queuedToasts=[]}show(t){const e=this.toToast(t);return this.visibleToasts.length<u?(this.visibleToasts=[e,...this.visibleToasts],e.id):(this.queuedToasts.push(e),e.id)}close(t){const e=this.visibleToasts.findIndex(s=>s.id===t);if(e!==-1){const s=this.visibleToasts.slice();s.splice(e,1),this.visibleToasts=s,this.dequeue();return}this.queuedToasts=this.queuedToasts.filter(s=>s.id!==t)}clear(){this.visibleToasts=[],this.queuedToasts=[]}dequeue(){if(!this.queuedToasts.length||this.visibleToasts.length>=u)return;const t=this.queuedToasts.shift();t&&(this.visibleToasts=[t,...this.visibleToasts])}toToast(t){return{id:t.id||this.createId(),type:t.type||"info",title:t.title||"",text:t.text,icon:t.icon||"",closeable:t.closeable??!0,autoDismiss:t.autoDismiss??!0,duration:t.duration??6e3,action:t.action}}createId(){return`toast-${Date.now()}-${Math.random().toString(36).slice(2,8)}`}render(){return o.html`
+      <div class="toast-container" role="region" aria-label="Notifications">
+        ${m.repeat(this.visibleToasts,t=>t.id,t=>o.html`
+            <logosphere-toast
+              .type=${t.type}
+              .title=${t.title}
+              .text=${t.text}
+              .icon=${t.icon}
+              .closeable=${t.closeable}
+              .autoDismiss=${t.autoDismiss}
+              .duration=${t.duration}
+              .action=${t.action}
+              @toast-close=${()=>this.close(t.id)}
+            >
+            </logosphere-toast>
+          `)}
+      </div>
+    `}};exports.LogosphereToastContainer.styles=[o.css`${o.unsafeCSS(b)}`];p([a.state()],exports.LogosphereToastContainer.prototype,"visibleToasts",2);exports.LogosphereToastContainer=p([a.customElement("logosphere-toast-container")],exports.LogosphereToastContainer);class _{static show(t){return this.getContainer().show(t)}static success(t){return this.show({...t,type:"success"})}static danger(t){return this.show({...t,type:"danger",autoDismiss:!1})}static warning(t){return this.show({...t,type:"warning"})}static info(t){return this.show({...t,type:"info"})}static close(t){this.getContainer().close(t)}static clear(){this.getContainer().clear()}static getContainer(){if(this.container&&document.body.contains(this.container))return this.container;const t=document.querySelector("logosphere-toast-container");if(t&&t instanceof exports.LogosphereToastContainer)return this.container=t,t;const e=document.createElement("logosphere-toast-container");return document.body.appendChild(e),this.container=e,e}}exports.ToastService=_;

package/dist/toast.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./toast-container-aY1lGjRi.cjs");Object.defineProperty(exports,"LogosphereToast",{enumerable:!0,get:()=>e.LogosphereToast});Object.defineProperty(exports,"LogosphereToastContainer",{enumerable:!0,get:()=>e.LogosphereToastContainer});exports.ToastService=e.ToastService;

package/dist/toast.js

@@ -0,0 +1,6 @@
+import { L as e, a as s, T as r } from "./toast-container-DxFwLT5S.js";
+export {
+  e as LogosphereToast,
+  s as LogosphereToastContainer,
+  r as ToastService
+};

package/dist/tree-menu-Dqy14_m2.cjs

@@ -0,0 +1,47 @@
+"use strict";const r=require("lit"),s=require("lit/decorators.js"),d=require("lit/directives/unsafe-html.js");require("./ui-icon-Cd5YhUeQ.cjs");const h=":host{display:block}.tree{width:100%;font-family:var(--font-family-base)}.tree__list,.tree__children{list-style:none;margin:0;padding:0}.tree__item{margin:0;padding:0}.tree__row{display:flex;align-items:center;gap:var(--spacing-1);padding:var(--spacing-2) var(--spacing-3);padding-left:calc(var(--spacing-3) + (var(--tree-level, 0) * 14px));border-radius:var(--radius-sm);color:var(--color-body-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.tree--icons .tree__row{justify-content:center;padding:0;width:44px;height:44px;min-height:44px;margin:0 auto}.tree__row:hover{background-color:var(--color-light)}.tree__row:focus-visible{outline:2px solid var(--color-secondary);outline-offset:1px}.tree__row--disabled{opacity:.5;cursor:not-allowed}.tree__row--active .tree__label,.tree__row--active .tree__icon{color:var(--color-primary)}.tree:not(.tree--icons) .tree__row--active{background-color:var(--color-light)}.tree__icon{width:20px;min-width:20px;display:inline-flex;align-items:center;justify-content:center;color:inherit}.tree--icons .tree__icon{width:20px;min-width:20px;height:20px}.tree--icons .tree__row--active{background-color:var(--color-primary)}.tree--icons .tree__row--active .tree__icon{color:#fff}.tree--icons .tree__row--active:hover{background-color:var(--color-primary-hover)}.tree__chevron-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;color:var(--color-tertiary);cursor:pointer;padding:0;flex-shrink:0}.tree__chevron-btn--right{margin-left:auto}.tree__chevron{transform:rotate(-90deg);transition:transform var(--transition-speed-fast) var(--transition-timing)}.tree__chevron--open{transform:rotate(0)}.tree__chevron-spacer{width:20px;height:20px;flex-shrink:0}.tree__label{display:inline-flex;align-items:center;font-size:var(--font-size-sm);color:inherit}";var p=Object.defineProperty,_=Object.getOwnPropertyDescriptor,a=(c,e,t,n)=>{for(var i=n>1?void 0:n?_(e,t):e,l=c.length-1,o;l>=0;l--)(o=c[l])&&(i=(n?o(e,t,i):o(i))||i);return n&&i&&p(e,t,i),i};exports.TreeMenu=class extends r.LitElement{constructor(){super(...arguments),this.items=[],this.expandedIds=[],this.expandOnLabelClick=!0,this.chevronPosition="left",this.showLabels=!0,this.iconSize=16,this._expandedSet=new Set}willUpdate(e){e.has("expandedIds")&&(this._expandedSet=new Set(this.expandedIds??[]))}_isExpanded(e){return this._expandedSet.has(e)}_emitToggle(e,t){this.dispatchEvent(new CustomEvent("toggle",{detail:{item:e,expanded:t},bubbles:!0,composed:!0}))}_emitItemClick(e){this.dispatchEvent(new CustomEvent("item-click",{detail:{item:e},bubbles:!0,composed:!0}))}_emitNodeClick(e,t){this.dispatchEvent(new CustomEvent("node-click",{detail:{item:e,hasChildren:t},bubbles:!0,composed:!0}))}_setExpanded(e,t){t?this._expandedSet.add(e.id):this._expandedSet.delete(e.id),this.expandedIds=Array.from(this._expandedSet),this._emitToggle(e,t)}_toggle(e,t){t.stopPropagation(),!(e.disabled||!e.children?.length)&&this._setExpanded(e,!this._isExpanded(e.id))}_handleItemClick(e,t){if(t.stopPropagation(),e.disabled)return;const n=!!e.children?.length;if(this._emitNodeClick(e,n),n&&this.expandOnLabelClick){this._setExpanded(e,!this._isExpanded(e.id));return}n||(e.onClick?.(e),this._emitItemClick(e))}_handleRowKeydown(e,t){t.key!=="Enter"&&t.key!==" "||(t.preventDefault(),this._handleItemClick(e,t))}_renderIcon(e){return e.iconName?r.html`
+        <span class="tree__icon">
+          <ui-icon name=${e.iconName} .size=${this.iconSize}></ui-icon>
+        </span>
+      `:e.iconHtml?r.html`<span class="tree__icon">${d.unsafeHTML(e.iconHtml)}</span>`:r.nothing}_renderChevron(e,t){const n=!!e.children?.length;return this.showLabels?n?r.html`
+      <button
+        type="button"
+        class="tree__chevron-btn ${this.chevronPosition==="right"?"tree__chevron-btn--right":""}"
+        aria-label=${t?"Collapse":"Expand"}
+        @click=${i=>this._toggle(e,i)}
+      >
+        <ui-icon
+          class="tree__chevron ${t?"tree__chevron--open":""}"
+          name="uil-angle-down"
+          size="20"
+        ></ui-icon>
+      </button>
+    `:r.html`<span class="tree__chevron-spacer"></span>`:r.nothing}_renderNode(e,t){const n=!!e.children?.length,i=n?this._isExpanded(e.id):!1,l=this.showLabels?`--tree-level:${t};`:"--tree-level:0;";return r.html`
+      <li class="tree__item">
+        <div
+          class="tree__row ${e.disabled?"tree__row--disabled":""} ${e.active?"tree__row--active":""}"
+          style=${l}
+          role="button"
+          tabindex=${e.disabled?-1:0}
+          @click=${o=>this._handleItemClick(e,o)}
+          @keydown=${o=>this._handleRowKeydown(e,o)}
+          title=${this.showLabels?"":e.label}
+        >
+          ${this.chevronPosition==="left"?this._renderChevron(e,i):r.nothing}
+          ${this._renderIcon(e)}
+          ${this.showLabels?r.html`<span class="tree__label">${e.label}</span>`:r.nothing}
+          ${this.chevronPosition==="right"?this._renderChevron(e,i):r.nothing}
+        </div>
+
+        ${this.showLabels&&n&&i?r.html`
+              <ul class="tree__children">
+                ${e.children.map(o=>this._renderNode(o,t+1))}
+              </ul>
+            `:r.nothing}
+      </li>
+    `}render(){return r.html`
+      <nav class="tree ${this.showLabels?"":"tree--icons"}" aria-label="Tree Menu">
+        <ul class="tree__list">
+          ${this.items.map(e=>this._renderNode(e,0))}
+        </ul>
+      </nav>
+    `}};exports.TreeMenu.styles=[r.css`${r.unsafeCSS(h)}`];a([s.property({attribute:!1})],exports.TreeMenu.prototype,"items",2);a([s.property({type:Array})],exports.TreeMenu.prototype,"expandedIds",2);a([s.property({type:Boolean})],exports.TreeMenu.prototype,"expandOnLabelClick",2);a([s.property({type:String})],exports.TreeMenu.prototype,"chevronPosition",2);a([s.property({type:Boolean})],exports.TreeMenu.prototype,"showLabels",2);a([s.property({type:Number})],exports.TreeMenu.prototype,"iconSize",2);a([s.state()],exports.TreeMenu.prototype,"_expandedSet",2);exports.TreeMenu=a([s.customElement("logosphere-tree-menu")],exports.TreeMenu);

package/dist/tree-menu-Psek8QB9.js

@@ -0,0 +1,154 @@
+import { unsafeCSS as p, css as _, LitElement as u, html as a, nothing as c } from "lit";
+import { property as d, state as v, customElement as g } from "lit/decorators.js";
+import { unsafeHTML as b } from "lit/directives/unsafe-html.js";
+import "./ui-icon-Ckljc9hg.js";
+const f = ":host{display:block}.tree{width:100%;font-family:var(--font-family-base)}.tree__list,.tree__children{list-style:none;margin:0;padding:0}.tree__item{margin:0;padding:0}.tree__row{display:flex;align-items:center;gap:var(--spacing-1);padding:var(--spacing-2) var(--spacing-3);padding-left:calc(var(--spacing-3) + (var(--tree-level, 0) * 14px));border-radius:var(--radius-sm);color:var(--color-body-color);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.tree--icons .tree__row{justify-content:center;padding:0;width:44px;height:44px;min-height:44px;margin:0 auto}.tree__row:hover{background-color:var(--color-light)}.tree__row:focus-visible{outline:2px solid var(--color-secondary);outline-offset:1px}.tree__row--disabled{opacity:.5;cursor:not-allowed}.tree__row--active .tree__label,.tree__row--active .tree__icon{color:var(--color-primary)}.tree:not(.tree--icons) .tree__row--active{background-color:var(--color-light)}.tree__icon{width:20px;min-width:20px;display:inline-flex;align-items:center;justify-content:center;color:inherit}.tree--icons .tree__icon{width:20px;min-width:20px;height:20px}.tree--icons .tree__row--active{background-color:var(--color-primary)}.tree--icons .tree__row--active .tree__icon{color:#fff}.tree--icons .tree__row--active:hover{background-color:var(--color-primary-hover)}.tree__chevron-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;color:var(--color-tertiary);cursor:pointer;padding:0;flex-shrink:0}.tree__chevron-btn--right{margin-left:auto}.tree__chevron{transform:rotate(-90deg);transition:transform var(--transition-speed-fast) var(--transition-timing)}.tree__chevron--open{transform:rotate(0)}.tree__chevron-spacer{width:20px;height:20px;flex-shrink:0}.tree__label{display:inline-flex;align-items:center;font-size:var(--font-size-sm);color:inherit}";
+var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (e, t, r, n) => {
+  for (var o = n > 1 ? void 0 : n ? x(t, r) : t, s = e.length - 1, h; s >= 0; s--)
+    (h = e[s]) && (o = (n ? h(t, r, o) : h(o)) || o);
+  return n && o && w(t, r, o), o;
+};
+let i = class extends u {
+  constructor() {
+    super(...arguments), this.items = [], this.expandedIds = [], this.expandOnLabelClick = !0, this.chevronPosition = "left", this.showLabels = !0, this.iconSize = 16, this._expandedSet = /* @__PURE__ */ new Set();
+  }
+  willUpdate(e) {
+    e.has("expandedIds") && (this._expandedSet = new Set(this.expandedIds ?? []));
+  }
+  _isExpanded(e) {
+    return this._expandedSet.has(e);
+  }
+  _emitToggle(e, t) {
+    this.dispatchEvent(
+      new CustomEvent("toggle", {
+        detail: { item: e, expanded: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _emitItemClick(e) {
+    this.dispatchEvent(
+      new CustomEvent("item-click", {
+        detail: { item: e },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _emitNodeClick(e, t) {
+    this.dispatchEvent(
+      new CustomEvent("node-click", {
+        detail: { item: e, hasChildren: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _setExpanded(e, t) {
+    t ? this._expandedSet.add(e.id) : this._expandedSet.delete(e.id), this.expandedIds = Array.from(this._expandedSet), this._emitToggle(e, t);
+  }
+  _toggle(e, t) {
+    t.stopPropagation(), !(e.disabled || !e.children?.length) && this._setExpanded(e, !this._isExpanded(e.id));
+  }
+  _handleItemClick(e, t) {
+    if (t.stopPropagation(), e.disabled) return;
+    const r = !!e.children?.length;
+    if (this._emitNodeClick(e, r), r && this.expandOnLabelClick) {
+      this._setExpanded(e, !this._isExpanded(e.id));
+      return;
+    }
+    r || (e.onClick?.(e), this._emitItemClick(e));
+  }
+  _handleRowKeydown(e, t) {
+    t.key !== "Enter" && t.key !== " " || (t.preventDefault(), this._handleItemClick(e, t));
+  }
+  _renderIcon(e) {
+    return e.iconName ? a`
+        <span class="tree__icon">
+          <ui-icon name=${e.iconName} .size=${this.iconSize}></ui-icon>
+        </span>
+      ` : e.iconHtml ? a`<span class="tree__icon">${b(e.iconHtml)}</span>` : c;
+  }
+  _renderChevron(e, t) {
+    const r = !!e.children?.length;
+    return this.showLabels ? r ? a`
+      <button
+        type="button"
+        class="tree__chevron-btn ${this.chevronPosition === "right" ? "tree__chevron-btn--right" : ""}"
+        aria-label=${t ? "Collapse" : "Expand"}
+        @click=${(n) => this._toggle(e, n)}
+      >
+        <ui-icon
+          class="tree__chevron ${t ? "tree__chevron--open" : ""}"
+          name="uil-angle-down"
+          size="20"
+        ></ui-icon>
+      </button>
+    ` : a`<span class="tree__chevron-spacer"></span>` : c;
+  }
+  _renderNode(e, t) {
+    const r = !!e.children?.length, n = r ? this._isExpanded(e.id) : !1, o = this.showLabels ? `--tree-level:${t};` : "--tree-level:0;";
+    return a`
+      <li class="tree__item">
+        <div
+          class="tree__row ${e.disabled ? "tree__row--disabled" : ""} ${e.active ? "tree__row--active" : ""}"
+          style=${o}
+          role="button"
+          tabindex=${e.disabled ? -1 : 0}
+          @click=${(s) => this._handleItemClick(e, s)}
+          @keydown=${(s) => this._handleRowKeydown(e, s)}
+          title=${this.showLabels ? "" : e.label}
+        >
+          ${this.chevronPosition === "left" ? this._renderChevron(e, n) : c}
+          ${this._renderIcon(e)}
+          ${this.showLabels ? a`<span class="tree__label">${e.label}</span>` : c}
+          ${this.chevronPosition === "right" ? this._renderChevron(e, n) : c}
+        </div>
+
+        ${this.showLabels && r && n ? a`
+              <ul class="tree__children">
+                ${e.children.map((s) => this._renderNode(s, t + 1))}
+              </ul>
+            ` : c}
+      </li>
+    `;
+  }
+  render() {
+    return a`
+      <nav class="tree ${this.showLabels ? "" : "tree--icons"}" aria-label="Tree Menu">
+        <ul class="tree__list">
+          ${this.items.map((e) => this._renderNode(e, 0))}
+        </ul>
+      </nav>
+    `;
+  }
+};
+i.styles = [_`${p(f)}`];
+l([
+  d({ attribute: !1 })
+], i.prototype, "items", 2);
+l([
+  d({ type: Array })
+], i.prototype, "expandedIds", 2);
+l([
+  d({ type: Boolean })
+], i.prototype, "expandOnLabelClick", 2);
+l([
+  d({ type: String })
+], i.prototype, "chevronPosition", 2);
+l([
+  d({ type: Boolean })
+], i.prototype, "showLabels", 2);
+l([
+  d({ type: Number })
+], i.prototype, "iconSize", 2);
+l([
+  v()
+], i.prototype, "_expandedSet", 2);
+i = l([
+  g("logosphere-tree-menu")
+], i);
+export {
+  i as T
+};

package/dist/tree-menu.cjs

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

package/dist/tree-menu.js

@@ -0,0 +1,4 @@
+import { T as o } from "./tree-menu-Psek8QB9.js";
+export {
+  o as TreeMenu
+};

package/dist/ui-icon-Cd5YhUeQ.cjs

@@ -0,0 +1,22 @@
+"use strict";const a=require("lit"),w=require("lit/directives/unsafe-html.js"),g='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.41,12l4.3-4.29a1,1,0,1,0-1.42-1.42L12,10.59,7.71,6.29A1,1,0,0,0,6.29,7.71L10.59,12l-4.3,4.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L12,13.41l4.29,4.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z"/></svg>',e='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.09814,12.63379,13,11.42285V7a1,1,0,0,0-2,0v5a.99985.99985,0,0,0,.5.86621l2.59814,1.5a1.00016,1.00016,0,1,0,1-1.73242ZM12,2A10,10,0,1,0,22,12,10.01114,10.01114,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8.00917,8.00917,0,0,1,12,20Z"/></svg>',o='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.71,7.21a1,1,0,0,0-1.42,0L9.84,14.67,6.71,11.53A1,1,0,1,0,5.29,13l3.84,3.84a1,1,0,0,0,1.42,0l8.16-8.16A1,1,0,0,0,18.71,7.21Z"/></svg>',v='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,11H13V5a1,1,0,0,0-2,0v6H5a1,1,0,0,0,0,2h6v6a1,1,0,0,0,2,0V13h6a1,1,0,0,0,0-2Z"/></svg>',n='<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24"><path d="M12,19a1,1,0,1,0-1-1A1,1,0,0,0,12,19Zm5,0a1,1,0,1,0-1-1A1,1,0,0,0,17,19Zm0-4a1,1,0,1,0-1-1A1,1,0,0,0,17,15Zm-5,0a1,1,0,1,0-1-1A1,1,0,0,0,12,15ZM19,3H18V2a1,1,0,0,0-2,0V3H8V2A1,1,0,0,0,6,2V3H5A3,3,0,0,0,2,6V20a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V6A3,3,0,0,0,19,3Zm1,17a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V11H20ZM20,9H4V6A1,1,0,0,1,5,5H6V6A1,1,0,0,0,8,6V5h8V6a1,1,0,0,0,2,0V5h1a1,1,0,0,1,1,1ZM7,15a1,1,0,1,0-1-1A1,1,0,0,0,7,15Zm0,4a1,1,0,1,0-1-1A1,1,0,0,0,7,19Z"/></svg>',i='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,4H17V3a1,1,0,0,0-2,0V4H9V3A1,1,0,0,0,7,3V4H5A3,3,0,0,0,2,7V19a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V7A3,3,0,0,0,19,4Zm1,15a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V12H20Zm0-9H4V7A1,1,0,0,1,5,6H7V7A1,1,0,0,0,9,7V6h6V7a1,1,0,0,0,2,0V6h2a1,1,0,0,1,1,1Z"/></svg>',h='<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24"><path d="M17,11H9.41l3.3-3.29a1,1,0,1,0-1.42-1.42l-5,5a1,1,0,0,0-.21.33,1,1,0,0,0,0,.76,1,1,0,0,0,.21.33l5,5a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42L9.41,13H17a1,1,0,0,0,0-2Z"/></svg>',r='<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24"><path d="M17.92,11.62a1,1,0,0,0-.21-.33l-5-5a1,1,0,0,0-1.42,1.42L14.59,11H7a1,1,0,0,0,0,2h7.59l-3.3,3.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l5-5a1,1,0,0,0,.21-.33A1,1,0,0,0,17.92,11.62Z"/></svg>',A='<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24"><path d="M17.71,11.29l-5-5a1,1,0,0,0-.33-.21,1,1,0,0,0-.76,0,1,1,0,0,0-.33.21l-5,5a1,1,0,0,0,1.42,1.42L11,9.41V17a1,1,0,0,0,2,0V9.41l3.29,3.3a1,1,0,0,0,1.42,0A1,1,0,0,0,17.71,11.29Z"/></svg>',c='<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24"><path d="M17.71,11.29a1,1,0,0,0-1.42,0L13,14.59V7a1,1,0,0,0-2,0v7.59l-3.29-3.3a1,1,0,0,0-1.42,1.42l5,5a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l5-5A1,1,0,0,0,17.71,11.29Z"/></svg>',p='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17,9.17a1,1,0,0,0-1.41,0L12,12.71,8.46,9.17a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l4.24,4.24a1,1,0,0,0,1.42,0L17,10.59A1,1,0,0,0,17,9.17Z"/></svg>',m='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.29,12l3.54-3.54a1,1,0,0,0,0-1.41,1,1,0,0,0-1.42,0L9.17,11.29a1,1,0,0,0,0,1.42L13.41,17a1,1,0,0,0,.71.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41Z"/></svg>',Z='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.83,11.29,10.59,7.05a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41L12.71,12,9.17,15.54a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.29,1,1,0,0,0,.71-.29l4.24-4.24A1,1,0,0,0,14.83,11.29Z"/></svg>',x='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.46,8.29a1,1,0,0,0-1.42,0l-3,3a1,1,0,0,0,0,1.42l3,3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42L9.16,12l2.3-2.29A1,1,0,0,0,11.46,8.29ZM14.66,12,17,9.71a1,1,0,0,0-1.42-1.42l-3,3a1,1,0,0,0,0,1.42l3,3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z"/></svg>',H='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.46,8.29A1,1,0,1,0,7,9.71L9.34,12,7,14.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l3-3a1,1,0,0,0,0-1.42Zm8.5,3-3-3a1,1,0,0,0-1.42,1.42L14.84,12l-2.3,2.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l3-3A1,1,0,0,0,17,11.29Z"/></svg>',V='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20,6H16V5a3,3,0,0,0-3-3H11A3,3,0,0,0,8,5V6H4A1,1,0,0,0,4,8H5V19a3,3,0,0,0,3,3h8a3,3,0,0,0,3-3V8h1a1,1,0,0,0,0-2ZM10,5a1,1,0,0,1,1-1h2a1,1,0,0,1,1,1V6H10Zm7,14a1,1,0,0,1-1,1H8a1,1,0,0,1-1-1V8H17Z"/></svg>',u='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.71,2.29a1,1,0,0,0-1.42,0L14.5,8.09V6.5a1,1,0,0,0-2,0v4a1,1,0,0,0,.08.38,1,1,0,0,0,.54.54,1,1,0,0,0,.38.08h4a1,1,0,0,0,0-2H15.91l5.8-5.79A1,1,0,0,0,21.71,2.29ZM10.88,12.58a1,1,0,0,0-.38-.08h-4a1,1,0,0,0,0,2H8.09l-5.8,5.79a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l5.79-5.8V17.5a1,1,0,0,0,2,0v-4a1,1,0,0,0-.08-.38A1,1,0,0,0,10.88,12.58Z"/></svg>',M='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.79,12.79,4,18.59V17a1,1,0,0,0-2,0v4a1,1,0,0,0,.08.38,1,1,0,0,0,.54.54A1,1,0,0,0,3,22H7a1,1,0,0,0,0-2H5.41l5.8-5.79a1,1,0,0,0-1.42-1.42ZM21.92,2.62a1,1,0,0,0-.54-.54A1,1,0,0,0,21,2H17a1,1,0,0,0,0,2h1.59l-5.8,5.79a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L20,5.41V7a1,1,0,0,0,2,0V3A1,1,0,0,0,21.92,2.62Z"/></svg>',d='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21,8.94a1.31,1.31,0,0,0-.06-.27l0-.09a1.07,1.07,0,0,0-.19-.28h0l-6-6h0a1.07,1.07,0,0,0-.28-.19.32.32,0,0,0-.09,0A.88.88,0,0,0,14.05,2H10A3,3,0,0,0,7,5V6H6A3,3,0,0,0,3,9V19a3,3,0,0,0,3,3h8a3,3,0,0,0,3-3V18h1a3,3,0,0,0,3-3V9S21,9,21,8.94ZM15,5.41,17.59,8H16a1,1,0,0,1-1-1ZM15,19a1,1,0,0,1-1,1H6a1,1,0,0,1-1-1V9A1,1,0,0,1,6,8H7v7a3,3,0,0,0,3,3h5Zm4-4a1,1,0,0,1-1,1H10a1,1,0,0,1-1-1V5a1,1,0,0,1,1-1h3V7a3,3,0,0,0,3,3h3Z"/></svg>',L='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.3,10.08A3,3,0,0,0,19,9H14.44L15,7.57A4.13,4.13,0,0,0,11.11,2a1,1,0,0,0-.91.59L7.35,9H5a3,3,0,0,0-3,3v7a3,3,0,0,0,3,3H17.73a3,3,0,0,0,2.95-2.46l1.27-7A3,3,0,0,0,21.3,10.08ZM7,20H5a1,1,0,0,1-1-1V12a1,1,0,0,1,1-1H7Zm13-7.82-1.27,7a1,1,0,0,1-1,.82H9V10.21l2.72-6.12A2.11,2.11,0,0,1,13.1,6.87L12.57,8.3A2,2,0,0,0,14.44,11H19a1,1,0,0,1,.77.36A1,1,0,0,1,20,12.18Z"/></svg>',B='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,2H6.27A3,3,0,0,0,3.32,4.46l-1.27,7A3,3,0,0,0,5,15H9.56L9,16.43A4.13,4.13,0,0,0,12.89,22a1,1,0,0,0,.91-.59L16.65,15H19a3,3,0,0,0,3-3V5A3,3,0,0,0,19,2ZM15,13.79l-2.72,6.12a2.13,2.13,0,0,1-1.38-2.78l.53-1.43A2,2,0,0,0,9.56,13H5a1,1,0,0,1-.77-.36A1,1,0,0,1,4,11.82l1.27-7a1,1,0,0,1,1-.82H15ZM20,12a1,1,0,0,1-1,1H17V4h2a1,1,0,0,1,1,1Z"/></svg>',f='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.71,12.71a1,1,0,0,0,.21-.33,1,1,0,0,0,0-.76,1,1,0,0,0-.21-.33l-3-3a1,1,0,0,0-1.42,1.42L12.59,11H9a1,1,0,0,0,0,2h3.59l-1.3,1.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0ZM22,12A10,10,0,1,0,12,22,10,10,0,0,0,22,12ZM4,12a8,8,0,1,1,8,8A8,8,0,0,1,4,12Z"/></svg>',y='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.92,11.6C19.9,6.91,16.1,4,12,4S4.1,6.91,2.08,11.6a1,1,0,0,0,0,.8C4.1,17.09,7.9,20,12,20s7.9-2.91,9.92-7.6A1,1,0,0,0,21.92,11.6ZM12,18c-3.17,0-6.17-2.29-7.9-6C5.83,8.29,8.83,6,12,6s6.17,2.29,7.9,6C18.17,15.71,15.17,18,12,18ZM12,8a4,4,0,1,0,4,4A4,4,0,0,0,12,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,12,14Z"/></svg>',C='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.94,6.08A6.93,6.93,0,0,1,12,6c3.18,0,6.17,2.29,7.91,6a15.23,15.23,0,0,1-.9,1.64,1,1,0,0,0-.16.55,1,1,0,0,0,1.86.5,15.77,15.77,0,0,0,1.21-2.3,1,1,0,0,0,0-.79C19.9,6.91,16.1,4,12,4a7.77,7.77,0,0,0-1.4.12,1,1,0,1,0,.34,2ZM3.71,2.29A1,1,0,0,0,2.29,3.71L5.39,6.8a14.62,14.62,0,0,0-3.31,4.8,1,1,0,0,0,0,.8C4.1,17.09,7.9,20,12,20a9.26,9.26,0,0,0,5.05-1.54l3.24,3.25a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Zm6.36,9.19,2.45,2.45A1.81,1.81,0,0,1,12,14a2,2,0,0,1-2-2A1.81,1.81,0,0,1,10.07,11.48ZM12,18c-3.18,0-6.17-2.29-7.9-6A12.09,12.09,0,0,1,6.8,8.21L8.57,10A4,4,0,0,0,14,15.43L15.59,17A7.24,7.24,0,0,1,12,18Z"/></svg>',b='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.71,20.29,18,16.61A9,9,0,1,0,16.61,18l3.68,3.68a1,1,0,0,0,1.42,0A1,1,0,0,0,21.71,20.29ZM11,18a7,7,0,1,1,7-7A7,7,0,0,1,11,18Z"/></svg>',k='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21,11H9.41l2.3-2.29a1,1,0,1,0-1.42-1.42l-4,4a1,1,0,0,0-.21.33,1,1,0,0,0,0,.76,1,1,0,0,0,.21.33l4,4a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42L9.41,13H21a1,1,0,0,0,0-2ZM3,3A1,1,0,0,0,2,4V20a1,1,0,0,0,2,0V4A1,1,0,0,0,3,3Z"/></svg>',D='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.71,11.29l-4-4a1,1,0,1,0-1.42,1.42L14.59,11H3a1,1,0,0,0,0,2H14.59l-2.3,2.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l4-4a1,1,0,0,0,.21-.33,1,1,0,0,0,0-.76A1,1,0,0,0,17.71,11.29ZM21,4a1,1,0,0,0-1,1V19a1,1,0,0,0,2,0V5A1,1,0,0,0,21,4Z"/></svg>',R='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.37,12.79a1,1,0,0,0-.74,1.86C17.09,15.23,18,16.13,18,17c0,1.42-2.46,3-6,3s-6-1.58-6-3c0-.87.91-1.77,2.37-2.35a1,1,0,0,0-.74-1.86C5.36,13.69,4,15.26,4,17c0,2.8,3.51,5,8,5s8-2.2,8-5C20,15.26,18.64,13.69,16.37,12.79ZM11,9.86V17a1,1,0,0,0,2,0V9.86a4,4,0,1,0-2,0ZM12,4a2,2,0,1,1-2,2A2,2,0,0,1,12,4Z"/></svg>',z='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.72,8.79l-4.29,4.3L8.78,11.44a1,1,0,1,0-1.41,1.41l2.35,2.36a1,1,0,0,0,.71.29,1,1,0,0,0,.7-.29l5-5a1,1,0,0,0,0-1.42A1,1,0,0,0,14.72,8.79ZM12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"/></svg>',S='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,16a1,1,0,1,0,1,1A1,1,0,0,0,12,16Zm10.67,1.47-8.05-14a3,3,0,0,0-5.24,0l-8,14A3,3,0,0,0,3.94,22H20.06a3,3,0,0,0,2.61-4.53Zm-1.73,2a1,1,0,0,1-.88.51H3.94a1,1,0,0,1-.88-.51,1,1,0,0,1,0-1l8-14a1,1,0,0,1,1.78,0l8.05,14A1,1,0,0,1,20.94,19.49ZM12,8a1,1,0,0,0-1,1v4a1,1,0,0,0,2,0V9A1,1,0,0,0,12,8Z"/></svg>',T='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,7a1,1,0,0,0-1,1v4a1,1,0,0,0,2,0V8A1,1,0,0,0,12,7Zm0,8a1,1,0,1,0,1,1A1,1,0,0,0,12,15Zm9.71-7.44L16.44,2.29A1.05,1.05,0,0,0,15.73,2H8.27a1.05,1.05,0,0,0-.71.29L2.29,7.56A1.05,1.05,0,0,0,2,8.27v7.46a1.05,1.05,0,0,0,.29.71l5.27,5.27a1.05,1.05,0,0,0,.71.29h7.46a1.05,1.05,0,0,0,.71-.29l5.27-5.27a1.05,1.05,0,0,0,.29-.71V8.27A1.05,1.05,0,0,0,21.71,7.56ZM20,15.31,15.31,20H8.69L4,15.31V8.69L8.69,4h6.62L20,8.69Z"/></svg>',j='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,2A10,10,0,1,0,22,12,10.01114,10.01114,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8.00917,8.00917,0,0,1,12,20Zm0-8.5a1,1,0,0,0-1,1v3a1,1,0,0,0,2,0v-3A1,1,0,0,0,12,11.5Zm0-4a1.25,1.25,0,1,0,1.25,1.25A1.25,1.25,0,0,0,12,7.5Z"/></svg>',q={"uil-times":g,"uil-clock":e,"uil-check":o,"uil-plus":v,"uil-calendar":i,"uil-calendar-alt":n,"uil-arrow-left":h,"uil-arrow-right":r,"uil-arrow-up":A,"uil-arrow-down":c,"uil-angle-down":p,"uil-angle-left":m,"uil-angle-right":Z,"uil-angle-double-left":x,"uil-angle-double-right":H,"uil-trash":V,"uil-compress-alt":u,"uil-expand-alt":M,"uil-copy":d,"uil-thumbs-up":L,"uil-thumbs-down":B,"uil-arrow-circle-right":f,"uil-eye":y,"uil-eye-slash":C,"uil-search":b,"uil-left-arrow-to-left":k,"uil-right-arrow-to-right":D,"uil-pin":R,"uil-check-circle":z,"uil-exclamation-triangle":S,"uil-exclamation-octagon":T,"uil-info-circle":j},s=class s extends a.LitElement{constructor(){super(...arguments),this.name="",this.size=20}render(){const l=q[this.name];return l?a.html`
+      <span
+        style="font-size: ${this.size}px;"
+        aria-hidden="true"
+      >
+        ${w.unsafeHTML(l)}
+      </span>
+    `:a.html``}};s.properties={name:{type:String},size:{type:Number}},s.styles=a.css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 0;
+      color: inherit;
+    }
+
+    svg {
+      width: 1em;
+      height: 1em;
+      fill: currentColor;
+    }
+  `;let t=s;customElements.define("ui-icon",t);exports.UiIcon=t;