@kodaris/krubble-components 1.0.31 → 1.0.32

package/dist/dialog/dialog.js

@@ -5,7 +5,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { LitElement, html, css } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
 let KRDialogHeader = class KRDialogHeader extends LitElement {
     render() {
         return html `<slot></slot>`;
@@ -13,8 +14,11 @@ let KRDialogHeader = class KRDialogHeader extends LitElement {
 };
 KRDialogHeader.styles = css `
     :host {
-      display: block;
-      padding: 16px 24px;
+      display: flex;
+      padding: 0 24px;
+      align-items: center;
+      height: 64px;
+      flex-shrink: 0;
       border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     }
 
@@ -36,7 +40,9 @@ let KRDialogContent = class KRDialogContent extends LitElement {
 KRDialogContent.styles = css `
     :host {
       display: block;
-      padding: 16px 24px;
+      padding: 24px;
+      overflow: auto;
+      flex: 1 1 auto;
     }
   `;
 KRDialogContent = __decorate([
@@ -51,7 +57,10 @@ let KRDialogFooter = class KRDialogFooter extends LitElement {
 KRDialogFooter.styles = css `
     :host {
       display: flex;
-      padding: 16px 24px;
+      padding: 0 24px;
+      align-items: center;
+      height: 64px;
+      flex-shrink: 0;
       border-top: 1px solid rgba(0, 0, 0, 0.1);
       gap: 12px;
       justify-content: flex-end;
@@ -102,18 +111,27 @@ export class KRDialogRef {
     }
 }
 /**
- * Generic dialog component that renders a Lit component inside a dialog shell.
+ * Generic dialog component that supports both declarative and programmatic usage.
+ *
+ * Declarative: place `<kr-dialog>` in HTML with slotted content and call `.open()` / `.close()`.
+ * Programmatic: use `KRDialog.open(Component, config)` to create and show a dialog.
  *
  * @element kr-dialog
+ *
+ * @slot - Default slot for declarative dialog content (kr-dialog-header, kr-dialog-content, kr-dialog-footer)
+ *
+ * @fires close - Fired when a declarative dialog is closed
  */
 let KRDialog = class KRDialog extends LitElement {
     constructor() {
         super(...arguments);
         this._dialogRef = null;
         this._contentElement = null;
+        this.opened = false;
+        this.width = '560px';
         this._handleDocumentKeyDown = (e) => {
             if (e.key === 'Escape') {
-                this._dialogRef?.close(undefined);
+                this.close();
             }
         };
     }
@@ -121,11 +139,46 @@ let KRDialog = class KRDialog extends LitElement {
         super.disconnectedCallback();
         document.removeEventListener('keydown', this._handleDocumentKeyDown);
     }
-    static open(component, config) {
-        const existing = document.querySelector('kr-dialog');
-        if (existing) {
-            existing.remove();
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('opened')) {
+            if (this.opened) {
+                document.addEventListener('keydown', this._handleDocumentKeyDown);
+            }
+            else {
+                document.removeEventListener('keydown', this._handleDocumentKeyDown);
+            }
+        }
+    }
+    /**
+     * Opens the dialog (declarative mode).
+     */
+    open() {
+        this.opened = true;
+    }
+    /**
+     * Closes the dialog.
+     * In programmatic mode (has _dialogRef), delegates to the dialog ref.
+     * In declarative mode, sets opened=false and dispatches close event.
+     */
+    close() {
+        if (this._dialogRef) {
+            this._dialogRef.close(undefined);
+            return;
         }
+        this.opened = false;
+        this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+    }
+    /**
+     * Opens a dialog programmatically by creating a component and injecting it.
+     */
+    static open(component, config) {
+        // Only remove other programmatic dialogs (those with a _dialogRef)
+        document.querySelectorAll('kr-dialog').forEach((el) => {
+            if (el._dialogRef) {
+                el.remove();
+            }
+        });
         const dialogRef = new KRDialogRef();
         const dialog = document.createElement('kr-dialog');
         dialogRef.setDialogElement(dialog);
@@ -137,20 +190,20 @@ let KRDialog = class KRDialog extends LitElement {
             content.data = config.data;
         }
         dialog._contentElement = content;
+        dialog.opened = true;
         document.body.appendChild(dialog);
-        document.addEventListener('keydown', dialog._handleDocumentKeyDown);
         return dialogRef;
     }
     _handleBackdropClick(e) {
         if (e.target.classList.contains('backdrop')) {
-            this._dialogRef?.close(undefined);
+            this.close();
         }
     }
     render() {
         return html `
       <div class="backdrop" @click=${this._handleBackdropClick}></div>
-      <div class="dialog">
-        ${this._contentElement}
+      <div class="dialog" style=${styleMap({ width: this.width })}>
+        ${this._contentElement ? this._contentElement : html `<slot></slot>`}
       </div>
     `;
     }
@@ -160,11 +213,15 @@ KRDialog.styles = css `
       position: fixed;
       inset: 0;
       z-index: 10000;
-      display: flex;
+      display: none;
       align-items: center;
       justify-content: center;
     }
 
+    :host([opened]) {
+      display: flex;
+    }
+
     .backdrop {
       position: absolute;
       inset: 0;
@@ -178,13 +235,32 @@ KRDialog.styles = css `
       border-radius: 12px;
       box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
       max-height: 90vh;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      width: 560px;
+      max-width: calc(100vw - 48px);
+    }
+
+    ::slotted(kr-dialog-header),
+    ::slotted(kr-dialog-footer) {
+      flex-shrink: 0;
+    }
+
+    ::slotted(kr-dialog-content) {
+      flex: 1 1 auto;
       overflow: auto;
-      min-width: 300px;
     }
   `;
 __decorate([
     state()
 ], KRDialog.prototype, "_contentElement", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KRDialog.prototype, "opened", void 0);
+__decorate([
+    property({ type: String })
+], KRDialog.prototype, "width", void 0);
 KRDialog = __decorate([
     customElement('kr-dialog')
 ], KRDialog);

package/dist/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/dialog/dialog.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAOlD,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAenC,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAhBe,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;GAY3B,AAZqB,CAYpB;AAbS,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAkB1B;;AAGM,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAQpC,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AATe,sBAAM,GAAG,GAAG,CAAA;;;;;GAK3B,AALqB,CAKpB;AANS,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAW3B;;AAGM,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAWnC,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAZe,qBAAM,GAAG,GAAG,CAAA;;;;;;;;GAQ3B,AARqB,CAQpB;AATS,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAc1B;;AAED;;;;;;GAMG;AACH,MAAM,OAAO,WAAW;IAOtB;QANQ,oBAAe,GAA4C,IAAI,CAAC;QAIhE,mBAAc,GAAoB,IAAI,CAAC;QAG7C,IAAI,CAAC,QAAQ,GAAG,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YACtC,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;QACjC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;IAChB,gBAAgB,CAAC,EAAY;QAC3B,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;IAC3B,CAAC;IAED;;;;OAIG;IACH,KAAK,CAAC,MAAU;QACd,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;YAC7B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC9B,CAAC;QACD,IAAI,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC;IAChC,CAAC;IAED;;;;OAIG;IACH,WAAW;QACT,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;CACF;AAED;;;;GAIG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QA6BG,eAAU,GAAuB,IAAI,CAAC;QAGtC,oBAAe,GAAsB,IAAI,CAAC;QAoC1C,2BAAsB,GAAG,CAAC,CAAgB,EAAE,EAAE;YACpD,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACvB,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;YACpC,CAAC;QACH,CAAC,CAAC;IAgBJ,CAAC;IAtDU,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;IACvE,CAAC;IAED,MAAM,CAAC,IAAI,CACT,SAA+B,EAC/B,MAAuB;QAEvB,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QACrD,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,MAAM,EAAE,CAAC;QACpB,CAAC;QAED,MAAM,SAAS,GAAG,IAAI,WAAW,EAAE,CAAC;QACpC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAa,CAAC;QAE/D,SAAS,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;QACnC,MAAM,CAAC,UAAU,GAAG,SAAS,CAAC;QAE9B,+BAA+B;QAC/B,MAAM,OAAO,GAAG,IAAI,SAAS,EAAE,CAAC;QAC/B,OAAe,CAAC,SAAS,GAAG,SAAS,CAAC;QACvC,IAAI,MAAM,EAAE,IAAI,EAAE,CAAC;YAChB,OAAe,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;QACtC,CAAC;QAED,MAAM,CAAC,eAAe,GAAG,OAAO,CAAC;QACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAClC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,CAAC;QAEpE,OAAO,SAAS,CAAC;IACnB,CAAC;IAQO,oBAAoB,CAAC,CAAQ;QACnC,IAAK,CAAC,CAAC,MAAsB,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;YAC7D,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;qCACsB,IAAI,CAAC,oBAAoB;;UAEpD,IAAI,CAAC,eAAe;;KAEzB,CAAC;IACJ,CAAC;;AAtFe,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0B3B,AA1BqB,CA0BpB;AAKM;IADP,KAAK,EAAE;iDAC0C;AAhCvC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAwFpB"}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/dialog/dialog.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAOhD,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAkBnC,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAnBe,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;GAe3B,AAfqB,CAepB;AAhBS,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAqB1B;;AAGM,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAUpC,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAXe,sBAAM,GAAG,GAAG,CAAA;;;;;;;GAO3B,AAPqB,CAOpB;AARS,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAa3B;;AAGM,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAcnC,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAfe,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;GAW3B,AAXqB,CAWpB;AAZS,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAiB1B;;AAED;;;;;;GAMG;AACH,MAAM,OAAO,WAAW;IAOtB;QANQ,oBAAe,GAA4C,IAAI,CAAC;QAIhE,mBAAc,GAAoB,IAAI,CAAC;QAG7C,IAAI,CAAC,QAAQ,GAAG,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YACtC,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;QACjC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;IAChB,gBAAgB,CAAC,EAAY;QAC3B,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;IAC3B,CAAC;IAED;;;;OAIG;IACH,KAAK,CAAC,MAAU;QACd,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;YAC7B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC9B,CAAC;QACD,IAAI,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC;IAChC,CAAC;IAED;;;;OAIG;IACH,WAAW;QACT,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;CACF;AAED;;;;;;;;;;;GAWG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QA8CG,eAAU,GAAuB,IAAI,CAAC;QAGtC,oBAAe,GAAsB,IAAI,CAAC;QAGlD,WAAM,GAAG,KAAK,CAAC;QAGf,UAAK,GAAG,OAAO,CAAC;QAyER,2BAAsB,GAAG,CAAC,CAAgB,EAAE,EAAE;YACpD,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACvB,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC;QACH,CAAC,CAAC;IAgBJ,CAAC;IA3FU,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;IACvE,CAAC;IAEQ,OAAO,CAAC,iBAAuC;QACtD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;YACpE,CAAC;iBAAM,CAAC;gBACN,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC;YACvE,CAAC;QACH,CAAC;IACH,CAAC;IAED;;OAEG;IACH,IAAI;QACF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAED;;;;OAIG;IACH,KAAK;QACH,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;YACjC,OAAO;QACT,CAAC;QACD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAClF,CAAC;IAED;;OAEG;IACH,MAAM,CAAC,IAAI,CACT,SAA+B,EAC/B,MAAuB;QAEvB,mEAAmE;QACnE,QAAQ,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;YACpD,IAAK,EAAe,CAAC,UAAU,EAAE,CAAC;gBAChC,EAAE,CAAC,MAAM,EAAE,CAAC;YACd,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,SAAS,GAAG,IAAI,WAAW,EAAE,CAAC;QACpC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAa,CAAC;QAE/D,SAAS,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;QACnC,MAAM,CAAC,UAAU,GAAG,SAAS,CAAC;QAE9B,+BAA+B;QAC/B,MAAM,OAAO,GAAG,IAAI,SAAS,EAAE,CAAC;QAC/B,OAAe,CAAC,SAAS,GAAG,SAAS,CAAC;QACvC,IAAI,MAAM,EAAE,IAAI,EAAE,CAAC;YAChB,OAAe,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;QACtC,CAAC;QAED,MAAM,CAAC,eAAe,GAAG,OAAO,CAAC;QACjC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC;QACrB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAElC,OAAO,SAAS,CAAC;IACnB,CAAC;IAQO,oBAAoB,CAAC,CAAQ;QACnC,IAAK,CAAC,CAAC,MAAsB,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;YAC7D,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;qCACsB,IAAI,CAAC,oBAAoB;kCAC5B,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;UACvD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe;;KAEtE,CAAC;IACJ,CAAC;;AAlJe,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2C3B,AA3CqB,CA2CpB;AAKM;IADP,KAAK,EAAE;iDAC0C;AAGlD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAC5B;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACX;AAvDL,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAoJpB"}

package/dist/krubble-components.bundled.js

@@ -1364,6 +1364,12 @@ KRContextMenu = __decorate$c([
     t$1('kr-context-menu')
 ], KRContextMenu);
 
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const n="important",i=" !"+n,o$1=e$2(class extends i$1{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"style"!==t$1.name||t$1.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce((e,r)=>{const s=t[r];return null==s?e:e+`${r=r.includes("-")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${s};`},"")}update(e,[r]){const{style:s}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(r)),this.render(r);for(const t of this.ft)null==r[t]&&(this.ft.delete(t),t.includes("-")?s.removeProperty(t):s[t]=null);for(const t in r){const e=r[t];if(null!=e){this.ft.add(t);const r="string"==typeof e&&e.endsWith(i);t.includes("-")||r?s.setProperty(t,r?e.slice(0,-11):e,r?n:""):s[t]=e;}}return E}});
+
 var __decorate$b = (undefined && undefined.__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);
@@ -1377,8 +1383,11 @@ let KRDialogHeader = class KRDialogHeader extends i$2 {
 };
 KRDialogHeader.styles = i$5 `
     :host {
-      display: block;
-      padding: 16px 24px;
+      display: flex;
+      padding: 0 24px;
+      align-items: center;
+      height: 64px;
+      flex-shrink: 0;
       border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     }
 
@@ -1399,7 +1408,9 @@ let KRDialogContent = class KRDialogContent extends i$2 {
 KRDialogContent.styles = i$5 `
     :host {
       display: block;
-      padding: 16px 24px;
+      padding: 24px;
+      overflow: auto;
+      flex: 1 1 auto;
     }
   `;
 KRDialogContent = __decorate$b([
@@ -1413,7 +1424,10 @@ let KRDialogFooter = class KRDialogFooter extends i$2 {
 KRDialogFooter.styles = i$5 `
     :host {
       display: flex;
-      padding: 16px 24px;
+      padding: 0 24px;
+      align-items: center;
+      height: 64px;
+      flex-shrink: 0;
       border-top: 1px solid rgba(0, 0, 0, 0.1);
       gap: 12px;
       justify-content: flex-end;
@@ -1463,18 +1477,27 @@ class KRDialogRef {
     }
 }
 /**
- * Generic dialog component that renders a Lit component inside a dialog shell.
+ * Generic dialog component that supports both declarative and programmatic usage.
+ *
+ * Declarative: place `<kr-dialog>` in HTML with slotted content and call `.open()` / `.close()`.
+ * Programmatic: use `KRDialog.open(Component, config)` to create and show a dialog.
  *
  * @element kr-dialog
+ *
+ * @slot - Default slot for declarative dialog content (kr-dialog-header, kr-dialog-content, kr-dialog-footer)
+ *
+ * @fires close - Fired when a declarative dialog is closed
  */
 let KRDialog = class KRDialog extends i$2 {
     constructor() {
         super(...arguments);
         this._dialogRef = null;
         this._contentElement = null;
+        this.opened = false;
+        this.width = '560px';
         this._handleDocumentKeyDown = (e) => {
             if (e.key === 'Escape') {
-                this._dialogRef?.close(undefined);
+                this.close();
             }
         };
     }
@@ -1482,11 +1505,46 @@ let KRDialog = class KRDialog extends i$2 {
         super.disconnectedCallback();
         document.removeEventListener('keydown', this._handleDocumentKeyDown);
     }
-    static open(component, config) {
-        const existing = document.querySelector('kr-dialog');
-        if (existing) {
-            existing.remove();
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('opened')) {
+            if (this.opened) {
+                document.addEventListener('keydown', this._handleDocumentKeyDown);
+            }
+            else {
+                document.removeEventListener('keydown', this._handleDocumentKeyDown);
+            }
         }
+    }
+    /**
+     * Opens the dialog (declarative mode).
+     */
+    open() {
+        this.opened = true;
+    }
+    /**
+     * Closes the dialog.
+     * In programmatic mode (has _dialogRef), delegates to the dialog ref.
+     * In declarative mode, sets opened=false and dispatches close event.
+     */
+    close() {
+        if (this._dialogRef) {
+            this._dialogRef.close(undefined);
+            return;
+        }
+        this.opened = false;
+        this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+    }
+    /**
+     * Opens a dialog programmatically by creating a component and injecting it.
+     */
+    static open(component, config) {
+        // Only remove other programmatic dialogs (those with a _dialogRef)
+        document.querySelectorAll('kr-dialog').forEach((el) => {
+            if (el._dialogRef) {
+                el.remove();
+            }
+        });
         const dialogRef = new KRDialogRef();
         const dialog = document.createElement('kr-dialog');
         dialogRef.setDialogElement(dialog);
@@ -1498,20 +1556,20 @@ let KRDialog = class KRDialog extends i$2 {
             content.data = config.data;
         }
         dialog._contentElement = content;
+        dialog.opened = true;
         document.body.appendChild(dialog);
-        document.addEventListener('keydown', dialog._handleDocumentKeyDown);
         return dialogRef;
     }
     _handleBackdropClick(e) {
         if (e.target.classList.contains('backdrop')) {
-            this._dialogRef?.close(undefined);
+            this.close();
         }
     }
     render() {
         return b `
       <div class="backdrop" @click=${this._handleBackdropClick}></div>
-      <div class="dialog">
-        ${this._contentElement}
+      <div class="dialog" style=${o$1({ width: this.width })}>
+        ${this._contentElement ? this._contentElement : b `<slot></slot>`}
       </div>
     `;
     }
@@ -1521,11 +1579,15 @@ KRDialog.styles = i$5 `
       position: fixed;
       inset: 0;
       z-index: 10000;
-      display: flex;
+      display: none;
       align-items: center;
       justify-content: center;
     }
 
+    :host([opened]) {
+      display: flex;
+    }
+
     .backdrop {
       position: absolute;
       inset: 0;
@@ -1539,13 +1601,32 @@ KRDialog.styles = i$5 `
       border-radius: 12px;
       box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
       max-height: 90vh;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      width: 560px;
+      max-width: calc(100vw - 48px);
+    }
+
+    ::slotted(kr-dialog-header),
+    ::slotted(kr-dialog-footer) {
+      flex-shrink: 0;
+    }
+
+    ::slotted(kr-dialog-content) {
+      flex: 1 1 auto;
       overflow: auto;
-      min-width: 300px;
     }
   `;
 __decorate$b([
     r$1()
 ], KRDialog.prototype, "_contentElement", void 0);
+__decorate$b([
+    n$1({ type: Boolean, reflect: true })
+], KRDialog.prototype, "opened", void 0);
+__decorate$b([
+    n$1({ type: String })
+], KRDialog.prototype, "width", void 0);
 KRDialog = __decorate$b([
     t$1('kr-dialog')
 ], KRDialog);
@@ -1863,12 +1944,6 @@ KRSnackbar = KRSnackbar_1 = __decorate$a([
     t$1('kr-snackbar')
 ], KRSnackbar);
 
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const n="important",i=" !"+n,o$1=e$2(class extends i$1{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"style"!==t$1.name||t$1.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce((e,r)=>{const s=t[r];return null==s?e:e+`${r=r.includes("-")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${s};`},"")}update(e,[r]){const{style:s}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(r)),this.render(r);for(const t of this.ft)null==r[t]&&(this.ft.delete(t),t.includes("-")?s.removeProperty(t):s[t]=null);for(const t in r){const e=r[t];if(null!=e){this.ft.add(t);const r="string"==typeof e&&e.endsWith(i);t.includes("-")||r?s.setProperty(t,r?e.slice(0,-11):e,r?n:""):s[t]=e;}}return E}});
-
 var __decorate$9 = (undefined && undefined.__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);