@synergy-design-system/components 2.77.1 → 3.0.0

package/dist/chunks/{chunk.S74CFZ4Z.js → chunk.BL5JW7YS.js}

@@ -36,18 +36,18 @@ var option_custom_styles_default = css`
   }
 
   .option:not(.option--current) {
-    color: var(--syn-option-color, var(--syn-typography-color-text));
+    color: var(--syn-option-color);
   }
 
   .option--current,
   .option--current.option--hover:not(.option--disabled) {
-    background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));
-    color: var(--syn-option-color-active, var(--syn-typography-color-text-inverted));
+    background-color: var(--syn-option-background-color-active);
+    color: var(--syn-option-color-active);
   }
 
   .option--hover:not(.option--current):not(.option--disabled) {
-    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));
-    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));
+    background-color: var(--syn-option-background-color-hover);
+    color: var(--syn-option-color-hover);
   }
 
   /** #429: Use token for opacity */
@@ -56,8 +56,8 @@ var option_custom_styles_default = css`
   }
 
   .option--current.option--disabled {
-    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));
-    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));
+    background-color: var(--syn-option-background-color-hover);
+    color: var(--syn-option-color-hover);
   }
 
   .option__label {
@@ -65,7 +65,7 @@ var option_custom_styles_default = css`
   }
 
   .option__check {
-    color: var(--syn-option-check-color, var(--syn-color-primary-600));
+    color: var(--syn-option-check-color);
     font-size: var(--option-icon-size, var(--syn-spacing-large));
   }
 
@@ -75,11 +75,11 @@ var option_custom_styles_default = css`
 
   /* Invert the check mark when keyboard navigation is used */
   .option--current .option__check {
-    color: var(--syn-option-check-color-active, var(--syn-color-neutral-0));
+    color: var(--syn-option-check-color-active);
   }
 
   .option--hover:not(.option--current) .option__check {
-    color: var(--syn-option-check-color-hover, var(--syn-color-neutral-0));
+    color: var(--syn-option-check-color-hover);
   }
 
   /* Use larger spacing between icons and content */
@@ -94,18 +94,18 @@ var option_custom_styles_default = css`
   /* Set correct icon size when someone uses syn-icon in the slots */
   .option__prefix::slotted(syn-icon),
   .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color, var(--syn-typography-color-text));
+    color: var(--syn-option-icon-color);
     font-size: var(--option-icon-size, var(--syn-spacing-large));
   }
 
   .option--hover .option__prefix::slotted(syn-icon),
   .option--hover .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-hover, var(--syn-color-neutral-800));
+    color: var(--syn-option-icon-color-hover);
   }
 
   .option--current .option__prefix::slotted(syn-icon),
   .option--current .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-active, var(--syn-color-neutral-800));
+    color: var(--syn-option-icon-color-active);
   }
 
   /* This is needed for the highlight styling of the options in syn-combobox */
@@ -119,4 +119,4 @@ var option_custom_styles_default = css`
 export {
   option_custom_styles_default
 };
-//# sourceMappingURL=chunk.S74CFZ4Z.js.map
+//# sourceMappingURL=chunk.BL5JW7YS.js.map

package/dist/chunks/{chunk.S74CFZ4Z.js.map → chunk.BL5JW7YS.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/option/option.custom.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /**\n   * The syn-option is now able to adjust its height from a parent item\n   * This is done by exposing multiple css variables to the outside:\n   *\n   * --option-min-height (defaults to 48px) The minimal height of an element\n   * --option-padding (defaults to var(--syn-spacing-small) var(--syn-spacing-medium)) The padding to use\n   * --option-font-size (defaults to var(--syn-font-size-medium)) The font size to use\n   * --option-icon-size (defaults to var(--syn-spacing-large)) The size of the checkmark\n   * \n   * See below for usage of these variables\n   */\n  .option {\n    /*\n     * #988: Brand2025 defines a small gap between options\n     * and rounded corners. We achieve that using an border\n     * that simulates the gap using the menu background color.\n     */\n    border: solid var(--syn-panel-background-color);\n\n    /**\n     * Border Radius needs to be increased to cover the outline\n     * Note this also needs to take the following into account:\n     * - 2018 does not have a focus ring, so the border radius is as small as the border, essentially negating it to \"0\"\n     * - 2025 needs to adapt with another pixel to make it match the rounding of the focus ring\n     */\n    border-radius: calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 1px);\n    border-width: var(--option-inset-border-horizontal) var(--option-inset-border-vertical);\n    font-size: var(--option-font-size, var(--syn-font-size-medium));\n\n    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */\n    min-height: var(--option-min-height, var(--syn-input-height-medium));\n    padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));\n  }\n\n  .option:not(.option--current) {\n    color: var(--syn-option-color, var(--syn-typography-color-text));\n  }\n\n  .option--current,\n  .option--current.option--hover:not(.option--disabled) {\n    background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));\n    color: var(--syn-option-color-active, var(--syn-typography-color-text-inverted));\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled) {\n    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));\n    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));\n  }\n\n  /** #429: Use token for opacity */\n  .option--disabled {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  .option--current.option--disabled {\n    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));\n    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));\n  }\n\n  .option__label {\n    line-height: var(--syn-line-height-normal);\n  }\n\n  .option__check {\n    color: var(--syn-option-check-color, var(--syn-color-primary-600));\n    font-size: var(--option-icon-size, var(--syn-spacing-large));\n  }\n\n  .option .option__check {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  /* Invert the check mark when keyboard navigation is used */\n  .option--current .option__check {\n    color: var(--syn-option-check-color-active, var(--syn-color-neutral-0));\n  }\n\n  .option--hover:not(.option--current) .option__check {\n    color: var(--syn-option-check-color-hover, var(--syn-color-neutral-0));\n  }\n\n  /* Use larger spacing between icons and content */\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-small);\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Set correct icon size when someone uses syn-icon in the slots */\n  .option__prefix::slotted(syn-icon),\n  .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color, var(--syn-typography-color-text));\n    font-size: var(--option-icon-size, var(--syn-spacing-large));\n  }\n\n  .option--hover .option__prefix::slotted(syn-icon),\n  .option--hover .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-hover, var(--syn-color-neutral-800));\n  }\n\n  .option--current .option__prefix::slotted(syn-icon),\n  .option--current .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-active, var(--syn-color-neutral-800));\n  }\n\n  /* This is needed for the highlight styling of the options in syn-combobox */\n  .option__label::slotted(.syn-highlight-style) {\n    background-color: transparent;\n    color: unset;\n    font: var(--syn-body-medium-bold);\n  }\n`;\n"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /**\n   * The syn-option is now able to adjust its height from a parent item\n   * This is done by exposing multiple css variables to the outside:\n   *\n   * --option-min-height (defaults to 48px) The minimal height of an element\n   * --option-padding (defaults to var(--syn-spacing-small) var(--syn-spacing-medium)) The padding to use\n   * --option-font-size (defaults to var(--syn-font-size-medium)) The font size to use\n   * --option-icon-size (defaults to var(--syn-spacing-large)) The size of the checkmark\n   * \n   * See below for usage of these variables\n   */\n  .option {\n    /*\n     * #988: Brand2025 defines a small gap between options\n     * and rounded corners. We achieve that using an border\n     * that simulates the gap using the menu background color.\n     */\n    border: solid var(--syn-panel-background-color);\n\n    /**\n     * Border Radius needs to be increased to cover the outline\n     * Note this also needs to take the following into account:\n     * - 2018 does not have a focus ring, so the border radius is as small as the border, essentially negating it to \"0\"\n     * - 2025 needs to adapt with another pixel to make it match the rounding of the focus ring\n     */\n    border-radius: calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 1px);\n    border-width: var(--option-inset-border-horizontal) var(--option-inset-border-vertical);\n    font-size: var(--option-font-size, var(--syn-font-size-medium));\n\n    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */\n    min-height: var(--option-min-height, var(--syn-input-height-medium));\n    padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));\n  }\n\n  .option:not(.option--current) {\n    color: var(--syn-option-color);\n  }\n\n  .option--current,\n  .option--current.option--hover:not(.option--disabled) {\n    background-color: var(--syn-option-background-color-active);\n    color: var(--syn-option-color-active);\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled) {\n    background-color: var(--syn-option-background-color-hover);\n    color: var(--syn-option-color-hover);\n  }\n\n  /** #429: Use token for opacity */\n  .option--disabled {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  .option--current.option--disabled {\n    background-color: var(--syn-option-background-color-hover);\n    color: var(--syn-option-color-hover);\n  }\n\n  .option__label {\n    line-height: var(--syn-line-height-normal);\n  }\n\n  .option__check {\n    color: var(--syn-option-check-color);\n    font-size: var(--option-icon-size, var(--syn-spacing-large));\n  }\n\n  .option .option__check {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  /* Invert the check mark when keyboard navigation is used */\n  .option--current .option__check {\n    color: var(--syn-option-check-color-active);\n  }\n\n  .option--hover:not(.option--current) .option__check {\n    color: var(--syn-option-check-color-hover);\n  }\n\n  /* Use larger spacing between icons and content */\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-small);\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Set correct icon size when someone uses syn-icon in the slots */\n  .option__prefix::slotted(syn-icon),\n  .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color);\n    font-size: var(--option-icon-size, var(--syn-spacing-large));\n  }\n\n  .option--hover .option__prefix::slotted(syn-icon),\n  .option--hover .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-hover);\n  }\n\n  .option--current .option__prefix::slotted(syn-icon),\n  .option--current .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-active);\n  }\n\n  /* This is needed for the highlight styling of the options in syn-combobox */\n  .option__label::slotted(.syn-highlight-style) {\n    background-color: transparent;\n    color: unset;\n    font: var(--syn-body-medium-bold);\n  }\n`;\n"],
   "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.HS2BUHJR.js → chunk.BNHQTT5B.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.WSVB6XWI.js";
+} from "./chunk.JQ4NCOOB.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.HS2BUHJR.js.map
+//# sourceMappingURL=chunk.BNHQTT5B.js.map

package/dist/chunks/{chunk.77CVXMWD.js → chunk.BVV2XKW3.js}

@@ -2,7 +2,7 @@
 import { css } from "lit";
 var breadcrumb_item_custom_styles_default = css`
   .breadcrumb-item {
-    color: var(--syn-breadcrumb-color, var(--syn-color-neutral-500));
+    color: var(--syn-breadcrumb-color);
     font-size: var(--syn-font-size-x-small);
     font-weight: var(--syn-font-weight-semibold);
   }
@@ -80,4 +80,4 @@ var breadcrumb_item_custom_styles_default = css`
 export {
   breadcrumb_item_custom_styles_default
 };
-//# sourceMappingURL=chunk.77CVXMWD.js.map
+//# sourceMappingURL=chunk.BVV2XKW3.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/breadcrumb-item/breadcrumb-item.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .breadcrumb-item {\n    color: var(--syn-breadcrumb-color);\n    font-size: var(--syn-font-size-x-small);\n    font-weight: var(--syn-font-weight-semibold);\n  }\n\n  /**\n   * Make sure to remove the border radius.\n   * Without this, focus will be rounded\n   */\n  .breadcrumb-item__label {\n    border-radius: var(--syn-border-radius-none);\n  }\n\n  :host(:not(:last-of-type)) .breadcrumb-item {\n    font-weight: var(--syn-font-weight-normal);\n  }\n\n  :host(:not(:last-of-type)) .breadcrumb-item__label {\n    color: var(--syn-typography-color-text);\n  }\n\n  :host(:not(:last-of-type)) .breadcrumb-item__label:hover {\n    color: var(--syn-color-primary-600);\n  }\n\n  :host(:not(:last-of-type)) .breadcrumb-item__label:active {\n    color: var(--syn-color-primary-950);\n  }\n\n  .breadcrumb-item--has-prefix .breadcrumb-item__prefix {\n    margin-inline-end: var(--syn-spacing-2x-small);\n  }\n\n  .breadcrumb-item--has-suffix .breadcrumb-item__suffix {\n    margin-inline-start: var(--syn-spacing-2x-small);\n  }\n\n  /**\n   * Adjust color and font size to match Synergy's typography.\n   */\n  .breadcrumb-item--has-prefix .breadcrumb-item__prefix,\n  .breadcrumb-item--has-suffix .breadcrumb-item__suffix {\n    color: var(--syn-typography-color-text);\n    font-size: var(--syn-spacing-medium);\n  }\n\n  /**\n   * Make sure the color of the last item's prefix and suffix matches the text.\n   */\n  :host(:last-of-type) .breadcrumb-item--has-prefix .breadcrumb-item__prefix,\n  :host(:last-of-type) .breadcrumb-item--has-suffix .breadcrumb-item__suffix {\n    color: inherit;\n  }\n\n  .breadcrumb-item__separator {\n    font-size: var(--syn-spacing-medium);\n    margin: 0 var(--syn-spacing-x-small) 0 var(--syn-spacing-2x-small);\n  }\n\n  /**\n   * Make sure the direction of the chevron matches the direction of the text.\n   */\n  .breadcrumb-item__separator ::slotted(syn-icon.ltr) {\n    rotate: -90deg;\n  }\n\n  .breadcrumb-item__separator ::slotted(syn-icon.rtl) {\n    rotate: 90deg;\n  }\n\n  .breadcrumb-item__label--drop-down {\n    display: flex;\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,wCAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.5C3IFF3A.js → chunk.CDOWFAH2.js}

@@ -77,13 +77,13 @@ var file_styles_default = css`
    */
   .form-control--user-dragging:not([disabled]) .button::part(base) {
     background: none;
-    border-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
-    color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
+    border-color: var(--syn-interactive-emphasis-color-hover);
+    color: var(--syn-interactive-emphasis-color-hover);
   }
 
   /* Drop Area */
   .droparea {
-    --highlight-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    --highlight-color: var(--syn-interactive-emphasis-color);
 
     border: var(--syn-input-border-width) dashed var(--syn-input-border-color);
     border-radius: var(--syn-input-border-radius-medium);
@@ -93,7 +93,7 @@ var file_styles_default = css`
   }
 
   .droparea:focus-visible {
-    border: var(--syn-input-border-width) dashed var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    border: var(--syn-input-border-width) dashed var(--syn-interactive-emphasis-color);
     outline: var(--syn-focus-ring);
     outline-offset: var(--syn-focus-ring-offset);
   }
@@ -161,12 +161,12 @@ var file_styles_default = css`
 
   :host(:not([disabled])) .form-control--user-dragging .droparea {
     background: var(--syn-color-primary-50);
-    border: var(--syn-input-border-width) solid var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    border: var(--syn-input-border-width) solid var(--syn-interactive-emphasis-color);
     cursor: pointer;
   }
 
   :host(:not([disabled])) .droparea:not(:focus-visible):hover {
-    --highlight-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
+    --highlight-color: var(--syn-interactive-emphasis-color-hover);
 
     border: var(--syn-input-border-width) dashed var(--syn-input-border-color-hover);
     cursor: pointer;
@@ -182,4 +182,4 @@ var file_styles_default = css`
 export {
   file_styles_default
 };
-//# sourceMappingURL=chunk.5C3IFF3A.js.map
+//# sourceMappingURL=chunk.CDOWFAH2.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/file/file.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n  }\n\n  .input__control {\n    /**\n     * Visually hide the input type=file without display:none\n     * This is necessary for accessibility reasons and so the native html input validation popup \n     * is shown.\n     */\n    border: 0;\n    clip-path: inset(50%);\n    height: 1px;\n    margin: 0;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  .form-control--droparea .input__control {\n    /* move the input into the center, so the native validation popup is centered to the droparea */\n    left: 50%;\n  }\n\n  .form-control-input {\n    /* needed, so the native validation popup is centered correctly */\n    position: relative;\n  }\n\n  /* Regular Input with button only */\n  .button__wrapper {\n    align-items: center;\n    display: flex;\n    gap: var(--syn-input-spacing-medium);\n  }\n\n  .form-control--small .button__wrapper {\n    gap: var(--syn-input-spacing-small);\n  }\n\n  :host([size=\"large\"]) .button__wrapper {\n    gap: var(--syn-input-spacing-large);\n  }\n\n  /**\n   * The value of the chosen file(s) or the placeholder text\n   */\n  .input__value {\n    color: var(--syn-input-color);\n    font-size: var(--syn-input-label-font-size-medium);\n  }\n\n  .input__value.input__value--hidden {\n    display: none;\n  }\n\n  .input__value--placeholder {\n    color: var(--syn-input-help-text-color);\n  }\n\n  .form-control--small .input__value {\n    font-size: var(--syn-input-label-font-size-small);\n  }\n\n  .form-control--large .input__value {\n    font-size: var(--syn-input-label-font-size-large);\n  }\n\n  /**\n   * Special case for regular inputs:\n   * When the user uses drag and drop, highlight the button with the primary color\n   */\n  .form-control--user-dragging:not([disabled]) .button::part(base) {\n    background: none;\n    border-color: var(--syn-interactive-emphasis-color-hover);\n    color: var(--syn-interactive-emphasis-color-hover);\n  }\n\n  /* Drop Area */\n  .droparea {\n    --highlight-color: var(--syn-interactive-emphasis-color);\n\n    border: var(--syn-input-border-width) dashed var(--syn-input-border-color);\n    border-radius: var(--syn-input-border-radius-medium);\n    font: var(--syn-body-medium-regular);\n    padding: var(--syn-spacing-x-large) var(--syn-spacing-large);\n    transition: var(--syn-transition-medium) background;\n  }\n\n  .droparea:focus-visible {\n    border: var(--syn-input-border-width) dashed var(--syn-interactive-emphasis-color);\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  /* Adjust the highlight to match an inactive item */\n  :host([disabled]) .droparea {\n    --highlight-color: var(--syn-color-neutral-600);\n  }\n\n  :host([disabled]) .input__value {\n    display: none;\n  }\n\n  .droparea__background {\n    align-items: center;\n    display: flex;\n    gap: var(--syn-spacing-x-small);\n    padding: var(--syn-spacing-x-small) var(--syn-spacing-medium);\n  }\n\n  .droparea__icon {\n    align-items: center;\n    color: var(--highlight-color);\n    display: flex;\n    font-size: var(--syn-spacing-3x-large);\n  }\n\n  .droparea__text {\n    display: flex;\n    flex-direction: column;\n    gap: var(--syn-spacing-3x-small);\n    margin: 0;\n  }\n\n  .droparea__text strong {\n    color: var(--highlight-color);\n    font-weight: var(--syn-font-weight-bold);\n  }\n\n  /* Sizes */\n  /* stylelint-disable-next-line no-descending-specificity */\n  .form-control--small .droparea {\n    font: var(--syn-body-small-regular);\n  }\n\n  .form-control--small .droparea__icon {\n    font-size: var(--syn-spacing-2x-large)\n  }\n\n  /* stylelint-disable-next-line no-descending-specificity */\n  .form-control--large .droparea {\n    font: var(--syn-body-large-regular);\n  }\n\n  .form-control--large .droparea__icon {\n    font-size: var(--syn-spacing-4x-large)\n  }\n\n  /* Disabled Styles */\n  :host([disabled]) .droparea,\n  :host([disabled]) .input__value {\n    cursor: not-allowed;\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  :host(:not([disabled])) .form-control--user-dragging .droparea {\n    background: var(--syn-color-primary-50);\n    border: var(--syn-input-border-width) solid var(--syn-interactive-emphasis-color);\n    cursor: pointer;\n  }\n\n  :host(:not([disabled])) .droparea:not(:focus-visible):hover {\n    --highlight-color: var(--syn-interactive-emphasis-color-hover);\n\n    border: var(--syn-input-border-width) dashed var(--syn-input-border-color-hover);\n    cursor: pointer;\n  }\n\n  /* Validation */\n  /* stylelint-disable-next-line no-descending-specificity */\n  :host([data-user-invalid]:not([disabled])) .droparea {\n    border: var(--syn-input-border-width) dashed var(--syn-input-focus-ring-error);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,sBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.MV23LMED.js → chunk.D5GEYHUG.js}

@@ -1,6 +1,6 @@
 import {
   spinner_custom_styles_default
-} from "./chunk.4WQZFNSE.js";
+} from "./chunk.WQMTAEYE.js";
 import {
   spinner_styles_default
 } from "./chunk.JLXCLATV.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QF6ODD6S.js";
+} from "./chunk.JG7YXWHG.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.MV23LMED.js.map
+//# sourceMappingURL=chunk.D5GEYHUG.js.map

package/dist/chunks/{chunk.357ZOX56.js → chunk.DHT3ZN7B.js}

@@ -1,37 +1,37 @@
 import {
   SubmenuController
-} from "./chunk.V4HPWQE7.js";
+} from "./chunk.KW5TWA5Y.js";
 import {
   menu_item_custom_styles_default
-} from "./chunk.OAAB4YO4.js";
+} from "./chunk.UNYO3GI7.js";
 import {
   menu_item_styles_default
 } from "./chunk.FSWTBNSI.js";
 import {
   SynPopup
-} from "./chunk.64KVEIIA.js";
+} from "./chunk.5QGW4QZT.js";
 import {
   SynSpinner
-} from "./chunk.MV23LMED.js";
+} from "./chunk.D5GEYHUG.js";
 import {
   HasSlotController,
   getTextContent
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.SP7ULWRO.js";
-import {
-  LocalizeController
-} from "./chunk.OAQRCZOO.js";
+} from "./chunk.GJIDYO3Z.js";
 import {
   watch
 } from "./chunk.JE5Y2YD7.js";
+import {
+  LocalizeController
+} from "./chunk.OAQRCZOO.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QF6ODD6S.js";
+} from "./chunk.JG7YXWHG.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -241,4 +241,4 @@ SynMenuItem = __decorateClass([
 export {
   SynMenuItem
 };
-//# sourceMappingURL=chunk.357ZOX56.js.map
+//# sourceMappingURL=chunk.DHT3ZN7B.js.map

package/dist/chunks/{chunk.VLVWVJUC.js → chunk.DRLFKWVC.js}

@@ -1,6 +1,6 @@
 import {
   SynRangeTick
-} from "./chunk.IOMYSP25.js";
+} from "./chunk.4FRKK5XY.js";
 
 // src/components/range-tick/range-tick.ts
 var range_tick_default = SynRangeTick;
@@ -9,4 +9,4 @@ SynRangeTick.define("syn-range-tick");
 export {
   range_tick_default
 };
-//# sourceMappingURL=chunk.VLVWVJUC.js.map
+//# sourceMappingURL=chunk.DRLFKWVC.js.map

package/dist/chunks/{chunk.ZHJLUYXA.js → chunk.DXVTZKXX.js}

@@ -1,6 +1,6 @@
 import {
   SynCombobox
-} from "./chunk.VKHKZ3ML.js";
+} from "./chunk.5F5Y2RD6.js";
 
 // src/components/combobox/combobox.ts
 var combobox_default = SynCombobox;
@@ -9,4 +9,4 @@ SynCombobox.define("syn-combobox");
 export {
   combobox_default
 };
-//# sourceMappingURL=chunk.ZHJLUYXA.js.map
+//# sourceMappingURL=chunk.DXVTZKXX.js.map

package/dist/chunks/{chunk.UCLYCASW.js → chunk.EHZBQTCT.js}

@@ -33,7 +33,7 @@ var dialog_custom_styles_default = css`
   /* Overlay Background */
   .dialog__overlay {
     /* #946: Add background blur for sick 2025 */
-    backdrop-filter: blur(var(--syn-overlay-background-blur, 0));
+    backdrop-filter: blur(var(--syn-overlay-background-blur));
   }
 
   /**
@@ -62,4 +62,4 @@ var dialog_custom_styles_default = css`
 export {
   dialog_custom_styles_default
 };
-//# sourceMappingURL=chunk.UCLYCASW.js.map
+//# sourceMappingURL=chunk.EHZBQTCT.js.map

package/dist/chunks/{chunk.UCLYCASW.js.map → chunk.EHZBQTCT.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/dialog/dialog.custom.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    /**\n     * Used as the default padding for the dialog title\n     */\n    --header-spacing: var(--syn-spacing-large) var(--syn-spacing-x-small) var(--syn-spacing-large) var(--syn-spacing-large);\n\n    /**\n     * Defines the default body spacing\n     */\n    --body-spacing: var(--syn-spacing-medium) var(--syn-spacing-large);\n\n    /**\n     * Defines the default footer spacing\n     */\n    --footer-spacing: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large) var(--syn-spacing-medium);\n  }\n\n  .dialog__panel {\n    border: var(--syn-spacing-4x-small) solid var(--syn-panel-border-color);\n    border-radius: var(--syn-border-radius-none);\n    box-shadow: var(--syn-shadow-large);\n  }\n\n  .dialog__header-actions {\n    align-items: flex-start;\n    gap: var(--syn-spacing-x-small);\n    padding: var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-large) 0;\n  }\n\n  /* Overlay Background */\n  .dialog__overlay {\n    /* #946: Add background blur for sick 2025 */\n    backdrop-filter: blur(var(--syn-overlay-background-blur, 0));\n  }\n\n  /**\n   * We need this to make sure we are big enough as defined in the layout\n   * When omitting this statement, we will get rounding problems via line-height\n   */\n  .dialog__title,\n  .dialog__header-actions {\n    min-height: 88px;\n  }\n\n  .dialog__header-actions syn-icon-button,\n  .dialog__header-actions ::slotted(syn-icon-button) {\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  .dialog__title {\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-x-large);\n    font-weight: var(--syn-font-weight-bold);\n    line-height: var(--syn-line-height-normal);\n  }\n`;\n"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    /**\n     * Used as the default padding for the dialog title\n     */\n    --header-spacing: var(--syn-spacing-large) var(--syn-spacing-x-small) var(--syn-spacing-large) var(--syn-spacing-large);\n\n    /**\n     * Defines the default body spacing\n     */\n    --body-spacing: var(--syn-spacing-medium) var(--syn-spacing-large);\n\n    /**\n     * Defines the default footer spacing\n     */\n    --footer-spacing: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large) var(--syn-spacing-medium);\n  }\n\n  .dialog__panel {\n    border: var(--syn-spacing-4x-small) solid var(--syn-panel-border-color);\n    border-radius: var(--syn-border-radius-none);\n    box-shadow: var(--syn-shadow-large);\n  }\n\n  .dialog__header-actions {\n    align-items: flex-start;\n    gap: var(--syn-spacing-x-small);\n    padding: var(--syn-spacing-large) var(--syn-spacing-small) var(--syn-spacing-large) 0;\n  }\n\n  /* Overlay Background */\n  .dialog__overlay {\n    /* #946: Add background blur for sick 2025 */\n    backdrop-filter: blur(var(--syn-overlay-background-blur));\n  }\n\n  /**\n   * We need this to make sure we are big enough as defined in the layout\n   * When omitting this statement, we will get rounding problems via line-height\n   */\n  .dialog__title,\n  .dialog__header-actions {\n    min-height: 88px;\n  }\n\n  .dialog__header-actions syn-icon-button,\n  .dialog__header-actions ::slotted(syn-icon-button) {\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  .dialog__title {\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-x-large);\n    font-weight: var(--syn-font-weight-bold);\n    line-height: var(--syn-line-height-normal);\n  }\n`;\n"],
   "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.KZP6W6WX.js → chunk.EIJX4T2G.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.G4URZQCL.js";
 import {
   SynButtonGroup
-} from "./chunk.IRQZZURK.js";
+} from "./chunk.MM3NO6GS.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -20,18 +20,18 @@ import {
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
-import {
-  enableDefaultSettings
-} from "./chunk.ZNNZXEP4.js";
 import {
   watch
 } from "./chunk.JE5Y2YD7.js";
+import {
+  enableDefaultSettings
+} from "./chunk.KSWDM4HW.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QF6ODD6S.js";
+} from "./chunk.JG7YXWHG.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -369,4 +369,4 @@ SynRadioGroup = __decorateClass([
 export {
   SynRadioGroup
 };
-//# sourceMappingURL=chunk.KZP6W6WX.js.map
+//# sourceMappingURL=chunk.EIJX4T2G.js.map

package/dist/chunks/{chunk.XASOHJYY.js → chunk.EMTWFPA4.js}

@@ -1,6 +1,6 @@
 import {
   SynDivider
-} from "./chunk.I42ZMXUL.js";
+} from "./chunk.F4TDCDGD.js";
 
 // src/components/divider/divider.ts
 var divider_default = SynDivider;
@@ -9,4 +9,4 @@ SynDivider.define("syn-divider");
 export {
   divider_default
 };
-//# sourceMappingURL=chunk.XASOHJYY.js.map
+//# sourceMappingURL=chunk.EMTWFPA4.js.map

package/dist/chunks/{chunk.I42ZMXUL.js → chunk.F4TDCDGD.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QF6ODD6S.js";
+} from "./chunk.JG7YXWHG.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -43,4 +43,4 @@ __decorateClass([
 export {
   SynDivider
 };
-//# sourceMappingURL=chunk.I42ZMXUL.js.map
+//# sourceMappingURL=chunk.F4TDCDGD.js.map

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

@@ -7,7 +7,7 @@ var tab_group_custom_styles_default = css`
     --track-width: var(--syn-border-width-small);
     --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));
+    --indicator-color: var(--syn-interactive-emphasis-color);
   }
 
   /* 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  */
@@ -185,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-interactive-quiet-color, var(--syn-color-neutral-950));
+    color: var(--syn-interactive-quiet-color);
     font-size: var(--syn-font-size-medium);
     width: calc(var(--syn-spacing-x-large) + var( --syn-spacing-2x-small));
   }
@@ -220,4 +220,4 @@ var tab_group_custom_styles_default = css`
 export {
   tab_group_custom_styles_default
 };
-//# sourceMappingURL=chunk.LBUMVFCE.js.map
+//# sourceMappingURL=chunk.FHTQSNCX.js.map

package/dist/chunks/chunk.FHTQSNCX.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);\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);\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.DAELIXNV.js → chunk.FVYPYWJH.js}

@@ -1,18 +1,18 @@
+import {
+  watch
+} from "./chunk.JE5Y2YD7.js";
 import {
   accordion_styles_default
 } from "./chunk.WNUZ6LH4.js";
 import {
   enableDefaultSettings
-} from "./chunk.ZNNZXEP4.js";
-import {
-  watch
-} from "./chunk.JE5Y2YD7.js";
+} from "./chunk.KSWDM4HW.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QF6ODD6S.js";
+} from "./chunk.JG7YXWHG.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -111,4 +111,4 @@ SynAccordion = __decorateClass([
 export {
   SynAccordion
 };
-//# sourceMappingURL=chunk.DAELIXNV.js.map
+//# sourceMappingURL=chunk.FVYPYWJH.js.map

package/dist/chunks/{chunk.5EC6B57G.js → chunk.GCTLPTMT.js}

@@ -4,8 +4,8 @@ var progress_ring_custom_styles_default = css`
   :host {
     --size: 120px;
     --track-width: var(--syn-spacing-x-small);
-    --track-color: var(--syn-progress-track-color, var(--syn-color-neutral-200));
-    --indicator-color: var(--syn-progress-indicator-color, var(--syn-color-primary-600));
+    --track-color: var(--syn-progress-track-color);
+    --indicator-color: var(--syn-progress-indicator-color);
   }
 
   .progress-ring__indicator {
@@ -21,4 +21,4 @@ var progress_ring_custom_styles_default = css`
 export {
   progress_ring_custom_styles_default
 };
-//# sourceMappingURL=chunk.5EC6B57G.js.map
+//# sourceMappingURL=chunk.GCTLPTMT.js.map

package/dist/chunks/{chunk.5EC6B57G.js.map → chunk.GCTLPTMT.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/progress-ring/progress-ring.custom.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --size: 120px;\n    --track-width: var(--syn-spacing-x-small);\n    --track-color: var(--syn-progress-track-color, var(--syn-color-neutral-200));\n    --indicator-color: var(--syn-progress-indicator-color, var(--syn-color-primary-600));\n  }\n\n  .progress-ring__indicator {\n    stroke-linecap: initial;\n  }\n\n  .progress-ring__label {\n    color: var(--syn-typography-color-text);\n    font: var(--syn-heading-x-large);\n  }\n`;\n"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --size: 120px;\n    --track-width: var(--syn-spacing-x-small);\n    --track-color: var(--syn-progress-track-color);\n    --indicator-color: var(--syn-progress-indicator-color);\n  }\n\n  .progress-ring__indicator {\n    stroke-linecap: initial;\n  }\n\n  .progress-ring__label {\n    color: var(--syn-typography-color-text);\n    font: var(--syn-heading-x-large);\n  }\n`;\n"],
   "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,sCAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/chunks/{chunk.2DGMS4FV.js → chunk.GFX23JLA.js}

@@ -39,7 +39,7 @@ var details_custom_styles_default = css`
    * we have to adjust the rotation of the icon when the details is open.
    */
   .details--open .details__summary-icon {
-    rotate: var(--syn-details-open-rotation, 360deg);
+    rotate: var(--syn-details-open-rotation);
   }
 
   /**
@@ -135,4 +135,4 @@ var details_custom_styles_default = css`
 export {
   details_custom_styles_default
 };
-//# sourceMappingURL=chunk.2DGMS4FV.js.map
+//# sourceMappingURL=chunk.GFX23JLA.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/details/details.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .details {\n    background-color: unset;\n    border-color: var(--syn-panel-border-color);\n    border-radius: var(--syn-border-radius-none);\n    border-width: 0 0 var(--syn-border-width-small);\n  }\n\n  /** #429: Use token for opacity */\n  .details--disabled {\n    opacity: var(--syn-opacity-50);\n  }\n\n  .details__summary-icon {\n    align-self: flex-start;\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-spacing-large);\n\n    /**\n     * As we are using an alignment of \"start\"  instead of \"center\" make sure\n     * the arrow starts on the same visual line as the first line of headline text\n     */\n    position: relative;\n    top: 2px;\n  }\n\n  .details .details__summary {\n    color: var(--syn-typography-color-text);\n  }\n\n  .details__header {\n    gap: var(--syn-spacing-medium);\n  }\n\n  /**\n   * As we are using top/down arrows for the details element,\n   * we have to adjust the rotation of the icon when the details is open.\n   */\n  .details--open .details__summary-icon {\n    rotate: var(--syn-details-open-rotation);\n  }\n\n  /**\n   * Adjustments for medium variant\n   */\n  .details--size-medium .details__header {\n    padding: var(--syn-spacing-medium-large) 0;\n  }\n\n  .details--size-medium .details__content {\n    font-size: var(--syn-font-size-small);\n    line-height: var(--syn-line-height-normal);\n    padding: var(--syn-spacing-medium) 0 var(--syn-spacing-large);\n  }\n\n  .details--size-medium .details__summary {\n    font: var(--syn-body-medium-bold);\n  }\n\n  .details--size-medium .details__summary::slotted(syn-icon) {\n    /* Avoid shrinking of the icon, if the text content of the summary is very long and multi line */\n    flex-shrink: 0;\n    font-size: var(--syn-spacing-large);\n    margin-right: var(--syn-spacing-small);\n  }\n\n  /**\n   * Adjustment for large variant\n   */\n  .details--size-large .details__header {\n    padding: var(--syn-spacing-large) 0;\n  }\n\n  .details--size-large .details__content {\n    font-size: var(--syn-font-size-medium);\n    line-height: var(--syn-line-height-normal);\n    padding: var(--syn-spacing-medium-large) 0 var(--syn-spacing-large);\n  }\n\n  .details--size-large .details__summary {\n    font: var(--syn-body-large-bold);\n  }\n\n  .details--size-large .details__summary-icon {\n    font-size: var(--syn-spacing-x-large);\n  }\n\n  .details--size-large .details__summary::slotted(syn-icon) {\n    /* Avoid shrinking of the icon, if the text content of the summary is very long and multi line */\n    flex-shrink: 0;\n    font-size: var(--syn-spacing-x-large);\n    margin-right: var(--syn-spacing-small);\n  }\n\n  /**\n   * Add a visually visible hover effect to the summary element\n   */\n  .details:not(.details--disabled) .details__header:hover .details__summary,\n  .details:not(.details--disabled) .details__header:hover .details__summary-icon {\n    color: var(--syn-color-primary-700);\n  }\n\n  /**\n   *  Contained style\n   */\n  .details--contained {\n    background-color: var(--syn-panel-background-color);\n    border-radius: var(--syn-border-radius-medium);\n    border-width: var(--syn-panel-border-width);\n  }\n\n  .details--contained .details__header:focus-visible {\n    border-radius: var(--syn-border-radius-medium);\n  }\n\n  .details--size-medium.details--contained .details__header {\n    padding: var(--syn-spacing-medium-large) var(--syn-spacing-large);\n  }\n\n  .details--size-medium.details--contained .details__content {\n    padding: var(--syn-spacing-medium) var(--syn-spacing-large) var(--syn-spacing-large);\n  }\n\n  .details--size-large.details--contained .details__header {\n    padding: var(--syn-spacing-large);\n  }\n\n  .details--size-large.details--contained .details__content {\n    padding: var(--syn-spacing-medium-large) var(--syn-spacing-large) var(--syn-spacing-large);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,gCAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.SP7ULWRO.js → chunk.GJIDYO3Z.js}

@@ -2,7 +2,7 @@ import {
   getIconLibrary,
   unwatchIcon,
   watchIcon
-} from "./chunk.ZUQ225FP.js";
+} from "./chunk.34V3QOIQ.js";
 import {
   icon_custom_styles_default
 } from "./chunk.PJO6TM3T.js";
@@ -17,7 +17,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QF6ODD6S.js";
+} from "./chunk.JG7YXWHG.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -191,4 +191,4 @@ __decorateClass([
 export {
   SynIcon
 };
-//# sourceMappingURL=chunk.SP7ULWRO.js.map
+//# sourceMappingURL=chunk.GJIDYO3Z.js.map