@kodaris/krubble-components 1.0.6 → 1.0.7

package/dist/krubble.umd.js

@@ -1654,6 +1654,17 @@
    * ```
    */
   exports.KRTabGroup = class KRTabGroup extends i$2 {
+      constructor() {
+          super(...arguments);
+          /**
+           * Whether tabs should stretch to fill the full width evenly
+           */
+          this.justified = false;
+          /**
+           * Size of the tabs: 'small' | 'medium' | 'large'
+           */
+          this.size = 'medium';
+      }
       updated(changes) {
           if (changes.has('activeTabId')) {
               this._updateActiveTab();
@@ -1744,6 +1755,7 @@
               class=${e$1({
             label: true,
             'label--active': tab.id === this.activeTabId,
+            'label--justified': this.justified,
         })}
               role="tab"
               data-tab-id=${tab.id}
@@ -1788,7 +1800,7 @@
       .header {
         display: flex;
         align-items: stretch;
-        border-bottom: 1px solid var(--kr-border);
+        border-bottom: 1px solid #e5e7eb;
         overflow-x: auto;
         scrollbar-width: none;
         -ms-overflow-style: none;
@@ -1835,6 +1847,23 @@
         cursor: not-allowed;
       }
 
+      .label--justified {
+        flex: 1;
+        justify-content: center;
+      }
+
+      :host([size="small"]) .label {
+        padding: 8px 12px;
+        font-size: 13px;
+        gap: 6px;
+      }
+
+      :host([size="large"]) .label {
+        padding: 16px 20px;
+        font-size: 16px;
+        gap: 10px;
+      }
+
       .label-icon {
         display: flex;
         align-items: center;
@@ -1878,8 +1907,10 @@
         outline-offset: 2px;
       }
 
+
       .content {
-        padding: 16px;
+        flex: 1;
+        overflow: auto;
       }
 
       /* Default slot styles - kr-tab children show/hide via their own active attribute */
@@ -1895,6 +1926,12 @@
   __decorate$4([
       n$1({ type: String, attribute: 'active-tab-id' })
   ], exports.KRTabGroup.prototype, "activeTabId", void 0);
+  __decorate$4([
+      n$1({ type: Boolean })
+  ], exports.KRTabGroup.prototype, "justified", void 0);
+  __decorate$4([
+      n$1({ type: String, reflect: true })
+  ], exports.KRTabGroup.prototype, "size", void 0);
   exports.KRTabGroup = __decorate$4([
       t$1('kr-tab-group')
   ], exports.KRTabGroup);