@xlabs-store/core 0.0.1

package/dist/esm/x-tabs.entry.js

@@ -0,0 +1,607 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-ig_mFsVk.js';
+
+const xTabsCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--x-font-family-code:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;color:var(--x-tabs-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));font-size:var(--x-tabs-font-size, var(--x-font-size, 14px));font-family:var(--x-tabs-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));line-height:var(--x-tabs-line-height, var(--x-line-height-base, 1.5714285714));-webkit-box-sizing:border-box;box-sizing:border-box}:host(.x-tabs-top){-ms-flex-direction:column;flex-direction:column}:host(.x-tabs-bottom){-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.x-tabs-start){-ms-flex-direction:row;flex-direction:row}:host(.x-tabs-end){-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.x-tabs-vertical) .x-tabs-nav{-ms-flex-direction:column;flex-direction:column;margin:0;min-width:var(--x-tabs-vertical-nav-min-width, 80px)}:host(.x-tabs-vertical) .x-tabs-nav::before{top:0;bottom:0;left:auto;right:0;width:1px;height:100%;border-bottom:none;border-right:var(--x-tabs-border-width, var(--x-border-width-base, 1px)) solid var(--x-tabs-border-color, var(--x-color-border-secondary, #f0f0f0))}:host(.x-tabs-vertical) .x-tabs-nav-wrap{-ms-flex-direction:column;flex-direction:column}:host(.x-tabs-vertical) .x-tabs-nav-list{-ms-flex-direction:column;flex-direction:column}:host(.x-tabs-vertical) .x-tabs-tab{margin:0 0 var(--x-tabs-vertical-item-margin, 16px) 0;padding:var(--x-tabs-vertical-item-padding, 8px 24px)}:host(.x-tabs-vertical) .x-tabs-ink-bar{width:var(--x-tabs-ink-bar-height, 2px);height:auto;right:0;left:auto;bottom:auto}:host(.x-tabs-vertical) .x-tabs-extra-content-left{margin-right:0;margin-bottom:var(--x-spacing-md, 16px)}:host(.x-tabs-vertical) .x-tabs-extra-content-right{margin-left:0;margin-top:var(--x-spacing-md, 16px)}:host(.x-tabs-centered) .x-tabs-nav-wrap{-ms-flex-pack:center;justify-content:center}:host(.x-tabs-small){font-size:var(--x-tabs-font-size-sm, 14px)}:host(.x-tabs-small) .x-tabs-tab{padding:var(--x-tabs-horizontal-item-padding-sm, 8px 0)}:host(.x-tabs-large){font-size:var(--x-tabs-font-size-lg, 16px)}:host(.x-tabs-large) .x-tabs-tab{padding:var(--x-tabs-horizontal-item-padding-lg, 16px 0)}.x-tabs-nav{position:relative;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;-ms-flex-align:center;align-items:center;margin:0 0 var(--x-tabs-nav-margin, var(--x-spacing-md, 16px)) 0}.x-tabs-nav::before{position:absolute;right:0;left:0;bottom:0;border-bottom:var(--x-tabs-border-width, var(--x-border-width-base, 1px)) solid var(--x-tabs-border-color, var(--x-color-border-secondary, #f0f0f0));content:""}.x-tabs-nav-wrap{position:relative;display:-ms-flexbox;display:flex;-ms-flex:auto;flex:auto;-ms-flex-item-align:stretch;align-self:stretch;overflow:hidden;white-space:nowrap;-webkit-transform:translate(0);transform:translate(0)}.x-tabs-nav-list{position:relative;display:-ms-flexbox;display:flex;-webkit-transition:-webkit-transform var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-tabs-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:-webkit-transform var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-tabs-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:transform var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-tabs-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:transform var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-tabs-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), -webkit-transform var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-tabs-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)))}.x-tabs-extra-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:none;flex:none}.x-tabs-extra-content-left{margin-right:var(--x-tabs-nav-margin, var(--x-spacing-md, 16px))}.x-tabs-extra-content-right{margin-left:var(--x-tabs-nav-margin, var(--x-spacing-md, 16px))}.x-tabs-tab{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;padding:var(--x-tabs-tab-padding, var(--x-spacing-sm, 12px)) 0;font-size:inherit;background:transparent;border:0;outline:none;cursor:pointer;margin:0 var(--x-tabs-tab-margin, var(--x-spacing-xxl, 32px)) 0 0;-webkit-transition:all var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-tabs-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:all var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-tabs-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));color:var(--x-tabs-tab-color, var(--x-color-text, rgba(0, 0, 0, 0.88)))}.x-tabs-tab:last-child{margin-right:0}.x-tabs-tab:hover{color:var(--x-tabs-tab-color-hover, var(--x-color-primary-hover, #4096ff))}.x-tabs-tab:focus-visible{outline:2px solid var(--x-color-primary-border, #91caff);outline-offset:2px;border-radius:2px}.x-tabs-tab.x-tabs-tab-active{color:var(--x-tabs-tab-color-active, var(--x-color-primary, #1677ff));font-weight:var(--x-tabs-tab-font-weight-active, 500)}.x-tabs-tab.x-tabs-tab-disabled{color:var(--x-tabs-tab-color-disabled, var(--x-color-text-disabled, rgba(0, 0, 0, 0.25)));cursor:not-allowed}.x-tabs-tab-btn{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--x-tabs-tab-btn-gap, 8px);outline:none;-webkit-transition:all var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-tabs-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:all var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-tabs-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)))}.x-tabs-tab-icon{margin-right:0}.x-tabs-tab-label{display:inline-block}.x-tabs-tab-remove{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin-left:var(--x-tabs-tab-remove-margin-left, 8px);padding:0;color:var(--x-color-text-description, rgba(0, 0, 0, 0.45));font-size:var(--x-tabs-tab-remove-font-size, 12px);background:transparent;border:none;cursor:pointer;-webkit-transition:all var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-tabs-tab-remove:hover{color:var(--x-color-text, rgba(0, 0, 0, 0.88))}.x-tabs-ink-bar{position:absolute;background:var(--x-tabs-ink-bar-color, var(--x-color-primary, #1677ff));pointer-events:none;height:var(--x-tabs-ink-bar-height, 2px);bottom:0;left:0;width:0}.x-tabs-ink-bar-animated{-webkit-transition:left var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-tabs-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), width var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-tabs-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), top var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-tabs-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), height var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-tabs-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:left var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-tabs-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), width var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-tabs-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), top var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-tabs-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), height var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-tabs-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)))}.x-tabs-content-holder{-ms-flex:auto;flex:auto;min-width:0;min-height:0}.x-tabs-content{position:relative;width:100%}:host(.x-tabs-card) .x-tabs-nav::before{border-bottom:var(--x-tabs-border-width, var(--x-border-width-base, 1px)) solid var(--x-tabs-border-color, var(--x-color-border-secondary, #f0f0f0))}:host(.x-tabs-card) .x-tabs-tab{margin:0 var(--x-tabs-card-gap, var(--x-spacing-xxs, 4px)) 0 0;padding:var(--x-tabs-card-padding, var(--x-spacing-xs, 8px) var(--x-spacing-md, 16px));background:var(--x-tabs-card-bg, var(--x-color-fill-quaternary, rgba(0, 0, 0, 0.02)));border:var(--x-tabs-border-width, var(--x-border-width-base, 1px)) solid var(--x-tabs-border-color, var(--x-color-border-secondary, #f0f0f0));border-bottom:none;border-radius:var(--x-tabs-card-border-radius, var(--x-border-radius-lg, 8px)) var(--x-tabs-card-border-radius, var(--x-border-radius-lg, 8px)) 0 0;-webkit-transition:all var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-tabs-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));transition:all var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-tabs-motion-timing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)))}:host(.x-tabs-card) .x-tabs-tab.x-tabs-tab-active{color:var(--x-tabs-tab-color-active, var(--x-color-primary, #1677ff));background:var(--x-tabs-card-bg-active, var(--x-color-bg-container, #ffffff));border-bottom-color:var(--x-tabs-card-bg-active, var(--x-color-bg-container, #ffffff))}:host(.x-tabs-card) .x-tabs-ink-bar{display:none}:host(.x-tabs-editable-card) .x-tabs-nav::before{border-bottom:var(--x-tabs-border-width, var(--x-border-width-base, 1px)) solid var(--x-tabs-border-color, var(--x-color-border-secondary, #f0f0f0))}:host(.x-tabs-editable-card) .x-tabs-tab{margin:0 var(--x-tabs-card-gap, var(--x-spacing-xxs, 4px)) 0 0;padding:var(--x-tabs-card-padding, var(--x-spacing-xs, 8px) var(--x-spacing-md, 16px));background:var(--x-tabs-card-bg, var(--x-color-fill-quaternary, rgba(0, 0, 0, 0.02)));border:var(--x-tabs-border-width, var(--x-border-width-base, 1px)) solid var(--x-tabs-border-color, var(--x-color-border-secondary, #f0f0f0));border-bottom:none;border-radius:var(--x-tabs-card-border-radius, var(--x-border-radius-lg, 8px)) var(--x-tabs-card-border-radius, var(--x-border-radius-lg, 8px)) 0 0}:host(.x-tabs-editable-card) .x-tabs-tab.x-tabs-tab-active{color:var(--x-tabs-tab-color-active, var(--x-color-primary, #1677ff));background:var(--x-tabs-card-bg-active, var(--x-color-bg-container, #ffffff));border-bottom-color:var(--x-tabs-card-bg-active, var(--x-color-bg-container, #ffffff))}:host(.x-tabs-editable-card) .x-tabs-ink-bar{display:none}.x-tabs-nav-add{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--x-tabs-nav-add-min-width, 40px);height:100%;padding:var(--x-tabs-card-padding, var(--x-spacing-xs, 8px) var(--x-spacing-md, 16px));margin-left:var(--x-tabs-card-gap, var(--x-spacing-xxs, 4px));color:var(--x-color-text, rgba(0, 0, 0, 0.88));font-size:14px;background:var(--x-tabs-card-bg, var(--x-color-fill-quaternary, rgba(0, 0, 0, 0.02)));border:var(--x-tabs-border-width, var(--x-border-width-base, 1px)) solid var(--x-tabs-border-color, var(--x-color-border-secondary, #f0f0f0));border-bottom:none;border-radius:var(--x-tabs-card-border-radius, var(--x-border-radius-lg, 8px)) var(--x-tabs-card-border-radius, var(--x-border-radius-lg, 8px)) 0 0;cursor:pointer;-webkit-transition:all var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s));transition:all var(--x-tabs-motion-duration, var(--x-motion-duration-mid, 0.2s))}.x-tabs-nav-add:hover{color:var(--x-tabs-tab-color-hover, var(--x-color-primary-hover, #4096ff))}:host(.x-tabs-bottom) .x-tabs-nav{-ms-flex-order:1;order:1;margin-top:var(--x-tabs-nav-margin, var(--x-spacing-md, 16px));margin-bottom:0}:host(.x-tabs-bottom) .x-tabs-nav::before{top:0;bottom:auto}:host(.x-tabs-bottom) .x-tabs-ink-bar{top:0;bottom:auto}:host(.x-tabs-bottom).x-tabs-card .x-tabs-tab,:host(.x-tabs-bottom).x-tabs-editable-card .x-tabs-tab{border-top:none;border-bottom:var(--x-tabs-border-width, var(--x-border-width-base, 1px)) solid var(--x-tabs-border-color, var(--x-color-border-secondary, #f0f0f0));border-radius:0 0 var(--x-tabs-card-border-radius, var(--x-border-radius-lg, 8px)) var(--x-tabs-card-border-radius, var(--x-border-radius-lg, 8px))}:host(.x-tabs-bottom).x-tabs-card .x-tabs-tab.x-tabs-tab-active,:host(.x-tabs-bottom).x-tabs-editable-card .x-tabs-tab.x-tabs-tab-active{border-top-color:var(--x-tabs-card-bg-active, var(--x-color-bg-container, #ffffff))}:host(.x-tabs-start) .x-tabs-nav{margin-right:var(--x-tabs-nav-margin, var(--x-spacing-md, 16px));margin-bottom:0}:host(.x-tabs-start).x-tabs-card .x-tabs-tab,:host(.x-tabs-start).x-tabs-editable-card .x-tabs-tab{border-right:none;border-radius:var(--x-tabs-card-border-radius, var(--x-border-radius-lg, 8px)) 0 0 var(--x-tabs-card-border-radius, var(--x-border-radius-lg, 8px))}:host(.x-tabs-start).x-tabs-card .x-tabs-tab.x-tabs-tab-active,:host(.x-tabs-start).x-tabs-editable-card .x-tabs-tab.x-tabs-tab-active{border-right-color:var(--x-tabs-card-bg-active, var(--x-color-bg-container, #ffffff))}:host(.x-tabs-end) .x-tabs-nav{margin-left:var(--x-tabs-nav-margin, var(--x-spacing-md, 16px));margin-bottom:0}:host(.x-tabs-end) .x-tabs-nav::before{right:auto;left:0}:host(.x-tabs-end) .x-tabs-ink-bar{right:auto;left:0}:host(.x-tabs-end).x-tabs-card .x-tabs-tab,:host(.x-tabs-end).x-tabs-editable-card .x-tabs-tab{border-left:none;border-radius:0 var(--x-tabs-card-border-radius, var(--x-border-radius-lg, 8px)) var(--x-tabs-card-border-radius, var(--x-border-radius-lg, 8px)) 0}:host(.x-tabs-end).x-tabs-card .x-tabs-tab.x-tabs-tab-active,:host(.x-tabs-end).x-tabs-editable-card .x-tabs-tab.x-tabs-tab-active{border-left-color:var(--x-tabs-card-bg-active, var(--x-color-bg-container, #ffffff))}`;
+
+const XTabs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.xChange = createEvent(this, "xChange", 7);
+        this.xTabClick = createEvent(this, "xTabClick", 7);
+        this.xEdit = createEvent(this, "xEdit", 7);
+        this.xTabScroll = createEvent(this, "xTabScroll", 7);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Nav list element reference for ink bar positioning.
+     */
+    navListEl;
+    /**
+     * Flag to prevent recursive updates.
+     */
+    isUpdatingTabs = false;
+    // ==================== Props ====================
+    /**
+     * Current active tab key (controlled mode).
+     * @example
+     * <x-tabs active-key="profile"></x-tabs>
+     */
+    activeKey;
+    /**
+     * Initial active tab key (uncontrolled mode).
+     * @example
+     * <x-tabs defaultActiveKey="settings"></x-tabs>
+     */
+    defaultActiveKey;
+    /**
+     * Position/placement of tabs.
+     * @default 'top'
+     * @example
+     * <x-tabs tabPlacement="bottom"></x-tabs>
+     */
+    tabPlacement = 'top';
+    /**
+     * Type/style of tabs.
+     * @default 'line'
+     * @example
+     * <x-tabs type="card"></x-tabs>
+     */
+    type = 'line';
+    /**
+     * Size of tabs.
+     * @default 'middle'
+     * @example
+     * <x-tabs size="small"></x-tabs>
+     */
+    size = 'middle';
+    /**
+     * Whether to center tabs.
+     * @default false
+     * @example
+     * <x-tabs centered></x-tabs>
+     */
+    centered = false;
+    /**
+     * Tab items configuration (alternative to slots).
+     * @example
+     * <x-tabs items={[{ key: '1', label: 'Tab' }]}></x-tabs>
+     */
+    items;
+    /**
+     * Indicator configuration.
+     * @example
+     * <x-tabs indicator={{ size: 20, align: 'center' }}></x-tabs>
+     */
+    indicator;
+    /**
+     * Whether tabs are animated.
+     * @default true
+     * @example
+     * <x-tabs animated={false}></x-tabs>
+     */
+    animated = true;
+    /**
+     * Gap between tabs.
+     * @example
+     * <x-tabs tabBarGutter={12}></x-tabs>
+     */
+    tabBarGutter;
+    /**
+     * Tab bar style object.
+     * @example
+     * <x-tabs tabBarStyle={{ background: '#fff' }}></x-tabs>
+     */
+    tabBarStyle;
+    /**
+     * Extra content in tab bar (left/right).
+     * @example
+     * <x-tabs tabBarExtraContent="Extra"></x-tabs>
+     */
+    tabBarExtraContent;
+    /**
+     * Customize add icon, only works with type="editable-card".
+     * @example
+     * <x-tabs type="editable-card" addIcon="plus"></x-tabs>
+     */
+    addIcon;
+    /**
+     * Customize remove icon, only works with type="editable-card".
+     * @example
+     * <x-tabs type="editable-card" removeIcon="close"></x-tabs>
+     */
+    removeIcon;
+    /**
+     * Whether to hide add button (only for editable-card).
+     * @default false
+     * @example
+     * <x-tabs type="editable-card" hideAdd></x-tabs>
+     */
+    hideAdd = false;
+    /**
+     * Whether to destroy inactive tab panes.
+     * @default false
+     * @example
+     * <x-tabs destroyInactiveTabPane></x-tabs>
+     */
+    destroyInactiveTabPane = false;
+    /**
+     * Custom class names for parts.
+     * @example
+     * <x-tabs classNames={{ root: 'my-tabs' }}></x-tabs>
+     */
+    classNames;
+    /**
+     * Custom styles for parts.
+     * @example
+     * <x-tabs styles={{ header: { background: '#fff' } }}></x-tabs>
+     */
+    styles;
+    // ==================== Events ====================
+    /**
+     * Callback when active tab changes.
+     * @example
+     * <x-tabs onXChange={(ev) => console.log(ev.detail)}></x-tabs>
+     */
+    xChange;
+    /**
+     * Callback when tab is clicked.
+     * @example
+     * <x-tabs onXTabClick={(ev) => console.log(ev.detail)}></x-tabs>
+     */
+    xTabClick;
+    /**
+     * Callback when tab is added or removed (only for editable-card).
+     * @example
+     * <x-tabs onXEdit={(ev) => console.log(ev.detail)} type="editable-card"></x-tabs>
+     */
+    xEdit;
+    /**
+     * Callback when tab scroll.
+     * @example
+     * <x-tabs onXTabScroll={(ev) => console.log(ev.detail)}></x-tabs>
+     */
+    xTabScroll;
+    // ==================== State ====================
+    /**
+     * Internal tab metadata list.
+     */
+    tabs = [];
+    /**
+     * Ink bar inline style.
+     */
+    inkBarStyle = {};
+    // ==================== Lifecycle ====================
+    componentWillLoad() {
+        if (!this.activeKey && this.defaultActiveKey) {
+            this.activeKey = this.defaultActiveKey;
+        }
+    }
+    componentDidLoad() {
+        this.updateTabs();
+        this.updateInkBar();
+    }
+    componentDidUpdate() {
+        this.updateInkBar();
+    }
+    // ==================== Watchers ====================
+    handleActiveKeyChange(newValue) {
+        this.updateChildren(newValue);
+        this.updateInkBar();
+    }
+    handleItemsChange() {
+        this.updateTabs();
+    }
+    // ==================== Methods ====================
+    /**
+     * Get current active key.
+     * @returns Promise<string | undefined>
+     * @example
+     * const key = await el.getActiveKey()
+     */
+    async getActiveKey() {
+        return this.activeKey;
+    }
+    /**
+     * Set active tab by key.
+     * @param key - Tab key to activate.
+     * @returns Promise<void>
+     * @example
+     * await el.setActiveKey('profile')
+     */
+    async setActiveKey(key) {
+        const previousKey = this.activeKey;
+        this.activeKey = key;
+        this.xChange.emit({ activeKey: key, previousKey });
+    }
+    // ==================== Private Methods ====================
+    /**
+     * Synchronizes internal tab state from `items` prop or slotted `x-tab-pane` children.
+     *
+     * Flow:
+     * 1. Checks `isUpdatingTabs` flag to prevent recursive updates.
+     * 2. If `items` prop is present:
+     *    - Maps items to internal tab objects.
+     * 3. If `items` prop is missing:
+     *    - Queries for `x-tab-pane` elements in the light DOM.
+     *    - Extracts attributes (key, tab, disabled, closable, etc.) from panes.
+     * 4. Compares new tabs with current `tabs` state.
+     * 5. Updates `tabs` state if changed.
+     * 6. Sets initial `activeKey` if not set.
+     * 7. Calls `updateChildren` to sync active state to panes.
+     */
+    updateTabs() {
+        // Prevent infinite loop
+        if (this.isUpdatingTabs)
+            return;
+        this.isUpdatingTabs = true;
+        try {
+            let newTabs = [];
+            if (this.items && this.items.length > 0) {
+                newTabs = this.items.map(item => ({
+                    key: item.key,
+                    label: item.label,
+                    disabled: !!item.disabled,
+                    closable: item.closable !== false,
+                    icon: item.icon,
+                    forceRender: item.forceRender,
+                }));
+            }
+            else {
+                // Query slotted children from light DOM
+                const tabPanes = Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() === 'x-tab-pane');
+                newTabs = tabPanes.map((pane) => ({
+                    key: pane.tabKey || pane.getAttribute('tab-key') || pane.getAttribute('key') || '',
+                    label: pane.tab || pane.getAttribute('tab') || '',
+                    disabled: pane.disabled || pane.hasAttribute('disabled'),
+                    closable: pane.closable !== false && pane.getAttribute('closable') !== 'false',
+                    icon: pane.icon || pane.getAttribute('icon') || undefined,
+                    forceRender: pane.forceRender || pane.hasAttribute('force-render'),
+                }));
+            }
+            // Only update if tabs changed
+            const tabsChanged = JSON.stringify(newTabs) !== JSON.stringify(this.tabs);
+            if (tabsChanged) {
+                this.tabs = newTabs;
+            }
+            if (!this.activeKey && this.tabs.length > 0) {
+                this.activeKey = this.tabs[0].key;
+            }
+            this.updateChildren(this.activeKey);
+        }
+        finally {
+            this.isUpdatingTabs = false;
+        }
+    }
+    /**
+     * Updates the active state of child `x-tab-pane` elements.
+     *
+     * Flow:
+     * 1. Finds all `x-tab-pane` children.
+     * 2. Iterates through each pane.
+     * 3. Compares pane's key with `activeKey`.
+     * 4. Sets the pane's `active` property.
+     * 5. Sets the pane's `destroyInactiveTabPane` property based on parent config.
+     *
+     * @param activeKey - The key of the currently active tab.
+     */
+    updateChildren(activeKey) {
+        const tabPanes = Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() === 'x-tab-pane');
+        tabPanes.forEach((pane) => {
+            const key = pane.getAttribute('key') || pane.getAttribute('tab-key') || pane.tabKey;
+            const isActive = key === activeKey;
+            if (pane.active !== isActive) {
+                pane.active = isActive;
+            }
+            if (this.destroyInactiveTabPane && !pane.destroyInactiveTabPane) {
+                pane.destroyInactiveTabPane = true;
+            }
+        });
+    }
+    /**
+     * Updates the position and size of the ink bar (active indicator).
+     *
+     * Flow:
+     * 1. Checks if type is 'line' and nav list exists.
+     * 2. Finds the currently active tab element in the nav list.
+     * 3. If no active tab, hides the ink bar.
+     * 4. Calculates position (top/left) and size (height/width) based on:
+     *    - Tab placement (vertical vs horizontal).
+     *    - Active tab's offset and dimensions.
+     *    - Custom indicator size and alignment configuration.
+     * 5. Updates `inkBarStyle` state if changed.
+     */
+    updateInkBar() {
+        if (this.type !== 'line' || !this.navListEl)
+            return;
+        const activeTab = this.navListEl.querySelector('.x-tabs-tab-active');
+        if (!activeTab) {
+            if (Object.keys(this.inkBarStyle).length > 0) {
+                this.inkBarStyle = {};
+            }
+            return;
+        }
+        const isVertical = this.tabPlacement === 'start' || this.tabPlacement === 'end';
+        let newStyle = {};
+        if (isVertical) {
+            newStyle = {
+                top: `${activeTab.offsetTop}px`,
+                height: `${activeTab.offsetHeight}px`,
+            };
+        }
+        else {
+            let width = activeTab.offsetWidth;
+            let left = activeTab.offsetLeft;
+            if (this.indicator?.size !== undefined) {
+                width = typeof this.indicator.size === 'number' ? this.indicator.size : width;
+            }
+            if (this.indicator?.align) {
+                const diff = activeTab.offsetWidth - width;
+                if (this.indicator.align === 'center') {
+                    left += diff / 2;
+                }
+                else if (this.indicator.align === 'end') {
+                    left += diff;
+                }
+            }
+            newStyle = {
+                left: `${left}px`,
+                width: `${width}px`,
+            };
+        }
+        // Only update if style changed
+        const styleChanged = JSON.stringify(newStyle) !== JSON.stringify(this.inkBarStyle);
+        if (styleChanged) {
+            this.inkBarStyle = newStyle;
+        }
+    }
+    /**
+     * Handle click on a tab item.
+     *
+     * Flow:
+     * 1. Checks if the tab is disabled; if so, returns early.
+     * 2. Emits `xTabClick` event with the clicked key and native event.
+     * 3. If the clicked tab is not currently active:
+     *    - Updates `activeKey` to the new key.
+     *    - Emits `xChange` event to notify parent of the switch.
+     *
+     * @param key - Tab key.
+     * @param disabled - Whether tab is disabled.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleTabClick = (key, disabled, e) => {
+        if (disabled)
+            return;
+        this.xTabClick.emit({ key, nativeEvent: e });
+        if (this.activeKey !== key) {
+            const previousKey = this.activeKey;
+            this.activeKey = key;
+            this.xChange.emit({ activeKey: key, previousKey });
+        }
+    };
+    /**
+     * Emit add action for editable-card tabs.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleAddClick = (e) => {
+        e.stopPropagation();
+        this.xEdit.emit({ targetKey: '', action: 'add' });
+    };
+    /**
+     * Emit remove action for editable-card tabs.
+     * @param key - Target tab key.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleRemoveClick = (key, e) => {
+        e.stopPropagation();
+        this.xEdit.emit({ targetKey: key, action: 'remove' });
+    };
+    /**
+     * Compute gutter style based on orientation.
+     * @returns Record<string, string>
+     */
+    getTabBarGutterStyle() {
+        if (this.tabBarGutter === undefined)
+            return {};
+        const isVertical = this.tabPlacement === 'start' || this.tabPlacement === 'end';
+        if (isVertical) {
+            return { marginBottom: `${this.tabBarGutter}px` };
+        }
+        return { marginRight: `${this.tabBarGutter}px` };
+    }
+    /**
+     * Determine whether ink bar should animate.
+     * @returns boolean
+     */
+    isInkBarAnimated() {
+        if (typeof this.animated === 'boolean') {
+            return this.animated;
+        }
+        return this.animated?.inkBar !== false;
+    }
+    /**
+     * Render remove icon for editable-card tabs.
+     * @returns JSX.Element
+     */
+    renderRemoveIcon() {
+        if (this.removeIcon) {
+            return h("x-icon", { name: this.removeIcon });
+        }
+        // Default close icon (CloseOutlined)
+        return (h("svg", { viewBox: "64 64 896 896", width: "1em", height: "1em", fill: "currentColor" }, h("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" })));
+    }
+    /**
+     * Render add icon for editable-card tabs.
+     * @returns JSX.Element
+     */
+    renderAddIcon() {
+        if (this.addIcon) {
+            return h("x-icon", { name: this.addIcon });
+        }
+        // Default plus icon (PlusOutlined)
+        return (h("svg", { viewBox: "64 64 896 896", width: "1em", height: "1em", fill: "currentColor" }, h("path", { d: "M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" }), h("path", { d: "M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z" })));
+    }
+    /**
+     * Render extra content in tab bar.
+     * @param position - 'left' or 'right' side.
+     * @returns JSX.Element | null
+     */
+    renderExtraContent(position) {
+        if (!this.tabBarExtraContent)
+            return null;
+        if (typeof this.tabBarExtraContent === 'string') {
+            // String means right position by default
+            if (position === 'right') {
+                return h("div", { class: "x-tabs-extra-content" }, this.tabBarExtraContent);
+            }
+            return null;
+        }
+        const content = this.tabBarExtraContent[position];
+        if (!content)
+            return null;
+        return h("div", { class: `x-tabs-extra-content x-tabs-extra-content-${position}` }, content);
+    }
+    // ==================== Render ====================
+    /**
+     * Renders the tab buttons in the navigation bar.
+     *
+     * Flow:
+     * 1. Iterates through the `tabs` state.
+     * 2. For each tab:
+     *    - Determines active and disabled state.
+     *    - Applies styling classes and gutter styles.
+     *    - Sets ARIA attributes for accessibility.
+     *    - Renders icon (if present) and label.
+     *    - If type is 'editable-card' and tab is closable, renders a remove button.
+     *
+     * @returns JSX.Element[] - Array of tab button elements.
+     */
+    renderTabs() {
+        const gutterStyle = this.getTabBarGutterStyle();
+        return this.tabs.map((tab) => (h("div", { "data-key": tab.key, class: {
+                'x-tabs-tab': true,
+                'x-tabs-tab-active': this.activeKey === tab.key,
+                'x-tabs-tab-disabled': tab.disabled,
+                [this.classNames?.item ?? '']: !!this.classNames?.item,
+            }, style: { ...gutterStyle, ...this.styles?.item }, onClick: (e) => this.handleTabClick(tab.key, tab.disabled, e), role: "tab", "aria-selected": this.activeKey === tab.key ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', tabindex: tab.disabled ? -1 : 0 }, h("div", { class: "x-tabs-tab-btn" }, tab.icon && h("x-icon", { name: tab.icon, class: "x-tabs-tab-icon" }), h("span", { class: "x-tabs-tab-label" }, tab.label)), this.type === 'editable-card' && tab.closable && (h("button", { type: "button", class: {
+                'x-tabs-tab-remove': true,
+                [this.classNames?.remove ?? '']: !!this.classNames?.remove,
+            }, style: this.styles?.remove, onClick: (e) => this.handleRemoveClick(tab.key, e), "aria-label": "Remove tab" }, this.renderRemoveIcon())))));
+    }
+    /**
+     * Render add button for editable-card tabs.
+     * @returns JSX.Element | null
+     */
+    renderAddButton() {
+        if (this.type !== 'editable-card' || this.hideAdd)
+            return null;
+        return (h("button", { type: "button", class: {
+                'x-tabs-nav-add': true,
+                [this.classNames?.add ?? '']: !!this.classNames?.add,
+            }, style: this.styles?.add, onClick: this.handleAddClick, "aria-label": "Add tab" }, this.renderAddIcon()));
+    }
+    /**
+     * Handle slot changes by updating tabs.
+     * @returns void
+     */
+    handleSlotChange = () => {
+        // Use requestAnimationFrame to debounce and prevent synchronous state updates
+        requestAnimationFrame(() => {
+            this.updateTabs();
+        });
+    };
+    /**
+     * Renders the content panels for the tabs.
+     *
+     * Flow:
+     * 1. If using `items` prop:
+     *    - Iterates through items.
+     *    - Checks if item is active.
+     *    - Implements lazy rendering logic:
+     *      - If not active and `destroyInactiveTabPane` is true (and not forced), renders null.
+     *    - Renders the content wrapper with display style (block/none).
+     * 2. If using slots:
+     *    - Renders a slot element with a change listener to detect pane updates.
+     *
+     * @returns JSX.Element | JSX.Element[]
+     */
+    renderContent() {
+        // If using items prop, render content programmatically
+        if (this.items && this.items.length > 0) {
+            return this.items.map(item => {
+                const isActive = item.key === this.activeKey;
+                // Logic: if not active and destroyInactiveTabPane is true, don't render.
+                // Unless forceRender is true.
+                if (!isActive && !item.forceRender && this.destroyInactiveTabPane) {
+                    return null;
+                }
+                return (h("div", { class: {
+                        'x-tabs-tabpane': true,
+                        'x-tabs-tabpane-active': isActive
+                    }, key: item.key, role: "tabpanel", "aria-hidden": !isActive ? 'true' : 'false', style: { display: isActive ? 'block' : 'none' } }, item.children));
+            });
+        }
+        // Fallback to slot projection
+        return h("slot", { onSlotchange: this.handleSlotChange });
+    }
+    /**
+     * Main render method for the Tabs component.
+     *
+     * Flow:
+     * 1. Determines layout orientation (vertical vs horizontal) based on `tabPlacement`.
+     * 2. Constructs host classes based on props (type, size, placement, centered).
+     * 3. Renders the Navigation section (`x-tabs-nav`):
+     *    - Renders extra content (left side).
+     *    - Renders the nav wrapper and list (`x-tabs-nav-list`).
+     *    - Calls `renderTabs` to generate individual tab buttons.
+     *    - Calls `renderAddButton` if editable.
+     *    - Renders the ink bar (active indicator) if type is 'line'.
+     *    - Renders extra content (right side).
+     * 4. Renders the Content section (`x-tabs-content-holder`):
+     *    - Calls `renderContent` to generate or project tab panels.
+     *
+     * @returns {JSX.Element} The full component tree.
+     */
+    render() {
+        const isVertical = this.tabPlacement === 'start' || this.tabPlacement === 'end';
+        const classes = {
+            'x-tabs': true,
+            [`x-tabs-${this.tabPlacement}`]: true,
+            [`x-tabs-${this.type}`]: true,
+            [`x-tabs-${this.size}`]: this.size !== 'middle',
+            'x-tabs-centered': this.centered,
+            'x-tabs-vertical': isVertical,
+            [this.classNames?.root ?? '']: !!this.classNames?.root,
+        };
+        const navStyle = {
+            ...this.tabBarStyle,
+            ...this.styles?.header,
+        };
+        return (h(Host, { key: '75b714ece12fb1a6f975efdc28fb39ec0dfc206a', class: classes, style: this.styles?.root }, h("div", { key: '333885c06f2da2589fcb55c98367ea5364a615a5', class: {
+                'x-tabs-nav': true,
+                [this.classNames?.header ?? '']: !!this.classNames?.header,
+            }, style: navStyle, role: "tablist" }, this.renderExtraContent('left'), h("div", { key: '982e919f467ebf5f170378cbbe7539d50234e66c', class: {
+                'x-tabs-nav-wrap': true,
+                [this.classNames?.nav ?? '']: !!this.classNames?.nav,
+            }, style: this.styles?.nav }, h("div", { key: '03d3159c78338984bb822c2d26a28b7bcd4413f5', class: "x-tabs-nav-list", ref: (el) => (this.navListEl = el) }, this.renderTabs(), this.renderAddButton(), this.type === 'line' && (h("div", { key: '7fa84f3fa0f53299e83c9c28c54344f7883bb284', class: {
+                'x-tabs-ink-bar': true,
+                'x-tabs-ink-bar-animated': this.isInkBarAnimated(),
+                [this.classNames?.indicator ?? '']: !!this.classNames?.indicator,
+            }, style: { ...this.inkBarStyle, ...this.styles?.indicator } })))), this.renderExtraContent('right')), h("div", { key: '362ef70990f92f33d63398cc2eca2019a03f605d', class: {
+                'x-tabs-content-holder': true,
+                [this.classNames?.content ?? '']: !!this.classNames?.content,
+            }, style: this.styles?.content }, h("div", { key: 'f930efcfc080942790e636f826cb293f72d23b7c', class: "x-tabs-content" }, this.renderContent()))));
+    }
+    static get watchers() { return {
+        "activeKey": [{
+                "handleActiveKeyChange": 0
+            }],
+        "items": [{
+                "handleItemsChange": 0
+            }]
+    }; }
+};
+XTabs.style = xTabsCss();
+
+export { XTabs as x_tabs };