@nuralyui/tabs 0.0.19 → 0.0.20

package/tabs.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.style.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkUxB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Tabs component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-tabs component with\n * clean CSS variable usage without local fallbacks and proper theme switching support.\n */\nexport const styles = css`\n  :host {\n    display: block;\n    height: 100%;\n    \n    /* Force CSS custom property inheritance to ensure theme switching works properly */\n    color: var(--nuraly-color-text);\n    background-color: var(--nuraly-color-background);\n    \n    /* Minimal transitions for better performance */\n    \n  }\n\n  /* Force re-evaluation of theme-dependent properties on theme change */\n  :host([data-theme]) {\n    color: inherit;\n    background-color: inherit;\n  }\n\n  .tabs-container {\n    display: flex;\n    height: 100%;\n    background-color: var(--nuraly-color-background);\n    border-radius: var(--nuraly-border-radius-tabs, var(--nuraly-border-radius-medium, 0));\n    box-shadow: var(--nuraly-shadow-tabs);\n  }\n\n  .tab-labels {\n    display: flex;\n    background-color: var(--nuraly-color-tabs-header-background);\n    border: var(--nuraly-border-tabs-header);\n  }\n\n  /* Tab label base styles */\n  .tab-label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--nuraly-spacing-2);\n    position: relative;\n    cursor: pointer;\n    padding: var(--nuraly-spacing-tabs-padding, var(--nuraly-spacing-3) var(--nuraly-spacing-4));\n    border: var(--nuraly-border-tabs-label);\n    border-bottom: var(--nuraly-border-width-medium, 2px) solid transparent;\n    background-color: var(--nuraly-color-tabs-label-background);\n    color: var(--nuraly-color-tabs-label-text);\n    font-family: var(--nuraly-font-family);\n    font-size: var(--nuraly-font-size-body);\n    font-weight: var(--nuraly-font-weight-regular);\n    user-select: none;\n    white-space: nowrap;\n\n    &:hover {\n      color: var(--nuraly-color-tabs-label-text-hover);\n      background-color: var(--nuraly-color-tabs-label-background-hover);\n      border-color: var(--nuraly-color-tabs-label-border-hover);\n    }\n\n    &:focus {\n      outline: var(--nuraly-focus-outline);\n      outline-offset: var(--nuraly-focus-outline-offset);\n    }\n\n    &.active {\n      color: var(--nuraly-color-tabs-label-text-active);\n      background-color: var(--nuraly-color-tabs-label-background-active);\n      border-color: var(--nuraly-color-tabs-label-border-active);\n      font-weight: var(--nuraly-font-weight-semibold);\n    }\n\n    /* Positioning-specific border radius for horizontal tabs */\n    &.first-tab {\n      border-radius: var(--nuraly-border-radius-tabs-first);\n    }\n\n    &.middle-tab {\n      border-radius: var(--nuraly-border-radius-tabs-middle);\n    }\n\n    &.last-tab {\n      border-radius: var(--nuraly-border-radius-tabs-last);\n    }\n\n    &.single-tab {\n      border-radius: var(--nuraly-border-radius-tabs-single);\n    }\n\n    &.disabled {\n      cursor: not-allowed;\n      color: var(--nuraly-color-text-disabled);\n      background-color: var(--nuraly-color-background-disabled);\n      \n      &:hover {\n        color: var(--nuraly-color-text-disabled);\n        background-color: var(--nuraly-color-background-disabled);\n        border-color: transparent;\n      }\n    }\n  }\n\n  /* Tab icon styling */\n  .tab-icon {\n    flex-shrink: 0;\n    width: var(--nuraly-tabs-icon-size, 1rem);\n    height: var(--nuraly-tabs-icon-size, 1rem);\n    color: inherit;\n  }\n\n  /* Tab text styling */\n  .tab-text {\n    flex: 1;\n    color: inherit;\n    \n    &[contenteditable=\"true\"] {\n      cursor: text;\n      outline: none;\n      \n      &:focus {\n        background-color: var(--nuraly-color-tabs-edit-background);\n        border-radius: var(--nuraly-border-radius-small);\n        padding: var(--nuraly-spacing-1);\n      }\n    }\n  }\n\n  /* Close/delete icon styling */\n  .close-icon {\n    flex-shrink: 0;\n    width: var(--nuraly-tabs-close-icon-size, 0.875rem);\n    height: var(--nuraly-tabs-close-icon-size, 0.875rem);\n    color: var(--nuraly-color-tabs-close-icon);\n    cursor: pointer;\n    padding: var(--nuraly-spacing-1);\n    border-radius: var(--nuraly-border-radius-small);\n\n    &:hover {\n      color: var(--nuraly-color-tabs-close-icon-hover);\n      background-color: var(--nuraly-color-tabs-close-icon-background-hover);\n    }\n\n    &:active {\n      color: var(--nuraly-color-tabs-close-icon-active);\n      background-color: var(--nuraly-color-tabs-close-icon-background-active);\n    }\n  }\n\n  /* Add tab button styling */\n  .add-tab-label {\n    min-width: auto;\n    width: var(--nuraly-tabs-add-button-size, 2.5rem);\n    color: var(--nuraly-color-tabs-add-icon);\n    \n    &:hover {\n      color: var(--nuraly-color-tabs-add-icon-hover);\n      background-color: var(--nuraly-color-tabs-add-background-hover);\n    }\n  }\n\n  .add-tab-icon {\n    width: var(--nuraly-tabs-add-icon-size, 1rem);\n    height: var(--nuraly-tabs-add-icon-size, 1rem);\n    color: inherit;\n  }\n\n  /* Tab content area */\n  .tab-content {\n    flex: 1;\n    padding: var(--nuraly-spacing-tabs-content-padding, var(--nuraly-spacing-4));\n    background-color: var(--nuraly-color-tabs-content-background);\n    border: var(--nuraly-border-tabs-content);\n    border-top: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);\n    overflow-y: auto;\n    overflow-x: hidden;\n    max-height: 100vh;\n  }\n\n  /* Orientation specific styles */\n  .vertical-align {\n    flex-direction: row;\n    \n    .tab-labels {\n      flex-direction: column;\n      min-width: var(--nuraly-tabs-vertical-width, 12rem);\n    }\n    \n    .tab-content {\n      border-top: none;\n      border-left: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);\n    }\n    \n    .tab-label {\n      border-bottom: var(--nuraly-border-tabs-label);\n      border-right: var(--nuraly-border-width-medium, 2px) solid transparent;\n      \n      &:hover,\n      &.active {\n        border-right-color: var(--nuraly-color-tabs-label-border-active);\n      }\n    }\n  }\n\n  .vertical-align.right-align {\n    flex-direction: row-reverse;\n    \n    .tab-content {\n      border-left: none;\n      border-right: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);\n    }\n    \n    .tab-label {\n      border-right: var(--nuraly-border-tabs-label);\n      border-left: var(--nuraly-border-width-medium, 2px) solid transparent;\n      \n      &:hover,\n      &.active {\n        border-left-color: var(--nuraly-color-tabs-label-border-active);\n        border-right-color: transparent;\n      }\n    }\n  }\n\n  /* Alignment specific styles */\n  .right-align > .tab-labels {\n    flex-direction: row-reverse;\n    align-self: flex-end;\n  }\n\n  .center-align > .tab-labels {\n    align-self: center;\n  }\n\n  .horizontal-align {\n    flex-direction: column;\n  }\n\n  /* Size variations */\n  :host([data-size=\"small\"]) {\n    .tab-label {\n      padding: var(--nuraly-spacing-2) var(--nuraly-spacing-3);\n      font-size: var(--nuraly-font-size-small);\n    }\n    \n    .tab-content {\n      padding: var(--nuraly-spacing-3);\n    }\n  }\n\n  :host([data-size=\"large\"]) {\n    .tab-label {\n      padding: var(--nuraly-spacing-4) var(--nuraly-spacing-6);\n      font-size: var(--nuraly-font-size-large);\n    }\n    \n    .tab-content {\n      padding: var(--nuraly-spacing-6);\n    }\n  }\n\n  /* Type variations */\n  :host([data-type=\"card\"]) {\n    .tab-label {\n      border: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);\n      border-radius: var(--nuraly-border-radius-medium);\n      margin: 0 var(--nuraly-spacing-1);\n      \n      &.active {\n        background-color: var(--nuraly-color-primary);\n        color: var(--nuraly-color-primary-text);\n        border-color: var(--nuraly-color-primary);\n      }\n    }\n  }\n\n  :host([data-type=\"bordered\"]) {\n    .tabs-container {\n      border: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);\n      border-radius: var(--nuraly-border-radius-medium);\n    }\n  }\n\n  /* Drag and drop states */\n  .tab-label.dragging-start {\n    opacity: 0.7;\n    border: var(--nuraly-border-width-thin, 1px) dashed var(--nuraly-color-border-strong);\n    background-color: var(--nuraly-color-background-hover);\n  }\n\n  .tab-label.dragging {\n    border: var(--nuraly-border-width-thin, 1px) dashed var(--nuraly-color-primary);\n    background-color: var(--nuraly-color-primary-background);\n    opacity: 0.8;\n  }\n\n  /* Minimal animation support for better performance */\n  \n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n      transform: translateY(var(--nuraly-spacing-2));\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  /* Accessibility improvements */\n  @media (prefers-reduced-motion: reduce) {\n    * {\n      transition: none !important;\n      animation: none !important;\n    }\n  }\n\n  /* Focus management for keyboard navigation */\n  .tab-label[tabindex=\"0\"] {\n    position: relative;\n  }\n\n  .tab-label:focus-visible {\n    z-index: 1;\n  }\n`;"]}
+{"version":3,"file":"tabs.style.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAujBxB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Tabs component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-tabs component with\n * clean CSS variable usage without local fallbacks and proper theme switching support.\n */\nexport const styles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n\n    /* Force CSS custom property inheritance to ensure theme switching works properly */\n    color: var(--nuraly-color-text);\n    background-color: var(--nuraly-color-background);\n\n    /* Minimal transitions for better performance */\n\n  }\n\n  /* When tabs are inside a panel, adjust sizing */\n  :host-context(nr-panel) {\n    height: 100%;\n    min-height: 0;\n  }\n\n  /* Ensure tabs container fills available space when in panel */\n  nr-panel .tabs-container,\n  :host-context(nr-panel) .tabs-container {\n    height: 100%;\n    min-height: 0;\n    flex: 1;\n  }\n\n  /* Force re-evaluation of theme-dependent properties on theme change */\n  :host([data-theme]) {\n    color: inherit;\n    background-color: inherit;\n  }\n\n  .tabs-container {\n    display: flex;\n    flex: 1;\n    height: 100%;\n    min-height: 0;\n    overflow: hidden;\n    background-color: var(--nuraly-color-background);\n    border-radius: var(--nuraly-border-radius-tabs, var(--nuraly-border-radius-medium, 0));\n    box-shadow: var(--nuraly-shadow-tabs);\n  }\n\n  /* Hide tabs container when all tabs are popped out */\n  .tabs-container.no-visible-tabs {\n    display: none;\n    height: 0;\n    min-height: 0;\n    overflow: hidden;\n  }\n\n  .tab-labels {\n    display: flex;\n    flex-shrink: 0;\n    background-color: var(--nuraly-color-tabs-header-background);\n    border: var(--nuraly-border-tabs-header);\n  }\n\n  /* Tab label base styles */\n  .tab-label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--nuraly-tabs-gap, var(--nuraly-spacing-2));\n    position: relative;\n    cursor: pointer;\n    padding: var(--nuraly-spacing-tabs-padding, var(--nuraly-spacing-3) var(--nuraly-spacing-4));\n    border-bottom: var(--nuraly-border-width-tabs-bottom) var(--nuraly-border-style-tabs) transparent;\n    background-color: var(--nuraly-color-tabs-label-background);\n    color: var(--nuraly-color-tabs-label-text);\n    font-family: var(--nuraly-font-family);\n    font-size: var(--nuraly-font-size-body);\n    font-weight: var(--nuraly-font-weight-regular);\n    user-select: none;\n    white-space: nowrap;\n  }\n\n  .tab-label:hover {\n    color: var(--nuraly-color-tabs-label-text-hover);\n    background-color: var(--nuraly-color-tabs-label-background-hover);\n    border-color: var(--nuraly-color-tabs-label-border-hover);\n  }\n\n  .tab-label:focus {\n    outline: var(--nuraly-focus-outline);\n    outline-offset: var(--nuraly-focus-outline-offset);\n  }\n\n  .tab-label.active {\n    color: var(--nuraly-color-tabs-label-text-active);\n    background-color: var(--nuraly-color-tabs-label-background-active);\n    border-color: var(--nuraly-color-tabs-label-border-active);\n    font-weight: var(--nuraly-font-tabs-weight-active);\n  }\n\n  /* Positioning-specific border radius for horizontal tabs */\n  .tab-label.first-tab {\n    border-radius: var(--nuraly-border-radius-tabs-first);\n  }\n\n  .tab-label.middle-tab {\n    border-radius: var(--nuraly-border-radius-tabs-middle);\n  }\n\n  .tab-label.last-tab {\n    border-radius: var(--nuraly-border-radius-tabs-last);\n  }\n\n  .tab-label.single-tab {\n    border-radius: var(--nuraly-border-radius-tabs-single);\n  }\n\n  .tab-label.disabled {\n    cursor: not-allowed;\n    color: var(--nuraly-color-text-disabled);\n    background-color: var(--nuraly-color-background-disabled);\n  }\n  \n  .tab-label.disabled:hover {\n    color: var(--nuraly-color-text-disabled);\n    background-color: var(--nuraly-color-background-disabled);\n    border-color: transparent;\n  }\n\n  /* Tab icon styling */\n  .tab-icon {\n    flex-shrink: 0;\n    width: var(--nuraly-tabs-icon-size, 1rem);\n    height: var(--nuraly-tabs-icon-size, 1rem);\n    color: inherit;\n  }\n\n  /* Tab text styling */\n  .tab-text {\n    flex: 1;\n    color: inherit;\n    text-align: var(--nuraly-tabs-text-align, center);\n  }\n  \n  .tab-text[contenteditable=\"true\"] {\n    cursor: text;\n    outline: none;\n  }\n  \n  .tab-text[contenteditable=\"true\"]:focus {\n    background-color: var(--nuraly-color-tabs-edit-background);\n    border-radius: var(--nuraly-border-radius-small);\n    padding: var(--nuraly-spacing-1);\n  }\n\n  /* Close/delete icon styling */\n  .close-icon {\n    flex-shrink: 0;\n    width: var(--nuraly-tabs-close-icon-size, 0.875rem);\n    height: var(--nuraly-tabs-close-icon-size, 0.875rem);\n    color: var(--nuraly-color-tabs-close-icon);\n    cursor: pointer;\n    padding: var(--nuraly-spacing-1);\n    border-radius: var(--nuraly-border-radius-small);\n  }\n\n  .close-icon:hover {\n    color: var(--nuraly-color-tabs-close-icon-hover);\n    background-color: var(--nuraly-color-tabs-close-icon-background-hover);\n  }\n\n  .close-icon:active {\n    color: var(--nuraly-color-tabs-close-icon-active);\n    background-color: var(--nuraly-color-tabs-close-icon-background-active);\n  }\n\n  /* Pop-out icon styling */\n  .pop-out-icon {\n    flex-shrink: 0;\n    width: var(--nuraly-tabs-pop-out-icon-size, 0.875rem);\n    height: var(--nuraly-tabs-pop-out-icon-size, 0.875rem);\n    color: var(--nuraly-color-tabs-pop-out-icon, var(--nuraly-color-tabs-close-icon));\n    cursor: pointer;\n    padding: var(--nuraly-spacing-1);\n    border-radius: var(--nuraly-border-radius-small);\n    margin-right: var(--nuraly-spacing-1);\n  }\n\n  .pop-out-icon:hover {\n    color: var(--nuraly-color-tabs-pop-out-icon-hover, var(--nuraly-color-tabs-close-icon-hover));\n    background-color: var(--nuraly-color-tabs-pop-out-icon-background-hover, var(--nuraly-color-tabs-close-icon-background-hover));\n  }\n\n  .pop-out-icon:active {\n    color: var(--nuraly-color-tabs-pop-out-icon-active, var(--nuraly-color-tabs-close-icon-active));\n    background-color: var(--nuraly-color-tabs-pop-out-icon-background-active, var(--nuraly-color-tabs-close-icon-background-active));\n  }\n\n  /* Tab actions container */\n  .tab-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--nuraly-spacing-0);\n  }\n\n  /* Add tab button styling */\n  .add-tab-label {\n    min-width: auto;\n    width: var(--nuraly-tabs-add-button-size, 2.5rem);\n    color: var(--nuraly-color-tabs-add-icon);\n  }\n  \n  .add-tab-label:hover {\n    color: var(--nuraly-color-tabs-add-icon-hover);\n    background-color: var(--nuraly-color-tabs-add-background-hover);\n  }\n\n  .add-tab-icon {\n    width: var(--nuraly-tabs-add-icon-size, 1rem);\n    height: var(--nuraly-tabs-add-icon-size, 1rem);\n    color: inherit;\n  }\n\n  /* Tab content area */\n  .tab-content {\n    flex: 1;\n    padding: var(--nuraly-spacing-tabs-content-padding, var(--nuraly-spacing-4));\n    background-color: var(--nuraly-color-tabs-content-background);\n    border-top: var(--nuraly-border-width-tabs-content-top) var(--nuraly-border-style-tabs-content) var(--nuraly-border-color-tabs-content);\n    border-right: var(--nuraly-border-width-tabs-content-right) var(--nuraly-border-style-tabs-content) var(--nuraly-border-color-tabs-content);\n    border-bottom: var(--nuraly-border-width-tabs-content-bottom) var(--nuraly-border-style-tabs-content) var(--nuraly-border-color-tabs-content);\n    border-left: var(--nuraly-border-width-tabs-content-left) var(--nuraly-border-style-tabs-content) var(--nuraly-border-color-tabs-content);\n    overflow: auto;\n    min-height: 0;\n  }\n\n  /* Orientation specific styles */\n  .vertical-align {\n    flex-direction: row;\n    \n    .tab-labels {\n      flex-direction: column;\n      min-width: var(--nuraly-tabs-vertical-width, 12rem);\n    }\n    \n    .tab-content {\n      border-top: none;\n      border-left: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);\n    }\n    \n    .tab-label {\n      border-bottom: var(--nuraly-border-tabs-label);\n      border-right: var(--nuraly-border-width-tabs-right) var(--nuraly-border-style-tabs) transparent;\n    }\n  }\n\n  .vertical-align .tab-label:hover,\n  .vertical-align .tab-label.active {\n    border-right-color: var(--nuraly-color-tabs-label-border-active);\n  }\n\n  .vertical-align.right-align {\n    flex-direction: row-reverse;\n  }\n  \n  .vertical-align.right-align .tab-content {\n    border-left: none;\n    border-right: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);\n  }\n  \n  .vertical-align.right-align .tab-label {\n    border-right: var(--nuraly-border-tabs-label);\n    border-left: var(--nuraly-border-width-tabs-left) var(--nuraly-border-style-tabs) transparent;\n  }\n  \n  .vertical-align.right-align .tab-label:hover,\n  .vertical-align.right-align .tab-label.active {\n    border-left-color: var(--nuraly-color-tabs-label-border-active);\n    border-right-color: transparent;\n  }\n\n  /* Alignment specific styles */\n  .right-align > .tab-labels {\n    flex-direction: row-reverse;\n    align-self: flex-end;\n  }\n\n  .center-align > .tab-labels {\n    align-self: center;\n  }\n\n  /* Stretch alignment - tabs fill full width with equal sizes */\n  .stretch-align > .tab-labels {\n    width: 100%;\n  }\n\n  .stretch-align .tab-label {\n    flex: 1;\n    min-width: 0; /* Allow flex items to shrink below their content size */\n  }\n\n  /* Ensure add-tab button doesn't stretch when using stretch alignment */\n  .stretch-align .add-tab-label {\n    flex: 0 0 auto;\n    width: var(--nuraly-tabs-add-button-size, 2.5rem);\n  }\n\n  .horizontal-align {\n    flex-direction: column;\n    min-height: 0;\n  }\n\n  /* Size variations */\n  .tabs-container[data-size=\"small\"] {\n    .tab-label {\n      padding: var(--nuraly-spacing-tabs-padding-small);\n      font-size: var(--nuraly-font-size-small);\n      gap: var(--nuraly-tabs-gap-small, var(--nuraly-spacing-1));\n    }\n    \n    .tab-text {\n      font-size: var(--nuraly-font-size-small);\n      text-align: var(--nuraly-tabs-text-align, center);\n    }\n    \n    .tab-icon {\n      width: calc(var(--nuraly-tabs-icon-size, 1rem) * 0.875);\n      height: calc(var(--nuraly-tabs-icon-size, 1rem) * 0.875);\n    }\n    \n    .close-icon {\n      width: calc(var(--nuraly-tabs-close-icon-size, 0.875rem) * 0.875);\n      height: calc(var(--nuraly-tabs-close-icon-size, 0.875rem) * 0.875);\n    }\n    \n    .tab-content {\n      padding: var(--nuraly-spacing-tabs-content-padding-small, var(--nuraly-spacing-3));\n    }\n  }\n\n  .tabs-container[data-size=\"large\"] {\n    .tab-label {\n      padding: var(--nuraly-spacing-4) var(--nuraly-spacing-6);\n      font-size: var(--nuraly-font-size-large);\n      gap: var(--nuraly-tabs-gap-large, var(--nuraly-spacing-3));\n    }\n    \n    .tab-text {\n      font-size: var(--nuraly-font-size-large);\n      text-align: var(--nuraly-tabs-text-align, center);\n    }\n    \n    .tab-icon {\n      width: calc(var(--nuraly-tabs-icon-size, 1rem) * 1.25);\n      height: calc(var(--nuraly-tabs-icon-size, 1rem) * 1.25);\n    }\n    \n    .close-icon {\n      width: calc(var(--nuraly-tabs-close-icon-size, 0.875rem) * 1.25);\n      height: calc(var(--nuraly-tabs-close-icon-size, 0.875rem) * 1.25);\n    }\n    \n    .tab-content {\n      padding: var(--nuraly-spacing-tabs-content-padding-large, var(--nuraly-spacing-6));\n    }\n  }\n\n  /* Type variations */\n  \n  /* Default variant - uses standard theme variables */\n  .tabs-container[data-type=\"default\"] .tab-labels {\n    gap: var(--nuraly-tabs-labels-gap, var(--nuraly-spacing-2));\n  }\n  \n  .tabs-container[data-type=\"default\"] .tab-label {\n    /* Use theme variables for proper visibility */\n    background-color: var(--nuraly-color-tabs-label-background);\n    border-top: var(--nuraly-border-width-tabs-top) var(--nuraly-border-style-tabs) var(--nuraly-border-color-tabs);\n    border-right: var(--nuraly-border-width-tabs-right) var(--nuraly-border-style-tabs) var(--nuraly-border-color-tabs);\n    border-bottom: var(--nuraly-border-width-tabs-bottom) var(--nuraly-border-style-tabs) var(--nuraly-border-color-tabs);\n    border-left: var(--nuraly-border-width-tabs-left) var(--nuraly-border-style-tabs) var(--nuraly-border-color-tabs);\n    color: var(--nuraly-color-tabs-label-text);\n    border-radius: var(--nuraly-border-radius-tabs-first);\n  }\n  \n  .tabs-container[data-type=\"default\"] .tab-label:hover {\n    background-color: var(--nuraly-color-tabs-label-background-hover);\n    color: var(--nuraly-color-tabs-label-text-hover);\n    border-top-width: var(--nuraly-border-width-tabs-top-hover);\n    border-right-width: var(--nuraly-border-width-tabs-right-hover);\n    border-bottom-width: var(--nuraly-border-width-tabs-bottom-hover);\n    border-left-width: var(--nuraly-border-width-tabs-left-hover);\n  }\n  \n  .tabs-container[data-type=\"default\"] .tab-label.active {\n    background-color: var(--nuraly-color-tabs-label-background-active);\n    color: var(--nuraly-color-tabs-label-text-active);\n    border-top-width: var(--nuraly-border-width-tabs-top-active);\n    border-right-width: var(--nuraly-border-width-tabs-right-active);\n    border-bottom-width: var(--nuraly-border-width-tabs-bottom-active);\n    border-left-width: var(--nuraly-border-width-tabs-left-active);\n    border-color: var(--nuraly-color-tabs-label-border-active);\n    font-weight: var(--nuraly-font-tabs-weight-active);\n  }\n  \n \n  \n  /* Line variant - underline on active tab */\n  .tabs-container[data-type=\"line\"] .tab-labels {\n    gap: var(--nuraly-tabs-gap, 1rem);\n    border-bottom: var(--nuraly-tabs-indicator-height, 1px) solid var(--nuraly-tabs-border-color, var(--nuraly-color-border, #e0e0e0));\n  }\n  \n  .tabs-container[data-type=\"line\"] .tab-label {\n    padding: var(--nuraly-tabs-padding, 0.5rem 0);\n    border: none;\n    border-bottom: var(--nuraly-tabs-indicator-height, 2px) solid transparent;\n    border-radius: 0;\n    background-color: transparent;\n    font-weight: var(--nuraly-tabs-font-weight, 400);\n    font-size: var(--nuraly-tabs-font-size, 1rem);\n    margin-bottom: calc(-1 * var(--nuraly-tabs-indicator-height, 1px));\n  }\n  \n  .tabs-container[data-type=\"line\"] .tab-label:hover {\n    background-color: transparent;\n    border-bottom-color: var(--nuraly-tabs-item-hover-color, var(--nuraly-tabs-active-indicator-color, currentColor));\n  }\n  \n  .tabs-container[data-type=\"line\"] .tab-label.active {\n    background-color: transparent;\n    border-bottom-color: var(--nuraly-tabs-active-indicator-color, var(--nuraly-tabs-active-border-color, currentColor));\n    font-weight: var(--nuraly-tabs-active-font-weight, 700);\n    color: var(--nuraly-tabs-active-color, inherit);\n  }\n  \n  .tabs-container[data-type=\"line\"] .tab-content {\n    border-top: none;\n  }\n  \n  .tabs-container[data-type=\"card\"] .tab-label {\n    border: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);\n    border-radius: var(--nuraly-border-radius-medium);\n    margin: 0 var(--nuraly-spacing-1);\n  }\n  \n  .tabs-container[data-type=\"card\"] .tab-label.active {\n    background-color: var(--nuraly-color-primary);\n    color: var(--nuraly-color-primary-text);\n    border-color: var(--nuraly-color-primary);\n  }\n\n  .tabs-container[data-type=\"bordered\"] {\n    border: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);\n    border-radius: var(--nuraly-border-radius-medium);\n  }\n\n  /* Drag and drop states */\n  .tab-label.dragging-start {\n    opacity: 0.7;\n    border: var(--nuraly-border-width-thin, 1px) dashed var(--nuraly-color-border-strong);\n    background-color: var(--nuraly-color-background-hover);\n  }\n\n  .tab-label.dragging {\n    border: var(--nuraly-border-width-thin, 1px) dashed var(--nuraly-color-primary);\n    background-color: var(--nuraly-color-primary-background);\n    opacity: 0.8;\n  }\n\n  /* Minimal animation support for better performance */\n\n  /* Pop-out placeholder styles */\n  .tab-placeholder {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 200px;\n    padding: var(--nuraly-spacing-4);\n    text-align: center;\n    background-color: var(--nuraly-color-background-subtle);\n    border: 2px dashed var(--nuraly-color-border);\n    border-radius: var(--nuraly-border-radius-medium);\n    color: var(--nuraly-color-text-muted);\n  }\n\n  .placeholder-content {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--nuraly-spacing-3);\n  }\n\n  .placeholder-icon {\n    font-size: 2rem;\n    opacity: 0.6;\n  }\n\n  .placeholder-text {\n    font-size: var(--nuraly-font-size-body);\n    line-height: var(--nuraly-line-height-body);\n  }\n\n  .placeholder-text strong {\n    color: var(--nuraly-color-text);\n    font-weight: var(--nuraly-font-weight-medium);\n  }\n\n  .pop-in-button {\n    background-color: var(--nuraly-color-primary);\n    color: var(--nuraly-color-primary-foreground);\n    border: none;\n    border-radius: var(--nuraly-border-radius-medium);\n    padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);\n    font-size: var(--nuraly-font-size-body);\n    font-weight: var(--nuraly-font-weight-medium);\n    cursor: pointer;\n    transition: background-color 0.2s ease;\n  }\n\n  .pop-in-button:hover {\n    background-color: var(--nuraly-color-primary-hover);\n  }\n\n  .pop-in-button:active {\n    background-color: var(--nuraly-color-primary-active);\n  }\n\n  /* Placeholder tab styling */\n  .tab-label.tab-placeholder-state {\n    background-color: var(--nuraly-color-background-subtle);\n    border: 1px dashed var(--nuraly-color-border);\n    opacity: 0.8;\n  }\n\n  .tab-label.tab-placeholder-state .tab-text {\n    font-style: italic;\n    opacity: 0.7;\n  }\n\n  /* Animations */\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n      transform: translateY(var(--nuraly-spacing-2));\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  /* Accessibility improvements */\n  @media (prefers-reduced-motion: reduce) {\n    * {\n      transition: none !important;\n      animation: none !important;\n    }\n  }\n\n  /* Focus management for keyboard navigation */\n  .tab-label[tabindex=\"0\"] {\n    position: relative;\n  }\n\n  .tab-label:focus-visible {\n    z-index: 1;\n  }\n`;"]}

package/tabs.types.d.ts

@@ -3,6 +3,7 @@
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
+import { PanelMode } from '../panel/panel.types.js';
 /**
  * Tab orientation options
  */
@@ -16,7 +17,8 @@ export declare const enum TabOrientation {
 export declare const enum TabsAlign {
     Right = "right",
     Left = "left",
-    Center = "center"
+    Center = "center",
+    Stretch = "stretch"
 }
 /**
  * Tab size options
@@ -44,7 +46,62 @@ export declare const enum TabEvent {
     TabRemove = "nr-tab-remove",
     TabEdit = "nr-tab-edit",
     TabOrderChange = "nr-tab-order-change",
-    TabChange = "nr-tab-change"
+    TabChange = "nr-tab-change",
+    TabPopOut = "nr-tab-pop-out",
+    TabPopIn = "nr-tab-pop-in"
+}
+/**
+ * Pop-out state enumeration
+ */
+export declare const enum TabPopOutState {
+    Normal = "normal",
+    PoppedOut = "popped-out",
+    Placeholder = "placeholder"
+}
+/**
+ * Pop-out configuration interface
+ */
+export interface TabPopOutConfig {
+    /** Whether pop-out functionality is enabled */
+    enabled: boolean;
+    /** Whether tabs can be popped out */
+    canPopOut?: boolean;
+    /** Whether popped-out tabs can be popped back in */
+    canPopIn?: boolean;
+    /** Panel configuration for popped-out tabs */
+    windowPanel?: {
+        /** Panel title template (can use {tabLabel} placeholder) */
+        title?: string;
+        /** Panel icon */
+        icon?: string;
+        /** Default panel width */
+        width?: string;
+        /** Default panel height */
+        height?: string;
+        /** Whether panel is resizable */
+        resizable?: boolean;
+        /** Whether panel is draggable */
+        draggable?: boolean;
+        /** Whether panel can be closed (will pop tab back in) */
+        closable?: boolean;
+        /** Whether panel can be minimized */
+        minimizable?: boolean;
+    };
+}
+/**
+ * Popped-out tab tracking interface
+ */
+export interface PoppedOutTab {
+    /** Tab data */
+    tab: TabItem;
+    /** Original index in tabs array */
+    originalIndex: number;
+    /** Current pop-out state */
+    state: TabPopOutState;
+    /** Panel element reference */
+    panelElement?: HTMLElement;
+    /** Unique identifier for this pop-out instance */
+    popOutId: string;
 }
 /**
  * Individual tab configuration interface
@@ -66,8 +123,12 @@ export interface TabItem {
     className?: string;
     /** Tab-specific editable options */
     editable?: Partial<TabEditable>;
+    /** Tab-specific pop-out options */
+    popOut?: Partial<TabPopOutConfig>;
     /** Custom data attributes */
     data?: Record<string, any>;
+    /** Current pop-out state */
+    popOutState?: TabPopOutState;
 }
 /**
  * Tab editable configuration interface
@@ -82,6 +143,33 @@ export interface TabEditable {
     /** Whether tabs can be reordered via drag & drop */
     canMove: boolean;
 }
+/**
+ * Tab panel configuration interface for making tabs pannable
+ */
+export interface TabsPanelConfig {
+    /** Whether panel wrapper is enabled */
+    enabled: boolean;
+    /** Panel mode */
+    mode?: PanelMode;
+    /** Panel size (inherits from tabs if not specified) */
+    size?: string;
+    /** Whether the panel is resizable */
+    resizable?: boolean;
+    /** Whether the panel is draggable */
+    draggable?: boolean;
+    /** Whether the panel can be closed */
+    closable?: boolean;
+    /** Whether the panel can be minimized */
+    minimizable?: boolean;
+    /** Panel title */
+    title?: string;
+    /** Panel icon */
+    icon?: string;
+    /** Custom panel width */
+    width?: string;
+    /** Custom panel height */
+    height?: string;
+}
 /**
  * Tab event detail interfaces
  */
@@ -110,6 +198,16 @@ export interface TabOrderChangeEventDetail {
     sourceTab: TabItem;
     targetTab: TabItem;
 }
+export interface TabPopOutEventDetail {
+    index: number;
+    tab: TabItem;
+    popOutId: string;
+}
+export interface TabPopInEventDetail {
+    tab: TabItem;
+    originalIndex: number;
+    popOutId: string;
+}
 /**
  * Tab configuration options
  */
@@ -124,6 +222,8 @@ export interface TabsConfig {
     type?: TabType;
     /** Whether tabs are editable */
     editable?: TabEditable;
+    /** Pop-out configuration */
+    popOut?: TabPopOutConfig;
     /** Whether tabs are animated */
     animated?: boolean;
     /** Whether to hide tab content when tab is not active */

package/tabs.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.types.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA+IH;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC;AAC/B,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,CAAC;AACjC,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,CAAC;AACpC,MAAM,CAAC,MAAM,gBAAgB,GAAG,OAAO,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * Tab orientation options\n */\nexport const enum TabOrientation {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical'\n}\n\n/**\n * Tab alignment options\n */\nexport const enum TabsAlign {\n  Right = 'right',\n  Left = 'left',\n  Center = 'center'\n}\n\n/**\n * Tab size options\n */\nexport const enum TabSize {\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large'\n}\n\n/**\n * Tab type/variant options\n */\nexport const enum TabType {\n  Default = 'default',\n  Card = 'card',\n  Line = 'line',\n  Bordered = 'bordered'\n}\n\n/**\n * Tab events enumeration\n */\nexport const enum TabEvent {\n  TabClick = 'nr-tab-click',\n  TabAdd = 'nr-tab-add',\n  TabRemove = 'nr-tab-remove',\n  TabEdit = 'nr-tab-edit',\n  TabOrderChange = 'nr-tab-order-change',\n  TabChange = 'nr-tab-change'\n}\n\n/**\n * Individual tab configuration interface\n */\nexport interface TabItem {\n  /** Unique identifier for the tab */\n  id?: string | number;\n  /** Tab label/title */\n  label: string;\n  /** Tab content (HTML template or string) */\n  content?: any;\n  /** Whether the tab is disabled */\n  disabled?: boolean;\n  /** Whether the tab can be closed */\n  closable?: boolean;\n  /** Icon for the tab */\n  icon?: string;\n  /** Custom CSS classes for the tab */\n  className?: string;\n  /** Tab-specific editable options */\n  editable?: Partial<TabEditable>;\n  /** Custom data attributes */\n  data?: Record<string, any>;\n}\n\n/**\n * Tab editable configuration interface\n */\nexport interface TabEditable {\n  /** Whether tabs can be deleted/removed */\n  canDeleteTab: boolean;\n  /** Whether tab titles can be edited inline */\n  canEditTabTitle: boolean;\n  /** Whether new tabs can be added */\n  canAddTab: boolean;\n  /** Whether tabs can be reordered via drag & drop */\n  canMove: boolean;\n}\n\n/**\n * Tab event detail interfaces\n */\nexport interface TabClickEventDetail {\n  index: number;\n  tab: TabItem;\n  previousIndex?: number;\n}\n\nexport interface TabAddEventDetail {\n  tab?: Partial<TabItem>;\n  index?: number;\n}\n\nexport interface TabRemoveEventDetail {\n  index: number;\n  tab: TabItem;\n}\n\nexport interface TabEditEventDetail {\n  index: number;\n  tab: TabItem;\n  oldLabel: string;\n  newLabel: string;\n}\n\nexport interface TabOrderChangeEventDetail {\n  sourceIndex: number;\n  targetIndex: number;\n  sourceTab: TabItem;\n  targetTab: TabItem;\n}\n\n/**\n * Tab configuration options\n */\nexport interface TabsConfig {\n  /** Tab orientation */\n  orientation?: TabOrientation;\n  /** Tab alignment */\n  align?: TabsAlign;\n  /** Tab size */\n  size?: TabSize;\n  /** Tab type/variant */\n  type?: TabType;\n  /** Whether tabs are editable */\n  editable?: TabEditable;\n  /** Whether tabs are animated */\n  animated?: boolean;\n  /** Whether to hide tab content when tab is not active */\n  destroyInactiveTabPane?: boolean;\n  /** Custom tab bar extra content */\n  tabBarExtraContent?: any;\n}\n\n/**\n * Constants\n */\nexport const EMPTY_STRING = '';\nexport const NOTHING_STRING = '';\nexport const DEFAULT_ACTIVE_TAB = 0;\nexport const LABEL_ATTRIBUTES = 'label';"]}
+{"version":3,"file":"tabs.types.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA0PH;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC;AAC/B,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,CAAC;AACjC,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,CAAC;AACpC,MAAM,CAAC,MAAM,gBAAgB,GAAG,OAAO,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { PanelMode } from '../panel/panel.types.js';\n\n/**\n * Tab orientation options\n */\nexport const enum TabOrientation {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical'\n}\n\n/**\n * Tab alignment options\n */\nexport const enum TabsAlign {\n  Right = 'right',\n  Left = 'left',\n  Center = 'center',\n  Stretch = 'stretch'\n}\n\n/**\n * Tab size options\n */\nexport const enum TabSize {\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large'\n}\n\n/**\n * Tab type/variant options\n */\nexport const enum TabType {\n  Default = 'default',\n  Card = 'card',\n  Line = 'line',\n  Bordered = 'bordered'\n}\n\n/**\n * Tab events enumeration\n */\nexport const enum TabEvent {\n  TabClick = 'nr-tab-click',\n  TabAdd = 'nr-tab-add',\n  TabRemove = 'nr-tab-remove',\n  TabEdit = 'nr-tab-edit',\n  TabOrderChange = 'nr-tab-order-change',\n  TabChange = 'nr-tab-change',\n  TabPopOut = 'nr-tab-pop-out',\n  TabPopIn = 'nr-tab-pop-in'\n}\n\n/**\n * Pop-out state enumeration\n */\nexport const enum TabPopOutState {\n  Normal = 'normal',\n  PoppedOut = 'popped-out',\n  Placeholder = 'placeholder'\n}\n\n/**\n * Pop-out configuration interface\n */\nexport interface TabPopOutConfig {\n  /** Whether pop-out functionality is enabled */\n  enabled: boolean;\n  /** Whether tabs can be popped out */\n  canPopOut?: boolean;\n  /** Whether popped-out tabs can be popped back in */\n  canPopIn?: boolean;\n  /** Panel configuration for popped-out tabs */\n  windowPanel?: {\n    /** Panel title template (can use {tabLabel} placeholder) */\n    title?: string;\n    /** Panel icon */\n    icon?: string;\n    /** Default panel width */\n    width?: string;\n    /** Default panel height */\n    height?: string;\n    /** Whether panel is resizable */\n    resizable?: boolean;\n    /** Whether panel is draggable */\n    draggable?: boolean;\n    /** Whether panel can be closed (will pop tab back in) */\n    closable?: boolean;\n    /** Whether panel can be minimized */\n    minimizable?: boolean;\n  };\n}\n\n/**\n * Popped-out tab tracking interface\n */\nexport interface PoppedOutTab {\n  /** Tab data */\n  tab: TabItem;\n  /** Original index in tabs array */\n  originalIndex: number;\n  /** Current pop-out state */\n  state: TabPopOutState;\n  /** Panel element reference */\n  panelElement?: HTMLElement;\n  /** Unique identifier for this pop-out instance */\n  popOutId: string;\n}\n\n/**\n * Individual tab configuration interface\n */\nexport interface TabItem {\n  /** Unique identifier for the tab */\n  id?: string | number;\n  /** Tab label/title */\n  label: string;\n  /** Tab content (HTML template or string) */\n  content?: any;\n  /** Whether the tab is disabled */\n  disabled?: boolean;\n  /** Whether the tab can be closed */\n  closable?: boolean;\n  /** Icon for the tab */\n  icon?: string;\n  /** Custom CSS classes for the tab */\n  className?: string;\n  /** Tab-specific editable options */\n  editable?: Partial<TabEditable>;\n  /** Tab-specific pop-out options */\n  popOut?: Partial<TabPopOutConfig>;\n  /** Custom data attributes */\n  data?: Record<string, any>;\n  /** Current pop-out state */\n  popOutState?: TabPopOutState;\n}\n\n/**\n * Tab editable configuration interface\n */\nexport interface TabEditable {\n  /** Whether tabs can be deleted/removed */\n  canDeleteTab: boolean;\n  /** Whether tab titles can be edited inline */\n  canEditTabTitle: boolean;\n  /** Whether new tabs can be added */\n  canAddTab: boolean;\n  /** Whether tabs can be reordered via drag & drop */\n  canMove: boolean;\n}\n\n/**\n * Tab panel configuration interface for making tabs pannable\n */\nexport interface TabsPanelConfig {\n  /** Whether panel wrapper is enabled */\n  enabled: boolean;\n  /** Panel mode */\n  mode?: PanelMode;\n  /** Panel size (inherits from tabs if not specified) */\n  size?: string;\n  /** Whether the panel is resizable */\n  resizable?: boolean;\n  /** Whether the panel is draggable */\n  draggable?: boolean;\n  /** Whether the panel can be closed */\n  closable?: boolean;\n  /** Whether the panel can be minimized */\n  minimizable?: boolean;\n  /** Panel title */\n  title?: string;\n  /** Panel icon */\n  icon?: string;\n  /** Custom panel width */\n  width?: string;\n  /** Custom panel height */\n  height?: string;\n}\n\n/**\n * Tab event detail interfaces\n */\nexport interface TabClickEventDetail {\n  index: number;\n  tab: TabItem;\n  previousIndex?: number;\n}\n\nexport interface TabAddEventDetail {\n  tab?: Partial<TabItem>;\n  index?: number;\n}\n\nexport interface TabRemoveEventDetail {\n  index: number;\n  tab: TabItem;\n}\n\nexport interface TabEditEventDetail {\n  index: number;\n  tab: TabItem;\n  oldLabel: string;\n  newLabel: string;\n}\n\nexport interface TabOrderChangeEventDetail {\n  sourceIndex: number;\n  targetIndex: number;\n  sourceTab: TabItem;\n  targetTab: TabItem;\n}\n\nexport interface TabPopOutEventDetail {\n  index: number;\n  tab: TabItem;\n  popOutId: string;\n}\n\nexport interface TabPopInEventDetail {\n  tab: TabItem;\n  originalIndex: number;\n  popOutId: string;\n}\n\n/**\n * Tab configuration options\n */\nexport interface TabsConfig {\n  /** Tab orientation */\n  orientation?: TabOrientation;\n  /** Tab alignment */\n  align?: TabsAlign;\n  /** Tab size */\n  size?: TabSize;\n  /** Tab type/variant */\n  type?: TabType;\n  /** Whether tabs are editable */\n  editable?: TabEditable;\n  /** Pop-out configuration */\n  popOut?: TabPopOutConfig;\n  /** Whether tabs are animated */\n  animated?: boolean;\n  /** Whether to hide tab content when tab is not active */\n  destroyInactiveTabPane?: boolean;\n  /** Custom tab bar extra content */\n  tabBarExtraContent?: any;\n}\n\n/**\n * Constants\n */\nexport const EMPTY_STRING = '';\nexport const NOTHING_STRING = '';\nexport const DEFAULT_ACTIVE_TAB = 0;\nexport const LABEL_ATTRIBUTES = 'label';"]}