@lazhus/kg-ui 0.4.11 → 0.4.12

package/dist/components/kg-accordion-item.js

@@ -1,12 +1,18 @@
-import { LitElement as e, css as t, html as o } from "lit";
-import "lit/directives/class-map.js";
-class r extends e {
-  static properties = {
-    title: { type: String },
-    open: { type: Boolean, reflect: !0 },
-    disabled: { type: Boolean }
-  };
-  static styles = t`
+var e=Object.defineProperty,t=(t,o,r)=>((t,o,r)=>o in t?e(t,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[o]=r)(t,"symbol"!=typeof o?o+"":o,r);import{LitElement as o,css as r,html as i}from"lit";import"lit/directives/class-map.js";class n extends o{constructor(){super(),this.open=!1,this.disabled=!1}_toggle(){this.disabled||this.dispatchEvent(new CustomEvent("kg-accordion-toggle",{detail:{open:!this.open},bubbles:!0,composed:!0}))}render(){return i`
+      <div class="accordion-item ${this.disabled?"disabled":""}">
+        <div class="accordion-header" @click="${this._toggle}">
+            <span class="title">${this.title}</span>
+            <svg class="chevron" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+        </div>
+        <div class="content-wrapper">
+            <div class="content">
+                <slot></slot>
+            </div>
+        </div>
+      </div>
+    `}}t(n,"properties",{title:{type:String},open:{type:Boolean,reflect:!0},disabled:{type:Boolean}}),t(n,"styles",r`
     :host {
       display: block;
       border-bottom: 1px solid var(--kg-border);
@@ -82,36 +88,4 @@ class r extends e {
       cursor: not-allowed !important;
       pointer-events: none;
     }
-  `;
-  constructor() {
-    super(), this.open = !1, this.disabled = !1;
-  }
-  _toggle() {
-    this.disabled || this.dispatchEvent(new CustomEvent("kg-accordion-toggle", {
-      detail: { open: !this.open },
-      bubbles: !0,
-      composed: !0
-    }));
-  }
-  render() {
-    return o`
-      <div class="accordion-item ${this.disabled ? "disabled" : ""}">
-        <div class="accordion-header" @click="${this._toggle}">
-            <span class="title">${this.title}</span>
-            <svg class="chevron" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <polyline points="6 9 12 15 18 9"></polyline>
-            </svg>
-        </div>
-        <div class="content-wrapper">
-            <div class="content">
-                <slot></slot>
-            </div>
-        </div>
-      </div>
-    `;
-  }
-}
-customElements.define("kg-accordion-item", r);
-export {
-  r as kgaccordionitem
-};
+  `),customElements.define("kg-accordion-item",n);export{n as kgaccordionitem};

package/dist/components/kg-accordion.js

@@ -1,10 +1,4 @@
-import { LitElement as s, css as i, html as l } from "lit";
-class a extends s {
-  static properties = {
-    exclusive: { type: Boolean }
-    // If true, only one item can be open at a time
-  };
-  static styles = i`
+var e=Object.defineProperty,r=(r,o,t)=>((r,o,t)=>o in r?e(r,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[o]=t)(r,"symbol"!=typeof o?o+"":o,t);import{LitElement as o,css as t,html as l}from"lit";class i extends o{constructor(){super(),this.exclusive=!1,this.addEventListener("kg-accordion-toggle",this._handleToggle)}_handleToggle(e){const r=e.target,o=Array.from(this.querySelectorAll("kg-accordion-item"));this.exclusive&&e.detail.open&&o.forEach(e=>{e!==r&&(e.open=!1)}),r.open=e.detail.open}render(){return l`<slot></slot>`}}r(i,"properties",{exclusive:{type:Boolean}}),r(i,"styles",t`
     :host {
       display: block;
       border: 1px solid var(--kg-border);
@@ -12,21 +6,4 @@ class a extends s {
       overflow: hidden;
       background: var(--kg-bg);
     }
-  `;
-  constructor() {
-    super(), this.exclusive = !1, this.addEventListener("kg-accordion-toggle", this._handleToggle);
-  }
-  _handleToggle(e) {
-    const o = e.target, r = Array.from(this.querySelectorAll("kg-accordion-item"));
-    this.exclusive && e.detail.open && r.forEach((t) => {
-      t !== o && (t.open = !1);
-    }), o.open = e.detail.open;
-  }
-  render() {
-    return l`<slot></slot>`;
-  }
-}
-customElements.define("kg-accordion", a);
-export {
-  a as kgaccordion
-};
+  `),customElements.define("kg-accordion",i);export{i as kgaccordion};

package/dist/components/kg-avatar.js

@@ -1,21 +1,10 @@
-import { LitElement as a, css as n, html as r } from "lit";
-class c extends a {
-  static properties = {
-    src: { type: String },
-    alt: { type: String },
-    name: { type: String },
-    size: { type: String },
-    // tiny, small, medium, large, huge, massive
-    shape: { type: String },
-    // circle, square, rounded
-    status: { type: String },
-    // online, offline, away, busy
-    badge: { type: String },
-    // numeric or simple dot
-    color: { type: String }
-    // primary, secondary, tertiary, etc. or hex
-  };
-  static styles = n`
+var r=Object.defineProperty,t=(t,e,i)=>((t,e,i)=>e in t?r(t,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[e]=i)(t,"symbol"!=typeof e?e+"":e,i);import{LitElement as e,css as i,html as o}from"lit";class a extends e{constructor(){super(),this.size="medium",this.shape="circle",this.alt="Avatar"}getInitials(){if(!this.name)return"";const r=this.name.split(" ");return r.length>1?(r[0][0]+r[r.length-1][0]).toUpperCase():r[0][0].toUpperCase()}render(){const r=["primary","secondary","tertiary","error","success","warning","info"].includes(this.color),t=this.color&&!r,e=["avatar-wrapper",this.size,this.shape,this.color&&r?this.color:"",t?"custom-color":""].join(" "),i=t?`--avatar-bg: ${this.color};`:"";return o`
+      <div class="${e}" style="${i}" title="${this.name||this.alt}">
+        ${this.src?o`<img class="avatar-img" src="${this.src}" alt="${this.alt}" @error=${()=>this.src=""} />`:o`<span class="initials">${this.getInitials()}</span>`}
+      </div>
+      ${this.status?o`<div class="status-badge ${this.status} ${this.shape}"></div>`:""}
+      ${this.badge?o`<div class="numeric-badge">${this.badge}</div>`:""}
+    `}}t(a,"properties",{src:{type:String},alt:{type:String},name:{type:String},size:{type:String},shape:{type:String},status:{type:String},badge:{type:String},color:{type:String}}),t(a,"styles",i`
     :host {
       display: inline-block;
       vertical-align: middle;
@@ -105,33 +94,4 @@ class c extends a {
       background-color: var(--avatar-bg);
       color: white;
     }
-  `;
-  constructor() {
-    super(), this.size = "medium", this.shape = "circle", this.alt = "Avatar";
-  }
-  getInitials() {
-    if (!this.name) return "";
-    const t = this.name.split(" ");
-    return t.length > 1 ? (t[0][0] + t[t.length - 1][0]).toUpperCase() : t[0][0].toUpperCase();
-  }
-  render() {
-    const e = ["primary", "secondary", "tertiary", "error", "success", "warning", "info"].includes(this.color), i = this.color && !e, o = [
-      "avatar-wrapper",
-      this.size,
-      this.shape,
-      this.color && e ? this.color : "",
-      i ? "custom-color" : ""
-    ].join(" "), s = i ? `--avatar-bg: ${this.color};` : "";
-    return r`
-      <div class="${o}" style="${s}" title="${this.name || this.alt}">
-        ${this.src ? r`<img class="avatar-img" src="${this.src}" alt="${this.alt}" @error=${() => this.src = ""} />` : r`<span class="initials">${this.getInitials()}</span>`}
-      </div>
-      ${this.status ? r`<div class="status-badge ${this.status} ${this.shape}"></div>` : ""}
-      ${this.badge ? r`<div class="numeric-badge">${this.badge}</div>` : ""}
-    `;
-  }
-}
-customElements.define("kg-avatar", c);
-export {
-  c as kgavatar
-};
+  `),customElements.define("kg-avatar",a);export{a as kgavatar};

package/dist/components/kg-breadcrumbs.js

@@ -1,9 +1,8 @@
-import { LitElement as a, css as r, html as e } from "lit";
-class n extends a {
-  static properties = {
-    separator: { type: String }
-  };
-  static styles = r`
+var e=Object.defineProperty,t=(t,r,a)=>((t,r,a)=>r in t?e(t,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):t[r]=a)(t,"symbol"!=typeof r?r+"":r,a);import{LitElement as r,css as a,html as s}from"lit";class o extends r{constructor(){super(),this.separator="/"}_handleSlotChange(e){e.target.assignedNodes().filter(e=>e.nodeType===Node.ELEMENT_NODE),this.requestUpdate()}render(){return s`
+      <nav aria-label="Breadcrumb">
+        <slot @slotchange="${this._handleSlotChange}"></slot>
+      </nav>
+    `}}t(o,"properties",{separator:{type:String}}),t(o,"styles",a`
     :host {
       display: block;
     }
@@ -46,28 +45,15 @@ class n extends a {
       font-size: 0.8em;
       opacity: 0.5;
     }
-  `;
-  constructor() {
-    super(), this.separator = "/";
-  }
-  _handleSlotChange(t) {
-    t.target.assignedNodes().filter((o) => o.nodeType === Node.ELEMENT_NODE), this.requestUpdate();
-  }
-  render() {
-    return e`
-      <nav aria-label="Breadcrumb">
-        <slot @slotchange="${this._handleSlotChange}"></slot>
-      </nav>
-    `;
-  }
-}
-class i extends a {
-  static properties = {
-    href: { type: String },
-    active: { type: Boolean, reflect: !0 },
-    separator: { type: String }
-  };
-  static styles = r`
+  `);class n extends r{constructor(){super(),this.active=!1,this.separator="/"}render(){const e=s`
+      <slot name="icon"></slot>
+      <slot></slot>
+    `;return s`
+      ${this.href&&!this.active?s`<a class="item" href="${this.href}">${e}</a>`:s`<span class="item ${this.active?"active":""}">${e}</span>`}
+      <span class="separator">
+        <slot name="separator">${this.separator}</slot>
+      </span>
+    `}}t(n,"properties",{href:{type:String},active:{type:Boolean,reflect:!0},separator:{type:String}}),t(n,"styles",a`
     :host {
       display: inline-flex;
       align-items: center;
@@ -105,26 +91,4 @@ class i extends a {
     :host(:last-child) .separator {
       display: none;
     }
-  `;
-  constructor() {
-    super(), this.active = !1, this.separator = "/";
-  }
-  render() {
-    const t = e`
-      <slot name="icon"></slot>
-      <slot></slot>
-    `;
-    return e`
-      ${this.href && !this.active ? e`<a class="item" href="${this.href}">${t}</a>` : e`<span class="item ${this.active ? "active" : ""}">${t}</span>`}
-      <span class="separator">
-        <slot name="separator">${this.separator}</slot>
-      </span>
-    `;
-  }
-}
-customElements.define("kg-breadcrumbs", n);
-customElements.define("kg-breadcrumb-item", i);
-export {
-  i as kgbreadcrumbitem,
-  n as kgbreadcrumbs
-};
+  `),customElements.define("kg-breadcrumbs",o),customElements.define("kg-breadcrumb-item",n);export{n as kgbreadcrumbitem,o as kgbreadcrumbs};

package/dist/components/kg-button.js

@@ -1,25 +1,19 @@
-import { LitElement as n, css as s, html as l } from "lit";
-import { classMap as d } from "lit/directives/class-map.js";
-class c extends n {
-  static properties = {
-    color: { type: String },
-    // primary, secondary, tertiary, red, green, etc.
-    size: { type: String },
-    // mini, tiny, small, medium, large, big, huge, massive
-    fullwidth: { type: Boolean },
-    circular: { type: Boolean },
-    square: { type: Boolean },
-    loading: { type: Boolean },
-    disabled: { type: Boolean },
-    basic: { type: Boolean },
-    inverted: { type: Boolean },
-    active: { type: Boolean },
-    text: { type: Boolean },
-    hasText: { type: Boolean, state: !0 },
-    hasLeft: { type: Boolean, state: !0 },
-    hasRight: { type: Boolean, state: !0 }
-  };
-  static styles = s`
+var t=Object.defineProperty,o=(o,r,e)=>((o,r,e)=>r in o?t(o,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[r]=e)(o,"symbol"!=typeof r?r+"":r,e);import{LitElement as r,css as e,html as a}from"lit";import{classMap as i}from"lit/directives/class-map.js";class n extends r{constructor(){super(),this.color="",this.size="medium",this.hasText=!1,this.hasLeft=!1,this.hasRight=!1}_handleSlotChange(t){const o=t.target,r=o.assignedNodes({flatten:!0}).filter(t=>t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&t.textContent.trim().length>0).length>0;o.name?"left"===o.name?this.hasLeft=r:"right"===o.name&&(this.hasRight=r):this.hasText=r}render(){const t=["primary","secondary","tertiary","error"].includes(this.color),o=this.color&&!t,r=!this.hasText&&(this.hasLeft||this.hasRight),e={[this.color]:t,"custom-color":o,[this.size]:!!this.size,fullwidth:this.fullwidth,circular:this.circular,square:this.square,loading:this.loading,basic:this.basic,text:this.text,inverted:this.inverted,disabled:this.disabled,"icon-only":r},n=o?`border: none; --kg-custom-color: ${this.color};`:"";return a`
+      <button 
+        class="${i(e)}"
+        style="${n}"
+        ?disabled=${this.disabled}
+        @click=${this._handleClick}
+      >
+        <slot name="left" @slotchange=${this._handleSlotChange}></slot>
+        
+        <span style="display: ${this.hasText?"inline-block":"none"}">
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        </span>
+        
+        <slot name="right" @slotchange=${this._handleSlotChange}></slot>
+      </button>
+    `}_handleClick(t){(this.loading||this.disabled)&&(t.preventDefault(),t.stopPropagation())}}o(n,"properties",{color:{type:String},size:{type:String},fullwidth:{type:Boolean},circular:{type:Boolean},square:{type:Boolean},loading:{type:Boolean},disabled:{type:Boolean},basic:{type:Boolean},inverted:{type:Boolean},active:{type:Boolean},text:{type:Boolean},hasText:{type:Boolean,state:!0},hasLeft:{type:Boolean,state:!0},hasRight:{type:Boolean,state:!0}}),o(n,"styles",e`
     :host {
       display: inline-block;
       vertical-align: middle;
@@ -189,53 +183,4 @@ class c extends n {
       box-shadow: none !important;
       pointer-events: none !important;
     }
-  `;
-  constructor() {
-    super(), this.color = "", this.size = "medium", this.hasText = !1, this.hasLeft = !1, this.hasRight = !1;
-  }
-  _handleSlotChange(o) {
-    const t = o.target, r = t.assignedNodes({ flatten: !0 }).filter(
-      (e) => e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && e.textContent.trim().length > 0
-    ).length > 0;
-    t.name ? t.name === "left" ? this.hasLeft = r : t.name === "right" && (this.hasRight = r) : this.hasText = r;
-  }
-  render() {
-    const t = ["primary", "secondary", "tertiary", "error"].includes(this.color), a = this.color && !t, r = !this.hasText && (this.hasLeft || this.hasRight), e = {
-      [this.color]: t,
-      "custom-color": a,
-      [this.size]: !!this.size,
-      fullwidth: this.fullwidth,
-      circular: this.circular,
-      square: this.square,
-      loading: this.loading,
-      basic: this.basic,
-      text: this.text,
-      inverted: this.inverted,
-      disabled: this.disabled,
-      "icon-only": r
-    }, i = a ? `border: none; --kg-custom-color: ${this.color};` : "";
-    return l`
-      <button 
-        class="${d(e)}"
-        style="${i}"
-        ?disabled=${this.disabled}
-        @click=${this._handleClick}
-      >
-        <slot name="left" @slotchange=${this._handleSlotChange}></slot>
-        
-        <span style="display: ${this.hasText ? "inline-block" : "none"}">
-          <slot @slotchange=${this._handleSlotChange}></slot>
-        </span>
-        
-        <slot name="right" @slotchange=${this._handleSlotChange}></slot>
-      </button>
-    `;
-  }
-  _handleClick(o) {
-    (this.loading || this.disabled) && (o.preventDefault(), o.stopPropagation());
-  }
-}
-customElements.define("kg-button", c);
-export {
-  c as kgbutton
-};
+  `),customElements.define("kg-button",n);export{n as kgbutton};

package/dist/components/kg-card.js

@@ -1,16 +1,22 @@
-import { LitElement as a, css as d, html as r } from "lit";
-import { classMap as s } from "lit/directives/class-map.js";
-class i extends a {
-  static properties = {
-    raised: { type: Boolean },
-    vertical: { type: Boolean },
-    inverted: { type: Boolean },
-    color: { type: String },
-    // primary, secondary, tertiary
-    basic: { type: Boolean },
-    padded: { type: Boolean }
-  };
-  static styles = d`
+var r=Object.defineProperty,e=(e,o,t)=>((e,o,t)=>o in e?r(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t)(e,"symbol"!=typeof o?o+"":o,t);import{LitElement as o,css as t,html as a}from"lit";import{classMap as d}from"lit/directives/class-map.js";class s extends o{constructor(){super(),this.raised=!1,this.inverted=!1,this.basic=!1,this.padded=!1}render(){const r={"ui-card":!0,raised:this.raised,inverted:this.inverted,basic:this.basic,padded:this.padded,[this.color]:!!this.color},e=this.querySelector('[slot="header"]'),o=this.querySelector('[slot="footer"]');return a`
+      <div class="${d(r)}">
+        ${e?a`
+          <div class="card-header">
+            <slot name="header" @slotchange=${()=>this.requestUpdate()}></slot>
+          </div>
+        `:a`<slot name="header" @slotchange=${()=>this.requestUpdate()} style="display:none"></slot>`}
+        
+        <div class="card-content">
+          <slot></slot>
+        </div>
+        
+        ${o?a`
+          <div class="card-footer">
+            <slot name="footer" @slotchange=${()=>this.requestUpdate()}></slot>
+          </div>
+        `:a`<slot name="footer" @slotchange=${()=>this.requestUpdate()} style="display:none"></slot>`}
+      </div>
+    `}}e(s,"properties",{raised:{type:Boolean},vertical:{type:Boolean},inverted:{type:Boolean},color:{type:String},basic:{type:Boolean},padded:{type:Boolean}}),e(s,"styles",t`
     :host {
       display: block;
       margin: 1rem 0;
@@ -89,41 +95,4 @@ class i extends a {
     .primary { border-top: 4px solid var(--kg-primary); }
     .secondary { border-top: 4px solid var(--kg-secondary); }
     .tertiary { border-top: 4px solid var(--kg-tertiary); }
-  `;
-  constructor() {
-    super(), this.raised = !1, this.inverted = !1, this.basic = !1, this.padded = !1;
-  }
-  render() {
-    const e = {
-      "ui-card": !0,
-      raised: this.raised,
-      inverted: this.inverted,
-      basic: this.basic,
-      padded: this.padded,
-      [this.color]: !!this.color
-    }, o = this.querySelector('[slot="header"]'), t = this.querySelector('[slot="footer"]');
-    return r`
-      <div class="${s(e)}">
-        ${o ? r`
-          <div class="card-header">
-            <slot name="header" @slotchange=${() => this.requestUpdate()}></slot>
-          </div>
-        ` : r`<slot name="header" @slotchange=${() => this.requestUpdate()} style="display:none"></slot>`}
-        
-        <div class="card-content">
-          <slot></slot>
-        </div>
-        
-        ${t ? r`
-          <div class="card-footer">
-            <slot name="footer" @slotchange=${() => this.requestUpdate()}></slot>
-          </div>
-        ` : r`<slot name="footer" @slotchange=${() => this.requestUpdate()} style="display:none"></slot>`}
-      </div>
-    `;
-  }
-}
-customElements.define("kg-card", i);
-export {
-  i as kgcard
-};
+  `),customElements.define("kg-card",s);export{s as kgcard};

package/dist/components/kg-checkbox.js

@@ -1,14 +1,19 @@
-import { LitElement as i, css as c, html as t } from "lit";
-import { classMap as a } from "lit/directives/class-map.js";
-class s extends i {
-  static properties = {
-    checked: { type: Boolean, reflect: !0 },
-    label: { type: String },
-    disabled: { type: Boolean },
-    color: { type: String },
-    indeterminate: { type: Boolean }
-  };
-  static styles = c`
+var e=Object.defineProperty,r=(r,t,i)=>((r,t,i)=>t in r?e(r,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):r[t]=i)(r,"symbol"!=typeof t?t+"":t,i);import{LitElement as t,css as i,html as o}from"lit";import{classMap as c}from"lit/directives/class-map.js";class a extends t{constructor(){super(),this.checked=!1,this.disabled=!1,this.indeterminate=!1}toggle(){this.disabled||(this.checked=!this.checked,this.indeterminate=!1,this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked},bubbles:!0,composed:!0})))}render(){const e={"kg-checkbox-container":!0,checked:this.checked,disabled:this.disabled,indeterminate:this.indeterminate},r=`--checkbox-active-color: ${t=this.color,t?t.startsWith("#")||t.startsWith("rgb")||t.startsWith("hsl")?t:{primary:"var(--kg-primary)",secondary:"var(--kg-secondary)",tertiary:"var(--kg-tertiary)",error:"#e74c3c",red:"#e74c3c",green:"#2ecc71",blue:"#3498db",orange:"#f39c12",purple:"#9b59b6"}[t]||`var(--kg-${t}, ${t})`:"var(--kg-primary)"};`;var t;return o`
+      <div 
+        class="${c(e)}" 
+        style="${r}"
+        @click="${this.toggle}"
+      >
+        <div class="checkbox-box">
+          ${this.indeterminate?"":o`
+            <svg class="checkmark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="20 6 9 17 4 12"></polyline>
+            </svg>
+          `}
+        </div>
+        ${this.label?o`<span class="label-text">${this.label}</span>`:""}
+      </div>
+    `}}r(a,"properties",{checked:{type:Boolean,reflect:!0},label:{type:String},disabled:{type:Boolean},color:{type:String},indeterminate:{type:Boolean}}),r(a,"styles",i`
     :host {
       display: inline-block;
       cursor: pointer;
@@ -95,53 +100,4 @@ class s extends i {
       opacity: 0.5;
       cursor: not-allowed;
     }
-  `;
-  constructor() {
-    super(), this.checked = !1, this.disabled = !1, this.indeterminate = !1;
-  }
-  toggle() {
-    this.disabled || (this.checked = !this.checked, this.indeterminate = !1, this.dispatchEvent(new CustomEvent("change", {
-      detail: { checked: this.checked },
-      bubbles: !0,
-      composed: !0
-    })));
-  }
-  render() {
-    const r = {
-      "kg-checkbox-container": !0,
-      checked: this.checked,
-      disabled: this.disabled,
-      indeterminate: this.indeterminate
-    }, o = `--checkbox-active-color: ${((e) => e ? e.startsWith("#") || e.startsWith("rgb") || e.startsWith("hsl") ? e : {
-      primary: "var(--kg-primary)",
-      secondary: "var(--kg-secondary)",
-      tertiary: "var(--kg-tertiary)",
-      error: "#e74c3c",
-      red: "#e74c3c",
-      green: "#2ecc71",
-      blue: "#3498db",
-      orange: "#f39c12",
-      purple: "#9b59b6"
-    }[e] || `var(--kg-${e}, ${e})` : "var(--kg-primary)")(this.color)};`;
-    return t`
-      <div 
-        class="${a(r)}" 
-        style="${o}"
-        @click="${this.toggle}"
-      >
-        <div class="checkbox-box">
-          ${this.indeterminate ? "" : t`
-            <svg class="checkmark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
-                <polyline points="20 6 9 17 4 12"></polyline>
-            </svg>
-          `}
-        </div>
-        ${this.label ? t`<span class="label-text">${this.label}</span>` : ""}
-      </div>
-    `;
-  }
-}
-customElements.define("kg-checkbox", s);
-export {
-  s as kgcheckbox
-};
+  `),customElements.define("kg-checkbox",a);export{a as kgcheckbox};

package/dist/components/kg-colorpicker.js

@@ -1,13 +1,37 @@
-import { LitElement as t, css as o, html as i } from "lit";
-import "lit/directives/class-map.js";
-class r extends t {
-  static properties = {
-    value: { type: String, reflect: !0 },
-    label: { type: String },
-    open: { type: Boolean },
-    disabled: { type: Boolean }
-  };
-  static styles = o`
+var e=Object.defineProperty,i=(i,o,r)=>((i,o,r)=>o in i?e(i,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):i[o]=r)(i,"symbol"!=typeof o?o+"":o,r);import{LitElement as o,css as r,html as t}from"lit";import"lit/directives/class-map.js";class a extends o{constructor(){super(),this.value="#1367FF",this.open=!1,this.disabled=!1,this._presets=["#1367FF","#FF0000","#00FF00","#FFA500","#800080","#000000","#FFFFFF","#808080","#FFC0CB","#00FFFF","#FFFF00","#A52A2A","#3498db","#2ecc71","#e74c3c","#f1c40f","#9b59b6","#34495e"],this._handleOutsideClick=this._handleOutsideClick.bind(this)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick)}_handleOutsideClick(e){this.open&&!e.composedPath().includes(this)&&(this.open=!1)}_togglePopup(e){e&&e.stopPropagation(),this.open=!this.open}_selectColor(e){this.value=e,this._dispatchChange()}_handleInput(e){this.value=e.target.value,this._dispatchChange()}_dispatchChange(){this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))}render(){return t`
+      <div class="kg-color-container ${this.disabled?"disabled":""}" style="position: relative;">
+        ${this.label?t`<span class="label-text">${this.label}</span>`:""}
+        
+        <div class="picker-trigger" @click="${this._togglePopup}">
+          <div class="color-swatch" style="background-color: ${this.value}"></div>
+          <span class="color-value">${this.value}</span>
+        </div>
+
+        <div class="picker-popup ${this.open?"open":""}" @click="${e=>e.stopPropagation()}">
+          <div class="swatch-grid">
+            ${this._presets.map(e=>t`
+              <div 
+                class="preset-swatch" 
+                style="background-color: ${e}" 
+                @click="${()=>this._selectColor(e)}"
+              ></div>
+            `)}
+          </div>
+          
+          <div class="custom-input-container">
+            <span style="font-size: 0.75rem; color: var(--kg-text-muted); font-weight: 600;">Özel Renk Seç</span>
+            <div class="color-input-wrapper">
+                <input 
+                    type="color" 
+                    .value="${this.value}" 
+                    @input="${this._handleInput}"
+                />
+                <span class="color-hex-label">${this.value.toUpperCase()}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `}}i(a,"properties",{value:{type:String,reflect:!0},label:{type:String},open:{type:Boolean},disabled:{type:Boolean}}),i(a,"styles",r`
     :host {
       display: inline-block;
       font-family: inherit;
@@ -149,92 +173,4 @@ class r extends t {
       opacity: 0.5;
       pointer-events: none;
     }
-  `;
-  constructor() {
-    super(), this.value = "#1367FF", this.open = !1, this.disabled = !1, this._presets = [
-      "#1367FF",
-      "#FF0000",
-      "#00FF00",
-      "#FFA500",
-      "#800080",
-      "#000000",
-      "#FFFFFF",
-      "#808080",
-      "#FFC0CB",
-      "#00FFFF",
-      "#FFFF00",
-      "#A52A2A",
-      "#3498db",
-      "#2ecc71",
-      "#e74c3c",
-      "#f1c40f",
-      "#9b59b6",
-      "#34495e"
-    ], this._handleOutsideClick = this._handleOutsideClick.bind(this);
-  }
-  connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick);
-  }
-  _handleOutsideClick(e) {
-    this.open && !e.composedPath().includes(this) && (this.open = !1);
-  }
-  _togglePopup(e) {
-    e && e.stopPropagation(), this.open = !this.open;
-  }
-  _selectColor(e) {
-    this.value = e, this._dispatchChange();
-  }
-  _handleInput(e) {
-    this.value = e.target.value, this._dispatchChange();
-  }
-  _dispatchChange() {
-    this.dispatchEvent(new CustomEvent("change", {
-      detail: { value: this.value },
-      bubbles: !0,
-      composed: !0
-    }));
-  }
-  render() {
-    return i`
-      <div class="kg-color-container ${this.disabled ? "disabled" : ""}" style="position: relative;">
-        ${this.label ? i`<span class="label-text">${this.label}</span>` : ""}
-        
-        <div class="picker-trigger" @click="${this._togglePopup}">
-          <div class="color-swatch" style="background-color: ${this.value}"></div>
-          <span class="color-value">${this.value}</span>
-        </div>
-
-        <div class="picker-popup ${this.open ? "open" : ""}" @click="${(e) => e.stopPropagation()}">
-          <div class="swatch-grid">
-            ${this._presets.map((e) => i`
-              <div 
-                class="preset-swatch" 
-                style="background-color: ${e}" 
-                @click="${() => this._selectColor(e)}"
-              ></div>
-            `)}
-          </div>
-          
-          <div class="custom-input-container">
-            <span style="font-size: 0.75rem; color: var(--kg-text-muted); font-weight: 600;">Özel Renk Seç</span>
-            <div class="color-input-wrapper">
-                <input 
-                    type="color" 
-                    .value="${this.value}" 
-                    @input="${this._handleInput}"
-                />
-                <span class="color-hex-label">${this.value.toUpperCase()}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-}
-customElements.define("kg-colorpicker", r);
-export {
-  r as kgcolorpicker
-};
+  `),customElements.define("kg-colorpicker",a);export{a as kgcolorpicker};