@kodaris/krubble-components 1.0.62 → 1.0.64

package/dist/krubble-components.bundled.js

@@ -89,7 +89,7 @@ const e$4=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"obj
  * SPDX-License-Identifier: BSD-3-Clause
  */function e$3(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$4(n,s,{get(){return o(this)}})}}
 
-var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$n = (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);
     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;
@@ -196,13 +196,13 @@ KRAccordion.styles = i$5 `
       padding: 16px 16px 8px 16px;
     }
   `;
-__decorate$m([
+__decorate$n([
     n$1({ type: String })
 ], KRAccordion.prototype, "header", void 0);
-__decorate$m([
+__decorate$n([
     n$1({ type: Boolean, reflect: true })
 ], KRAccordion.prototype, "expanded", void 0);
-KRAccordion = __decorate$m([
+KRAccordion = __decorate$n([
     t$1('kr-accordion')
 ], KRAccordion);
 
@@ -219,7 +219,7 @@ const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4},e$2=t=>(...e)=>({_$
  * SPDX-License-Identifier: BSD-3-Clause
  */const e$1=e$2(class extends i$1{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter(s=>t[s]).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return E}});
 
-var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$m = (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);
     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;
@@ -417,23 +417,23 @@ KRAlert.styles = i$5 `
       outline-offset: 2px;
     }
   `;
-__decorate$l([
+__decorate$m([
     n$1({ type: String })
 ], KRAlert.prototype, "type", void 0);
-__decorate$l([
+__decorate$m([
     n$1({ type: String })
 ], KRAlert.prototype, "title", void 0);
-__decorate$l([
+__decorate$m([
     n$1({ type: Boolean })
 ], KRAlert.prototype, "dismissible", void 0);
-__decorate$l([
+__decorate$m([
     n$1({ type: Boolean })
 ], KRAlert.prototype, "visible", void 0);
-KRAlert = __decorate$l([
+KRAlert = __decorate$m([
     t$1('kr-alert')
 ], KRAlert);
 
-var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$l = (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);
     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;
@@ -932,40 +932,40 @@ KRButton.styles = i$5 `
       height: 22px;
     }
   `;
-__decorate$k([
+__decorate$l([
     n$1({ type: String, reflect: true })
 ], KRButton.prototype, "variant", void 0);
-__decorate$k([
+__decorate$l([
     n$1({ type: String, reflect: true })
 ], KRButton.prototype, "color", void 0);
-__decorate$k([
+__decorate$l([
     n$1({ type: String, reflect: true })
 ], KRButton.prototype, "size", void 0);
-__decorate$k([
+__decorate$l([
     n$1({ type: Boolean, reflect: true })
 ], KRButton.prototype, "disabled", void 0);
-__decorate$k([
+__decorate$l([
     n$1({ type: String })
 ], KRButton.prototype, "href", void 0);
-__decorate$k([
+__decorate$l([
     n$1({ type: String })
 ], KRButton.prototype, "target", void 0);
-__decorate$k([
+__decorate$l([
     n$1({ type: Array })
 ], KRButton.prototype, "options", void 0);
-__decorate$k([
+__decorate$l([
     n$1({ type: String, reflect: true, attribute: 'icon-position' })
 ], KRButton.prototype, "iconPosition", void 0);
-__decorate$k([
+__decorate$l([
     r$1()
 ], KRButton.prototype, "_state", void 0);
-__decorate$k([
+__decorate$l([
     r$1()
 ], KRButton.prototype, "_stateText", void 0);
-__decorate$k([
+__decorate$l([
     r$1()
 ], KRButton.prototype, "_dropdownOpened", void 0);
-KRButton = __decorate$k([
+KRButton = __decorate$l([
     t$1('kr-button')
 ], KRButton);
 
@@ -975,7 +975,7 @@ KRButton = __decorate$k([
  * SPDX-License-Identifier: BSD-3-Clause
  */class e extends i$1{constructor(i){if(super(i),this.it=A,i.type!==t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A||null==r)return this._t=void 0,this.it=r;if(r===E)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName="unsafeHTML",e.resultType=1;const o$2=e$2(e);
 
-var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$k = (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);
     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;
@@ -1209,26 +1209,26 @@ KRCodeDemo.styles = [krBaseCSS, i$5 `
     .hljs-property { color: #005cc5; }
 
   `];
-__decorate$j([
+__decorate$k([
     n$1({ type: String })
 ], KRCodeDemo.prototype, "language", void 0);
-__decorate$j([
+__decorate$k([
     r$1()
 ], KRCodeDemo.prototype, "code", void 0);
-__decorate$j([
+__decorate$k([
     r$1()
 ], KRCodeDemo.prototype, "activeTab", void 0);
-__decorate$j([
+__decorate$k([
     r$1()
 ], KRCodeDemo.prototype, "copied", void 0);
-__decorate$j([
+__decorate$k([
     r$1()
 ], KRCodeDemo.prototype, "highlightedCode", void 0);
-KRCodeDemo = __decorate$j([
+KRCodeDemo = __decorate$k([
     t$1('kr-code-demo')
 ], KRCodeDemo);
 
-var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$j = (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);
     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;
@@ -1397,10 +1397,10 @@ KRContextMenu.styles = i$5 `
       margin: 4px 0;
     }
   `;
-__decorate$i([
+__decorate$j([
     r$1()
 ], KRContextMenu.prototype, "items", void 0);
-KRContextMenu = __decorate$i([
+KRContextMenu = __decorate$j([
     t$1('kr-context-menu')
 ], KRContextMenu);
 
@@ -1410,7 +1410,7 @@ KRContextMenu = __decorate$i([
  * 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$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$i = (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);
     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;
@@ -1437,7 +1437,7 @@ KRDialogHeader.styles = i$5 `
       font-weight: 600;
     }
   `;
-KRDialogHeader = __decorate$h([
+KRDialogHeader = __decorate$i([
     t$1('kr-dialog-header')
 ], KRDialogHeader);
 let KRDialogContent = class KRDialogContent extends i$2 {
@@ -1453,7 +1453,7 @@ KRDialogContent.styles = i$5 `
       flex: 1 1 auto;
     }
   `;
-KRDialogContent = __decorate$h([
+KRDialogContent = __decorate$i([
     t$1('kr-dialog-content')
 ], KRDialogContent);
 let KRDialogFooter = class KRDialogFooter extends i$2 {
@@ -1473,7 +1473,7 @@ KRDialogFooter.styles = i$5 `
       justify-content: flex-end;
     }
   `;
-KRDialogFooter = __decorate$h([
+KRDialogFooter = __decorate$i([
     t$1('kr-dialog-footer')
 ], KRDialogFooter);
 /**
@@ -1681,23 +1681,23 @@ KRDialog.styles = i$5 `
       font-weight: 600;
     }
   `;
-__decorate$h([
+__decorate$i([
     r$1()
 ], KRDialog.prototype, "_contentElement", void 0);
-__decorate$h([
+__decorate$i([
     n$1({ type: Boolean, reflect: true })
 ], KRDialog.prototype, "opened", void 0);
-__decorate$h([
+__decorate$i([
     n$1({ type: String })
 ], KRDialog.prototype, "label", void 0);
-__decorate$h([
+__decorate$i([
     n$1({ type: String })
 ], KRDialog.prototype, "width", void 0);
-KRDialog = __decorate$h([
+KRDialog = __decorate$i([
     t$1('kr-dialog')
 ], KRDialog);
 
-var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$h = (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);
     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;
@@ -2217,47 +2217,47 @@ KRDateRangePicker.styles = i$5 `
       border-top: 1px solid #e5e7eb;
     }
   `;
-__decorate$g([
+__decorate$h([
     n$1({ type: Object })
 ], KRDateRangePicker.prototype, "value", void 0);
-__decorate$g([
+__decorate$h([
     n$1({ type: Array })
 ], KRDateRangePicker.prototype, "relativeOptions", void 0);
-__decorate$g([
+__decorate$h([
     n$1({ type: Boolean })
 ], KRDateRangePicker.prototype, "disabled", void 0);
-__decorate$g([
+__decorate$h([
     n$1({ type: Boolean })
 ], KRDateRangePicker.prototype, "invalid", void 0);
-__decorate$g([
+__decorate$h([
     n$1({ type: String })
 ], KRDateRangePicker.prototype, "placeholder", void 0);
-__decorate$g([
+__decorate$h([
     n$1({ type: String })
 ], KRDateRangePicker.prototype, "startDate", void 0);
-__decorate$g([
+__decorate$h([
     n$1({ type: String })
 ], KRDateRangePicker.prototype, "endDate", void 0);
-__decorate$g([
+__decorate$h([
     n$1({ type: String })
 ], KRDateRangePicker.prototype, "mode", void 0);
-__decorate$g([
+__decorate$h([
     r$1()
 ], KRDateRangePicker.prototype, "_isOpen", void 0);
-__decorate$g([
+__decorate$h([
     r$1()
 ], KRDateRangePicker.prototype, "_activeTab", void 0);
-__decorate$g([
+__decorate$h([
     r$1()
 ], KRDateRangePicker.prototype, "_tempStartDate", void 0);
-__decorate$g([
+__decorate$h([
     r$1()
 ], KRDateRangePicker.prototype, "_tempEndDate", void 0);
-KRDateRangePicker = __decorate$g([
+KRDateRangePicker = __decorate$h([
     t$1('kr-date-range-picker')
 ], KRDateRangePicker);
 
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$g = (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);
     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;
@@ -2559,23 +2559,23 @@ KRSnackbar.styles = i$5 `
   `;
 /** Track active snackbars for stacking */
 KRSnackbar.activeSnackbars = [];
-__decorate$f([
+__decorate$g([
     n$1({ type: String })
 ], KRSnackbar.prototype, "type", void 0);
-__decorate$f([
+__decorate$g([
     n$1({ type: String })
 ], KRSnackbar.prototype, "title", void 0);
-__decorate$f([
+__decorate$g([
     n$1({ type: String })
 ], KRSnackbar.prototype, "message", void 0);
-__decorate$f([
+__decorate$g([
     n$1({ type: Number })
 ], KRSnackbar.prototype, "duration", void 0);
-KRSnackbar = KRSnackbar_1 = __decorate$f([
+KRSnackbar = KRSnackbar_1 = __decorate$g([
     t$1('kr-snackbar')
 ], KRSnackbar);
 
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$f = (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);
     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;
@@ -2878,20 +2878,20 @@ KRTabGroup.styles = [
       }
     `,
 ];
-__decorate$e([
+__decorate$f([
     n$1({ type: String, attribute: 'active-tab-id' })
 ], KRTabGroup.prototype, "activeTabId", void 0);
-__decorate$e([
+__decorate$f([
     n$1({ type: Boolean })
 ], KRTabGroup.prototype, "justified", void 0);
-__decorate$e([
+__decorate$f([
     n$1({ type: String, reflect: true })
 ], KRTabGroup.prototype, "size", void 0);
-KRTabGroup = __decorate$e([
+KRTabGroup = __decorate$f([
     t$1('kr-tab-group')
 ], KRTabGroup);
 
-var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$e = (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);
     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;
@@ -2972,35 +2972,35 @@ KRTab.styles = [
       }
     `,
 ];
-__decorate$d([
+__decorate$e([
     n$1({ type: String, reflect: true })
 ], KRTab.prototype, "id", void 0);
-__decorate$d([
+__decorate$e([
     n$1({ type: String })
 ], KRTab.prototype, "label", void 0);
-__decorate$d([
+__decorate$e([
     n$1({ type: String })
 ], KRTab.prototype, "badge", void 0);
-__decorate$d([
+__decorate$e([
     n$1({ type: String, attribute: 'badge-background' })
 ], KRTab.prototype, "badgeBackground", void 0);
-__decorate$d([
+__decorate$e([
     n$1({ type: String, attribute: 'badge-color' })
 ], KRTab.prototype, "badgeColor", void 0);
-__decorate$d([
+__decorate$e([
     n$1({ type: Boolean })
 ], KRTab.prototype, "disabled", void 0);
-__decorate$d([
+__decorate$e([
     n$1({ type: Boolean })
 ], KRTab.prototype, "dismissible", void 0);
-__decorate$d([
+__decorate$e([
     n$1({ type: Boolean, reflect: true })
 ], KRTab.prototype, "active", void 0);
-KRTab = __decorate$d([
+KRTab = __decorate$e([
     t$1('kr-tab')
 ], KRTab);
 
-var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$d = (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);
     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;
@@ -3472,47 +3472,47 @@ KRSelectField.styles = [krBaseCSS, i$5 `
   `];
 // Enable form association
 KRSelectField.formAssociated = true;
-__decorate$c([
+__decorate$d([
     n$1({ type: String })
 ], KRSelectField.prototype, "label", void 0);
-__decorate$c([
+__decorate$d([
     n$1({ type: String })
 ], KRSelectField.prototype, "name", void 0);
-__decorate$c([
+__decorate$d([
     n$1({ type: String })
 ], KRSelectField.prototype, "value", void 0);
-__decorate$c([
+__decorate$d([
     n$1({ type: String })
 ], KRSelectField.prototype, "placeholder", void 0);
-__decorate$c([
+__decorate$d([
     n$1({ type: Boolean })
 ], KRSelectField.prototype, "disabled", void 0);
-__decorate$c([
+__decorate$d([
     n$1({ type: Boolean })
 ], KRSelectField.prototype, "required", void 0);
-__decorate$c([
+__decorate$d([
     n$1({ type: Boolean })
 ], KRSelectField.prototype, "readonly", void 0);
-__decorate$c([
+__decorate$d([
     n$1({ type: String })
 ], KRSelectField.prototype, "hint", void 0);
-__decorate$c([
+__decorate$d([
     r$1()
 ], KRSelectField.prototype, "_isOpen", void 0);
-__decorate$c([
+__decorate$d([
     r$1()
 ], KRSelectField.prototype, "_highlightedIndex", void 0);
-__decorate$c([
+__decorate$d([
     r$1()
 ], KRSelectField.prototype, "_touched", void 0);
-__decorate$c([
+__decorate$d([
     e$3('.select-trigger')
 ], KRSelectField.prototype, "_triggerElement", void 0);
-KRSelectField = __decorate$c([
+KRSelectField = __decorate$d([
     t$1('kr-select-field')
 ], KRSelectField);
 
-var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$c = (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);
     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;
@@ -3549,13 +3549,13 @@ KRSelectOption.styles = i$5 `
       display: none;
     }
   `;
-__decorate$b([
+__decorate$c([
     n$1({ type: String })
 ], KRSelectOption.prototype, "value", void 0);
-__decorate$b([
+__decorate$c([
     n$1({ type: Boolean })
 ], KRSelectOption.prototype, "disabled", void 0);
-KRSelectOption = __decorate$b([
+KRSelectOption = __decorate$c([
     t$1('kr-select-option')
 ], KRSelectOption);
 
@@ -4603,7 +4603,7 @@ class KRQuery {
     }
 }
 
-var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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);
     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;
@@ -4613,6 +4613,7 @@ var __decorate$a = (undefined && undefined.__decorate) || function (decorators,
 class KRTableModel {
     constructor() {
         this.title = '';
+        this.description = '';
         this.actions = [];
         this.columns = [];
         this.displayedColumns = [];
@@ -4655,6 +4656,13 @@ let KRTable = class KRTable extends i$2 {
         this._columnWidthsLocked = false;
         this._model = new KRTableModel();
         this.def = { columns: [] };
+        /**
+         * Table layout variant.
+         * - 'default': Full-page table that fills parent height with centered search.
+         * - 'card': Embedded table that sizes itself to content, left-aligns search, and
+         *   reserves space for pageSize rows to prevent layout shift.
+         */
+        this.variant = 'default';
         this._handleClickOutside = (e) => {
             const path = e.composedPath();
             if (this._columnPickerOpen) {
@@ -4713,6 +4721,9 @@ let KRTable = class KRTable extends i$2 {
             if (this.def.title) {
                 this._model.title = this.def.title;
             }
+            if (this.def.description) {
+                this._model.description = this.def.description;
+            }
             if (this.def.actions) {
                 this._model.actions = this.def.actions;
             }
@@ -4727,6 +4738,7 @@ let KRTable = class KRTable extends i$2 {
             }
             if (typeof this.def.pageSize === 'number') {
                 this._model.pageSize = this.def.pageSize;
+                this._pageSize = this.def.pageSize;
             }
             if (this.def.rowClickable) {
                 this._model.rowClickable = this.def.rowClickable;
@@ -4784,6 +4796,7 @@ let KRTable = class KRTable extends i$2 {
         }
     }
     updated(changedProperties) {
+        this.classList.toggle('kr-table--card', this.variant === 'card');
         this._updateScrollFlags();
         this._syncSlottedContent();
     }
@@ -5081,6 +5094,9 @@ let KRTable = class KRTable extends i$2 {
         // Skip if already locked (prevents shifts on pagination changes)
         if (this._searchPositionLocked)
             return;
+        // In card mode, search is left-aligned via CSS — no position locking needed
+        if (this.variant === 'card')
+            return;
         const search = this.shadowRoot?.querySelector('.search');
         const searchField = search?.querySelector('.search-field');
         if (!search || !searchField)
@@ -5555,10 +5571,23 @@ let KRTable = class KRTable extends i$2 {
       </div>
     `;
     }
+    /** Renders the card title block (title + description) above the toolbar in card mode. */
+    _renderCardHeader() {
+        if (this.variant !== 'card')
+            return A;
+        if (!this._model.title && !this._model.description)
+            return A;
+        return b `
+      <div class="card-header">
+        ${this._model.title ? b `<h2 class="card-header__title">${this._model.title}</h2>` : A}
+        ${this._model.description ? b `<p class="card-header__description">${this._model.description}</p>` : A}
+      </div>
+    `;
+    }
     /**
      * Renders the header toolbar containing:
-     * - Title (left)
-     * - Search bar with view selector dropdown (center)
+     * - Title (left, default variant only)
+     * - Search bar with view selector dropdown (center, or left-aligned in card variant)
      * - Tools (right): page navigation, refresh button, column visibility picker, actions dropdown
      *
      * Hidden when there's no title, no actions, and data fits on one page.
@@ -5569,7 +5598,7 @@ let KRTable = class KRTable extends i$2 {
         }
         return b `
       <div class="header">
-        <div class="title">${this._model.title ?? ''}</div>
+        ${this._model.title && this.variant !== 'card' ? b `<div class="title">${this._model.title}</div>` : A}
         ${this._model.dataSource?.mode === 'db' && !this._model.columns.some(col => col.searchable) ? b `<div class="search"></div>` : b `
           <div class="search">
             <!-- TODO: Saved views dropdown
@@ -5947,8 +5976,13 @@ let KRTable = class KRTable extends i$2 {
     }
     /** Renders the scrollable data grid with column headers and rows. */
     _renderTable() {
+        const wrapperStyle = {};
+        if (this.variant === 'card') {
+            // Reserve space for header row + pageSize data rows to prevent layout shift
+            wrapperStyle['min-height'] = `${48 + (this._pageSize * 48)}px`;
+        }
         return b `
-      <div class="wrapper">
+      <div class="wrapper" style=${o$1(wrapperStyle)}>
         <div class="overlay-left"></div>
         <div class="overlay-right"></div>
         ${this._renderStatus()}
@@ -6016,6 +6050,7 @@ let KRTable = class KRTable extends i$2 {
             return b `<slot></slot>`;
         }
         return b `
+      ${this._renderCardHeader()}
       ${this._renderHeader()}
       ${this._renderTable()}
       ${this._renderFilterPanel()}
@@ -6054,7 +6089,7 @@ KRTable.styles = [krBaseCSS, i$5 `
     }
 
     .title {
-      font-size: 20px;
+      font-size: 18px;
       font-weight: 600;
       color: #000;
     }
@@ -6071,7 +6106,6 @@ KRTable.styles = [krBaseCSS, i$5 `
     .content {
       height: 100%;
       overflow: auto;
-      padding-bottom: 24px;
     }
 
     /* -------------------------------------------------------------------------
@@ -6085,6 +6119,11 @@ KRTable.styles = [krBaseCSS, i$5 `
       min-width: 0;
     }
 
+    /* In card mode, align search left instead of center */
+    :host(.kr-table--card) .search {
+      justify-content: flex-start;
+    }
+
     .search-field {
       width: 100%;
       max-width: 400px;
@@ -6879,60 +6918,105 @@ KRTable.styles = [krBaseCSS, i$5 `
       padding: 16px;
     }
 
+    /* Card variant — self-contained card with border, auto height, left-aligned search */
+    :host(.kr-table--card) {
+      height: auto;
+      /* overflow: visible; */
+      overflow: hidden;
+      /* border: 1px solid #e5e7eb; */
+      /* border-radius: 8px; */
+      border: 1px solid #c6c6cd;
+      border-radius: 12px;
+      background: #fff;
+    }
+
+    .card-header {
+      padding: 24px 24px 16px;
+    }
+
+    .card-header__title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #1f2937;
+      margin: 0;
+    }
+
+    .card-header__description {
+      font-size: 14px;
+      color: #1f2937;
+      margin: 12px 0 0;
+    }
+
+    :host(.kr-table--card) .header {
+      margin: 0 24px;
+    }
+
+    :host(.kr-table--card) .wrapper {
+      flex: none;
+      overflow: visible;
+    }
+
+    :host(.kr-table--card) .content {
+      height: auto;
+    }
+
   `];
-__decorate$a([
+__decorate$b([
     r$1()
 ], KRTable.prototype, "_data", void 0);
-__decorate$a([
+__decorate$b([
     r$1()
 ], KRTable.prototype, "_dataState", void 0);
-__decorate$a([
+__decorate$b([
     r$1()
 ], KRTable.prototype, "_page", void 0);
-__decorate$a([
+__decorate$b([
     r$1()
 ], KRTable.prototype, "_pageSize", void 0);
-__decorate$a([
+__decorate$b([
     r$1()
 ], KRTable.prototype, "_totalItems", void 0);
-__decorate$a([
+__decorate$b([
     r$1()
 ], KRTable.prototype, "_totalPages", void 0);
-__decorate$a([
+__decorate$b([
     r$1()
 ], KRTable.prototype, "_searchQuery", void 0);
-__decorate$a([
+__decorate$b([
     r$1()
 ], KRTable.prototype, "_canScrollLeft", void 0);
-__decorate$a([
+__decorate$b([
     r$1()
 ], KRTable.prototype, "_canScrollRight", void 0);
-__decorate$a([
+__decorate$b([
     r$1()
 ], KRTable.prototype, "_canScrollHorizontal", void 0);
-__decorate$a([
+__decorate$b([
     r$1()
 ], KRTable.prototype, "_columnPickerOpen", void 0);
-__decorate$a([
+__decorate$b([
     r$1()
 ], KRTable.prototype, "_filterPanelOpened", void 0);
-__decorate$a([
+__decorate$b([
     r$1()
 ], KRTable.prototype, "_filterPanelTab", void 0);
-__decorate$a([
+__decorate$b([
     r$1()
 ], KRTable.prototype, "_buckets", void 0);
-__decorate$a([
+__decorate$b([
     r$1()
 ], KRTable.prototype, "_sorts", void 0);
-__decorate$a([
+__decorate$b([
     n$1({ type: Object })
 ], KRTable.prototype, "def", void 0);
-KRTable = __decorate$a([
+__decorate$b([
+    n$1({ type: String, reflect: true })
+], KRTable.prototype, "variant", void 0);
+KRTable = __decorate$b([
     t$1('kr-table')
 ], KRTable);
 
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$a = (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);
     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;
@@ -7052,17 +7136,17 @@ KRSpinner.styles = i$5 `
       stroke-linecap: round;
     }
   `;
-__decorate$9([
+__decorate$a([
     n$1({ type: String, reflect: true })
 ], KRSpinner.prototype, "size", void 0);
-__decorate$9([
+__decorate$a([
     n$1({ type: String, reflect: true })
 ], KRSpinner.prototype, "color", void 0);
-KRSpinner = __decorate$9([
+KRSpinner = __decorate$a([
     t$1('kr-spinner')
 ], KRSpinner);
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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);
     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;
@@ -7153,17 +7237,17 @@ KRProgressBar.styles = i$5 `
       }
     }
   `;
-__decorate$8([
+__decorate$9([
     n$1({ type: String, reflect: true })
 ], KRProgressBar.prototype, "color", void 0);
-__decorate$8([
+__decorate$9([
     n$1({ type: String, reflect: true })
 ], KRProgressBar.prototype, "trackColor", void 0);
-KRProgressBar = __decorate$8([
+KRProgressBar = __decorate$9([
     t$1('kr-progress-bar')
 ], KRProgressBar);
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$8 = (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);
     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;
@@ -7631,23 +7715,23 @@ KRFilePreview.styles = i$5 `
     }
   `;
 KRFilePreview._activePreview = null;
-__decorate$7([
+__decorate$8([
     n$1({ type: String })
 ], KRFilePreview.prototype, "src", void 0);
-__decorate$7([
+__decorate$8([
     n$1({ type: String })
 ], KRFilePreview.prototype, "name", void 0);
-__decorate$7([
+__decorate$8([
     r$1()
 ], KRFilePreview.prototype, "_zoomLevel", void 0);
-__decorate$7([
+__decorate$8([
     r$1()
 ], KRFilePreview.prototype, "_textContent", void 0);
-KRFilePreview = KRFilePreview_1 = __decorate$7([
+KRFilePreview = KRFilePreview_1 = __decorate$8([
     t$1('kr-file-preview')
 ], KRFilePreview);
 
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$7 = (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);
     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;
@@ -7890,13 +7974,13 @@ KRFileList.styles = i$5 `
       padding: 20px;
     }
   `;
-__decorate$6([
+__decorate$7([
     n$1({ type: Array })
 ], KRFileList.prototype, "files", void 0);
-__decorate$6([
+__decorate$7([
     n$1({ type: String, attribute: 'empty-message' })
 ], KRFileList.prototype, "emptyMessage", void 0);
-KRFileList = __decorate$6([
+KRFileList = __decorate$7([
     t$1('kr-file-list')
 ], KRFileList);
 
@@ -7918,7 +8002,7 @@ KRFileList = __decorate$6([
  * SPDX-License-Identifier: BSD-3-Clause
  */const l=e$2(class extends i$1{constructor(r$1){if(super(r$1),r$1.type!==t.PROPERTY&&r$1.type!==t.ATTRIBUTE&&r$1.type!==t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!r(r$1))throw Error("`live` bindings can only contain a single expression")}render(r){return r}update(i,[t$1]){if(t$1===E||t$1===A)return t$1;const o=i.element,l=i.name;if(i.type===t.PROPERTY){if(t$1===o[l])return E}else if(i.type===t.BOOLEAN_ATTRIBUTE){if(!!t$1===o.hasAttribute(l))return E}else if(i.type===t.ATTRIBUTE&&o.getAttribute(l)===t$1+"")return E;return p(i),t$1}});
 
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$6 = (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);
     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;
@@ -8171,59 +8255,59 @@ KRTextField.styles = i$5 `
   `;
 // Enable form association
 KRTextField.formAssociated = true;
-__decorate$5([
+__decorate$6([
     n$1({ type: String })
 ], KRTextField.prototype, "label", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: String })
 ], KRTextField.prototype, "name", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: String })
 ], KRTextField.prototype, "value", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: String })
 ], KRTextField.prototype, "placeholder", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: String })
 ], KRTextField.prototype, "type", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: Boolean })
 ], KRTextField.prototype, "required", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: Boolean })
 ], KRTextField.prototype, "disabled", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: Boolean })
 ], KRTextField.prototype, "readonly", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: Number })
 ], KRTextField.prototype, "minlength", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: Number })
 ], KRTextField.prototype, "maxlength", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: String })
 ], KRTextField.prototype, "pattern", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: String })
 ], KRTextField.prototype, "autocomplete", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: String })
 ], KRTextField.prototype, "hint", void 0);
-__decorate$5([
+__decorate$6([
     e$3('input')
 ], KRTextField.prototype, "_input", void 0);
-__decorate$5([
+__decorate$6([
     r$1()
 ], KRTextField.prototype, "_touched", void 0);
-__decorate$5([
+__decorate$6([
     r$1()
 ], KRTextField.prototype, "_dirty", void 0);
-KRTextField = __decorate$5([
+KRTextField = __decorate$6([
     t$1('kr-text-field')
 ], KRTextField);
 
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$5 = (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);
     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;
@@ -8481,59 +8565,59 @@ KRTextareaField.styles = i$5 `
   `;
 // Enable form association
 KRTextareaField.formAssociated = true;
-__decorate$4([
+__decorate$5([
     n$1({ type: String })
 ], KRTextareaField.prototype, "label", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: String })
 ], KRTextareaField.prototype, "name", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: String })
 ], KRTextareaField.prototype, "value", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: String })
 ], KRTextareaField.prototype, "placeholder", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: Boolean })
 ], KRTextareaField.prototype, "required", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: Boolean })
 ], KRTextareaField.prototype, "disabled", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: Boolean })
 ], KRTextareaField.prototype, "readonly", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: Number })
 ], KRTextareaField.prototype, "rows", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: Number })
 ], KRTextareaField.prototype, "cols", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: Number })
 ], KRTextareaField.prototype, "minlength", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: Number })
 ], KRTextareaField.prototype, "maxlength", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: String })
 ], KRTextareaField.prototype, "autocomplete", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: String })
 ], KRTextareaField.prototype, "hint", void 0);
-__decorate$4([
+__decorate$5([
     e$3('textarea')
 ], KRTextareaField.prototype, "_textarea", void 0);
-__decorate$4([
+__decorate$5([
     r$1()
 ], KRTextareaField.prototype, "_touched", void 0);
-__decorate$4([
+__decorate$5([
     r$1()
 ], KRTextareaField.prototype, "_dirty", void 0);
-KRTextareaField = __decorate$4([
+KRTextareaField = __decorate$5([
     t$1('kr-textarea-field')
 ], KRTextareaField);
 
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$4 = (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);
     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;
@@ -8590,17 +8674,17 @@ KRDetailField.styles = i$5 `
       color: black;
     }
   `;
-__decorate$3([
+__decorate$4([
     n$1({ type: String })
 ], KRDetailField.prototype, "label", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: String })
 ], KRDetailField.prototype, "value", void 0);
-KRDetailField = __decorate$3([
+KRDetailField = __decorate$4([
     t$1('kr-detail-field')
 ], KRDetailField);
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$3 = (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);
     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;
@@ -9096,53 +9180,53 @@ KRAutoSuggest.styles = i$5 `
     }
   `;
 KRAutoSuggest.formAssociated = true;
-__decorate$2([
+__decorate$3([
     n$1({ type: String })
 ], KRAutoSuggest.prototype, "label", void 0);
-__decorate$2([
+__decorate$3([
     n$1({ type: String })
 ], KRAutoSuggest.prototype, "name", void 0);
-__decorate$2([
+__decorate$3([
     n$1({ type: String })
 ], KRAutoSuggest.prototype, "value", void 0);
-__decorate$2([
+__decorate$3([
     n$1({ type: String })
 ], KRAutoSuggest.prototype, "placeholder", void 0);
-__decorate$2([
+__decorate$3([
     n$1({ type: Boolean })
 ], KRAutoSuggest.prototype, "disabled", void 0);
-__decorate$2([
+__decorate$3([
     n$1({ type: Boolean })
 ], KRAutoSuggest.prototype, "readonly", void 0);
-__decorate$2([
+__decorate$3([
     n$1({ type: Boolean })
 ], KRAutoSuggest.prototype, "required", void 0);
-__decorate$2([
+__decorate$3([
     n$1({ type: String })
 ], KRAutoSuggest.prototype, "hint", void 0);
-__decorate$2([
+__decorate$3([
     n$1({ type: Array })
 ], KRAutoSuggest.prototype, "options", void 0);
-__decorate$2([
+__decorate$3([
     n$1({ attribute: false })
 ], KRAutoSuggest.prototype, "fetch", void 0);
-__decorate$2([
+__decorate$3([
     r$1()
 ], KRAutoSuggest.prototype, "_isOpen", void 0);
-__decorate$2([
+__decorate$3([
     r$1()
 ], KRAutoSuggest.prototype, "_highlightedIndex", void 0);
-__decorate$2([
+__decorate$3([
     r$1()
 ], KRAutoSuggest.prototype, "_touched", void 0);
-__decorate$2([
+__decorate$3([
     e$3('input')
 ], KRAutoSuggest.prototype, "_input", void 0);
-KRAutoSuggest = __decorate$2([
+KRAutoSuggest = __decorate$3([
     t$1('kr-auto-suggest')
 ], KRAutoSuggest);
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$2 = (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);
     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;
@@ -9800,71 +9884,71 @@ KRComboBox.styles = i$5 `
     }
   `;
 KRComboBox.formAssociated = true;
-__decorate$1([
+__decorate$2([
     n$1({ type: String })
 ], KRComboBox.prototype, "label", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ type: String })
 ], KRComboBox.prototype, "name", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ type: String })
 ], KRComboBox.prototype, "value", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ type: String })
 ], KRComboBox.prototype, "placeholder", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ type: Boolean })
 ], KRComboBox.prototype, "disabled", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ type: Boolean })
 ], KRComboBox.prototype, "readonly", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ type: Boolean })
 ], KRComboBox.prototype, "required", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ type: String })
 ], KRComboBox.prototype, "hint", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ attribute: 'option-value' })
 ], KRComboBox.prototype, "optionValue", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ attribute: 'option-label' })
 ], KRComboBox.prototype, "optionLabel", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ type: Array })
 ], KRComboBox.prototype, "options", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ attribute: false })
 ], KRComboBox.prototype, "fetch", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ attribute: false })
 ], KRComboBox.prototype, "fetchSelection", void 0);
-__decorate$1([
+__decorate$2([
     r$1()
 ], KRComboBox.prototype, "_isOpen", void 0);
-__decorate$1([
+__decorate$2([
     r$1()
 ], KRComboBox.prototype, "_highlightedIndex", void 0);
-__decorate$1([
+__decorate$2([
     r$1()
 ], KRComboBox.prototype, "_touched", void 0);
-__decorate$1([
+__decorate$2([
     r$1()
 ], KRComboBox.prototype, "_searchQuery", void 0);
-__decorate$1([
+__decorate$2([
     r$1()
 ], KRComboBox.prototype, "_loading", void 0);
-__decorate$1([
+__decorate$2([
     e$3('.trigger')
 ], KRComboBox.prototype, "_triggerElement", void 0);
-__decorate$1([
+__decorate$2([
     e$3('.search__input')
 ], KRComboBox.prototype, "_searchInput", void 0);
-KRComboBox = __decorate$1([
+KRComboBox = __decorate$2([
     t$1('kr-combo-box')
 ], KRComboBox);
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$1 = (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);
     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;
@@ -10216,36 +10300,335 @@ KRRadioCards.styles = [krBaseCSS, i$5 `
     }
   `];
 KRRadioCards.formAssociated = true;
-__decorate([
+__decorate$1([
     n$1({ type: String })
 ], KRRadioCards.prototype, "label", void 0);
-__decorate([
+__decorate$1([
     n$1({ type: String })
 ], KRRadioCards.prototype, "name", void 0);
-__decorate([
+__decorate$1([
     n$1({ type: String })
 ], KRRadioCards.prototype, "value", void 0);
-__decorate([
+__decorate$1([
     n$1({ attribute: false })
 ], KRRadioCards.prototype, "options", void 0);
-__decorate([
+__decorate$1([
     n$1({ type: Boolean })
 ], KRRadioCards.prototype, "disabled", void 0);
-__decorate([
+__decorate$1([
     n$1({ type: Boolean })
 ], KRRadioCards.prototype, "required", void 0);
-__decorate([
+__decorate$1([
     n$1({ type: String })
 ], KRRadioCards.prototype, "hint", void 0);
-__decorate([
+__decorate$1([
     n$1({ type: String })
 ], KRRadioCards.prototype, "direction", void 0);
-__decorate([
+__decorate$1([
     r$1()
 ], KRRadioCards.prototype, "_touched", void 0);
-KRRadioCards = __decorate([
+KRRadioCards = __decorate$1([
     t$1('kr-radio-cards')
 ], KRRadioCards);
 
-export { KRAccordion, KRAlert, KRAutoSuggest, KRButton, KRCodeDemo, KRComboBox, KRContextMenu, KRDateRangePicker, KRDialog, KRDialogRef, KRFileList, KRFilePreview, KRProgressBar, KRQuery, KRRadioCards, KRSelectField, KRSelectOption, KRSnackbar, KRSpinner, KRTab, KRTabGroup, KRTable, KRTextField, KRTextareaField, KR_OPERATORS, getOperatorsForType, krBaseCSS };
+var __decorate = (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);
+    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;
+};
+/**
+ * A checkbox component that works with native browser forms.
+ *
+ * Uses ElementInternals for form association, allowing the component
+ * to participate in form submission, validation, and reset.
+ *
+ * @element kr-checkbox
+ * @fires change - Fired when the checked state changes
+ */
+let KRCheckbox = class KRCheckbox extends i$2 {
+    constructor() {
+        super();
+        /**
+         * The checkbox label text
+         */
+        this.label = '';
+        /**
+         * The input name for form submission
+         */
+        this.name = '';
+        /**
+         * The value submitted when checked
+         */
+        this.value = 'on';
+        /**
+         * Whether the checkbox is checked
+         */
+        this.checked = false;
+        /**
+         * Whether the checkbox is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the checkbox is required
+         */
+        this.required = false;
+        /**
+         * Helper text shown below the checkbox
+         */
+        this.hint = '';
+        this._touched = false;
+        this._handleInvalid = (e) => {
+            e.preventDefault();
+            this._touched = true;
+        };
+        this._internals = this.attachInternals();
+    }
+    // Form-associated custom element callbacks
+    get form() {
+        return this._internals.form;
+    }
+    get validity() {
+        return this._internals.validity;
+    }
+    get validationMessage() {
+        return this._internals.validationMessage;
+    }
+    get willValidate() {
+        return this._internals.willValidate;
+    }
+    checkValidity() {
+        return this._internals.checkValidity();
+    }
+    reportValidity() {
+        return this._internals.reportValidity();
+    }
+    formResetCallback() {
+        this.checked = false;
+        this._touched = false;
+        this._internals.setFormValue('');
+        this._internals.setValidity({});
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === this.value;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('invalid', this._handleInvalid);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('invalid', this._handleInvalid);
+    }
+    firstUpdated() {
+        this._syncFormValue();
+        this._updateValidity();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('checked') || changedProperties.has('value')) {
+            this._syncFormValue();
+        }
+        if (changedProperties.has('required') || changedProperties.has('checked')) {
+            this._updateValidity();
+        }
+    }
+    _syncFormValue() {
+        if (this.checked) {
+            this._internals.setFormValue(this.value);
+        }
+        else {
+            this._internals.setFormValue('');
+        }
+    }
+    _updateValidity() {
+        if (this.required && !this.checked) {
+            this._internals.setValidity({ valueMissing: true }, 'This field is required');
+        }
+        else {
+            this._internals.setValidity({});
+        }
+    }
+    _handleClick(e) {
+        if (this.disabled) {
+            return;
+        }
+        this.checked = !this.checked;
+        this._touched = true;
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    }
+    _handleKeyDown(e) {
+        if (this.disabled) {
+            return;
+        }
+        if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            this._handleClick(e);
+        }
+    }
+    render() {
+        return b `
+      <div class="wrapper">
+        <div
+          class=${e$1({
+            'checkbox': true,
+            'checkbox--disabled': this.disabled,
+        })}
+          role="checkbox"
+          aria-checked=${this.checked}
+          aria-disabled=${this.disabled}
+          aria-label=${this.label}
+          tabindex=${this.disabled ? -1 : 0}
+          @click=${this._handleClick}
+          @keydown=${this._handleKeyDown}
+        >
+          <div class=${e$1({
+            'checkbox__box': true,
+            'checkbox__box--checked': this.checked,
+            'checkbox__box--invalid': this._touched && this.required && !this.checked,
+        })}>
+            <svg class=${e$1({
+            'checkbox__check': true,
+            'checkbox__check--hidden': !this.checked,
+        })} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="20 6 9 17 4 12"></polyline>
+            </svg>
+          </div>
+          ${this.label
+            ? b `
+                <span class="checkbox__label">
+                  ${this.label}
+                  ${this.required ? b `<span class="required" aria-hidden="true">*</span>` : A}
+                </span>
+              `
+            : A}
+        </div>
+        ${this._touched && this.required && !this.checked
+            ? b `<div class="validation-message">This field is required</div>`
+            : this.hint
+                ? b `<div class="hint">${this.hint}</div>`
+                : A}
+      </div>
+    `;
+    }
+    focus() {
+        this.shadowRoot?.querySelector('.checkbox')?.focus();
+    }
+    blur() {
+        this.shadowRoot?.querySelector('.checkbox')?.blur();
+    }
+};
+KRCheckbox.styles = [krBaseCSS, i$5 `
+    :host {
+      display: inline-block;
+      font-family: inherit;
+    }
+
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .checkbox {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+    }
+
+    .checkbox--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .checkbox__box {
+      flex-shrink: 0;
+      width: 18px;
+      height: 18px;
+      border: 2px solid var(--kr-checkbox-border-color, #0000003d);
+      border-radius: 4px;
+      background-color: var(--kr-checkbox-bg, #fff);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
+    }
+
+    .checkbox:focus-visible .checkbox__box {
+      outline: none;
+      box-shadow: 0 0 0 3px rgba(22, 48, 82, 0.1);
+    }
+
+    .checkbox__box--checked {
+      border-color: var(--kr-checkbox-checked-border-color, var(--kr-primary));
+      background-color: var(--kr-checkbox-checked-bg, var(--kr-primary));
+    }
+
+    .checkbox__box--invalid {
+      border-color: var(--kr-checkbox-error-border-color, #ef4444);
+    }
+
+    .checkbox__check {
+      width: 12px;
+      height: 12px;
+      color: var(--kr-checkbox-check-color, #fff);
+    }
+
+    .checkbox__check--hidden {
+      visibility: hidden;
+    }
+
+    .checkbox__label {
+      font-size: 14px;
+      color: var(--kr-checkbox-label-color, #000);
+      user-select: none;
+    }
+
+    .required {
+      color: var(--kr-checkbox-required-color, #ef4444);
+      margin-left: 0.125rem;
+    }
+
+    .hint {
+      font-size: 0.75rem;
+      color: var(--kr-checkbox-helper-color, #6b7280);
+      margin-left: 26px;
+    }
+
+    .validation-message {
+      font-size: 0.75rem;
+      color: var(--kr-checkbox-error-color, #ef4444);
+      margin-left: 26px;
+    }
+  `];
+KRCheckbox.formAssociated = true;
+__decorate([
+    n$1({ type: String })
+], KRCheckbox.prototype, "label", void 0);
+__decorate([
+    n$1({ type: String })
+], KRCheckbox.prototype, "name", void 0);
+__decorate([
+    n$1({ type: String })
+], KRCheckbox.prototype, "value", void 0);
+__decorate([
+    n$1({ type: Boolean })
+], KRCheckbox.prototype, "checked", void 0);
+__decorate([
+    n$1({ type: Boolean })
+], KRCheckbox.prototype, "disabled", void 0);
+__decorate([
+    n$1({ type: Boolean })
+], KRCheckbox.prototype, "required", void 0);
+__decorate([
+    n$1({ type: String })
+], KRCheckbox.prototype, "hint", void 0);
+__decorate([
+    r$1()
+], KRCheckbox.prototype, "_touched", void 0);
+KRCheckbox = __decorate([
+    t$1('kr-checkbox')
+], KRCheckbox);
+
+export { KRAccordion, KRAlert, KRAutoSuggest, KRButton, KRCheckbox, KRCodeDemo, KRComboBox, KRContextMenu, KRDateRangePicker, KRDialog, KRDialogRef, KRFileList, KRFilePreview, KRProgressBar, KRQuery, KRRadioCards, KRSelectField, KRSelectOption, KRSnackbar, KRSpinner, KRTab, KRTabGroup, KRTable, KRTextField, KRTextareaField, KR_OPERATORS, getOperatorsForType, krBaseCSS };
 //# sourceMappingURL=krubble-components.bundled.js.map