@kodaris/krubble-components 1.0.20 → 1.0.23

package/dist/krubble.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$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;
@@ -202,13 +202,13 @@
       padding: 16px 16px 8px 16px;
     }
   `;
-  __decorate$d([
+  __decorate$e([
       n$1({ type: String })
   ], exports.KRAccordion.prototype, "header", void 0);
-  __decorate$d([
+  __decorate$e([
       n$1({ type: Boolean, reflect: true })
   ], exports.KRAccordion.prototype, "expanded", void 0);
-  exports.KRAccordion = __decorate$d([
+  exports.KRAccordion = __decorate$e([
       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$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;
@@ -409,23 +409,23 @@
       outline-offset: 2px;
     }
   `;
-  __decorate$c([
+  __decorate$d([
       n$1({ type: String })
   ], exports.KRAlert.prototype, "type", void 0);
-  __decorate$c([
+  __decorate$d([
       n$1({ type: String })
   ], exports.KRAlert.prototype, "header", void 0);
-  __decorate$c([
+  __decorate$d([
       n$1({ type: Boolean })
   ], exports.KRAlert.prototype, "dismissible", void 0);
-  __decorate$c([
+  __decorate$d([
       n$1({ type: Boolean })
   ], exports.KRAlert.prototype, "visible", void 0);
-  exports.KRAlert = __decorate$c([
+  exports.KRAlert = __decorate$d([
       t$1('kr-alert')
   ], exports.KRAlert);
 
-  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;
@@ -844,40 +844,40 @@
       text-decoration: none;
     }
   `;
-  __decorate$b([
+  __decorate$c([
       n$1({ type: String, reflect: true })
   ], exports.KRButton.prototype, "variant", void 0);
-  __decorate$b([
+  __decorate$c([
       n$1({ type: String, reflect: true })
   ], exports.KRButton.prototype, "color", void 0);
-  __decorate$b([
+  __decorate$c([
       n$1({ type: String, reflect: true })
   ], exports.KRButton.prototype, "size", void 0);
-  __decorate$b([
+  __decorate$c([
       n$1({ type: Boolean, reflect: true })
   ], exports.KRButton.prototype, "disabled", void 0);
-  __decorate$b([
+  __decorate$c([
       n$1({ type: String })
   ], exports.KRButton.prototype, "href", void 0);
-  __decorate$b([
+  __decorate$c([
       n$1({ type: String })
   ], exports.KRButton.prototype, "target", void 0);
-  __decorate$b([
+  __decorate$c([
       n$1({ type: Array })
   ], exports.KRButton.prototype, "options", void 0);
-  __decorate$b([
+  __decorate$c([
       r$1()
   ], exports.KRButton.prototype, "_state", void 0);
-  __decorate$b([
+  __decorate$c([
       r$1()
   ], exports.KRButton.prototype, "_stateText", void 0);
-  __decorate$b([
+  __decorate$c([
       r$1()
   ], exports.KRButton.prototype, "_dropdownOpened", void 0);
-  __decorate$b([
+  __decorate$c([
       r$1()
   ], exports.KRButton.prototype, "_dropdownAlignRight", void 0);
-  exports.KRButton = __decorate$b([
+  exports.KRButton = __decorate$c([
       t$1('kr-button')
   ], exports.KRButton);
 
@@ -887,7 +887,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$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;
@@ -1144,23 +1144,23 @@
       color: #fab387;
     }
   `;
-  __decorate$a([
+  __decorate$b([
       n$1({ type: String })
   ], exports.KRCodeDemo.prototype, "language", void 0);
-  __decorate$a([
+  __decorate$b([
       n$1({ type: String })
   ], exports.KRCodeDemo.prototype, "code", void 0);
-  __decorate$a([
+  __decorate$b([
       r$1()
   ], exports.KRCodeDemo.prototype, "activeTab", void 0);
-  __decorate$a([
+  __decorate$b([
       r$1()
   ], exports.KRCodeDemo.prototype, "copied", void 0);
-  exports.KRCodeDemo = __decorate$a([
+  exports.KRCodeDemo = __decorate$b([
       t$1('kr-code-demo')
   ], exports.KRCodeDemo);
 
-  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;
@@ -1329,14 +1329,14 @@
       margin: 4px 0;
     }
   `;
-  __decorate$9([
+  __decorate$a([
       r$1()
   ], exports.KRContextMenu.prototype, "items", void 0);
-  exports.KRContextMenu = __decorate$9([
+  exports.KRContextMenu = __decorate$a([
       t$1('kr-context-menu')
   ], exports.KRContextMenu);
 
-  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;
@@ -1468,14 +1468,14 @@
       overflow: auto;
     }
   `;
-  __decorate$8([
+  __decorate$9([
       r$1()
   ], exports.KRDialog.prototype, "contentElement", void 0);
-  exports.KRDialog = __decorate$8([
+  exports.KRDialog = __decorate$9([
       t$1('kr-dialog')
   ], exports.KRDialog);
 
-  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;
@@ -1772,19 +1772,19 @@
   `;
   /** Track active snackbars for stacking */
   exports.KRSnackbar.activeSnackbars = [];
-  __decorate$7([
+  __decorate$8([
       n$1({ type: String })
   ], exports.KRSnackbar.prototype, "type", void 0);
-  __decorate$7([
+  __decorate$8([
       n$1({ type: String })
   ], exports.KRSnackbar.prototype, "title", void 0);
-  __decorate$7([
+  __decorate$8([
       n$1({ type: String })
   ], exports.KRSnackbar.prototype, "message", void 0);
-  __decorate$7([
+  __decorate$8([
       n$1({ type: Number })
   ], exports.KRSnackbar.prototype, "duration", void 0);
-  exports.KRSnackbar = KRSnackbar_1 = __decorate$7([
+  exports.KRSnackbar = KRSnackbar_1 = __decorate$8([
       t$1('kr-snackbar')
   ], exports.KRSnackbar);
 
@@ -1794,7 +1794,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$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;
@@ -2096,20 +2096,20 @@
       }
     `,
   ];
-  __decorate$6([
+  __decorate$7([
       n$1({ type: String, attribute: 'active-tab-id' })
   ], exports.KRTabGroup.prototype, "activeTabId", void 0);
-  __decorate$6([
+  __decorate$7([
       n$1({ type: Boolean })
   ], exports.KRTabGroup.prototype, "justified", void 0);
-  __decorate$6([
+  __decorate$7([
       n$1({ type: String, reflect: true })
   ], exports.KRTabGroup.prototype, "size", void 0);
-  exports.KRTabGroup = __decorate$6([
+  exports.KRTabGroup = __decorate$7([
       t$1('kr-tab-group')
   ], exports.KRTabGroup);
 
-  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;
@@ -2180,35 +2180,35 @@
       }
     `,
   ];
-  __decorate$5([
+  __decorate$6([
       n$1({ type: String, reflect: true })
   ], exports.KRTab.prototype, "id", void 0);
-  __decorate$5([
+  __decorate$6([
       n$1({ type: String })
   ], exports.KRTab.prototype, "title", void 0);
-  __decorate$5([
+  __decorate$6([
       n$1({ type: String })
   ], exports.KRTab.prototype, "badge", void 0);
-  __decorate$5([
+  __decorate$6([
       n$1({ type: String, attribute: 'badge-background' })
   ], exports.KRTab.prototype, "badgeBackground", void 0);
-  __decorate$5([
+  __decorate$6([
       n$1({ type: String, attribute: 'badge-color' })
   ], exports.KRTab.prototype, "badgeColor", void 0);
-  __decorate$5([
+  __decorate$6([
       n$1({ type: Boolean })
   ], exports.KRTab.prototype, "disabled", void 0);
-  __decorate$5([
+  __decorate$6([
       n$1({ type: Boolean })
   ], exports.KRTab.prototype, "dismissible", void 0);
-  __decorate$5([
+  __decorate$6([
       n$1({ type: Boolean, reflect: true })
   ], exports.KRTab.prototype, "active", void 0);
-  exports.KRTab = __decorate$5([
+  exports.KRTab = __decorate$6([
       t$1('kr-tab')
   ], exports.KRTab);
 
-  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;
@@ -3410,46 +3410,46 @@
       color: #dc2626;
     }
   `];
-  __decorate$4([
+  __decorate$5([
       r$1()
   ], exports.KRTable.prototype, "_data", void 0);
-  __decorate$4([
+  __decorate$5([
       r$1()
   ], exports.KRTable.prototype, "_dataState", void 0);
-  __decorate$4([
+  __decorate$5([
       r$1()
   ], exports.KRTable.prototype, "_page", void 0);
-  __decorate$4([
+  __decorate$5([
       r$1()
   ], exports.KRTable.prototype, "_pageSize", void 0);
-  __decorate$4([
+  __decorate$5([
       r$1()
   ], exports.KRTable.prototype, "_totalItems", void 0);
-  __decorate$4([
+  __decorate$5([
       r$1()
   ], exports.KRTable.prototype, "_totalPages", void 0);
-  __decorate$4([
+  __decorate$5([
       r$1()
   ], exports.KRTable.prototype, "_searchQuery", void 0);
-  __decorate$4([
+  __decorate$5([
       r$1()
   ], exports.KRTable.prototype, "_canScrollLeft", void 0);
-  __decorate$4([
+  __decorate$5([
       r$1()
   ], exports.KRTable.prototype, "_canScrollRight", void 0);
-  __decorate$4([
+  __decorate$5([
       r$1()
   ], exports.KRTable.prototype, "_canScrollHorizontal", void 0);
-  __decorate$4([
+  __decorate$5([
       r$1()
   ], exports.KRTable.prototype, "_columnPickerOpen", void 0);
-  __decorate$4([
+  __decorate$5([
       r$1()
   ], exports.KRTable.prototype, "_displayedColumns", void 0);
-  __decorate$4([
+  __decorate$5([
       n$1({ type: Object })
   ], exports.KRTable.prototype, "def", void 0);
-  exports.KRTable = __decorate$4([
+  exports.KRTable = __decorate$5([
       t$1('kr-table')
   ], exports.KRTable);
 
@@ -3471,7 +3471,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$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;
@@ -3663,13 +3663,13 @@
     .wrapper {
       display: flex;
       flex-direction: column;
-      gap: 0.25rem;
+      gap: 6px;
     }
 
     label {
-      font-size: 13px;
+      font-size: 14px;
       font-weight: 500;
-      color: var(--kr-text-field-label-color, #374151);
+      color: black;
     }
 
     .required {
@@ -3680,9 +3680,9 @@
     input {
       font-family: inherit;
       font-size: 14px;
-      padding: 0.5rem 0.75rem;
-      border: 1px solid var(--kr-text-field-border-color, #d1d5db);
-      border-radius: 4px;
+      padding: 10px 12px;
+      border: 1px solid var(--kr-text-field-border-color, #0000003d);
+      border-radius: 8px;
       background-color: var(--kr-text-field-bg, #fff);
       color: var(--kr-text-field-color, #111827);
       transition: border-color 0.2s, box-shadow 0.2s;
@@ -3724,59 +3724,59 @@
   `;
   // Enable form association
   exports.KRTextField.formAssociated = true;
-  __decorate$3([
+  __decorate$4([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "label", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "name", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "value", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "placeholder", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "type", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: Boolean })
   ], exports.KRTextField.prototype, "required", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: Boolean })
   ], exports.KRTextField.prototype, "disabled", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: Boolean })
   ], exports.KRTextField.prototype, "readonly", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: Number })
   ], exports.KRTextField.prototype, "minlength", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: Number })
   ], exports.KRTextField.prototype, "maxlength", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "pattern", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "autocomplete", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "hint", void 0);
-  __decorate$3([
+  __decorate$4([
       e$3('input')
   ], exports.KRTextField.prototype, "_input", void 0);
-  __decorate$3([
+  __decorate$4([
       r$1()
   ], exports.KRTextField.prototype, "_touched", void 0);
-  __decorate$3([
+  __decorate$4([
       r$1()
   ], exports.KRTextField.prototype, "_dirty", void 0);
-  exports.KRTextField = __decorate$3([
+  exports.KRTextField = __decorate$4([
       t$1('kr-text-field')
   ], exports.KRTextField);
 
-  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;
@@ -4071,13 +4071,13 @@
     .wrapper {
       display: flex;
       flex-direction: column;
-      gap: 0.25rem;
+      gap: 6px;
     }
 
     label {
-      font-size: 13px;
+      font-size: 14px;
       font-weight: 500;
-      color: var(--kr-select-label-color, #374151);
+      color: black;
     }
 
     .required {
@@ -4094,14 +4094,14 @@
       align-items: center;
       justify-content: space-between;
       width: 100%;
-      padding: 0.5rem 0.75rem;
+      padding: 10px 12px;
       font-family: inherit;
       font-size: 14px;
       line-height: 1.5;
       color: var(--kr-select-color, #111827);
       background-color: var(--kr-select-bg, #fff);
-      border: 1px solid var(--kr-select-border-color, #d1d5db);
-      border-radius: 4px;
+      border: 1px solid var(--kr-select-border-color, #0000003d);
+      border-radius: 8px;
       cursor: pointer;
       transition: border-color 0.2s, box-shadow 0.2s;
       text-align: left;
@@ -4251,47 +4251,47 @@
   `;
   // Enable form association
   exports.KRSelectField.formAssociated = true;
-  __decorate$2([
+  __decorate$3([
       n$1({ type: String })
   ], exports.KRSelectField.prototype, "label", void 0);
-  __decorate$2([
+  __decorate$3([
       n$1({ type: String })
   ], exports.KRSelectField.prototype, "name", void 0);
-  __decorate$2([
+  __decorate$3([
       n$1({ type: String })
   ], exports.KRSelectField.prototype, "value", void 0);
-  __decorate$2([
+  __decorate$3([
       n$1({ type: String })
   ], exports.KRSelectField.prototype, "placeholder", void 0);
-  __decorate$2([
+  __decorate$3([
       n$1({ type: Boolean })
   ], exports.KRSelectField.prototype, "disabled", void 0);
-  __decorate$2([
+  __decorate$3([
       n$1({ type: Boolean })
   ], exports.KRSelectField.prototype, "required", void 0);
-  __decorate$2([
+  __decorate$3([
       n$1({ type: Boolean })
   ], exports.KRSelectField.prototype, "readonly", void 0);
-  __decorate$2([
+  __decorate$3([
       n$1({ type: String })
   ], exports.KRSelectField.prototype, "hint", void 0);
-  __decorate$2([
+  __decorate$3([
       r$1()
   ], exports.KRSelectField.prototype, "_isOpen", void 0);
-  __decorate$2([
+  __decorate$3([
       r$1()
   ], exports.KRSelectField.prototype, "_highlightedIndex", void 0);
-  __decorate$2([
+  __decorate$3([
       r$1()
   ], exports.KRSelectField.prototype, "_touched", void 0);
-  __decorate$2([
+  __decorate$3([
       e$3('.select-trigger')
   ], exports.KRSelectField.prototype, "_triggerElement", void 0);
-  exports.KRSelectField = __decorate$2([
+  exports.KRSelectField = __decorate$3([
       t$1('kr-select-field')
   ], exports.KRSelectField);
 
-  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;
@@ -4328,17 +4328,17 @@
       display: none;
     }
   `;
-  __decorate$1([
+  __decorate$2([
       n$1({ type: String })
   ], exports.KRSelectOption.prototype, "value", void 0);
-  __decorate$1([
+  __decorate$2([
       n$1({ type: Boolean })
   ], exports.KRSelectOption.prototype, "disabled", void 0);
-  exports.KRSelectOption = __decorate$1([
+  exports.KRSelectOption = __decorate$2([
       t$1('kr-select-option')
   ], exports.KRSelectOption);
 
-  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;
@@ -4532,13 +4532,13 @@
     .wrapper {
       display: flex;
       flex-direction: column;
-      gap: 0.25rem;
+      gap: 6px;
     }
 
     label {
-      font-size: 13px;
+      font-size: 14px;
       font-weight: 500;
-      color: var(--kr-textarea-field-label-color, #374151);
+      color: black;
     }
 
     .required {
@@ -4550,9 +4550,9 @@
       font-family: inherit;
       font-size: 14px;
       line-height: 1.5;
-      padding: 0.5rem 0.75rem;
-      border: 1px solid var(--kr-textarea-field-border-color, #d1d5db);
-      border-radius: 4px;
+      padding: 10px 12px;
+      border: 1px solid var(--kr-textarea-field-border-color, #0000003d);
+      border-radius: 8px;
       background-color: var(--kr-textarea-field-bg, #fff);
       color: var(--kr-textarea-field-color, #111827);
       transition: border-color 0.2s, box-shadow 0.2s;
@@ -4596,58 +4596,125 @@
   `;
   // Enable form association
   exports.KRTextareaField.formAssociated = true;
-  __decorate([
+  __decorate$1([
       n$1({ type: String })
   ], exports.KRTextareaField.prototype, "label", void 0);
-  __decorate([
+  __decorate$1([
       n$1({ type: String })
   ], exports.KRTextareaField.prototype, "name", void 0);
-  __decorate([
+  __decorate$1([
       n$1({ type: String })
   ], exports.KRTextareaField.prototype, "value", void 0);
-  __decorate([
+  __decorate$1([
       n$1({ type: String })
   ], exports.KRTextareaField.prototype, "placeholder", void 0);
-  __decorate([
+  __decorate$1([
       n$1({ type: Boolean })
   ], exports.KRTextareaField.prototype, "required", void 0);
-  __decorate([
+  __decorate$1([
       n$1({ type: Boolean })
   ], exports.KRTextareaField.prototype, "disabled", void 0);
-  __decorate([
+  __decorate$1([
       n$1({ type: Boolean })
   ], exports.KRTextareaField.prototype, "readonly", void 0);
-  __decorate([
+  __decorate$1([
       n$1({ type: Number })
   ], exports.KRTextareaField.prototype, "rows", void 0);
-  __decorate([
+  __decorate$1([
       n$1({ type: Number })
   ], exports.KRTextareaField.prototype, "cols", void 0);
-  __decorate([
+  __decorate$1([
       n$1({ type: Number })
   ], exports.KRTextareaField.prototype, "minlength", void 0);
-  __decorate([
+  __decorate$1([
       n$1({ type: Number })
   ], exports.KRTextareaField.prototype, "maxlength", void 0);
-  __decorate([
+  __decorate$1([
       n$1({ type: String })
   ], exports.KRTextareaField.prototype, "autocomplete", void 0);
-  __decorate([
+  __decorate$1([
       n$1({ type: String })
   ], exports.KRTextareaField.prototype, "hint", void 0);
-  __decorate([
+  __decorate$1([
       e$3('textarea')
   ], exports.KRTextareaField.prototype, "_textarea", void 0);
-  __decorate([
+  __decorate$1([
       r$1()
   ], exports.KRTextareaField.prototype, "_touched", void 0);
-  __decorate([
+  __decorate$1([
       r$1()
   ], exports.KRTextareaField.prototype, "_dirty", void 0);
-  exports.KRTextareaField = __decorate([
+  exports.KRTextareaField = __decorate$1([
       t$1('kr-textarea-field')
   ], exports.KRTextareaField);
 
+  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 read-only field component that displays a label and value.
+   *
+   * @element kr-detail-field
+   */
+  let KRDetailField = class KRDetailField extends i$2 {
+      constructor() {
+          super(...arguments);
+          /**
+           * The field label text
+           */
+          this.label = '';
+          /**
+           * The value to display
+           */
+          this.value = '';
+      }
+      render() {
+          return b `
+      <div class="wrapper">
+        ${this.label
+            ? b `<label>${this.label}</label>`
+            : A}
+        <div class="value">${this.value}</div>
+      </div>
+    `;
+      }
+  };
+  KRDetailField.styles = 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;
+    }
+
+    .value {
+      font-size: 14px;
+      color: black;
+    }
+  `;
+  __decorate([
+      n$1({ type: String })
+  ], KRDetailField.prototype, "label", void 0);
+  __decorate([
+      n$1({ type: String })
+  ], KRDetailField.prototype, "value", void 0);
+  KRDetailField = __decorate([
+      t$1('kr-detail-field')
+  ], KRDetailField);
+
   exports.DialogRef = DialogRef;
   exports.krBaseCSS = krBaseCSS;