@kodaris/krubble-components 1.0.0

package/dist/accordion/accordion.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+/**
+ * Accordion component for collapsible content sections.
+ *
+ * ## Usage
+ * ```html
+ * <kr-accordion header="Basic Information" expanded>
+ *   <div>Content here</div>
+ * </kr-accordion>
+ * ```
+ *
+ * @slot - The collapsible content
+ *
+ * @property {string} header - Section header text
+ * @property {boolean} expanded - Whether the accordion is expanded
+ */
+export declare class KRAccordion extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Section header text
+     */
+    header: string;
+    /**
+     * Whether the accordion is expanded
+     */
+    expanded: boolean;
+    private toggle;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kr-accordion': KRAccordion;
+    }
+}
+//# sourceMappingURL=accordion.d.ts.map

package/dist/accordion/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/accordion/accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;;;;;;;;;GAcG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAoDpB;IAEF;;OAEG;IAEH,MAAM,SAAM;IAEZ;;OAEG;IAEH,QAAQ,UAAS;IAEjB,OAAO,CAAC,MAAM;IAIL,MAAM;CAiBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/dist/accordion/accordion.js

@@ -0,0 +1,120 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+/**
+ * Accordion component for collapsible content sections.
+ *
+ * ## Usage
+ * ```html
+ * <kr-accordion header="Basic Information" expanded>
+ *   <div>Content here</div>
+ * </kr-accordion>
+ * ```
+ *
+ * @slot - The collapsible content
+ *
+ * @property {string} header - Section header text
+ * @property {boolean} expanded - Whether the accordion is expanded
+ */
+let KRAccordion = class KRAccordion extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Section header text
+         */
+        this.header = '';
+        /**
+         * Whether the accordion is expanded
+         */
+        this.expanded = false;
+    }
+    toggle() {
+        this.expanded = !this.expanded;
+    }
+    render() {
+        return html `
+      <div class="header" @click=${this.toggle}>
+        <span class="header__title">${this.header}</span>
+        <svg class="header__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M6 9l6 6 6-6"/>
+        </svg>
+      </div>
+      <div class="content">
+        <div class="content__inner">
+          <div class="content__body">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+KRAccordion.styles = css `
+    :host {
+      display: block;
+      margin-bottom: 16px;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 16px;
+      background: #f7f8f9;
+      border-radius: 8px;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .header__title {
+      font-size: 15px;
+      font-weight: 600;
+      color: #111827;
+    }
+
+    .header__icon {
+      width: 20px;
+      height: 20px;
+      color: #9ca3af;
+      transition: transform 0.2s ease;
+      flex-shrink: 0;
+    }
+
+    :host([expanded]) .header__icon {
+      transform: rotate(180deg);
+    }
+
+    .content {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows 0.2s ease;
+    }
+
+    :host([expanded]) .content {
+      grid-template-rows: 1fr;
+    }
+
+    .content__inner {
+      overflow: hidden;
+    }
+
+    .content__body {
+      padding: 16px 16px 8px 16px;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], KRAccordion.prototype, "header", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KRAccordion.prototype, "expanded", void 0);
+KRAccordion = __decorate([
+    customElement('kr-accordion')
+], KRAccordion);
+export { KRAccordion };
+//# sourceMappingURL=accordion.js.map

package/dist/accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/accordion/accordion.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAC;AAEnE;;;;;;;;;;;;;;GAcG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAuDL;;WAEG;QAEH,WAAM,GAAG,EAAE,CAAC;QAEZ;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;IAuBnB,CAAC;IArBS,MAAM;QACZ,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IACjC,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;mCACoB,IAAI,CAAC,MAAM;sCACR,IAAI,CAAC,MAAM;;;;;;;;;;;;KAY5C,CAAC;IACJ,CAAC;;AAtFe,kBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoD3B,AApDqB,CAoDpB;AAMF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACf;AAMZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAC1B;AAjEN,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAwFvB"}

package/dist/alert.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+/**
+ * A customizable alert component for displaying important information to users.
+ *
+ * @slot - The alert message content
+ * @fires dismiss - Fired when the dismiss button is clicked
+ */
+export declare class KRAlert extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * The alert type/severity
+     */
+    type: 'info' | 'success' | 'warning' | 'error';
+    /**
+     * Optional header text
+     */
+    header?: string;
+    /**
+     * Whether the alert can be dismissed
+     */
+    dismissible: boolean;
+    /**
+     * Whether the alert is visible
+     */
+    visible: boolean;
+    /** Handles dismiss button click */
+    private _handleDismiss;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kr-alert': KRAlert;
+    }
+}
+//# sourceMappingURL=alert.d.ts.map

package/dist/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../src/alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;GAKG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BA2GpB;IAEF;;OAEG;IAEH,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAU;IAExD;;OAEG;IAEH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,OAAO,UAAQ;IAEf,mCAAmC;IACnC,OAAO,CAAC,cAAc;IAKb,MAAM;CA2ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/alert.js

@@ -0,0 +1,204 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+/**
+ * A customizable alert component for displaying important information to users.
+ *
+ * @slot - The alert message content
+ * @fires dismiss - Fired when the dismiss button is clicked
+ */
+let KRAlert = class KRAlert extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The alert type/severity
+         */
+        this.type = 'info';
+        /**
+         * Whether the alert can be dismissed
+         */
+        this.dismissible = false;
+        /**
+         * Whether the alert is visible
+         */
+        this.visible = true;
+    }
+    /** Handles dismiss button click */
+    _handleDismiss() {
+        this.visible = false;
+        this.dispatchEvent(new CustomEvent('dismiss', { bubbles: true, composed: true }));
+    }
+    render() {
+        const icons = {
+            info: html `<svg class="icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>`,
+            success: html `<svg class="icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>`,
+            warning: html `<svg class="icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>`,
+            error: html `<svg class="icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>`,
+        };
+        return html `
+      <div
+        class=${classMap({
+            'alert': true,
+            ['alert--' + this.type]: true,
+            'alert--hidden': !this.visible
+        })}
+        role="alert"
+      >
+        ${icons[this.type]}
+        <div class="content">
+          ${this.header
+            ? html `<h4 class="header">${this.header}</h4>`
+            : nothing}
+          <div class="message">
+            <slot></slot>
+          </div>
+        </div>
+        ${this.dismissible
+            ? html `
+              <button
+                class="dismiss"
+                type="button"
+                aria-label="Dismiss alert"
+                @click=${this._handleDismiss}
+              >
+                <svg viewBox="0 0 20 20" fill="currentColor" width="16" height="16">
+                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
+                </svg>
+              </button>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+};
+KRAlert.styles = css `
+    :host {
+      display: block;
+    }
+
+    .alert {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 16px;
+      border-radius: 8px;
+      border-left: 4px solid;
+    }
+
+    .alert--hidden {
+      display: none;
+    }
+      
+    /* Variants */
+    .alert--info {
+      background-color: #eff6ff;
+      border-left-color: #3b82f6;
+    }
+
+    .alert--info .icon {
+      color: #2563eb;
+    }
+
+    .alert--success {
+      background-color: #f0fdf4;
+      border-left-color: #22c55e;
+    }
+
+    .alert--success .icon {
+      color: #16a34a;
+    }
+
+    .alert--warning {
+      background-color: #fffbeb;
+      border-left-color: #f59e0b;
+    }
+
+    .alert--warning .icon {
+      color: #d97706;
+    }
+
+    .alert--error {
+      background-color: #fef2f2;
+      border-left-color: #ef4444;
+    }
+
+    .alert--error .icon {
+      color: #dc2626;
+    }
+
+    .icon {
+      flex-shrink: 0;
+      width: 20px;
+      height: 20px;
+    }
+
+    .content {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .header {
+      font-size: 14px;
+      font-weight: 600;
+      color: #111827;
+      margin: 0;
+    }
+
+    .message {
+      font-size: 14px;
+      color: #374151;
+      margin: 0;
+    }
+
+    .dismiss {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      background: none;
+      border: none;
+      border-radius: 4px;
+      color: #6b7280;
+      cursor: pointer;
+      transition: background 0.15s ease, color 0.15s ease;
+    }
+
+    .dismiss:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+      color: #374151;
+    }
+
+    .dismiss:focus-visible {
+      outline: 2px solid #3b82f6;
+      outline-offset: 2px;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], KRAlert.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], KRAlert.prototype, "header", void 0);
+__decorate([
+    property({ type: Boolean })
+], KRAlert.prototype, "dismissible", void 0);
+__decorate([
+    property({ type: Boolean })
+], KRAlert.prototype, "visible", void 0);
+KRAlert = __decorate([
+    customElement('kr-alert')
+], KRAlert);
+export { KRAlert };
+//# sourceMappingURL=alert.js.map

package/dist/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../src/alert.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD;;;;;GAKG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QA8GL;;WAEG;QAEH,SAAI,GAA6C,MAAM,CAAC;QAQxD;;WAEG;QAEH,gBAAW,GAAG,KAAK,CAAC;QAEpB;;WAEG;QAEH,YAAO,GAAG,IAAI,CAAC;IAmDjB,CAAC;IAjDC,mCAAmC;IAC3B,cAAc;QACpB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACpF,CAAC;IAEQ,MAAM;QACb,MAAM,KAAK,GAAG;YACZ,IAAI,EAAE,IAAI,CAAA,sPAAsP;YAChQ,OAAO,EAAE,IAAI,CAAA,2PAA2P;YACxQ,OAAO,EAAE,IAAI,CAAA,uUAAuU;YACpV,KAAK,EAAE,IAAI,CAAA,6UAA6U;SACzV,CAAC;QAEF,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,OAAO,EAAE,IAAI;YACb,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI;YAC7B,eAAe,EAAE,CAAC,IAAI,CAAC,OAAO;SAC/B,CAAC;;;UAGA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;;YAEd,IAAI,CAAC,MAAM;YACX,CAAC,CAAC,IAAI,CAAA,sBAAsB,IAAI,CAAC,MAAM,OAAO;YAC9C,CAAC,CAAC,OAAO;;;;;UAKV,IAAI,CAAC,WAAW;YACjB,CAAC,CAAC,IAAI,CAAA;;;;;yBAKS,IAAI,CAAC,cAAc;;;;;;aAM/B;YACH,CAAC,CAAC,OAAQ;;KAEf,CAAC;IACJ,CAAC;;AArLe,cAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2G3B,AA3GqB,CA2GpB;AAMF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCAC6B;AAMxD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACX;AAMhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACR;AAMpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACb;AApIJ,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAuLnB"}

package/dist/button/button.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+/**
+ * A customizable button component.
+ *
+ * @slot - The button content
+ * @csspart button - The button element
+ * @fires click - Fired when the button is clicked
+ */
+export declare class KRButton extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * The button variant style
+     */
+    variant: 'primary' | 'secondary' | 'outline';
+    /**
+     * The button size
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Whether the button is disabled
+     */
+    disabled: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kr-button': KRButton;
+    }
+}
+//# sourceMappingURL=button.d.ts.map

package/dist/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;GAMG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BA0EpB;IAEF;;OAEG;IAEH,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAa;IAEzD;;OAEG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE9C;;OAEG;IAEH,QAAQ,UAAS;IAER,MAAM;CAahB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/button/button.js

@@ -0,0 +1,133 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+/**
+ * A customizable button component.
+ *
+ * @slot - The button content
+ * @csspart button - The button element
+ * @fires click - Fired when the button is clicked
+ */
+let KRButton = class KRButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The button variant style
+         */
+        this.variant = 'primary';
+        /**
+         * The button size
+         */
+        this.size = 'medium';
+        /**
+         * Whether the button is disabled
+         */
+        this.disabled = false;
+    }
+    render() {
+        const sizeClass = this.size !== 'medium' ? this.size : '';
+        return html `
+      <button
+        part="button"
+        class="${this.variant} ${sizeClass}"
+        ?disabled=${this.disabled}
+      >
+        <slot></slot>
+      </button>
+    `;
+    }
+};
+KRButton.styles = css `
+    :host {
+      display: inline-block;
+    }
+
+    button {
+      font-family: inherit;
+      font-size: 14px;
+      font-weight: 400;
+      letter-spacing: 0.01em;
+      padding: 0 22px;
+      height: 36px;
+      line-height: 36px;
+      border: none;
+      border-radius: 20px;
+      cursor: pointer;
+      transition: background 0.15s ease;
+    }
+
+    button:active:not(:disabled) {
+      transform: scale(0.98);
+    }
+
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    /* Variants */
+    button.primary {
+      background: #163052;
+      color: white;
+    }
+
+    button.primary:hover:not(:disabled) {
+      background: #0e1f35;
+    }
+
+    button.secondary {
+      background: #f3f4f6;
+      color: #374151;
+    }
+
+    button.secondary:hover:not(:disabled) {
+      background: #e5e7eb;
+    }
+
+    button.outline {
+      background: transparent;
+      border: 1px solid #d1d5db;
+      color: #374151;
+      box-shadow: none;
+    }
+
+    button.outline:hover:not(:disabled) {
+      background: #f9fafb;
+      border-color: #9ca3af;
+      box-shadow: none;
+    }
+
+    /* Sizes */
+    button.small {
+      font-size: 0.75rem;
+      height: 28px;
+      line-height: 28px;
+      padding: 0 10px;
+    }
+
+    button.large {
+      font-size: 1rem;
+      height: 44px;
+      line-height: 44px;
+      padding: 0 24px;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], KRButton.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], KRButton.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], KRButton.prototype, "disabled", void 0);
+KRButton = __decorate([
+    customElement('kr-button')
+], KRButton);
+export { KRButton };
+//# sourceMappingURL=button.js.map

package/dist/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;GAMG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QA6EL;;WAEG;QAEH,YAAO,GAAwC,SAAS,CAAC;QAEzD;;WAEG;QAEH,SAAI,GAAiC,QAAQ,CAAC;QAE9C;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;IAenB,CAAC;IAbU,MAAM;QACb,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;QAE1D,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,OAAO,IAAI,SAAS;oBACtB,IAAI,CAAC,QAAQ;;;;KAI5B,CAAC;IACJ,CAAC;;AA1Ge,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0E3B,AA1EqB,CA0EpB;AAMF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAC8B;AAMzD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACmB;AAM9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AA7FN,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA4GpB"}

package/dist/code-demo/code-demo.d.ts

@@ -0,0 +1,44 @@
+import { LitElement } from 'lit';
+declare global {
+    interface Window {
+        Prism?: {
+            highlight: (code: string, grammar: unknown, language: string) => string;
+            languages: Record<string, unknown>;
+        };
+    }
+}
+/**
+ * Code demo component with Preview/Code tabs and syntax highlighting.
+ *
+ * Usage:
+ * ```html
+ * <kr-code-demo language="html">
+ *   <div slot="preview">
+ *     <kr-button>Click me</kr-button>
+ *   </div>
+ *   <script slot="code" type="text/plain">
+ *     <kr-button>Click me</kr-button>
+ *   </script>
+ * </kr-code-demo>
+ * ```
+ *
+ * Requires Prism.js to be loaded globally for syntax highlighting.
+ */
+export declare class KRCodeDemo extends LitElement {
+    static styles: import("lit").CSSResult;
+    language: string;
+    code: string;
+    private activeTab;
+    private copied;
+    private setTab;
+    private getHighlightedCode;
+    private escapeHtml;
+    private copyCode;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kr-code-demo': KRCodeDemo;
+    }
+}
+//# sourceMappingURL=code-demo.d.ts.map

package/dist/code-demo/code-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-demo.d.ts","sourceRoot":"","sources":["../../src/code-demo/code-demo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,KAAK,CAAC,EAAE;YACN,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;YACxE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;SACpC,CAAC;KACH;CACF;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BA+JpB;IAGF,QAAQ,SAAU;IAGlB,IAAI,SAAM;IAGV,OAAO,CAAC,SAAS,CAAiC;IAGlD,OAAO,CAAC,MAAM,CAAS;IAEvB,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,UAAU;YAMJ,QAAQ;IAcb,MAAM;CAiChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}