@kodaris/krubble-components 1.0.20 → 1.0.23

package/dist/krubble.bundled.js

@@ -89,7 +89,7 @@ const e$4=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"obj
  * SPDX-License-Identifier: BSD-3-Clause
  */function e$3(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$4(n,s,{get(){return o(this)}})}}
 
-var __decorate$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;
@@ -196,13 +196,13 @@ KRAccordion.styles = i$5 `
       padding: 16px 16px 8px 16px;
     }
   `;
-__decorate$d([
+__decorate$e([
     n$1({ type: String })
 ], KRAccordion.prototype, "header", void 0);
-__decorate$d([
+__decorate$e([
     n$1({ type: Boolean, reflect: true })
 ], KRAccordion.prototype, "expanded", void 0);
-KRAccordion = __decorate$d([
+KRAccordion = __decorate$e([
     t$1('kr-accordion')
 ], KRAccordion);
 
@@ -219,7 +219,7 @@ const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4},e$2=t=>(...e)=>({_$
  * SPDX-License-Identifier: BSD-3-Clause
  */const e$1=e$2(class extends i$1{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter(s=>t[s]).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return E}});
 
-var __decorate$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;
@@ -403,23 +403,23 @@ KRAlert.styles = i$5 `
       outline-offset: 2px;
     }
   `;
-__decorate$c([
+__decorate$d([
     n$1({ type: String })
 ], KRAlert.prototype, "type", void 0);
-__decorate$c([
+__decorate$d([
     n$1({ type: String })
 ], KRAlert.prototype, "header", void 0);
-__decorate$c([
+__decorate$d([
     n$1({ type: Boolean })
 ], KRAlert.prototype, "dismissible", void 0);
-__decorate$c([
+__decorate$d([
     n$1({ type: Boolean })
 ], KRAlert.prototype, "visible", void 0);
-KRAlert = __decorate$c([
+KRAlert = __decorate$d([
     t$1('kr-alert')
 ], 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;
@@ -838,40 +838,40 @@ KRButton.styles = i$5 `
       text-decoration: none;
     }
   `;
-__decorate$b([
+__decorate$c([
     n$1({ type: String, reflect: true })
 ], KRButton.prototype, "variant", void 0);
-__decorate$b([
+__decorate$c([
     n$1({ type: String, reflect: true })
 ], KRButton.prototype, "color", void 0);
-__decorate$b([
+__decorate$c([
     n$1({ type: String, reflect: true })
 ], KRButton.prototype, "size", void 0);
-__decorate$b([
+__decorate$c([
     n$1({ type: Boolean, reflect: true })
 ], KRButton.prototype, "disabled", void 0);
-__decorate$b([
+__decorate$c([
     n$1({ type: String })
 ], KRButton.prototype, "href", void 0);
-__decorate$b([
+__decorate$c([
     n$1({ type: String })
 ], KRButton.prototype, "target", void 0);
-__decorate$b([
+__decorate$c([
     n$1({ type: Array })
 ], KRButton.prototype, "options", void 0);
-__decorate$b([
+__decorate$c([
     r$1()
 ], KRButton.prototype, "_state", void 0);
-__decorate$b([
+__decorate$c([
     r$1()
 ], KRButton.prototype, "_stateText", void 0);
-__decorate$b([
+__decorate$c([
     r$1()
 ], KRButton.prototype, "_dropdownOpened", void 0);
-__decorate$b([
+__decorate$c([
     r$1()
 ], KRButton.prototype, "_dropdownAlignRight", void 0);
-KRButton = __decorate$b([
+KRButton = __decorate$c([
     t$1('kr-button')
 ], KRButton);
 
@@ -881,7 +881,7 @@ KRButton = __decorate$b([
  * 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;
@@ -1138,23 +1138,23 @@ KRCodeDemo.styles = i$5 `
       color: #fab387;
     }
   `;
-__decorate$a([
+__decorate$b([
     n$1({ type: String })
 ], KRCodeDemo.prototype, "language", void 0);
-__decorate$a([
+__decorate$b([
     n$1({ type: String })
 ], KRCodeDemo.prototype, "code", void 0);
-__decorate$a([
+__decorate$b([
     r$1()
 ], KRCodeDemo.prototype, "activeTab", void 0);
-__decorate$a([
+__decorate$b([
     r$1()
 ], KRCodeDemo.prototype, "copied", void 0);
-KRCodeDemo = __decorate$a([
+KRCodeDemo = __decorate$b([
     t$1('kr-code-demo')
 ], 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;
@@ -1323,14 +1323,14 @@ KRContextMenu.styles = i$5 `
       margin: 4px 0;
     }
   `;
-__decorate$9([
+__decorate$a([
     r$1()
 ], KRContextMenu.prototype, "items", void 0);
-KRContextMenu = __decorate$9([
+KRContextMenu = __decorate$a([
     t$1('kr-context-menu')
 ], 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;
@@ -1462,14 +1462,14 @@ KRDialog.styles = i$5 `
       overflow: auto;
     }
   `;
-__decorate$8([
+__decorate$9([
     r$1()
 ], KRDialog.prototype, "contentElement", void 0);
-KRDialog = __decorate$8([
+KRDialog = __decorate$9([
     t$1('kr-dialog')
 ], 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;
@@ -1766,19 +1766,19 @@ KRSnackbar.styles = i$5 `
   `;
 /** Track active snackbars for stacking */
 KRSnackbar.activeSnackbars = [];
-__decorate$7([
+__decorate$8([
     n$1({ type: String })
 ], KRSnackbar.prototype, "type", void 0);
-__decorate$7([
+__decorate$8([
     n$1({ type: String })
 ], KRSnackbar.prototype, "title", void 0);
-__decorate$7([
+__decorate$8([
     n$1({ type: String })
 ], KRSnackbar.prototype, "message", void 0);
-__decorate$7([
+__decorate$8([
     n$1({ type: Number })
 ], KRSnackbar.prototype, "duration", void 0);
-KRSnackbar = KRSnackbar_1 = __decorate$7([
+KRSnackbar = KRSnackbar_1 = __decorate$8([
     t$1('kr-snackbar')
 ], KRSnackbar);
 
@@ -1788,7 +1788,7 @@ KRSnackbar = KRSnackbar_1 = __decorate$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;
@@ -2090,20 +2090,20 @@ KRTabGroup.styles = [
       }
     `,
 ];
-__decorate$6([
+__decorate$7([
     n$1({ type: String, attribute: 'active-tab-id' })
 ], KRTabGroup.prototype, "activeTabId", void 0);
-__decorate$6([
+__decorate$7([
     n$1({ type: Boolean })
 ], KRTabGroup.prototype, "justified", void 0);
-__decorate$6([
+__decorate$7([
     n$1({ type: String, reflect: true })
 ], KRTabGroup.prototype, "size", void 0);
-KRTabGroup = __decorate$6([
+KRTabGroup = __decorate$7([
     t$1('kr-tab-group')
 ], 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;
@@ -2174,35 +2174,35 @@ KRTab.styles = [
       }
     `,
 ];
-__decorate$5([
+__decorate$6([
     n$1({ type: String, reflect: true })
 ], KRTab.prototype, "id", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: String })
 ], KRTab.prototype, "title", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: String })
 ], KRTab.prototype, "badge", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: String, attribute: 'badge-background' })
 ], KRTab.prototype, "badgeBackground", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: String, attribute: 'badge-color' })
 ], KRTab.prototype, "badgeColor", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: Boolean })
 ], KRTab.prototype, "disabled", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: Boolean })
 ], KRTab.prototype, "dismissible", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: Boolean, reflect: true })
 ], KRTab.prototype, "active", void 0);
-KRTab = __decorate$5([
+KRTab = __decorate$6([
     t$1('kr-tab')
 ], 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;
@@ -3404,46 +3404,46 @@ KRTable.styles = [krBaseCSS, i$5 `
       color: #dc2626;
     }
   `];
-__decorate$4([
+__decorate$5([
     r$1()
 ], KRTable.prototype, "_data", void 0);
-__decorate$4([
+__decorate$5([
     r$1()
 ], KRTable.prototype, "_dataState", void 0);
-__decorate$4([
+__decorate$5([
     r$1()
 ], KRTable.prototype, "_page", void 0);
-__decorate$4([
+__decorate$5([
     r$1()
 ], KRTable.prototype, "_pageSize", void 0);
-__decorate$4([
+__decorate$5([
     r$1()
 ], KRTable.prototype, "_totalItems", void 0);
-__decorate$4([
+__decorate$5([
     r$1()
 ], KRTable.prototype, "_totalPages", void 0);
-__decorate$4([
+__decorate$5([
     r$1()
 ], KRTable.prototype, "_searchQuery", void 0);
-__decorate$4([
+__decorate$5([
     r$1()
 ], KRTable.prototype, "_canScrollLeft", void 0);
-__decorate$4([
+__decorate$5([
     r$1()
 ], KRTable.prototype, "_canScrollRight", void 0);
-__decorate$4([
+__decorate$5([
     r$1()
 ], KRTable.prototype, "_canScrollHorizontal", void 0);
-__decorate$4([
+__decorate$5([
     r$1()
 ], KRTable.prototype, "_columnPickerOpen", void 0);
-__decorate$4([
+__decorate$5([
     r$1()
 ], KRTable.prototype, "_displayedColumns", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: Object })
 ], KRTable.prototype, "def", void 0);
-KRTable = __decorate$4([
+KRTable = __decorate$5([
     t$1('kr-table')
 ], KRTable);
 
@@ -3465,7 +3465,7 @@ KRTable = __decorate$4([
  * 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;
@@ -3657,13 +3657,13 @@ KRTextField.styles = i$5 `
     .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 {
@@ -3674,9 +3674,9 @@ KRTextField.styles = i$5 `
     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;
@@ -3718,59 +3718,59 @@ KRTextField.styles = i$5 `
   `;
 // Enable form association
 KRTextField.formAssociated = true;
-__decorate$3([
+__decorate$4([
     n$1({ type: String })
 ], KRTextField.prototype, "label", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: String })
 ], KRTextField.prototype, "name", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: String })
 ], KRTextField.prototype, "value", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: String })
 ], KRTextField.prototype, "placeholder", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: String })
 ], KRTextField.prototype, "type", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: Boolean })
 ], KRTextField.prototype, "required", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: Boolean })
 ], KRTextField.prototype, "disabled", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: Boolean })
 ], KRTextField.prototype, "readonly", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: Number })
 ], KRTextField.prototype, "minlength", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: Number })
 ], KRTextField.prototype, "maxlength", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: String })
 ], KRTextField.prototype, "pattern", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: String })
 ], KRTextField.prototype, "autocomplete", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: String })
 ], KRTextField.prototype, "hint", void 0);
-__decorate$3([
+__decorate$4([
     e$3('input')
 ], KRTextField.prototype, "_input", void 0);
-__decorate$3([
+__decorate$4([
     r$1()
 ], KRTextField.prototype, "_touched", void 0);
-__decorate$3([
+__decorate$4([
     r$1()
 ], KRTextField.prototype, "_dirty", void 0);
-KRTextField = __decorate$3([
+KRTextField = __decorate$4([
     t$1('kr-text-field')
 ], 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;
@@ -4065,13 +4065,13 @@ KRSelectField.styles = i$5 `
     .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 {
@@ -4088,14 +4088,14 @@ KRSelectField.styles = i$5 `
       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;
@@ -4245,47 +4245,47 @@ KRSelectField.styles = i$5 `
   `;
 // Enable form association
 KRSelectField.formAssociated = true;
-__decorate$2([
+__decorate$3([
     n$1({ type: String })
 ], KRSelectField.prototype, "label", void 0);
-__decorate$2([
+__decorate$3([
     n$1({ type: String })
 ], KRSelectField.prototype, "name", void 0);
-__decorate$2([
+__decorate$3([
     n$1({ type: String })
 ], KRSelectField.prototype, "value", void 0);
-__decorate$2([
+__decorate$3([
     n$1({ type: String })
 ], KRSelectField.prototype, "placeholder", void 0);
-__decorate$2([
+__decorate$3([
     n$1({ type: Boolean })
 ], KRSelectField.prototype, "disabled", void 0);
-__decorate$2([
+__decorate$3([
     n$1({ type: Boolean })
 ], KRSelectField.prototype, "required", void 0);
-__decorate$2([
+__decorate$3([
     n$1({ type: Boolean })
 ], KRSelectField.prototype, "readonly", void 0);
-__decorate$2([
+__decorate$3([
     n$1({ type: String })
 ], KRSelectField.prototype, "hint", void 0);
-__decorate$2([
+__decorate$3([
     r$1()
 ], KRSelectField.prototype, "_isOpen", void 0);
-__decorate$2([
+__decorate$3([
     r$1()
 ], KRSelectField.prototype, "_highlightedIndex", void 0);
-__decorate$2([
+__decorate$3([
     r$1()
 ], KRSelectField.prototype, "_touched", void 0);
-__decorate$2([
+__decorate$3([
     e$3('.select-trigger')
 ], KRSelectField.prototype, "_triggerElement", void 0);
-KRSelectField = __decorate$2([
+KRSelectField = __decorate$3([
     t$1('kr-select-field')
 ], 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;
@@ -4322,17 +4322,17 @@ KRSelectOption.styles = i$5 `
       display: none;
     }
   `;
-__decorate$1([
+__decorate$2([
     n$1({ type: String })
 ], KRSelectOption.prototype, "value", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ type: Boolean })
 ], KRSelectOption.prototype, "disabled", void 0);
-KRSelectOption = __decorate$1([
+KRSelectOption = __decorate$2([
     t$1('kr-select-option')
 ], 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;
@@ -4526,13 +4526,13 @@ KRTextareaField.styles = i$5 `
     .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 {
@@ -4544,9 +4544,9 @@ KRTextareaField.styles = i$5 `
       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;
@@ -4590,57 +4590,124 @@ KRTextareaField.styles = i$5 `
   `;
 // Enable form association
 KRTextareaField.formAssociated = true;
-__decorate([
+__decorate$1([
     n$1({ type: String })
 ], KRTextareaField.prototype, "label", void 0);
-__decorate([
+__decorate$1([
     n$1({ type: String })
 ], KRTextareaField.prototype, "name", void 0);
-__decorate([
+__decorate$1([
     n$1({ type: String })
 ], KRTextareaField.prototype, "value", void 0);
-__decorate([
+__decorate$1([
     n$1({ type: String })
 ], KRTextareaField.prototype, "placeholder", void 0);
-__decorate([
+__decorate$1([
     n$1({ type: Boolean })
 ], KRTextareaField.prototype, "required", void 0);
-__decorate([
+__decorate$1([
     n$1({ type: Boolean })
 ], KRTextareaField.prototype, "disabled", void 0);
-__decorate([
+__decorate$1([
     n$1({ type: Boolean })
 ], KRTextareaField.prototype, "readonly", void 0);
-__decorate([
+__decorate$1([
     n$1({ type: Number })
 ], KRTextareaField.prototype, "rows", void 0);
-__decorate([
+__decorate$1([
     n$1({ type: Number })
 ], KRTextareaField.prototype, "cols", void 0);
-__decorate([
+__decorate$1([
     n$1({ type: Number })
 ], KRTextareaField.prototype, "minlength", void 0);
-__decorate([
+__decorate$1([
     n$1({ type: Number })
 ], KRTextareaField.prototype, "maxlength", void 0);
-__decorate([
+__decorate$1([
     n$1({ type: String })
 ], KRTextareaField.prototype, "autocomplete", void 0);
-__decorate([
+__decorate$1([
     n$1({ type: String })
 ], KRTextareaField.prototype, "hint", void 0);
-__decorate([
+__decorate$1([
     e$3('textarea')
 ], KRTextareaField.prototype, "_textarea", void 0);
-__decorate([
+__decorate$1([
     r$1()
 ], KRTextareaField.prototype, "_touched", void 0);
-__decorate([
+__decorate$1([
     r$1()
 ], KRTextareaField.prototype, "_dirty", void 0);
-KRTextareaField = __decorate([
+KRTextareaField = __decorate$1([
     t$1('kr-textarea-field')
 ], 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);
+
 export { DialogRef, KRAccordion, KRAlert, KRButton, KRCodeDemo, KRContextMenu, KRDialog, KRSelectField, KRSelectOption, KRSnackbar, KRTab, KRTabGroup, KRTable, KRTextField, KRTextareaField, krBaseCSS };
 //# sourceMappingURL=krubble.bundled.js.map