@kodaris/krubble-components 1.0.61 → 1.0.63

package/dist/krubble-components.umd.js

@@ -95,7 +95,7 @@
    * 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$l = (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;
@@ -202,13 +202,13 @@
       padding: 16px 16px 8px 16px;
     }
   `;
-  __decorate$l([
+  __decorate$n([
       n$1({ type: String })
   ], exports.KRAccordion.prototype, "header", void 0);
-  __decorate$l([
+  __decorate$n([
       n$1({ type: Boolean, reflect: true })
   ], exports.KRAccordion.prototype, "expanded", void 0);
-  exports.KRAccordion = __decorate$l([
+  exports.KRAccordion = __decorate$n([
       t$1('kr-accordion')
   ], exports.KRAccordion);
 
@@ -225,7 +225,7 @@
    * 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$k = (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;
@@ -423,23 +423,23 @@
       outline-offset: 2px;
     }
   `;
-  __decorate$k([
+  __decorate$m([
       n$1({ type: String })
   ], exports.KRAlert.prototype, "type", void 0);
-  __decorate$k([
+  __decorate$m([
       n$1({ type: String })
   ], exports.KRAlert.prototype, "title", void 0);
-  __decorate$k([
+  __decorate$m([
       n$1({ type: Boolean })
   ], exports.KRAlert.prototype, "dismissible", void 0);
-  __decorate$k([
+  __decorate$m([
       n$1({ type: Boolean })
   ], exports.KRAlert.prototype, "visible", void 0);
-  exports.KRAlert = __decorate$k([
+  exports.KRAlert = __decorate$m([
       t$1('kr-alert')
   ], exports.KRAlert);
 
-  var __decorate$j = (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;
@@ -938,40 +938,40 @@
       height: 22px;
     }
   `;
-  __decorate$j([
+  __decorate$l([
       n$1({ type: String, reflect: true })
   ], exports.KRButton.prototype, "variant", void 0);
-  __decorate$j([
+  __decorate$l([
       n$1({ type: String, reflect: true })
   ], exports.KRButton.prototype, "color", void 0);
-  __decorate$j([
+  __decorate$l([
       n$1({ type: String, reflect: true })
   ], exports.KRButton.prototype, "size", void 0);
-  __decorate$j([
+  __decorate$l([
       n$1({ type: Boolean, reflect: true })
   ], exports.KRButton.prototype, "disabled", void 0);
-  __decorate$j([
+  __decorate$l([
       n$1({ type: String })
   ], exports.KRButton.prototype, "href", void 0);
-  __decorate$j([
+  __decorate$l([
       n$1({ type: String })
   ], exports.KRButton.prototype, "target", void 0);
-  __decorate$j([
+  __decorate$l([
       n$1({ type: Array })
   ], exports.KRButton.prototype, "options", void 0);
-  __decorate$j([
+  __decorate$l([
       n$1({ type: String, reflect: true, attribute: 'icon-position' })
   ], exports.KRButton.prototype, "iconPosition", void 0);
-  __decorate$j([
+  __decorate$l([
       r$1()
   ], exports.KRButton.prototype, "_state", void 0);
-  __decorate$j([
+  __decorate$l([
       r$1()
   ], exports.KRButton.prototype, "_stateText", void 0);
-  __decorate$j([
+  __decorate$l([
       r$1()
   ], exports.KRButton.prototype, "_dropdownOpened", void 0);
-  exports.KRButton = __decorate$j([
+  exports.KRButton = __decorate$l([
       t$1('kr-button')
   ], exports.KRButton);
 
@@ -981,7 +981,7 @@
    * 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$i = (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;
@@ -1215,26 +1215,26 @@
     .hljs-property { color: #005cc5; }
 
   `];
-  __decorate$i([
+  __decorate$k([
       n$1({ type: String })
   ], exports.KRCodeDemo.prototype, "language", void 0);
-  __decorate$i([
+  __decorate$k([
       r$1()
   ], exports.KRCodeDemo.prototype, "code", void 0);
-  __decorate$i([
+  __decorate$k([
       r$1()
   ], exports.KRCodeDemo.prototype, "activeTab", void 0);
-  __decorate$i([
+  __decorate$k([
       r$1()
   ], exports.KRCodeDemo.prototype, "copied", void 0);
-  __decorate$i([
+  __decorate$k([
       r$1()
   ], exports.KRCodeDemo.prototype, "highlightedCode", void 0);
-  exports.KRCodeDemo = __decorate$i([
+  exports.KRCodeDemo = __decorate$k([
       t$1('kr-code-demo')
   ], exports.KRCodeDemo);
 
-  var __decorate$h = (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;
@@ -1403,10 +1403,10 @@
       margin: 4px 0;
     }
   `;
-  __decorate$h([
+  __decorate$j([
       r$1()
   ], exports.KRContextMenu.prototype, "items", void 0);
-  exports.KRContextMenu = __decorate$h([
+  exports.KRContextMenu = __decorate$j([
       t$1('kr-context-menu')
   ], exports.KRContextMenu);
 
@@ -1416,7 +1416,7 @@
    * 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$g = (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;
@@ -1443,7 +1443,7 @@
       font-weight: 600;
     }
   `;
-  KRDialogHeader = __decorate$g([
+  KRDialogHeader = __decorate$i([
       t$1('kr-dialog-header')
   ], KRDialogHeader);
   let KRDialogContent = class KRDialogContent extends i$2 {
@@ -1459,7 +1459,7 @@
       flex: 1 1 auto;
     }
   `;
-  KRDialogContent = __decorate$g([
+  KRDialogContent = __decorate$i([
       t$1('kr-dialog-content')
   ], KRDialogContent);
   let KRDialogFooter = class KRDialogFooter extends i$2 {
@@ -1479,7 +1479,7 @@
       justify-content: flex-end;
     }
   `;
-  KRDialogFooter = __decorate$g([
+  KRDialogFooter = __decorate$i([
       t$1('kr-dialog-footer')
   ], KRDialogFooter);
   /**
@@ -1687,23 +1687,23 @@
       font-weight: 600;
     }
   `;
-  __decorate$g([
+  __decorate$i([
       r$1()
   ], exports.KRDialog.prototype, "_contentElement", void 0);
-  __decorate$g([
+  __decorate$i([
       n$1({ type: Boolean, reflect: true })
   ], exports.KRDialog.prototype, "opened", void 0);
-  __decorate$g([
+  __decorate$i([
       n$1({ type: String })
   ], exports.KRDialog.prototype, "label", void 0);
-  __decorate$g([
+  __decorate$i([
       n$1({ type: String })
   ], exports.KRDialog.prototype, "width", void 0);
-  exports.KRDialog = __decorate$g([
+  exports.KRDialog = __decorate$i([
       t$1('kr-dialog')
   ], exports.KRDialog);
 
-  var __decorate$f = (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;
@@ -2223,47 +2223,47 @@
       border-top: 1px solid #e5e7eb;
     }
   `;
-  __decorate$f([
+  __decorate$h([
       n$1({ type: Object })
   ], exports.KRDateRangePicker.prototype, "value", void 0);
-  __decorate$f([
+  __decorate$h([
       n$1({ type: Array })
   ], exports.KRDateRangePicker.prototype, "relativeOptions", void 0);
-  __decorate$f([
+  __decorate$h([
       n$1({ type: Boolean })
   ], exports.KRDateRangePicker.prototype, "disabled", void 0);
-  __decorate$f([
+  __decorate$h([
       n$1({ type: Boolean })
   ], exports.KRDateRangePicker.prototype, "invalid", void 0);
-  __decorate$f([
+  __decorate$h([
       n$1({ type: String })
   ], exports.KRDateRangePicker.prototype, "placeholder", void 0);
-  __decorate$f([
+  __decorate$h([
       n$1({ type: String })
   ], exports.KRDateRangePicker.prototype, "startDate", void 0);
-  __decorate$f([
+  __decorate$h([
       n$1({ type: String })
   ], exports.KRDateRangePicker.prototype, "endDate", void 0);
-  __decorate$f([
+  __decorate$h([
       n$1({ type: String })
   ], exports.KRDateRangePicker.prototype, "mode", void 0);
-  __decorate$f([
+  __decorate$h([
       r$1()
   ], exports.KRDateRangePicker.prototype, "_isOpen", void 0);
-  __decorate$f([
+  __decorate$h([
       r$1()
   ], exports.KRDateRangePicker.prototype, "_activeTab", void 0);
-  __decorate$f([
+  __decorate$h([
       r$1()
   ], exports.KRDateRangePicker.prototype, "_tempStartDate", void 0);
-  __decorate$f([
+  __decorate$h([
       r$1()
   ], exports.KRDateRangePicker.prototype, "_tempEndDate", void 0);
-  exports.KRDateRangePicker = __decorate$f([
+  exports.KRDateRangePicker = __decorate$h([
       t$1('kr-date-range-picker')
   ], exports.KRDateRangePicker);
 
-  var __decorate$e = (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;
@@ -2565,23 +2565,23 @@
   `;
   /** Track active snackbars for stacking */
   exports.KRSnackbar.activeSnackbars = [];
-  __decorate$e([
+  __decorate$g([
       n$1({ type: String })
   ], exports.KRSnackbar.prototype, "type", void 0);
-  __decorate$e([
+  __decorate$g([
       n$1({ type: String })
   ], exports.KRSnackbar.prototype, "title", void 0);
-  __decorate$e([
+  __decorate$g([
       n$1({ type: String })
   ], exports.KRSnackbar.prototype, "message", void 0);
-  __decorate$e([
+  __decorate$g([
       n$1({ type: Number })
   ], exports.KRSnackbar.prototype, "duration", void 0);
-  exports.KRSnackbar = KRSnackbar_1 = __decorate$e([
+  exports.KRSnackbar = KRSnackbar_1 = __decorate$g([
       t$1('kr-snackbar')
   ], exports.KRSnackbar);
 
-  var __decorate$d = (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;
@@ -2884,20 +2884,20 @@
       }
     `,
   ];
-  __decorate$d([
+  __decorate$f([
       n$1({ type: String, attribute: 'active-tab-id' })
   ], exports.KRTabGroup.prototype, "activeTabId", void 0);
-  __decorate$d([
+  __decorate$f([
       n$1({ type: Boolean })
   ], exports.KRTabGroup.prototype, "justified", void 0);
-  __decorate$d([
+  __decorate$f([
       n$1({ type: String, reflect: true })
   ], exports.KRTabGroup.prototype, "size", void 0);
-  exports.KRTabGroup = __decorate$d([
+  exports.KRTabGroup = __decorate$f([
       t$1('kr-tab-group')
   ], exports.KRTabGroup);
 
-  var __decorate$c = (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;
@@ -2978,35 +2978,35 @@
       }
     `,
   ];
-  __decorate$c([
+  __decorate$e([
       n$1({ type: String, reflect: true })
   ], exports.KRTab.prototype, "id", void 0);
-  __decorate$c([
+  __decorate$e([
       n$1({ type: String })
   ], exports.KRTab.prototype, "label", void 0);
-  __decorate$c([
+  __decorate$e([
       n$1({ type: String })
   ], exports.KRTab.prototype, "badge", void 0);
-  __decorate$c([
+  __decorate$e([
       n$1({ type: String, attribute: 'badge-background' })
   ], exports.KRTab.prototype, "badgeBackground", void 0);
-  __decorate$c([
+  __decorate$e([
       n$1({ type: String, attribute: 'badge-color' })
   ], exports.KRTab.prototype, "badgeColor", void 0);
-  __decorate$c([
+  __decorate$e([
       n$1({ type: Boolean })
   ], exports.KRTab.prototype, "disabled", void 0);
-  __decorate$c([
+  __decorate$e([
       n$1({ type: Boolean })
   ], exports.KRTab.prototype, "dismissible", void 0);
-  __decorate$c([
+  __decorate$e([
       n$1({ type: Boolean, reflect: true })
   ], exports.KRTab.prototype, "active", void 0);
-  exports.KRTab = __decorate$c([
+  exports.KRTab = __decorate$e([
       t$1('kr-tab')
   ], exports.KRTab);
 
-  var __decorate$b = (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;
@@ -3478,47 +3478,47 @@
   `];
   // Enable form association
   exports.KRSelectField.formAssociated = true;
-  __decorate$b([
+  __decorate$d([
       n$1({ type: String })
   ], exports.KRSelectField.prototype, "label", void 0);
-  __decorate$b([
+  __decorate$d([
       n$1({ type: String })
   ], exports.KRSelectField.prototype, "name", void 0);
-  __decorate$b([
+  __decorate$d([
       n$1({ type: String })
   ], exports.KRSelectField.prototype, "value", void 0);
-  __decorate$b([
+  __decorate$d([
       n$1({ type: String })
   ], exports.KRSelectField.prototype, "placeholder", void 0);
-  __decorate$b([
+  __decorate$d([
       n$1({ type: Boolean })
   ], exports.KRSelectField.prototype, "disabled", void 0);
-  __decorate$b([
+  __decorate$d([
       n$1({ type: Boolean })
   ], exports.KRSelectField.prototype, "required", void 0);
-  __decorate$b([
+  __decorate$d([
       n$1({ type: Boolean })
   ], exports.KRSelectField.prototype, "readonly", void 0);
-  __decorate$b([
+  __decorate$d([
       n$1({ type: String })
   ], exports.KRSelectField.prototype, "hint", void 0);
-  __decorate$b([
+  __decorate$d([
       r$1()
   ], exports.KRSelectField.prototype, "_isOpen", void 0);
-  __decorate$b([
+  __decorate$d([
       r$1()
   ], exports.KRSelectField.prototype, "_highlightedIndex", void 0);
-  __decorate$b([
+  __decorate$d([
       r$1()
   ], exports.KRSelectField.prototype, "_touched", void 0);
-  __decorate$b([
+  __decorate$d([
       e$3('.select-trigger')
   ], exports.KRSelectField.prototype, "_triggerElement", void 0);
-  exports.KRSelectField = __decorate$b([
+  exports.KRSelectField = __decorate$d([
       t$1('kr-select-field')
   ], exports.KRSelectField);
 
-  var __decorate$a = (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;
@@ -3555,13 +3555,13 @@
       display: none;
     }
   `;
-  __decorate$a([
+  __decorate$c([
       n$1({ type: String })
   ], exports.KRSelectOption.prototype, "value", void 0);
-  __decorate$a([
+  __decorate$c([
       n$1({ type: Boolean })
   ], exports.KRSelectOption.prototype, "disabled", void 0);
-  exports.KRSelectOption = __decorate$a([
+  exports.KRSelectOption = __decorate$c([
       t$1('kr-select-option')
   ], exports.KRSelectOption);
 
@@ -4609,7 +4609,7 @@
       }
   }
 
-  var __decorate$9 = (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;
@@ -6886,59 +6886,59 @@
     }
 
   `];
-  __decorate$9([
+  __decorate$b([
       r$1()
   ], exports.KRTable.prototype, "_data", void 0);
-  __decorate$9([
+  __decorate$b([
       r$1()
   ], exports.KRTable.prototype, "_dataState", void 0);
-  __decorate$9([
+  __decorate$b([
       r$1()
   ], exports.KRTable.prototype, "_page", void 0);
-  __decorate$9([
+  __decorate$b([
       r$1()
   ], exports.KRTable.prototype, "_pageSize", void 0);
-  __decorate$9([
+  __decorate$b([
       r$1()
   ], exports.KRTable.prototype, "_totalItems", void 0);
-  __decorate$9([
+  __decorate$b([
       r$1()
   ], exports.KRTable.prototype, "_totalPages", void 0);
-  __decorate$9([
+  __decorate$b([
       r$1()
   ], exports.KRTable.prototype, "_searchQuery", void 0);
-  __decorate$9([
+  __decorate$b([
       r$1()
   ], exports.KRTable.prototype, "_canScrollLeft", void 0);
-  __decorate$9([
+  __decorate$b([
       r$1()
   ], exports.KRTable.prototype, "_canScrollRight", void 0);
-  __decorate$9([
+  __decorate$b([
       r$1()
   ], exports.KRTable.prototype, "_canScrollHorizontal", void 0);
-  __decorate$9([
+  __decorate$b([
       r$1()
   ], exports.KRTable.prototype, "_columnPickerOpen", void 0);
-  __decorate$9([
+  __decorate$b([
       r$1()
   ], exports.KRTable.prototype, "_filterPanelOpened", void 0);
-  __decorate$9([
+  __decorate$b([
       r$1()
   ], exports.KRTable.prototype, "_filterPanelTab", void 0);
-  __decorate$9([
+  __decorate$b([
       r$1()
   ], exports.KRTable.prototype, "_buckets", void 0);
-  __decorate$9([
+  __decorate$b([
       r$1()
   ], exports.KRTable.prototype, "_sorts", void 0);
-  __decorate$9([
+  __decorate$b([
       n$1({ type: Object })
   ], exports.KRTable.prototype, "def", void 0);
-  exports.KRTable = __decorate$9([
+  exports.KRTable = __decorate$b([
       t$1('kr-table')
   ], exports.KRTable);
 
-  var __decorate$8 = (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;
@@ -7058,17 +7058,17 @@
       stroke-linecap: round;
     }
   `;
-  __decorate$8([
+  __decorate$a([
       n$1({ type: String, reflect: true })
   ], exports.KRSpinner.prototype, "size", void 0);
-  __decorate$8([
+  __decorate$a([
       n$1({ type: String, reflect: true })
   ], exports.KRSpinner.prototype, "color", void 0);
-  exports.KRSpinner = __decorate$8([
+  exports.KRSpinner = __decorate$a([
       t$1('kr-spinner')
   ], exports.KRSpinner);
 
-  var __decorate$7 = (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;
@@ -7159,17 +7159,17 @@
       }
     }
   `;
-  __decorate$7([
+  __decorate$9([
       n$1({ type: String, reflect: true })
   ], exports.KRProgressBar.prototype, "color", void 0);
-  __decorate$7([
+  __decorate$9([
       n$1({ type: String, reflect: true })
   ], exports.KRProgressBar.prototype, "trackColor", void 0);
-  exports.KRProgressBar = __decorate$7([
+  exports.KRProgressBar = __decorate$9([
       t$1('kr-progress-bar')
   ], exports.KRProgressBar);
 
-  var __decorate$6 = (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;
@@ -7637,23 +7637,23 @@
     }
   `;
   exports.KRFilePreview._activePreview = null;
-  __decorate$6([
+  __decorate$8([
       n$1({ type: String })
   ], exports.KRFilePreview.prototype, "src", void 0);
-  __decorate$6([
+  __decorate$8([
       n$1({ type: String })
   ], exports.KRFilePreview.prototype, "name", void 0);
-  __decorate$6([
+  __decorate$8([
       r$1()
   ], exports.KRFilePreview.prototype, "_zoomLevel", void 0);
-  __decorate$6([
+  __decorate$8([
       r$1()
   ], exports.KRFilePreview.prototype, "_textContent", void 0);
-  exports.KRFilePreview = KRFilePreview_1 = __decorate$6([
+  exports.KRFilePreview = KRFilePreview_1 = __decorate$8([
       t$1('kr-file-preview')
   ], exports.KRFilePreview);
 
-  var __decorate$5 = (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;
@@ -7896,13 +7896,13 @@
       padding: 20px;
     }
   `;
-  __decorate$5([
+  __decorate$7([
       n$1({ type: Array })
   ], exports.KRFileList.prototype, "files", void 0);
-  __decorate$5([
+  __decorate$7([
       n$1({ type: String, attribute: 'empty-message' })
   ], exports.KRFileList.prototype, "emptyMessage", void 0);
-  exports.KRFileList = __decorate$5([
+  exports.KRFileList = __decorate$7([
       t$1('kr-file-list')
   ], exports.KRFileList);
 
@@ -7924,7 +7924,7 @@
    * 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$4 = (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;
@@ -8177,59 +8177,59 @@
   `;
   // Enable form association
   exports.KRTextField.formAssociated = true;
-  __decorate$4([
+  __decorate$6([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "label", void 0);
-  __decorate$4([
+  __decorate$6([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "name", void 0);
-  __decorate$4([
+  __decorate$6([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "value", void 0);
-  __decorate$4([
+  __decorate$6([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "placeholder", void 0);
-  __decorate$4([
+  __decorate$6([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "type", void 0);
-  __decorate$4([
+  __decorate$6([
       n$1({ type: Boolean })
   ], exports.KRTextField.prototype, "required", void 0);
-  __decorate$4([
+  __decorate$6([
       n$1({ type: Boolean })
   ], exports.KRTextField.prototype, "disabled", void 0);
-  __decorate$4([
+  __decorate$6([
       n$1({ type: Boolean })
   ], exports.KRTextField.prototype, "readonly", void 0);
-  __decorate$4([
+  __decorate$6([
       n$1({ type: Number })
   ], exports.KRTextField.prototype, "minlength", void 0);
-  __decorate$4([
+  __decorate$6([
       n$1({ type: Number })
   ], exports.KRTextField.prototype, "maxlength", void 0);
-  __decorate$4([
+  __decorate$6([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "pattern", void 0);
-  __decorate$4([
+  __decorate$6([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "autocomplete", void 0);
-  __decorate$4([
+  __decorate$6([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "hint", void 0);
-  __decorate$4([
+  __decorate$6([
       e$3('input')
   ], exports.KRTextField.prototype, "_input", void 0);
-  __decorate$4([
+  __decorate$6([
       r$1()
   ], exports.KRTextField.prototype, "_touched", void 0);
-  __decorate$4([
+  __decorate$6([
       r$1()
   ], exports.KRTextField.prototype, "_dirty", void 0);
-  exports.KRTextField = __decorate$4([
+  exports.KRTextField = __decorate$6([
       t$1('kr-text-field')
   ], exports.KRTextField);
 
-  var __decorate$3 = (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;
@@ -8487,59 +8487,59 @@
   `;
   // Enable form association
   exports.KRTextareaField.formAssociated = true;
-  __decorate$3([
+  __decorate$5([
       n$1({ type: String })
   ], exports.KRTextareaField.prototype, "label", void 0);
-  __decorate$3([
+  __decorate$5([
       n$1({ type: String })
   ], exports.KRTextareaField.prototype, "name", void 0);
-  __decorate$3([
+  __decorate$5([
       n$1({ type: String })
   ], exports.KRTextareaField.prototype, "value", void 0);
-  __decorate$3([
+  __decorate$5([
       n$1({ type: String })
   ], exports.KRTextareaField.prototype, "placeholder", void 0);
-  __decorate$3([
+  __decorate$5([
       n$1({ type: Boolean })
   ], exports.KRTextareaField.prototype, "required", void 0);
-  __decorate$3([
+  __decorate$5([
       n$1({ type: Boolean })
   ], exports.KRTextareaField.prototype, "disabled", void 0);
-  __decorate$3([
+  __decorate$5([
       n$1({ type: Boolean })
   ], exports.KRTextareaField.prototype, "readonly", void 0);
-  __decorate$3([
+  __decorate$5([
       n$1({ type: Number })
   ], exports.KRTextareaField.prototype, "rows", void 0);
-  __decorate$3([
+  __decorate$5([
       n$1({ type: Number })
   ], exports.KRTextareaField.prototype, "cols", void 0);
-  __decorate$3([
+  __decorate$5([
       n$1({ type: Number })
   ], exports.KRTextareaField.prototype, "minlength", void 0);
-  __decorate$3([
+  __decorate$5([
       n$1({ type: Number })
   ], exports.KRTextareaField.prototype, "maxlength", void 0);
-  __decorate$3([
+  __decorate$5([
       n$1({ type: String })
   ], exports.KRTextareaField.prototype, "autocomplete", void 0);
-  __decorate$3([
+  __decorate$5([
       n$1({ type: String })
   ], exports.KRTextareaField.prototype, "hint", void 0);
-  __decorate$3([
+  __decorate$5([
       e$3('textarea')
   ], exports.KRTextareaField.prototype, "_textarea", void 0);
-  __decorate$3([
+  __decorate$5([
       r$1()
   ], exports.KRTextareaField.prototype, "_touched", void 0);
-  __decorate$3([
+  __decorate$5([
       r$1()
   ], exports.KRTextareaField.prototype, "_dirty", void 0);
-  exports.KRTextareaField = __decorate$3([
+  exports.KRTextareaField = __decorate$5([
       t$1('kr-textarea-field')
   ], exports.KRTextareaField);
 
-  var __decorate$2 = (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;
@@ -8596,17 +8596,17 @@
       color: black;
     }
   `;
-  __decorate$2([
+  __decorate$4([
       n$1({ type: String })
   ], KRDetailField.prototype, "label", void 0);
-  __decorate$2([
+  __decorate$4([
       n$1({ type: String })
   ], KRDetailField.prototype, "value", void 0);
-  KRDetailField = __decorate$2([
+  KRDetailField = __decorate$4([
       t$1('kr-detail-field')
   ], KRDetailField);
 
-  var __decorate$1 = (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;
@@ -9102,53 +9102,53 @@
     }
   `;
   exports.KRAutoSuggest.formAssociated = true;
-  __decorate$1([
+  __decorate$3([
       n$1({ type: String })
   ], exports.KRAutoSuggest.prototype, "label", void 0);
-  __decorate$1([
+  __decorate$3([
       n$1({ type: String })
   ], exports.KRAutoSuggest.prototype, "name", void 0);
-  __decorate$1([
+  __decorate$3([
       n$1({ type: String })
   ], exports.KRAutoSuggest.prototype, "value", void 0);
-  __decorate$1([
+  __decorate$3([
       n$1({ type: String })
   ], exports.KRAutoSuggest.prototype, "placeholder", void 0);
-  __decorate$1([
+  __decorate$3([
       n$1({ type: Boolean })
   ], exports.KRAutoSuggest.prototype, "disabled", void 0);
-  __decorate$1([
+  __decorate$3([
       n$1({ type: Boolean })
   ], exports.KRAutoSuggest.prototype, "readonly", void 0);
-  __decorate$1([
+  __decorate$3([
       n$1({ type: Boolean })
   ], exports.KRAutoSuggest.prototype, "required", void 0);
-  __decorate$1([
+  __decorate$3([
       n$1({ type: String })
   ], exports.KRAutoSuggest.prototype, "hint", void 0);
-  __decorate$1([
+  __decorate$3([
       n$1({ type: Array })
   ], exports.KRAutoSuggest.prototype, "options", void 0);
-  __decorate$1([
+  __decorate$3([
       n$1({ attribute: false })
   ], exports.KRAutoSuggest.prototype, "fetch", void 0);
-  __decorate$1([
+  __decorate$3([
       r$1()
   ], exports.KRAutoSuggest.prototype, "_isOpen", void 0);
-  __decorate$1([
+  __decorate$3([
       r$1()
   ], exports.KRAutoSuggest.prototype, "_highlightedIndex", void 0);
-  __decorate$1([
+  __decorate$3([
       r$1()
   ], exports.KRAutoSuggest.prototype, "_touched", void 0);
-  __decorate$1([
+  __decorate$3([
       e$3('input')
   ], exports.KRAutoSuggest.prototype, "_input", void 0);
-  exports.KRAutoSuggest = __decorate$1([
+  exports.KRAutoSuggest = __decorate$3([
       t$1('kr-auto-suggest')
   ], exports.KRAutoSuggest);
 
-  var __decorate = (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;
@@ -9806,70 +9806,752 @@
     }
   `;
   exports.KRComboBox.formAssociated = true;
-  __decorate([
+  __decorate$2([
       n$1({ type: String })
   ], exports.KRComboBox.prototype, "label", void 0);
-  __decorate([
+  __decorate$2([
       n$1({ type: String })
   ], exports.KRComboBox.prototype, "name", void 0);
-  __decorate([
+  __decorate$2([
       n$1({ type: String })
   ], exports.KRComboBox.prototype, "value", void 0);
-  __decorate([
+  __decorate$2([
       n$1({ type: String })
   ], exports.KRComboBox.prototype, "placeholder", void 0);
-  __decorate([
+  __decorate$2([
       n$1({ type: Boolean })
   ], exports.KRComboBox.prototype, "disabled", void 0);
-  __decorate([
+  __decorate$2([
       n$1({ type: Boolean })
   ], exports.KRComboBox.prototype, "readonly", void 0);
-  __decorate([
+  __decorate$2([
       n$1({ type: Boolean })
   ], exports.KRComboBox.prototype, "required", void 0);
-  __decorate([
+  __decorate$2([
       n$1({ type: String })
   ], exports.KRComboBox.prototype, "hint", void 0);
-  __decorate([
+  __decorate$2([
       n$1({ attribute: 'option-value' })
   ], exports.KRComboBox.prototype, "optionValue", void 0);
-  __decorate([
+  __decorate$2([
       n$1({ attribute: 'option-label' })
   ], exports.KRComboBox.prototype, "optionLabel", void 0);
-  __decorate([
+  __decorate$2([
       n$1({ type: Array })
   ], exports.KRComboBox.prototype, "options", void 0);
-  __decorate([
+  __decorate$2([
       n$1({ attribute: false })
   ], exports.KRComboBox.prototype, "fetch", void 0);
-  __decorate([
+  __decorate$2([
       n$1({ attribute: false })
   ], exports.KRComboBox.prototype, "fetchSelection", void 0);
-  __decorate([
+  __decorate$2([
       r$1()
   ], exports.KRComboBox.prototype, "_isOpen", void 0);
-  __decorate([
+  __decorate$2([
       r$1()
   ], exports.KRComboBox.prototype, "_highlightedIndex", void 0);
-  __decorate([
+  __decorate$2([
       r$1()
   ], exports.KRComboBox.prototype, "_touched", void 0);
-  __decorate([
+  __decorate$2([
       r$1()
   ], exports.KRComboBox.prototype, "_searchQuery", void 0);
-  __decorate([
+  __decorate$2([
       r$1()
   ], exports.KRComboBox.prototype, "_loading", void 0);
-  __decorate([
+  __decorate$2([
       e$3('.trigger')
   ], exports.KRComboBox.prototype, "_triggerElement", void 0);
-  __decorate([
+  __decorate$2([
       e$3('.search__input')
   ], exports.KRComboBox.prototype, "_searchInput", void 0);
-  exports.KRComboBox = __decorate([
+  exports.KRComboBox = __decorate$2([
       t$1('kr-combo-box')
   ], exports.KRComboBox);
 
+  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;
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  /**
+   * A card-style radio group for selecting between a small number of options.
+   * Each option renders as a bordered card with a radio indicator, label, and optional description.
+   *
+   * Uses ElementInternals for form association, allowing the component
+   * to participate in form submission, validation, and reset.
+   *
+   * @element kr-radio-cards
+   * @fires change - Fired when the selected value changes
+   */
+  exports.KRRadioCards = class KRRadioCards extends i$2 {
+      constructor() {
+          super();
+          this._focusedIndex = -1;
+          /**
+           * The label text above the cards
+           */
+          this.label = '';
+          /**
+           * The input name for form submission
+           */
+          this.name = '';
+          /**
+           * The currently selected value
+           */
+          this.value = '';
+          /**
+           * The card options to display
+           */
+          this.options = [];
+          /**
+           * Whether the field is disabled
+           */
+          this.disabled = false;
+          /**
+           * Whether the field is required
+           */
+          this.required = false;
+          /**
+           * Helper text shown below the cards
+           */
+          this.hint = '';
+          /**
+           * Layout direction: 'row' or 'column'
+           */
+          this.direction = 'row';
+          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.value = '';
+          this._touched = false;
+          this._internals.setFormValue('');
+          this._internals.setValidity({});
+      }
+      formStateRestoreCallback(state) {
+          this.value = state;
+      }
+      connectedCallback() {
+          super.connectedCallback();
+          this.addEventListener('invalid', this._handleInvalid);
+      }
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          this.removeEventListener('invalid', this._handleInvalid);
+      }
+      firstUpdated() {
+          this._updateValidity();
+      }
+      updated(changedProperties) {
+          if (changedProperties.has('required') || changedProperties.has('value')) {
+              this._updateValidity();
+          }
+      }
+      _updateValidity() {
+          if (this.required && !this.value) {
+              this._internals.setValidity({ valueMissing: true }, 'Please select an option');
+          }
+          else {
+              this._internals.setValidity({});
+          }
+      }
+      _handleCardClick(e, option) {
+          if (this.disabled || option.disabled) {
+              return;
+          }
+          this.value = option.value;
+          this._touched = true;
+          this._internals.setFormValue(this.value);
+          this._updateValidity();
+          this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+      }
+      _handleKeyDown(e, index) {
+          if (this.disabled) {
+              return;
+          }
+          if (e.key === ' ' || e.key === 'Enter') {
+              e.preventDefault();
+              if (!this.options[index].disabled) {
+                  this._handleCardClick(e, this.options[index]);
+              }
+              return;
+          }
+          let nextIndex = -1;
+          if (this.direction === 'row') {
+              if (e.key === 'ArrowRight') {
+                  nextIndex = this._findNextEnabledIndex(index, 1);
+              }
+              else if (e.key === 'ArrowLeft') {
+                  nextIndex = this._findNextEnabledIndex(index, -1);
+              }
+          }
+          else {
+              if (e.key === 'ArrowDown') {
+                  nextIndex = this._findNextEnabledIndex(index, 1);
+              }
+              else if (e.key === 'ArrowUp') {
+                  nextIndex = this._findNextEnabledIndex(index, -1);
+              }
+          }
+          if (nextIndex >= 0) {
+              e.preventDefault();
+              this._focusedIndex = nextIndex;
+              const cards = this.shadowRoot?.querySelectorAll('.card');
+              if (cards[nextIndex]) {
+                  cards[nextIndex].focus();
+              }
+          }
+      }
+      _findNextEnabledIndex(current, step) {
+          let next = current + step;
+          while (next >= 0 && next < this.options.length) {
+              if (!this.options[next].disabled) {
+                  return next;
+              }
+              next += step;
+          }
+          return -1;
+      }
+      render() {
+          return b `
+      <div class="wrapper">
+        ${this.label
+            ? b `
+              <label>
+                ${this.label}
+                ${this.required ? b `<span class="required" aria-hidden="true">*</span>` : A}
+              </label>
+            `
+            : A}
+        <div
+          class=${e$1({
+            'cards': true,
+            'cards--row': this.direction === 'row',
+            'cards--column': this.direction === 'column',
+        })}
+          role="radiogroup"
+          aria-label=${this.label}
+        >
+          ${this.options.map((option, index) => {
+            const isSelected = option.value === this.value;
+            const isDisabled = this.disabled || !!option.disabled;
+            return b `
+              <div
+                class=${e$1({
+                'card': true,
+                'card--selected': isSelected,
+                'card--disabled': isDisabled,
+            })}
+                role="radio"
+                aria-checked=${isSelected}
+                aria-disabled=${isDisabled}
+                tabindex=${isDisabled ? -1 : 0}
+                @click=${(e) => this._handleCardClick(e, option)}
+                @keydown=${(e) => this._handleKeyDown(e, index)}
+              >
+                <div class="card__radio">
+                  ${isSelected ? b `<div class="card__radio-dot"></div>` : A}
+                </div>
+                <div class="card__content">
+                  <div class="card__label">${option.label}</div>
+                  ${option.description
+                ? b `<div class="card__description">${option.description}</div>`
+                : A}
+                </div>
+              </div>
+            `;
+        })}
+        </div>
+        ${this._touched && this.required && !this.value
+            ? b `<div class="validation-message">Please select an option</div>`
+            : this.hint
+                ? b `<div class="hint">${this.hint}</div>`
+                : A}
+      </div>
+    `;
+      }
+  };
+  exports.KRRadioCards.styles = [krBaseCSS, i$5 `
+    :host {
+      display: block;
+      font-family: inherit;
+    }
+
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    label {
+      font-size: 14px;
+      font-weight: 500;
+      color: black;
+    }
+
+    .required {
+      color: var(--kr-radio-cards-required-color, #ef4444);
+      margin-left: 0.125rem;
+    }
+
+    .cards {
+      display: flex;
+      gap: 12px;
+    }
+
+    .cards--row {
+      flex-direction: row;
+    }
+
+    .cards--column {
+      flex-direction: column;
+    }
+
+    .card {
+      flex: 1;
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      padding: 16px;
+      border: 1px solid var(--kr-radio-cards-border-color, #0000003d);
+      border-radius: 8px;
+      background-color: var(--kr-radio-cards-bg, #fff);
+      cursor: pointer;
+      transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
+    }
+
+    .card:hover:not(.card--disabled) {
+      border-color: var(--kr-radio-cards-hover-border-color, #9ca3af);
+    }
+
+    .card:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px rgba(22, 48, 82, 0.1);
+    }
+
+    .card--selected {
+      border-color: var(--kr-radio-cards-selected-border-color, var(--kr-primary));
+      background-color: var(--kr-radio-cards-selected-bg, rgba(22, 48, 82, 0.06));
+    }
+
+    .card--selected:hover {
+      border-color: var(--kr-radio-cards-selected-border-color, var(--kr-primary));
+    }
+
+    .card--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .card__radio {
+      flex-shrink: 0;
+      width: 18px;
+      height: 18px;
+      border: 2px solid var(--kr-radio-cards-radio-border-color, #0000003d);
+      border-radius: 50%;
+      margin-top: 1px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: border-color 0.2s;
+    }
+
+    .card--selected .card__radio {
+      border-color: var(--kr-radio-cards-radio-selected-color, var(--kr-primary));
+    }
+
+    .card__radio-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: var(--kr-radio-cards-radio-selected-color, var(--kr-primary));
+    }
+
+    .card__content {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 0;
+    }
+
+    .card__label {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--kr-radio-cards-label-color, #000);
+    }
+
+    .card__description {
+      font-size: 14px;
+      color: var(--kr-radio-cards-description-color, #4d525c);
+    }
+
+    .hint {
+      font-size: 0.75rem;
+      color: var(--kr-radio-cards-helper-color, #6b7280);
+    }
+
+    .validation-message {
+      font-size: 0.75rem;
+      color: var(--kr-radio-cards-error-color, #ef4444);
+    }
+  `];
+  exports.KRRadioCards.formAssociated = true;
+  __decorate$1([
+      n$1({ type: String })
+  ], exports.KRRadioCards.prototype, "label", void 0);
+  __decorate$1([
+      n$1({ type: String })
+  ], exports.KRRadioCards.prototype, "name", void 0);
+  __decorate$1([
+      n$1({ type: String })
+  ], exports.KRRadioCards.prototype, "value", void 0);
+  __decorate$1([
+      n$1({ attribute: false })
+  ], exports.KRRadioCards.prototype, "options", void 0);
+  __decorate$1([
+      n$1({ type: Boolean })
+  ], exports.KRRadioCards.prototype, "disabled", void 0);
+  __decorate$1([
+      n$1({ type: Boolean })
+  ], exports.KRRadioCards.prototype, "required", void 0);
+  __decorate$1([
+      n$1({ type: String })
+  ], exports.KRRadioCards.prototype, "hint", void 0);
+  __decorate$1([
+      n$1({ type: String })
+  ], exports.KRRadioCards.prototype, "direction", void 0);
+  __decorate$1([
+      r$1()
+  ], exports.KRRadioCards.prototype, "_touched", void 0);
+  exports.KRRadioCards = __decorate$1([
+      t$1('kr-radio-cards')
+  ], exports.KRRadioCards);
+
+  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
+   */
+  exports.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();
+      }
+  };
+  exports.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;
+    }
+  `];
+  exports.KRCheckbox.formAssociated = true;
+  __decorate([
+      n$1({ type: String })
+  ], exports.KRCheckbox.prototype, "label", void 0);
+  __decorate([
+      n$1({ type: String })
+  ], exports.KRCheckbox.prototype, "name", void 0);
+  __decorate([
+      n$1({ type: String })
+  ], exports.KRCheckbox.prototype, "value", void 0);
+  __decorate([
+      n$1({ type: Boolean })
+  ], exports.KRCheckbox.prototype, "checked", void 0);
+  __decorate([
+      n$1({ type: Boolean })
+  ], exports.KRCheckbox.prototype, "disabled", void 0);
+  __decorate([
+      n$1({ type: Boolean })
+  ], exports.KRCheckbox.prototype, "required", void 0);
+  __decorate([
+      n$1({ type: String })
+  ], exports.KRCheckbox.prototype, "hint", void 0);
+  __decorate([
+      r$1()
+  ], exports.KRCheckbox.prototype, "_touched", void 0);
+  exports.KRCheckbox = __decorate([
+      t$1('kr-checkbox')
+  ], exports.KRCheckbox);
+
   exports.KRDialogRef = KRDialogRef;
   exports.KRQuery = KRQuery;
   exports.KR_OPERATORS = KR_OPERATORS;