@synergy-design-system/components 2.64.0 → 2.65.0

package/dist/chunks/{chunk.NDD7VVOJ.js → chunk.I24VNPLZ.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.BOLNLEU5.js";
+} from "./chunk.YMV5UUZV.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -64,4 +64,4 @@ __decorateClass([
 export {
   SynTabPanel
 };
-//# sourceMappingURL=chunk.NDD7VVOJ.js.map
+//# sourceMappingURL=chunk.I24VNPLZ.js.map

package/dist/chunks/{chunk.EFLZJHS2.js → chunk.I3P673HN.js}

@@ -1,6 +1,6 @@
 import {
   SynTooltip
-} from "./chunk.7YKPACDL.js";
+} from "./chunk.4TKHRLEX.js";
 
 // src/components/tooltip/tooltip.ts
 var tooltip_default = SynTooltip;
@@ -9,4 +9,4 @@ SynTooltip.define("syn-tooltip");
 export {
   tooltip_default
 };
-//# sourceMappingURL=chunk.EFLZJHS2.js.map
+//# sourceMappingURL=chunk.I3P673HN.js.map

package/dist/chunks/{chunk.ZZHZ4TWD.js → chunk.IR6FQJMH.js}

@@ -1,6 +1,6 @@
 import {
   SynIcon
-} from "./chunk.RTIAGXWJ.js";
+} from "./chunk.BTZ53ROB.js";
 
 // src/components/icon/icon.ts
 var icon_default = SynIcon;
@@ -9,4 +9,4 @@ SynIcon.define("syn-icon");
 export {
   icon_default
 };
-//# sourceMappingURL=chunk.ZZHZ4TWD.js.map
+//# sourceMappingURL=chunk.IR6FQJMH.js.map

package/dist/chunks/{chunk.UU6BACOP.js → chunk.JAX7HDCO.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.BOLNLEU5.js";
+} from "./chunk.YMV5UUZV.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -120,4 +120,4 @@ __decorateClass([
 export {
   SynBreadcrumbItem
 };
-//# sourceMappingURL=chunk.UU6BACOP.js.map
+//# sourceMappingURL=chunk.JAX7HDCO.js.map

package/dist/chunks/{chunk.EC5SF3P7.js → chunk.JS3VQ4EC.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.6EPU7YUS.js";
 import {
   SynIconButton
-} from "./chunk.RUGNLIOD.js";
+} from "./chunk.LSTXIYCM.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.BOLNLEU5.js";
+} from "./chunk.YMV5UUZV.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -84,4 +84,4 @@ SynTag = __decorateClass([
 export {
   SynTag
 };
-//# sourceMappingURL=chunk.EC5SF3P7.js.map
+//# sourceMappingURL=chunk.JS3VQ4EC.js.map

package/dist/chunks/{chunk.WIUYDEVH.js → chunk.JSZLWD7O.js}

@@ -1,6 +1,6 @@
 import {
   SynMenu
-} from "./chunk.E2UQKDSJ.js";
+} from "./chunk.S7PUIVDX.js";
 
 // src/components/menu/menu.ts
 var menu_default = SynMenu;
@@ -9,4 +9,4 @@ SynMenu.define("syn-menu");
 export {
   menu_default
 };
-//# sourceMappingURL=chunk.WIUYDEVH.js.map
+//# sourceMappingURL=chunk.JSZLWD7O.js.map

package/dist/chunks/{chunk.QDGJNMZF.js → chunk.JYNQPTNP.js}

@@ -1,6 +1,6 @@
 import {
   SynergyElement
-} from "./chunk.BOLNLEU5.js";
+} from "./chunk.YMV5UUZV.js";
 
 // src/components/validate/utility.ts
 var WhitelistedSynergyFormEventNames = [
@@ -33,4 +33,4 @@ export {
   normalizeEventAttribute,
   getEventNameForElement
 };
-//# sourceMappingURL=chunk.QDGJNMZF.js.map
+//# sourceMappingURL=chunk.JYNQPTNP.js.map

package/dist/chunks/{chunk.7JTOOIU7.js → chunk.K2QKG2CJ.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.H32ZS7GT.js";
+} from "./chunk.OE7XO7OF.js";
 
 // src/components/nav-item/nav-item.ts
 var nav_item_default = SynNavItem;
@@ -9,4 +9,4 @@ SynNavItem.define("syn-nav-item");
 export {
   nav_item_default
 };
-//# sourceMappingURL=chunk.7JTOOIU7.js.map
+//# sourceMappingURL=chunk.K2QKG2CJ.js.map

package/dist/chunks/{chunk.SMQELY3O.js → chunk.KEZKD5TK.js}

@@ -3,22 +3,22 @@ import {
 } from "./chunk.EK4TK5MY.js";
 import {
   icon_default
-} from "./chunk.ZZHZ4TWD.js";
+} from "./chunk.IR6FQJMH.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
-import {
-  LocalizeController
-} from "./chunk.OAQRCZOO.js";
 import {
   watch
 } from "./chunk.BVZQ6QSY.js";
+import {
+  LocalizeController
+} from "./chunk.OAQRCZOO.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.BOLNLEU5.js";
+} from "./chunk.YMV5UUZV.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -206,4 +206,4 @@ __decorateClass([
 export {
   SynHeader
 };
-//# sourceMappingURL=chunk.SMQELY3O.js.map
+//# sourceMappingURL=chunk.KEZKD5TK.js.map

package/dist/chunks/{chunk.3LE63SMG.js → chunk.KJWL6FCT.js}

@@ -16,7 +16,7 @@ import {
 } from "./chunk.WXVOTRW5.js";
 import {
   SynIconButton
-} from "./chunk.RUGNLIOD.js";
+} from "./chunk.LSTXIYCM.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -31,18 +31,18 @@ import {
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
-import {
-  LocalizeController
-} from "./chunk.OAQRCZOO.js";
 import {
   watch
 } from "./chunk.BVZQ6QSY.js";
+import {
+  LocalizeController
+} from "./chunk.OAQRCZOO.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.BOLNLEU5.js";
+} from "./chunk.YMV5UUZV.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -407,4 +407,4 @@ setDefaultAnimation("drawer.overlay.hide", {
 export {
   SynDrawer
 };
-//# sourceMappingURL=chunk.3LE63SMG.js.map
+//# sourceMappingURL=chunk.KJWL6FCT.js.map

package/dist/chunks/{chunk.XOXVVU5C.js → chunk.LBUMVFCE.js}

@@ -5,8 +5,9 @@ var tab_group_custom_styles_default = css`
   /* Write custom CSS here */
   :host {
     --track-width: var(--syn-border-width-small);
-    --track-color: var(--syn-color-neutral-300);
+    --track-color: var(--syn-panel-border-color);
     --indicator-width: var(--syn-border-width-x-large);
+    --indicator-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
   }
 
   /* we need to augment the size of the height of the tab-group__nav to make the focus outline and the hiding white border visible of the tab because of overflow-x value  */
@@ -24,25 +25,14 @@ var tab_group_custom_styles_default = css`
    */
   .tab-group--top .tab-group__indicator {
     border-bottom: solid var(--indicator-width) var(--indicator-color);
-    bottom: 0;
   }
 
   .tab-group--start .tab-group__indicator {
     border-right: solid var(--indicator-width) var(--indicator-color);
-    right: 0;
-  }
-
-  .tab-group--start.tab-group--rtl .tab-group__indicator {
-    left: 0;
   }
 
   .tab-group--end .tab-group__indicator {
     border-inline-start: solid var(--indicator-width) var(--indicator-color);
-    left: 0;
-  }
-
-  .tab-group--end.tab-group--rtl .tab-group__indicator {
-    right: 0;
   }
 
   /**
@@ -195,7 +185,7 @@ var tab_group_custom_styles_default = css`
   .tab-group__scroll-button {
     /* we need to move the scroll buttons to the top, to align the borders with the border of the tab-group--nav  */
     bottom: var(--syn-panel-border-width);
-    color: var(--syn-color-neutral-950);
+    color: var(--syn-interactive-quiet-color, var(--syn-color-neutral-950));
     font-size: var(--syn-font-size-medium);
     width: calc(var(--syn-spacing-x-large) + var( --syn-spacing-2x-small));
   }
@@ -204,28 +194,8 @@ var tab_group_custom_styles_default = css`
     padding: calc(var(--syn-spacing-small) - var(--syn-spacing-3x-small));
   }
 
-  /* Make sure the direction of the chevrons match the scrolling directions. */
-  .tab-group--has-scroll-controls:not(.tab-group--rtl) .tab-group__scroll-button--start,
-  .tab-group--rtl .tab-group__scroll-button--end {
-    rotate: 180deg;
-  }
-
-  .tab-group--has-scroll-controls:not(.tab-group--contained) .tab-group__scroll-button--start {
-    border-top: solid var(--track-width) var(--track-color);
-  }
-
-  .tab-group--has-scroll-controls:not(.tab-group--contained) .tab-group__scroll-button--end {
-    border-bottom: solid var(--track-width) var(--track-color);
-  }
-
-  .tab-group--rtl:not(.tab-group--contained) .tab-group__scroll-button--start {
+  .tab-group--has-scroll-controls:not(.tab-group--contained) .tab-group__scroll-button {
     border-bottom: solid var(--track-width) var(--track-color);
-    border-top: none;
-  }
-
-  .tab-group--rtl:not(.tab-group--contained) .tab-group__scroll-button--end {
-    border-bottom: none;
-    border-top: solid var(--track-width) var(--track-color);
   }
 
   /**
@@ -250,4 +220,4 @@ var tab_group_custom_styles_default = css`
 export {
   tab_group_custom_styles_default
 };
-//# sourceMappingURL=chunk.XOXVVU5C.js.map
+//# sourceMappingURL=chunk.LBUMVFCE.js.map

package/dist/chunks/chunk.LBUMVFCE.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tab-group/tab-group.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /* stylelint-disable no-descending-specificity */\n  /* Write custom CSS here */\n  :host {\n    --track-width: var(--syn-border-width-small);\n    --track-color: var(--syn-panel-border-color);\n    --indicator-width: var(--syn-border-width-x-large);\n    --indicator-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));\n  }\n\n  /* we need to augment the size of the height of the tab-group__nav to make the focus outline and the hiding white border visible of the tab because of overflow-x value  */\n  .tab-group--top .tab-group__body {\n    position: relative;\n    top: calc(-1 * var(--syn-panel-border-width));\n  }\n\n  .tab-group--top .tab-group__nav {\n    padding: 0 0 var(--syn-panel-border-width) 0;\n  }\n\n  /**\n   * Indicator\n   */\n  .tab-group--top .tab-group__indicator {\n    border-bottom: solid var(--indicator-width) var(--indicator-color);\n  }\n\n  .tab-group--start .tab-group__indicator {\n    border-right: solid var(--indicator-width) var(--indicator-color);\n  }\n\n  .tab-group--end .tab-group__indicator {\n    border-inline-start: solid var(--indicator-width) var(--indicator-color);\n  }\n\n  /**\n   * Panel\n   */\n  .tab-group--top ::slotted(syn-tab-panel) {\n    --padding: var(--syn-spacing-large) 0;\n  }\n\n  .tab-group--start ::slotted(syn-tab-panel) {\n    --padding: 0 var(--syn-spacing-large);\n  }\n\n  .tab-group--end ::slotted(syn-tab-panel) {\n    --padding: 0 var(--syn-spacing-large);\n  }\n\n  /**\n   * Contained styling\n   */ \n  .tab-group--contained .tab-group__tabs {\n    border: none;\n  }\n\n  .tab-group--contained ::slotted(syn-tab-panel) {\n    --padding: var(--syn-spacing-large);\n\n    background-color: var(--syn-panel-background-color);\n    border: var(--syn-panel-border-width) solid var(--syn-panel-border-color);\n    border-radius: var(--syn-border-radius-medium);\n  }\n\n  /* Stretch the tab panel container for non-top placements, otherwise the borders are not drawn correctly */\n  .tab-group--contained:not(.tab-group--top) ::slotted(syn-tab-panel) {\n    height: 100%;\n  }\n\n  /* Draw the correct border radii of the panel depending on the placement and direction */\n  .tab-group--top.tab-group--contained:not(.tab-group--sharp):not(.tab-group--has-scroll-controls) ::slotted(syn-tab-panel:first-of-type),\n  .tab-group--start.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:first-of-type) {\n    border-start-start-radius: var(--syn-border-radius-none);\n  }\n\n  .tab-group--start.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:last-of-type) {\n    border-end-start-radius: var(--syn-border-radius-none);\n  }\n\n  .tab-group--end.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:last-of-type) {\n    border-end-end-radius: var(--syn-border-radius-none);\n  }\n\n  .tab-group--end.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:first-of-type) {\n    border-start-end-radius: var(--syn-border-radius-none);\n  }\n\n  .tab-group--contained .tab-group__indicator {\n    /* Remove the animation of the indicator */\n    transition: none;\n    \n    /* Needed, otherwise the indicator is hidden under the background of the tab */\n    z-index: 2;\n  }\n\n  /* Contained styling for tabs */\n  .tab-group--contained ::slotted(syn-tab) {\n    --background-color: var(--syn-panel-background-color);\n    --border-width: var(--syn-panel-border-width);\n\n    position: relative;\n    z-index: 1;\n  }\n\n  /* Top */\n  .tab-group--top.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab) {\n    --border-radius: var(--syn-border-radius-medium) var(--syn-border-radius-medium) var(--syn-border-radius-none) var(--syn-border-radius-none);\n  }\n\n  .tab-group--top.tab-group--contained ::slotted(syn-tab[active]) {\n    --border-color: var(--syn-panel-border-color) var(--syn-panel-border-color) var(--syn-panel-background-color);\n\n    /* We need to move the tab down, so the bottom border, hides parts of the border of the tab-group */\n    top: var(--syn-panel-border-width);\n  }\n\n  .tab-group--top.tab-group--contained ::slotted(syn-tab:not([active])) {\n    /*  We need to move down the non-active tabs also, so we don't get jumping of the tab text content */\n    top: var(--syn-panel-border-width);\n  }\n\n  /* Start & End with rtl */\n  .tab-group--start.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab),\n  .tab-group--end.tab-group--rtl.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab) {\n    --border-radius: var(--syn-border-radius-medium) var(--syn-border-radius-none) var(--syn-border-radius-none) var(--syn-border-radius-medium);\n  }\n\n  .tab-group--start.tab-group--contained ::slotted(syn-tab[active]),\n  .tab-group--end.tab-group--rtl.tab-group--contained ::slotted(syn-tab[active]) {\n    --border-color: var(--syn-panel-border-color) var(--syn-panel-background-color) var(--syn-panel-border-color)  var(--syn-panel-border-color) ;\n\n    /* We need to move the tab right, so the right border, hides parts of the border of the tab-group */\n    left: var(--syn-panel-border-width);\n    right: unset;\n  }\n\n  .tab-group--start.tab-group--contained ::slotted(syn-tab:not([active])),\n  .tab-group--end.tab-group--rtl.tab-group--contained ::slotted(syn-tab:not([active])) {\n    /*  We need to move right the non-active tabs also, so we don't get jumping of the tab text content */\n    left: var(--syn-panel-border-width);\n    right: unset;\n  }\n\n  /* End & Start with rtl */\n  .tab-group--end.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab),\n  .tab-group--start.tab-group--rtl.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab) {\n    --border-radius: var(--syn-border-radius-none) var(--syn-border-radius-medium) var(--syn-border-radius-medium) var(--syn-border-radius-none);\n  }\n\n  .tab-group--end.tab-group--contained ::slotted(syn-tab[active]),\n  .tab-group--start.tab-group--rtl.tab-group--contained ::slotted(syn-tab[active]) {\n    --border-color: var(--syn-panel-border-color) var(--syn-panel-border-color) var(--syn-panel-border-color) var(--syn-panel-background-color);\n\n    /* We need to move the tab left, so the left border, hides parts of the border of the tab-group */\n    left: unset;\n    right: var(--syn-panel-border-width);\n  }\n\n  .tab-group--end.tab-group--contained ::slotted(syn-tab:not([active])),\n  .tab-group--start.tab-group--rtl.tab-group--contained ::slotted(syn-tab:not([active])) {\n    /*  We need to move left the non-active tabs also, so we don't get jumping of the tab text content */\n    left: unset;\n    right: var(--syn-panel-border-width);\n  }\n\n\n  /**\n   * Sharp styling\n   */\n  .tab-group--sharp ::slotted(syn-tab-panel) {\n    border-radius: var(--syn-border-radius-none);\n  }\n\n\n  /**\n   * Scroll buttons\n   */\n  .tab-group--has-scroll-controls .tab-group__nav-container {\n    padding: 0 calc(var(--syn-spacing-x-large) + var( --syn-spacing-2x-small));\n  }\n\n  .tab-group__scroll-button {\n    /* we need to move the scroll buttons to the top, to align the borders with the border of the tab-group--nav  */\n    bottom: var(--syn-panel-border-width);\n    color: var(--syn-interactive-quiet-color, var(--syn-color-neutral-950));\n    font-size: var(--syn-font-size-medium);\n    width: calc(var(--syn-spacing-x-large) + var( --syn-spacing-2x-small));\n  }\n\n  .tab-group__scroll-button::part(base) {\n    padding: calc(var(--syn-spacing-small) - var(--syn-spacing-3x-small));\n  }\n\n  .tab-group--has-scroll-controls:not(.tab-group--contained) .tab-group__scroll-button {\n    border-bottom: solid var(--track-width) var(--track-color);\n  }\n\n  /**\n   * Shoelace 2.17 introduced a new attribute \"fixed-scroll-controls\".\n   * Per default, tab-groups now hide the scroll buttons when they are not needed.\n   * \"fixed-scroll-controls\" will keep the scroll buttons visible at all times,\n   * which is the default behavior of Synergy.\n   * For this reason, we make the buttons visible by default, but show them in a \"disabled\" state when they are not needed.\n   */\n  .tab-group--has-scroll-controls .tab-group__scroll-button--start--hidden,\n  .tab-group--has-scroll-controls .tab-group__scroll-button--end--hidden {\n    visibility: visible;\n  }\n\n  .tab-group--has-scroll-controls .tab-group__scroll-button--start--hidden::part(base),\n  .tab-group--has-scroll-controls .tab-group__scroll-button--end--hidden::part(base) {\n    opacity: var(--syn-input-disabled-opacity);\n    pointer-events: none;\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,kCAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.RUGNLIOD.js → chunk.LSTXIYCM.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.E3Z62YYT.js";
 import {
   SynIcon
-} from "./chunk.RTIAGXWJ.js";
+} from "./chunk.BTZ53ROB.js";
 import {
   enableDefaultSettings
 } from "./chunk.E5UUNP6E.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.BOLNLEU5.js";
+} from "./chunk.YMV5UUZV.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -144,4 +144,4 @@ SynIconButton = __decorateClass([
 export {
   SynIconButton
 };
-//# sourceMappingURL=chunk.RUGNLIOD.js.map
+//# sourceMappingURL=chunk.LSTXIYCM.js.map

package/dist/chunks/{chunk.4ZJHR7I4.js → chunk.LYDOPYXG.js}

@@ -1,6 +1,6 @@
 import {
   SynHeader
-} from "./chunk.SMQELY3O.js";
+} from "./chunk.KEZKD5TK.js";
 
 // src/components/header/header.ts
 var header_default = SynHeader;
@@ -9,4 +9,4 @@ SynHeader.define("syn-header");
 export {
   header_default
 };
-//# sourceMappingURL=chunk.4ZJHR7I4.js.map
+//# sourceMappingURL=chunk.LYDOPYXG.js.map

package/dist/chunks/{chunk.O3I25UGG.js → chunk.LYVILCS2.js}

@@ -1,6 +1,6 @@
 import {
   SynBadge
-} from "./chunk.BKZRDOQP.js";
+} from "./chunk.574CCTBO.js";
 
 // src/components/badge/badge.ts
 var badge_default = SynBadge;
@@ -9,4 +9,4 @@ SynBadge.define("syn-badge");
 export {
   badge_default
 };
-//# sourceMappingURL=chunk.O3I25UGG.js.map
+//# sourceMappingURL=chunk.LYVILCS2.js.map

package/dist/chunks/{chunk.WWOY2NAP.js → chunk.MSICZKUD.js}

@@ -1,6 +1,6 @@
 import {
   SynMenuLabel
-} from "./chunk.PHZOI247.js";
+} from "./chunk.ZMNFX2AU.js";
 
 // src/components/menu-label/menu-label.ts
 var menu_label_default = SynMenuLabel;
@@ -9,4 +9,4 @@ SynMenuLabel.define("syn-menu-label");
 export {
   menu_label_default
 };
-//# sourceMappingURL=chunk.WWOY2NAP.js.map
+//# sourceMappingURL=chunk.MSICZKUD.js.map

package/dist/chunks/{chunk.UUKAPXX5.js → chunk.N7Y7ZHLT.js}

@@ -1,9 +1,9 @@
 import {
   SynOption
-} from "./chunk.XMOGP2AY.js";
+} from "./chunk.NZEOBBK5.js";
 import {
   SynPopup
-} from "./chunk.XHYF5S54.js";
+} from "./chunk.QH76BBND.js";
 import {
   defaultOptionRenderer
 } from "./chunk.HVVPX2VA.js";
@@ -51,22 +51,22 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.RTIAGXWJ.js";
+} from "./chunk.BTZ53ROB.js";
+import {
+  watch
+} from "./chunk.BVZQ6QSY.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
 import {
   enableDefaultSettings
 } from "./chunk.E5UUNP6E.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.BOLNLEU5.js";
+} from "./chunk.YMV5UUZV.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -935,4 +935,4 @@ setDefaultAnimation("combobox.hide", {
 export {
   SynCombobox
 };
-//# sourceMappingURL=chunk.UUKAPXX5.js.map
+//# sourceMappingURL=chunk.N7Y7ZHLT.js.map

package/dist/chunks/{chunk.PYNC7LDU.js → chunk.NKIZN4PF.js}

@@ -4,18 +4,18 @@ import {
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
-import {
-  enableDefaultSettings
-} from "./chunk.E5UUNP6E.js";
 import {
   watch
 } from "./chunk.BVZQ6QSY.js";
+import {
+  enableDefaultSettings
+} from "./chunk.E5UUNP6E.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.BOLNLEU5.js";
+} from "./chunk.YMV5UUZV.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -138,4 +138,4 @@ SynRadioButton = __decorateClass([
 export {
   SynRadioButton
 };
-//# sourceMappingURL=chunk.PYNC7LDU.js.map
+//# sourceMappingURL=chunk.NKIZN4PF.js.map

package/dist/chunks/{chunk.JMMSJRM5.js → chunk.NREI75V5.js}

@@ -1,8 +1,6 @@
 // src/components/tab/tab.custom.styles.ts
 import { css } from "lit";
 var tab_custom_styles_default = css`
-  /* Write custom CSS here */
-
   :host {
     --background-color: none;
     --border-width: var(--syn-border-width-none);
@@ -48,14 +46,13 @@ var tab_custom_styles_default = css`
   }
 
   .tab:hover:not(.tab--disabled) {
-    color: var(--syn-color-primary-700);
+    color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-700));
   }
 
-  .tab.tab--active:not(.tab--disabled) {
+  .tab.tab--active:not(:hover):not(.tab--disabled) {
     color: var(--syn-typography-color-text);
   }
 
-
   /**
    * Closable
    */
@@ -64,7 +61,7 @@ var tab_custom_styles_default = css`
   }
 
   .tab__close-button {
-    color: var(--syn-color-neutral-500);
+    color: var(--syn-input-icon-icon-clearable-color, var(--syn-color-neutral-500));
     font-size: var(--syn-font-size-x-large);
     margin-inline-start: var(--syn-spacing-2x-small);
   }
@@ -74,7 +71,7 @@ var tab_custom_styles_default = css`
   }
 
   .tab__close-button::part(base):hover {
-    color: var(--syn-color-primary-700);
+    color: var(--syn-input-icon-icon-clearable-color-hover, var(--syn-color-primary-700));
   }
 
   .tab--active {
@@ -89,9 +86,14 @@ var tab_custom_styles_default = css`
     font-size: var(--syn-font-size-x-large);
     margin-inline-end: var(--syn-spacing-x-small);
   }
+
+  /* #969: Prevent interactive color when close button is hovered */
+  .tab.tab--closable:hover:has(.tab__close-button:hover) {
+    color: var(--syn-typography-color-text);
+  }
 `;
 
 export {
   tab_custom_styles_default
 };
-//# sourceMappingURL=chunk.JMMSJRM5.js.map
+//# sourceMappingURL=chunk.NREI75V5.js.map

package/dist/chunks/chunk.NREI75V5.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tab/tab.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --background-color: none;\n    --border-width: var(--syn-border-width-none);\n    --border-color: none;\n    --border-radius: var(--syn-border-radius-none);\n  }\n\n  .tab {\n    border-color: transparent;\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    color: var(--syn-typography-color-text);\n    font: var(--syn-body-small-bold);\n    min-height: var(--syn-spacing-2x-large);\n    padding: var(--syn-spacing-small) var(--syn-spacing-large);\n\n    /* Stretch the tabs so they are aligned to each other vertically and the focus width stays the same  */\n    width: 100%;\n  }\n\n\n  /** #429: Use token for opacity */\n  .tab.tab--disabled {\n    opacity: var(--syn-opacity-50);\n  }\n\n  /**\n   * Focus\n   */\n  :host(:focus-visible) {\n    outline-offset: calc(var(--syn-focus-ring-offset) * -1);\n  }\n\n  :host(:focus-visible:not(.tab--disabled)) {\n    color: var(--syn-typography-color-text);\n  }\n\n  @media (forced-colors: active) {\n    .tab.tab--active:not(.tab--disabled) {\n      outline-offset: calc(var(--syn-focus-ring-offset) * -1);\n    }\n  }\n\n  .tab:hover:not(.tab--disabled) {\n    color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-700));\n  }\n\n  .tab.tab--active:not(:hover):not(.tab--disabled) {\n    color: var(--syn-typography-color-text);\n  }\n\n  /**\n   * Closable\n   */\n  .tab.tab--closable {\n    padding: var(--syn-spacing-2x-small) var(--syn-spacing-large);\n  }\n\n  .tab__close-button {\n    color: var(--syn-input-icon-icon-clearable-color, var(--syn-color-neutral-500));\n    font-size: var(--syn-font-size-x-large);\n    margin-inline-start: var(--syn-spacing-2x-small);\n  }\n\n  .tab__close-button::part(base) {\n    padding: var(--syn-spacing-x-small);\n  }\n\n  .tab__close-button::part(base):hover {\n    color: var(--syn-input-icon-icon-clearable-color-hover, var(--syn-color-primary-700));\n  }\n\n  .tab--active {\n    background-color: var(--background-color);\n    border-color: var(--border-color);\n    border-style: solid;\n    border-width: var(--border-width);\n  }\n\n  /* Slotted icon style */\n  .tab ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  /* #969: Prevent interactive color when close button is hovered */\n  .tab.tab--closable:hover:has(.tab__close-button:hover) {\n    color: var(--syn-typography-color-text);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,4BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.UAF3TUNP.js → chunk.NXWNC7XV.js}

@@ -1,6 +1,6 @@
 import {
   SynProgressBar
-} from "./chunk.LRMT6SLW.js";
+} from "./chunk.R6CXN5G3.js";
 
 // src/components/progress-bar/progress-bar.ts
 var progress_bar_default = SynProgressBar;
@@ -9,4 +9,4 @@ SynProgressBar.define("syn-progress-bar");
 export {
   progress_bar_default
 };
-//# sourceMappingURL=chunk.UAF3TUNP.js.map
+//# sourceMappingURL=chunk.NXWNC7XV.js.map

package/dist/chunks/{chunk.XMOGP2AY.js → chunk.NZEOBBK5.js}

@@ -9,19 +9,19 @@ import {
 } from "./chunk.IVM3BGRH.js";
 import {
   SynIcon
-} from "./chunk.RTIAGXWJ.js";
-import {
-  LocalizeController
-} from "./chunk.OAQRCZOO.js";
+} from "./chunk.BTZ53ROB.js";
 import {
   watch
 } from "./chunk.BVZQ6QSY.js";
+import {
+  LocalizeController
+} from "./chunk.OAQRCZOO.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.BOLNLEU5.js";
+} from "./chunk.YMV5UUZV.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -186,4 +186,4 @@ __decorateClass([
 export {
   SynOption
 };
-//# sourceMappingURL=chunk.XMOGP2AY.js.map
+//# sourceMappingURL=chunk.NZEOBBK5.js.map

package/dist/chunks/{chunk.PXLDBMDP.js → chunk.OAPIFRL6.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioButton
-} from "./chunk.PYNC7LDU.js";
+} from "./chunk.NKIZN4PF.js";
 
 // src/components/radio-button/radio-button.ts
 var radio_button_default = SynRadioButton;
@@ -9,4 +9,4 @@ SynRadioButton.define("syn-radio-button");
 export {
   radio_button_default
 };
-//# sourceMappingURL=chunk.PXLDBMDP.js.map
+//# sourceMappingURL=chunk.OAPIFRL6.js.map

package/dist/chunks/{chunk.JNH6U2IR.js → chunk.OBAC5UL4.js}

@@ -1,6 +1,6 @@
 import {
   SynSpinner
-} from "./chunk.RYJ3GPVA.js";
+} from "./chunk.ODETUKGQ.js";
 import {
   FormControlController,
   validValidityState
@@ -17,22 +17,22 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.RTIAGXWJ.js";
+} from "./chunk.BTZ53ROB.js";
+import {
+  watch
+} from "./chunk.BVZQ6QSY.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
 import {
   enableDefaultSettings
 } from "./chunk.E5UUNP6E.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.BOLNLEU5.js";
+} from "./chunk.YMV5UUZV.js";
 import {
   __decorateClass
 } from "./chunk.Z4XV3SMG.js";
@@ -295,4 +295,4 @@ SynButton = __decorateClass([
 export {
   SynButton
 };
-//# sourceMappingURL=chunk.JNH6U2IR.js.map
+//# sourceMappingURL=chunk.OBAC5UL4.js.map

package/dist/chunks/{chunk.RYJ3GPVA.js → chunk.ODETUKGQ.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.BOLNLEU5.js";
+} from "./chunk.YMV5UUZV.js";
 
 // src/components/spinner/spinner.component.ts
 import { html } from "lit";
@@ -35,4 +35,4 @@ SynSpinner.styles = [component_styles_default, spinner_styles_default, spinner_c
 export {
   SynSpinner
 };
-//# sourceMappingURL=chunk.RYJ3GPVA.js.map
+//# sourceMappingURL=chunk.ODETUKGQ.js.map