@lazhus/kg-ui 0.2.2

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

@@ -0,0 +1,117 @@
+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`
+    :host {
+      display: block;
+      border-bottom: 1px solid var(--kg-border);
+    }
+
+    :host(:last-child) {
+      border-bottom: none;
+    }
+
+    .accordion-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem 1.25rem;
+      cursor: pointer;
+      background: var(--kg-surface);
+      transition: all 0.2s ease;
+      user-select: none;
+    }
+
+    .accordion-header:hover {
+      background: var(--kg-bg-secondary, rgba(0,0,0,0.02));
+      color: var(--kg-primary);
+    }
+
+    .title {
+      font-weight: 600;
+      font-size: 1rem;
+    }
+
+    .chevron {
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      color: var(--kg-text-muted);
+    }
+
+    :host([open]) .chevron {
+      transform: rotate(180deg);
+      color: var(--kg-primary);
+    }
+
+    :host([open]) .accordion-header {
+       color: var(--kg-primary);
+    }
+
+    .content-wrapper {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      overflow: hidden;
+      background: var(--kg-bg);
+    }
+
+    :host([open]) .content-wrapper {
+      grid-template-rows: 1fr;
+    }
+
+    .content {
+      min-height: 0;
+      padding: 0 1.25rem;
+      opacity: 0;
+      transform: translateY(-10px);
+      transition: all 0.3s ease;
+    }
+
+    :host([open]) .content {
+      padding: 1.25rem;
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    .disabled {
+      opacity: 0.5;
+      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
+};

package/dist/components/kg-accordion.js

@@ -0,0 +1,32 @@
+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`
+    :host {
+      display: block;
+      border: 1px solid var(--kg-border);
+      border-radius: var(--kg-radius-md, 8px);
+      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
+};

package/dist/components/kg-button.js

@@ -0,0 +1,241 @@
+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`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    :host([fullwidth]) {
+      display: block;
+      margin: 0 0 0.5em 0;
+    }
+
+    button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      min-height: var(--kg-form-height);
+      height: var(--kg-form-height);
+      outline: none;
+      border: none;
+      vertical-align: top;
+      background: var(--kg-border);
+      color: var(--kg-text);
+      font-family: inherit;
+      margin: 0;
+      padding: 0 1.5em;
+      line-height: 1;
+      text-transform: none;
+      text-shadow: none;
+      font-weight: 700;
+      font-style: normal;
+      text-align: center;
+      text-decoration: none;
+      border-radius: 4px;
+      box-shadow: 0 0 0 1px transparent inset;
+      user-select: none;
+      transition: all 0.2s ease;
+      position: relative;
+      gap: 0.5em;
+      box-sizing: border-box;
+    }
+
+    /* Reset padding for icon-only buttons to ensure 1:1 aspect ratio */
+    button.icon-only {
+      padding: 0 !important;
+      width: var(--kg-form-height);
+      height: var(--kg-form-height);
+      gap: 0;
+      flex-shrink: 0;
+    }
+
+    button.icon-only.circular {
+      border-radius: 50%;
+    }
+
+    button:hover {
+      filter: brightness(0.9);
+    }
+
+    button:active {
+      filter: brightness(0.8);
+    }
+
+    /* Semantic Colors */
+    .primary { background-color: var(--kg-primary); color: #FFFFFF; }
+    .secondary { background-color: var(--kg-secondary); color: #FFFFFF; }
+    .tertiary { background-color: var(--kg-tertiary); color: #FFFFFF; }
+    .error { background-color: #DB2828; color: #FFFFFF; }
+
+    /* Custom Color Support */
+    .custom-color { background: var(--kg-custom-color) !important; color: #FFFFFF !important; border: none !important; }
+
+    /* Variations */
+    .fullwidth { width: 100%; }
+    .circular { border-radius: 10rem; }
+    .square {
+      padding: 0 !important;
+      width: var(--kg-form-height);
+      height: var(--kg-form-height);
+      min-width: var(--kg-form-height);
+    }
+    
+    .basic {
+      background: transparent !important;
+      box-shadow: 0 0 0 1px var(--kg-border) inset !important;
+      color: var(--kg-text) !important;
+    }
+    .basic:hover { 
+      background: var(--kg-surface) !important;
+      box-shadow: 0 0 0 1px var(--kg-text-muted) inset !important; 
+    }
+
+    .basic.primary { color: var(--kg-primary) !important; box-shadow: 0 0 0 1px var(--kg-primary) inset !important; }
+    .basic.secondary { color: var(--kg-secondary) !important; box-shadow: 0 0 0 1px var(--kg-secondary) inset !important; }
+    .basic.tertiary { color: var(--kg-tertiary) !important; box-shadow: 0 0 0 1px var(--kg-tertiary) inset !important; }
+    .basic.error { color: #DB2828 !important; box-shadow: 0 0 0 1px #DB2828 inset !important; }
+    
+    .text {
+      background: transparent !important;
+      border: none !important;
+      box-shadow: none !important;
+      color: var(--kg-text) !important;
+      padding-left: 0.5em !important;
+      padding-right: 0.5em !important;
+    }
+    .text:hover {
+      background: var(--kg-surface) !important;
+      color: var(--kg-primary) !important;
+    }
+    .text.primary { color: var(--kg-primary) !important; }
+    .text.secondary { color: var(--kg-secondary) !important; }
+    
+    /* Sizes */
+    .mini { font-size: 0.7rem; padding: 0.4em 0.8em; }
+    .tiny { font-size: 0.8rem; padding: 0.5em 1em; }
+    .small { font-size: 0.9rem; padding: 0.6em 1.25em; }
+    .medium { font-size: 1rem; padding: 0.78em 1.5em; }
+    .large { font-size: 1.1rem; padding: 0.85em 1.75em; }
+    .big { font-size: 1.25rem; padding: 0.9em 2em; }
+    .huge { font-size: 1.4rem; padding: 1em 2.25em; }
+    .massive { font-size: 1.6rem; padding: 1.1em 2.5em; }
+
+    /* Loading */
+    .loading {
+      cursor: default !important;
+      pointer-events: none !important;
+      color: transparent !important;
+    }
+    .loading::after {
+      position: absolute;
+      content: '';
+      top: 50%;
+      left: 50%;
+      width: 1.15em;
+      height: 1.15em;
+      border-radius: 50%;
+      border: 0.2em solid rgba(0, 0, 0, 0.1);
+      border-top-color: var(--kg-text);
+      transform: translate(-50%, -50%);
+      animation: button-spin 0.6s linear infinite;
+    }
+
+    /* Spinner colors for semantic/colored buttons */
+    .primary.loading::after,
+    .secondary.loading::after,
+    .tertiary.loading::after,
+    .error.loading::after,
+    .custom-color.loading::after {
+      border-color: rgba(255, 255, 255, 0.3);
+      border-top-color: #fff;
+    }
+
+    /* Basic buttons should use their respective semantic colors for the spinner */
+    .basic.primary.loading::after { border-top-color: var(--kg-primary); }
+    .basic.secondary.loading::after { border-top-color: var(--kg-secondary); }
+    .basic.tertiary.loading::after { border-top-color: var(--kg-tertiary); }
+    .basic.error.loading::after { border-top-color: #DB2828; }
+
+    @keyframes button-spin {
+      from { transform: translate(-50%, -50%) rotate(0deg); }
+      to { transform: translate(-50%, -50%) rotate(360deg); }
+    }
+
+    /* Disabled */
+    button:disabled {
+      cursor: default !important;
+      opacity: 0.45 !important;
+      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
+};

package/dist/components/kg-card.js

@@ -0,0 +1,129 @@
+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`
+    :host {
+      display: block;
+      margin: 1rem 0;
+    }
+
+    .ui-card {
+      position: relative;
+      background: var(--kg-bg);
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+      border-radius: var(--kg-radius-lg, 12px);
+      border: 1px solid var(--kg-border);
+      color: var(--kg-text);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .card-header {
+      padding: 1rem 1.25rem;
+      background: var(--kg-surface);
+      border-bottom: 1px solid var(--kg-border);
+      font-weight: 700;
+      font-size: 1.1rem;
+    }
+
+    .card-content {
+      padding: 1.25rem;
+      flex: 1;
+    }
+
+    .card-footer {
+      padding: 0.75rem 1.25rem;
+      background: var(--kg-surface);
+      border-top: 1px solid var(--kg-border);
+      font-size: 0.9rem;
+      color: var(--kg-text-muted);
+    }
+
+    /* Variations */
+    .raised {
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+
+    .raised:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    }
+
+    .basic {
+      background: transparent;
+      border: 1px dashed var(--kg-border);
+      box-shadow: none;
+    }
+
+    .padded .card-content { padding: 2.5rem; }
+
+    .inverted {
+      background: #1B1C1D !important;
+      color: #FFFFFF !important;
+      border-color: #3d3e3f !important;
+    }
+
+    .inverted .card-header,
+    .inverted .card-footer {
+      background: rgba(255, 255, 255, 0.05) !important;
+      border-color: rgba(255, 255, 255, 0.1) !important;
+      color: #FFFFFF !important;
+    }
+
+    .inverted .card-footer {
+      color: rgba(255, 255, 255, 0.6) !important;
+    }
+
+    /* States / Colors */
+    .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
+};

package/dist/components/kg-checkbox.js

@@ -0,0 +1,147 @@
+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`
+    :host {
+      display: inline-block;
+      cursor: pointer;
+      user-select: none;
+      font-family: inherit;
+    }
+
+    .kg-checkbox-container {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      position: relative;
+    }
+
+    .checkbox-box {
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--kg-border);
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--kg-bg);
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+      flex-shrink: 0;
+    }
+
+    .kg-checkbox-container:hover .checkbox-box {
+      border-color: var(--checkbox-active-color, var(--kg-primary));
+    }
+
+    .kg-checkbox-container.checked .checkbox-box {
+      background: var(--checkbox-active-color, var(--kg-primary));
+      border-color: var(--checkbox-active-color, var(--kg-primary));
+    }
+
+    /* Checkmark Icon */
+    .checkmark {
+      width: 12px;
+      height: 12px;
+      color: white;
+      opacity: 0;
+      transform: scale(0.5) rotate(-45deg);
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .checked .checkmark {
+      opacity: 1;
+      transform: scale(1) rotate(0);
+    }
+
+    /* Indeterminate state */
+    .checkbox-box::after {
+        content: '';
+        position: absolute;
+        width: 10px;
+        height: 2px;
+        background: white;
+        border-radius: 1px;
+        opacity: 0;
+        transform: scaleX(0.5);
+        transition: all 0.2s;
+    }
+
+    .kg-checkbox-container.indeterminate .checkbox-box {
+        background: var(--kg-primary);
+        border-color: var(--kg-primary);
+    }
+
+    .indeterminate .checkbox-box::after {
+        opacity: 1;
+        transform: scaleX(1);
+    }
+
+    .label-text {
+      font-size: 0.95rem;
+      color: var(--kg-text);
+      transition: color 0.2s;
+    }
+
+    /* States */
+    .disabled {
+      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
+};