@synergy-design-system/components 2.77.0 → 3.0.0

package/dist/chunks/{chunk.OAAB4YO4.js → chunk.UNYO3GI7.js}

@@ -31,7 +31,7 @@ var menu_item_custom_styles_default = css`
     /* Border Radius needs to be increased to cover the outline */
     border-radius: calc(var(--syn-focus-ring-border-radius) + var(--menuitem-inset-border-vertical));
     border-width: var(--menuitem-inset-border-horizontal) var(--menuitem-inset-border-vertical);
-    color: var(--syn-option-color, var(--syn-typography-color-text));
+    color: var(--syn-option-color);
     font-size: var(--menuitem-font-size);
 
     /* Height is dependent on line-height of .option__label, which does not fit completely to layout */
@@ -40,7 +40,7 @@ var menu_item_custom_styles_default = css`
   }
 
   :host(:focus-visible) .menu-item {
-    background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));
+    background-color: var(--syn-option-background-color-active);
   }
 
   /** #429: Use token for opacity */
@@ -64,26 +64,26 @@ var menu_item_custom_styles_default = css`
    */
   .menu-item .menu-item__prefix::slotted(syn-icon),
   .menu-item .menu-item__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color, var(--syn-typography-color-text));
+    color: var(--syn-option-icon-color);
     font-size: var(--syn-font-size-x-large);
   }
 
   :host(:hover) .menu-item .menu-item__prefix::slotted(syn-icon),
   :host(:hover) .menu-item__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-hover, var(--syn-typography-color-text-inverted));
+    color: var(--syn-option-icon-color-hover);
   }
 
   :host(:focus-visible) .menu-item .menu-item__prefix::slotted(syn-icon),
   :host(:focus-visible) .menu-item .menu-item__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-active, var(--syn-typography-color-text-inverted));
+    color: var(--syn-option-icon-color-active);
   }
 
   /* Adjust background and text color for focused elements */
   /* stylelint-disable selector-not-notation, plugin/no-unsupported-browser-features */
   :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
   .menu-item--submenu-expanded {
-    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);
   }
   /* stylelint-enable selector-not-notation, plugin/no-unsupported-browser-features */
 
@@ -106,7 +106,7 @@ var menu_item_custom_styles_default = css`
   }
 
   .menu-item .menu-item__check {
-    color: var(--syn-option-check-color, var(--syn-color-primary-600));
+    color: var(--syn-option-check-color);
     margin-inline-end: var(--syn-spacing-small);
   }
 
@@ -121,11 +121,11 @@ var menu_item_custom_styles_default = css`
    * Make sure the checkbox is also visible when the item is active
    */
   :host(:focus-visible) .menu-item--checked .menu-item__check {
-    color: var(--syn-option-check-color-active, var(--syn-color-neutral-0));
+    color: var(--syn-option-check-color-active);
   }
 
   :host(:hover) .menu-item--checked .menu-item__check {
-    color: var(--syn-option-check-color-hover, var(--syn-color-neutral-0));
+    color: var(--syn-option-check-color-hover);
   }
 
   /**
@@ -159,7 +159,7 @@ var menu_item_custom_styles_default = css`
   .menu-item--loading syn-spinner {
     --track-width: 2px;
 
-    color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-700));
+    color: var(--syn-interactive-emphasis-color);
     font-size: var(--syn-font-size-medium);
     left: calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));
   }
@@ -194,4 +194,4 @@ var menu_item_custom_styles_default = css`
 export {
   menu_item_custom_styles_default
 };
-//# sourceMappingURL=chunk.OAAB4YO4.js.map
+//# sourceMappingURL=chunk.UNYO3GI7.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/menu-item/menu-item.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    /* Custom override for hiding the checkmark in menus it is not needed */\n    --display-checkmark: flex;\n\n    /**\n     * Default size settings for menu-item\n     * This prepares the custom sizes that we will add later on\n     * @see https://github.com/synergy-design-system/design/issues/277\n     */\n    --menuitem-inset-border-horizontal: var(--syn-spacing-2x-small);\n    --menuitem-inset-border-vertical: calc(var(--syn-spacing-x-small) - 1px);\n    --menuitem-min-height: var(--syn-input-height-medium);\n    --menuitem-padding: var(--syn-input-spacing-medium);\n    --menuitem-font-size: var(--syn-input-font-size-medium);\n    --menuitem-icon-size: var(--syn-spacing-large);\n  }\n\n  .menu-item {\n    align-items: center;\n\n    /*\n     * #1127: 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    /* Border Radius needs to be increased to cover the outline */\n    border-radius: calc(var(--syn-focus-ring-border-radius) + var(--menuitem-inset-border-vertical));\n    border-width: var(--menuitem-inset-border-horizontal) var(--menuitem-inset-border-vertical);\n    color: var(--syn-option-color);\n    font-size: var(--menuitem-font-size);\n\n    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */\n    min-height: var(--menuitem-min-height, var(--syn-input-height-medium));\n    padding: 0 calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));\n  }\n\n  :host(:focus-visible) .menu-item {\n    background-color: var(--syn-option-background-color-active);\n  }\n\n  /** #429: Use token for opacity */\n  .menu-item.menu-item--disabled {\n    opacity: var(--syn-opacity-50);\n  }\n\n  /**\n   * Handling for slotted prefix and suffix\n   */\n  .menu-item .menu-item__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-small);\n  }\n\n  .menu-item .menu-item__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /**\n   * Set the default font size to make icons appear correct\n   */\n  .menu-item .menu-item__prefix::slotted(syn-icon),\n  .menu-item .menu-item__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color);\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  :host(:hover) .menu-item .menu-item__prefix::slotted(syn-icon),\n  :host(:hover) .menu-item__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-hover);\n  }\n\n  :host(:focus-visible) .menu-item .menu-item__prefix::slotted(syn-icon),\n  :host(:focus-visible) .menu-item .menu-item__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-active);\n  }\n\n  /* Adjust background and text color for focused elements */\n  /* stylelint-disable selector-not-notation, plugin/no-unsupported-browser-features */\n  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,\n  .menu-item--submenu-expanded {\n    background-color: var(--syn-option-background-color-hover);\n    color: var(--syn-option-color-hover);\n  }\n  /* stylelint-enable selector-not-notation, plugin/no-unsupported-browser-features */\n\n  /**\n   * Adjust the size of icons\n   */\n  .menu-item .menu-item__chevron,\n  .menu-item .menu-item__check {\n    display: var(--display-checkmark);\n    font-size: var(--syn-font-size-x-large);\n    width: var(--syn-font-size-x-large);\n  }\n\n  /**\n   * This makes sure the chevron does not take any space if we do not have children\n   */\n  .menu-item .menu-item__chevron {\n    display: none;\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  .menu-item .menu-item__check {\n    color: var(--syn-option-check-color);\n    margin-inline-end: var(--syn-spacing-small);\n  }\n\n  /**\n   * When in loading state, do not show the checkmark as it would bleed through\n   */\n  .menu-item--loading .menu-item__check {\n    visibility: hidden;\n  }\n\n  /**\n   * Make sure the checkbox is also visible when the item is active\n   */\n  :host(:focus-visible) .menu-item--checked .menu-item__check {\n    color: var(--syn-option-check-color-active);\n  }\n\n  :host(:hover) .menu-item--checked .menu-item__check {\n    color: var(--syn-option-check-color-hover);\n  }\n\n  /**\n   * Special handling for the submenu chevron:\n   * We are using the \"chevron-down\" icon per default as\n   * we do not want all chevrons to be part of the bundle\n   * Therefore, we have to transform it into the right direction\n   */\n  .menu-item .menu-item__chevron syn-icon {\n    transform: rotate(-90deg);\n  }\n\n  .menu-item--rtl .menu-item__chevron syn-icon {\n    transform: rotate(90deg);\n  }\n\n  .menu-item.menu-item--loading *:not(syn-spinner) {\n    opacity: var(--syn-opacity-50);\n  }\n\n  /**\n   * Make sure to show the chevron if there are children\n   */\n  .menu-item--has-submenu .menu-item__chevron {\n    display: flex;\n  }\n\n  /**\n   * Adjustments for the spinner in loading state\n   */\n  .menu-item--loading syn-spinner {\n    --track-width: 2px;\n\n    color: var(--syn-interactive-emphasis-color);\n    font-size: var(--syn-font-size-medium);\n    left: calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));\n  }\n\n  /**\n   * Highlight checked items\n   */\n  .menu-item--checked .menu-item__label {\n    font-weight: var(--syn-font-weight-semibold);\n  }\n\n  /* Needed if we do not show the checkmark */\n  :host(:not([type=\"checkmark\"]):not([loading])) .menu-item__label {\n    min-height: var(--syn-font-size-x-large);\n  }\n\n  /* #1131: Make sure that slotted menus do show the correct border radius */\n  syn-popup::part(popup) {\n    border-radius: var(--syn-input-border-radius-medium);\n  }\n\n  /**\n   * #1009: Adjust the position for submenus when they are opened to the left, too.\n   * This works because the data-current-placement attribute is set on the popup accordingly.\n   * We do not use the actual placement attribute, because it does not update when the placement changes\n   */\n  syn-popup[data-current-placement^=\"left\"]::part(popup) {\n    margin-left: calc(-1 * var(--submenu-offset));\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;",
+  "names": []
+}

package/dist/chunks/{chunk.2LRU3I3N.js → chunk.UPDHOWDW.js}

@@ -1,6 +1,6 @@
 import {
   SynergyElement
-} from "./chunk.3THJTCRO.js";
+} from "./chunk.JG7YXWHG.js";
 
 // src/components/validate/utility.ts
 var WhitelistedSynergyFormEventNames = [
@@ -44,4 +44,4 @@ export {
   getEventNameForElement,
   alertSizeForInput
 };
-//# sourceMappingURL=chunk.2LRU3I3N.js.map
+//# sourceMappingURL=chunk.UPDHOWDW.js.map

package/dist/chunks/{chunk.MTN5NM4A.js → chunk.UT3DWYFM.js}

@@ -1,6 +1,6 @@
 import {
   formCollections
-} from "./chunk.HP2LEQRU.js";
+} from "./chunk.U5757NSE.js";
 
 // src/utilities/form.ts
 function serialize(form) {
@@ -37,4 +37,4 @@ export {
   serialize,
   getFormControls
 };
-//# sourceMappingURL=chunk.MTN5NM4A.js.map
+//# sourceMappingURL=chunk.UT3DWYFM.js.map

package/dist/chunks/{chunk.WH5IZKFX.js → chunk.VBPHUZ5N.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.I4FIU7FA.js";
 import {
   Modal
-} from "./chunk.AYAX7BG7.js";
+} from "./chunk.JKSFECFA.js";
 import {
   lockBodyScrolling,
   unlockBodyScrolling
@@ -16,36 +16,36 @@ import {
 } from "./chunk.WXVOTRW5.js";
 import {
   SynIconButton
-} from "./chunk.RJPPRJP3.js";
+} from "./chunk.K5VB7VKA.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
 import {
   animateTo,
   stopAnimations
-} from "./chunk.G6ITZTTW.js";
+} from "./chunk.6EKUFYET.js";
 import {
   getAnimation,
   setDefaultAnimation
-} from "./chunk.7JGKUB4A.js";
+} from "./chunk.ADSEQZBF.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
+import {
+  watch
+} from "./chunk.JE5Y2YD7.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.3THJTCRO.js";
+} from "./chunk.JG7YXWHG.js";
 import {
   __decorateClass
-} from "./chunk.Z4XV3SMG.js";
+} from "./chunk.MO2GTRUM.js";
 
 // src/components/drawer/drawer.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -407,4 +407,4 @@ setDefaultAnimation("drawer.overlay.hide", {
 export {
   SynDrawer
 };
-//# sourceMappingURL=chunk.WH5IZKFX.js.map
+//# sourceMappingURL=chunk.VBPHUZ5N.js.map

package/dist/chunks/{chunk.4A6JD5B2.js → chunk.VBS3JEIP.js}

@@ -31,4 +31,4 @@ var icons = {
 export {
   icons
 };
-//# sourceMappingURL=chunk.4A6JD5B2.js.map
+//# sourceMappingURL=chunk.VBS3JEIP.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/icon/sick2025-system-icons.ts"],
+  "sourcesContent": ["/* eslint-disable */\n\nexport const icons = {\n  \"add\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"M11.25 12.75H5.5v-1.5h5.75V5.5h1.5v5.75h5.75v1.5h-5.75v5.75h-1.5z\\\"/></svg>\",\n  \"check\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"m9.55 17.654-5.334-5.335 1.069-1.069 4.265 4.265 9.166-9.165 1.069 1.07z\\\"/></svg>\",\n  \"chevron-down\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"M12 15.039 6.346 9.384 7.4 8.331l4.6 4.6 4.6-4.6 1.054 1.053z\\\"/></svg>\",\n  \"chevron-right\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"m12.946 12-4.6-4.6L9.4 6.346 15.054 12 9.4 17.654 8.346 16.6z\\\"/></svg>\",\n  \"details-close\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"M5.5 12.75v-1.5h13v1.5z\\\"/></svg>\",\n  \"details-open\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"M11.25 12.75H5.5v-1.5h5.75V5.5h1.5v5.75h5.75v1.5h-5.75v5.75h-1.5z\\\"/></svg>\",\n  \"eye\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"M12.002 15.577q1.7 0 2.888-1.19t1.187-2.89-1.19-2.886-2.89-1.188-2.886 1.19-1.188 2.89 1.19 2.887 2.89 1.187M12 14.2q-1.125 0-1.912-.787A2.6 2.6 0 0 1 9.3 11.5q0-1.125.788-1.912A2.6 2.6 0 0 1 12 8.8q1.125 0 1.913.787.787.788.787 1.913t-.787 1.912A2.6 2.6 0 0 1 12 14.2m.001 4.3q-3.45 0-6.285-1.903-2.837-1.904-4.177-5.097 1.34-3.194 4.175-5.097T12 4.5t6.286 1.903q2.836 1.904 4.177 5.097-1.341 3.195-4.176 5.097T12.001 18.5\\\"/></svg>\",\n  \"eye-slash\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"m19.762 21.87-4.046-4.016q-.77.285-1.705.465-.936.18-2.01.181-3.525 0-6.341-1.939-2.815-1.938-4.121-5.061.554-1.325 1.43-2.472A11.4 11.4 0 0 1 4.9 7.038l-2.77-2.8 1.055-1.053 17.63 17.63zM12 15.576q.314 0 .642-.054.33-.053.585-.158l-5.092-5.092q-.104.275-.158.599a4 4 0 0 0-.054.628q0 1.702 1.188 2.89 1.186 1.187 2.89 1.187m6.954.507-3.137-3.111q.118-.32.189-.684.07-.366.071-.789 0-1.702-1.187-2.89Q13.702 7.424 12 7.424q-.422 0-.779.076-.355.076-.684.228L8.035 5.235a10 10 0 0 1 1.936-.556q.99-.18 2.03-.179 3.514 0 6.34 1.939 2.824 1.938 4.12 5.061-.555 1.34-1.435 2.502a11 11 0 0 1-2.072 2.082m-4.27-4.234-3.009-3q.661-.124 1.25.098.586.223 1.012.663.435.44.636 1.033.202.593.112 1.206\\\"/></svg>\",\n  \"indeterminate\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"M5.5 12.75v-1.5h13v1.5z\\\"/></svg>\",\n  \"logo-color\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"295\\\" height=\\\"94\\\" viewBox=\\\"0 0 295 94\\\" fill='currentColor'><g clip-path=\\\"url(#a)\\\"><path d=\\\"M166.39 0c17.638 0 32.976 9.895 40.876 24.493L188.19 34.788c-4.268-7.865-12.516-13.108-21.8-13.108-13.545 0-24.876 11.14-24.876 25.32s11.331 25.32 24.876 25.32c9.476 0 17.925-5.452 22.106-13.596l19.058 10.347C199.723 83.905 184.202 94 166.39 94c-25.713 0-46.556-21.044-46.556-47S140.677 0 166.39 0M56.85 1.673c12.543 0 21.498 9.389 21.498 21.296H26.436c-6.977.993-7.421 11.697 0 12.908H54.08c15.164.41 27.263 12.481 27.263 27.768 0 14.084-11.95 28.238-27.194 28.238H25.643c-12.134 0-25.495-6.55-25.495-21.758.151 0 46.601 0 54.011.009 7.9-1.577 7.02-11.541 0-12.917H26.436C11.68 57.217 0 44.622 0 29.614 0 15.182 10.792 1.673 26.436 1.673zm53.803 90.21H89.349V1.664h21.304zm126.48-90.219v36.182h8.292l22.402-36.182h26.497L263.795 47.35l30.085 44.534h-26.505L244.702 56.93h-7.569v34.953h-21.549V1.664z\\\"/></g><defs><clipPath id=\\\"a\\\"><path d=\\\"M0 0h295v94H0z\\\"/></clipPath></defs></svg>\",\n  \"menu\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"M3.5 17.635v-1.5h17v1.5zm0-4.885v-1.5h17v1.5zm0-4.885v-1.5h17v1.5z\\\"/></svg>\",\n  \"more\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"M6.23 13.5q-.618 0-1.059-.44a1.44 1.44 0 0 1-.44-1.06q0-.619.44-1.06.44-.44 1.06-.44.618 0 1.06.44.44.442.44 1.06t-.44 1.06q-.442.44-1.06.44m5.77 0q-.619 0-1.06-.44A1.44 1.44 0 0 1 10.5 12q0-.619.44-1.06.441-.44 1.06-.44.618 0 1.06.44.44.442.44 1.06t-.44 1.06q-.442.44-1.06.44m5.77 0q-.62 0-1.06-.44a1.44 1.44 0 0 1-.44-1.06q0-.619.44-1.06.44-.44 1.06-.44.618 0 1.058.44.441.442.441 1.06t-.44 1.06q-.44.44-1.06.44\\\"/></svg>\",\n  \"more-vert\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"M12 19.27q-.619 0-1.06-.442a1.44 1.44 0 0 1-.44-1.059q0-.618.44-1.06.442-.44 1.06-.44t1.06.44q.44.442.44 1.06 0 .62-.44 1.06-.442.44-1.06.44m0-5.77q-.619 0-1.06-.44A1.44 1.44 0 0 1 10.5 12q0-.619.44-1.06.442-.44 1.06-.44t1.06.44q.44.441.44 1.06t-.44 1.06-1.06.44m0-5.77q-.619 0-1.06-.44a1.44 1.44 0 0 1-.44-1.06q0-.618.44-1.059.442-.44 1.06-.44t1.06.44q.44.44.44 1.06 0 .618-.44 1.06-.442.44-1.06.44\\\"/></svg>\",\n  \"placeholder\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"M3.5 20.5V13H5v6h6v1.5zm9.5 0V19h6v-6h1.5v7.5zm-6.25-3.75 2.48-3.289 2 2.558 2.809-3.653 3.288 4.384zM3.5 11V3.5H11V5H5v6zM19 11V5h-6V3.5h7.5V11zm-3.594-1.096q-.566 0-.938-.37a1.26 1.26 0 0 1-.372-.936q0-.566.37-.938t.936-.372.938.37q.371.37.372.936 0 .566-.37.938a1.26 1.26 0 0 1-.936.372\\\"/></svg>\",\n  \"radio\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"12\\\" height=\\\"12\\\" viewBox=\\\"0 0 12 12\\\" fill='currentColor'><path d=\\\"M6 10.75a4.6 4.6 0 0 1-1.852-.374A4.8 4.8 0 0 1 2.64 9.361a4.8 4.8 0 0 1-1.016-1.508 4.6 4.6 0 0 1-.374-1.852q0-.986.374-1.853.375-.866 1.015-1.508.641-.641 1.508-1.016a4.6 4.6 0 0 1 1.852-.374q.986 0 1.853.374.867.375 1.508 1.015.642.641 1.016 1.508t.374 1.852-.374 1.853A4.8 4.8 0 0 1 9.361 9.36q-.642.642-1.508 1.016a4.6 4.6 0 0 1-1.852.374\\\"/></svg>\",\n  \"status-error\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"M12 16.712q.343 0 .575-.233a.78.78 0 0 0 .233-.575.78.78 0 0 0-.232-.576.78.78 0 0 0-.576-.232.78.78 0 0 0-.575.232.78.78 0 0 0-.233.576q0 .343.232.575a.78.78 0 0 0 .576.233m-.75-3.481h1.5V7.192h-1.5zM8.461 20.5 3.5 15.543V8.462L8.457 3.5h7.082L20.5 8.457v7.082L15.543 20.5zM9.1 19h5.8l4.1-4.1V9.1L14.9 5H9.1L5 9.1v5.8z\\\"/></svg>\",\n  \"status-informative\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"M11.25 16.75h1.5V11h-1.5zM12 9.289q.343 0 .575-.233a.78.78 0 0 0 .233-.575.78.78 0 0 0-.232-.576.78.78 0 0 0-.576-.232.78.78 0 0 0-.575.232.78.78 0 0 0-.233.576q0 .343.232.575A.78.78 0 0 0 12 9.29m.002 12.211a9.3 9.3 0 0 1-3.706-.748 9.6 9.6 0 0 1-3.016-2.03 9.6 9.6 0 0 1-2.032-3.016 9.25 9.25 0 0 1-.748-3.704q0-1.972.748-3.706a9.6 9.6 0 0 1 2.03-3.016 9.6 9.6 0 0 1 3.016-2.032 9.25 9.25 0 0 1 3.704-.748q1.972 0 3.706.748a9.6 9.6 0 0 1 3.017 2.03 9.6 9.6 0 0 1 2.03 3.016 9.25 9.25 0 0 1 .749 3.704q0 1.972-.748 3.706a9.6 9.6 0 0 1-2.03 3.017 9.6 9.6 0 0 1-3.016 2.03 9.25 9.25 0 0 1-3.704.749M12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20\\\"/></svg>\",\n  \"status-neutral\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"m9.692 21.5-.38-3.046a5.3 5.3 0 0 1-1.579-.896L4.912 18.75l-2.308-4 2.44-1.844a5 5 0 0 1-.049-.448 7 7 0 0 1 0-.882q.014-.22.05-.482L2.603 9.25l2.308-3.98 2.811 1.182a6.4 6.4 0 0 1 .772-.524 5 5 0 0 1 .807-.382l.39-3.046h4.616l.38 3.056q.45.163.815.381t.735.515l2.85-1.183 2.308 3.981-2.479 1.873q.054.243.059.453t.005.424q0 .204-.01.415-.01.21-.069.481l2.46 1.854-2.308 4-2.815-1.202q-.372.296-.758.524a4.6 4.6 0 0 1-.793.372l-.38 3.056zM11 20h1.966l.359-2.679q.765-.2 1.399-.568.634-.369 1.222-.947l2.485 1.044.985-1.7-2.17-1.635q.125-.387.17-.761a6.3 6.3 0 0 0 0-1.508 4 4 0 0 0-.17-.742l2.189-1.654-.985-1.7-2.513 1.06a5.3 5.3 0 0 0-1.203-.949 5.2 5.2 0 0 0-1.418-.582L13 4h-1.985l-.33 2.67a5.2 5.2 0 0 0-1.414.553q-.648.374-1.237.962L5.55 7.15l-.984 1.7 2.159 1.61a3.7 3.7 0 0 0-.175.74 6.3 6.3 0 0 0 0 1.575q.05.375.165.74l-2.15 1.635.985 1.7 2.475-1.05q.57.585 1.217.958t1.433.573zm1.011-5q1.249 0 2.125-.876A2.9 2.9 0 0 0 15.012 12q0-1.248-.876-2.124A2.9 2.9 0 0 0 12.012 9q-1.264 0-2.132.876A2.9 2.9 0 0 0 9.01 12q0 1.248.869 2.124T12.01 15\\\"/></svg>\",\n  \"status-success\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"m10.58 16.254 6.724-6.723-1.054-1.054-5.67 5.67-2.85-2.85-1.053 1.053zm1.422 5.246a9.3 9.3 0 0 1-3.706-.748 9.6 9.6 0 0 1-3.016-2.03 9.6 9.6 0 0 1-2.032-3.016 9.25 9.25 0 0 1-.748-3.704q0-1.972.748-3.706a9.6 9.6 0 0 1 2.03-3.016 9.6 9.6 0 0 1 3.016-2.032 9.25 9.25 0 0 1 3.704-.748q1.972 0 3.706.748a9.6 9.6 0 0 1 3.017 2.03 9.6 9.6 0 0 1 2.03 3.016 9.25 9.25 0 0 1 .749 3.704q0 1.972-.748 3.706a9.6 9.6 0 0 1-2.03 3.017 9.6 9.6 0 0 1-3.016 2.03 9.25 9.25 0 0 1-3.704.749M12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20\\\"/></svg>\",\n  \"status-warning\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"M1.865 20.5 12 3l10.135 17.5zM4.45 19h15.1L12 6zM12 17.808q.343 0 .575-.232a.78.78 0 0 0 .233-.576.78.78 0 0 0-.232-.576.78.78 0 0 0-.576-.232.78.78 0 0 0-.575.232.78.78 0 0 0-.233.576q0 .343.232.576a.78.78 0 0 0 .576.232m-.75-2.616h1.5v-5h-1.5z\\\"/></svg>\",\n  \"sticky_sidebar\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"M9.5 19H19V5H9.5zm-6 1.5v-17h17v17z\\\"/></svg>\",\n  \"tabs-left\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"m7.373 12.75 5.696 5.696L12 19.5 4.5 12 12 4.5l1.07 1.054-5.697 5.696H19.5v1.5z\\\"/></svg>\",\n  \"tabs-right\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"M16.627 12.75H4.5v-1.5h12.127l-5.696-5.696L12 4.5l7.5 7.5-7.5 7.5-1.07-1.054z\\\"/></svg>\",\n  \"upload-file\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"M11.25 18.385h1.5V13.95l1.85 1.85 1.054-1.07L12 11.078l-3.654 3.654 1.07 1.053 1.834-1.834zM4.5 21.5v-19h9.75l5.25 5.25V21.5zm9-13V4H6v16h12V8.5z\\\"/></svg>\",\n  \"x-circle-fill\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"m8.4 16.654 3.6-3.6 3.6 3.6 1.054-1.054-3.6-3.6 3.6-3.6L15.6 7.346l-3.6 3.6-3.6-3.6L7.346 8.4l3.6 3.6-3.6 3.6zm3.602 4.846a9.3 9.3 0 0 1-3.706-.748 9.6 9.6 0 0 1-3.016-2.03 9.6 9.6 0 0 1-2.032-3.016 9.25 9.25 0 0 1-.748-3.704q0-1.972.748-3.706a9.6 9.6 0 0 1 2.03-3.016 9.6 9.6 0 0 1 3.016-2.032 9.25 9.25 0 0 1 3.704-.748q1.972 0 3.706.748a9.6 9.6 0 0 1 3.017 2.03 9.6 9.6 0 0 1 2.03 3.016 9.25 9.25 0 0 1 .749 3.704q0 1.972-.748 3.706a9.6 9.6 0 0 1-2.03 3.017 9.6 9.6 0 0 1-3.016 2.03 9.25 9.25 0 0 1-3.704.749\\\"/></svg>\",\n  \"x-lg\": \"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill='currentColor'><path d=\\\"M6.4 18.654 5.346 17.6l5.6-5.6-5.6-5.6L6.4 5.346l5.6 5.6 5.6-5.6L18.654 6.4l-5.6 5.6 5.6 5.6-1.054 1.054-5.6-5.6z\\\"/></svg>\"\n};\n"],
+  "mappings": ";AAEO,IAAM,QAAQ;AAAA,EACnB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,cAAc;AAAA,EACd,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,QAAQ;AACV;",
+  "names": []
+}

package/dist/chunks/{chunk.XIRK7QT7.js → chunk.VV3WAINT.js}

@@ -1,6 +1,6 @@
 import {
   SynTab
-} from "./chunk.RRUXOF5F.js";
+} from "./chunk.N7LV5KRH.js";
 
 // src/components/tab/tab.ts
 var tab_default = SynTab;
@@ -9,4 +9,4 @@ SynTab.define("syn-tab");
 export {
   tab_default
 };
-//# sourceMappingURL=chunk.XIRK7QT7.js.map
+//# sourceMappingURL=chunk.VV3WAINT.js.map

package/dist/chunks/{chunk.4RFP5BXR.js → chunk.VYQ53GHN.js}

@@ -1,34 +1,34 @@
 import {
   tab_group_custom_styles_default
-} from "./chunk.LBUMVFCE.js";
+} from "./chunk.FHTQSNCX.js";
 import {
   tab_group_styles_default
 } from "./chunk.PKYC7QF3.js";
 import {
   SynResizeObserver
-} from "./chunk.IDRBXAJB.js";
+} from "./chunk.XL2GZSHM.js";
 import {
   scrollIntoView
 } from "./chunk.5732DMBC.js";
 import {
   SynIconButton
-} from "./chunk.RJPPRJP3.js";
+} from "./chunk.K5VB7VKA.js";
+import {
+  watch
+} from "./chunk.JE5Y2YD7.js";
 import {
   LocalizeController
 } from "./chunk.OAQRCZOO.js";
-import {
-  watch
-} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.3THJTCRO.js";
+} from "./chunk.JG7YXWHG.js";
 import {
   __decorateClass,
   __spreadValues
-} from "./chunk.Z4XV3SMG.js";
+} from "./chunk.MO2GTRUM.js";
 
 // src/internal/scrollend-polyfill.ts
 var debounce = (fn, delay) => {
@@ -516,4 +516,4 @@ __decorateClass([
 export {
   SynTabGroup
 };
-//# sourceMappingURL=chunk.4RFP5BXR.js.map
+//# sourceMappingURL=chunk.VYQ53GHN.js.map

package/dist/chunks/{chunk.DSV4ZUJU.js → chunk.WPVUSCH3.js}

@@ -1,6 +1,6 @@
 import {
   SynAccordion
-} from "./chunk.LVMHT5WF.js";
+} from "./chunk.FVYPYWJH.js";
 
 // src/components/accordion/accordion.ts
 var accordion_default = SynAccordion;
@@ -9,4 +9,4 @@ SynAccordion.define("syn-accordion");
 export {
   accordion_default
 };
-//# sourceMappingURL=chunk.DSV4ZUJU.js.map
+//# sourceMappingURL=chunk.WPVUSCH3.js.map

package/dist/chunks/{chunk.4WQZFNSE.js → chunk.WQMTAEYE.js}

@@ -3,7 +3,7 @@ import { css } from "lit";
 var spinner_custom_styles_default = css`
   :host {
     --speed: var(--syn-transition-x-slow);
-    --indicator-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    --indicator-color: var(--syn-interactive-emphasis-color);
   }
 
   .spinner__indicator {
@@ -16,7 +16,7 @@ var spinner_custom_styles_default = css`
    */
   .spinner__track {
     filter: saturate(0);
-    opacity: var(--syn-spinner-opacity, 0.16);
+    opacity: var(--syn-spinner-opacity);
     stroke: var(--indicator-color);
   }
 
@@ -34,4 +34,4 @@ var spinner_custom_styles_default = css`
 export {
   spinner_custom_styles_default
 };
-//# sourceMappingURL=chunk.4WQZFNSE.js.map
+//# sourceMappingURL=chunk.WQMTAEYE.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/spinner/spinner.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --speed: var(--syn-transition-x-slow);\n    --indicator-color: var(--syn-interactive-emphasis-color);\n  }\n\n  .spinner__indicator {\n    stroke-dasharray: 75% 360%;\n    stroke-linecap: initial;\n  }\n\n  /**\n   * Make sure the spinner track is using the correct color.\n   */\n  .spinner__track {\n    filter: saturate(0);\n    opacity: var(--syn-spinner-opacity);\n    stroke: var(--indicator-color);\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\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;",
+  "names": []
+}

package/dist/chunks/{chunk.QLIYRJIM.js → chunk.X57JLQDS.js}

@@ -1,6 +1,6 @@
 import {
   SynInput
-} from "./chunk.BNZ7BFBC.js";
+} from "./chunk.3FT4KLCP.js";
 
 // src/components/input/input.ts
 var input_default = SynInput;
@@ -9,4 +9,4 @@ SynInput.define("syn-input");
 export {
   input_default
 };
-//# sourceMappingURL=chunk.QLIYRJIM.js.map
+//# sourceMappingURL=chunk.X57JLQDS.js.map

package/dist/chunks/{chunk.GCLDJQSX.js → chunk.X6HKBVIE.js}

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

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

@@ -46,7 +46,7 @@ var tab_custom_styles_default = css`
   }
 
   .tab:hover:not(.tab--disabled) {
-    color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-700));
+    color: var(--syn-interactive-emphasis-color);
   }
 
   .tab.tab--active:not(:hover):not(.tab--disabled) {
@@ -61,7 +61,7 @@ var tab_custom_styles_default = css`
   }
 
   .tab__close-button {
-    color: var(--syn-input-icon-icon-clearable-color, var(--syn-color-neutral-500));
+    color: var(--syn-input-icon-icon-clearable-color);
     font-size: var(--syn-font-size-x-large);
     margin-inline-start: var(--syn-spacing-2x-small);
   }
@@ -71,7 +71,7 @@ var tab_custom_styles_default = css`
   }
 
   .tab__close-button::part(base):hover {
-    color: var(--syn-input-icon-icon-clearable-color-hover, var(--syn-color-primary-700));
+    color: var(--syn-input-icon-icon-clearable-color-hover);
   }
 
   .tab--active {
@@ -96,4 +96,4 @@ var tab_custom_styles_default = css`
 export {
   tab_custom_styles_default
 };
-//# sourceMappingURL=chunk.NREI75V5.js.map
+//# sourceMappingURL=chunk.XC4GHHH2.js.map

package/dist/chunks/{chunk.NREI75V5.js.map → chunk.XC4GHHH2.js.map}

@@ -1,7 +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"],
+  "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);\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);\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);\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.QLG3DDKI.js → chunk.XDOZEDCW.js}

@@ -1,6 +1,6 @@
 import {
   SynTextarea
-} from "./chunk.KGSP7LN2.js";
+} from "./chunk.QACXXBE3.js";
 
 // src/components/textarea/textarea.ts
 var textarea_default = SynTextarea;
@@ -9,4 +9,4 @@ SynTextarea.define("syn-textarea");
 export {
   textarea_default
 };
-//# sourceMappingURL=chunk.QLG3DDKI.js.map
+//# sourceMappingURL=chunk.XDOZEDCW.js.map

package/dist/chunks/{chunk.QYFODTOR.js → chunk.XKT2M3XA.js}

@@ -1,6 +1,6 @@
 import {
   SynOptgroup
-} from "./chunk.UUK3IJ34.js";
+} from "./chunk.42F33KBM.js";
 
 // src/components/optgroup/optgroup.ts
 var optgroup_default = SynOptgroup;
@@ -9,4 +9,4 @@ SynOptgroup.define("syn-optgroup");
 export {
   optgroup_default
 };
-//# sourceMappingURL=chunk.QYFODTOR.js.map
+//# sourceMappingURL=chunk.XKT2M3XA.js.map

package/dist/chunks/{chunk.IDRBXAJB.js → chunk.XL2GZSHM.js}

@@ -3,16 +3,16 @@ import {
 } from "./chunk.OI3HOOCT.js";
 import {
   watch
-} from "./chunk.BVZQ6QSY.js";
+} from "./chunk.JE5Y2YD7.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.3THJTCRO.js";
+} from "./chunk.JG7YXWHG.js";
 import {
   __decorateClass
-} from "./chunk.Z4XV3SMG.js";
+} from "./chunk.MO2GTRUM.js";
 
 // src/components/resize-observer/resize-observer.component.ts
 import { html } from "lit";
@@ -78,4 +78,4 @@ __decorateClass([
 export {
   SynResizeObserver
 };
-//# sourceMappingURL=chunk.IDRBXAJB.js.map
+//# sourceMappingURL=chunk.XL2GZSHM.js.map

package/dist/chunks/{chunk.HLSMCMJE.js → chunk.YBITSWNW.js}

@@ -1,6 +1,6 @@
 import {
   SynCard
-} from "./chunk.ANR7UJCM.js";
+} from "./chunk.3EJU447K.js";
 
 // src/components/card/card.ts
 var card_default = SynCard;
@@ -9,4 +9,4 @@ SynCard.define("syn-card");
 export {
   card_default
 };
-//# sourceMappingURL=chunk.HLSMCMJE.js.map
+//# sourceMappingURL=chunk.YBITSWNW.js.map

package/dist/chunks/{chunk.BA4QMNTH.js → chunk.YIYXW5NV.js}

@@ -1,6 +1,6 @@
 import {
   SynTabPanel
-} from "./chunk.2SOIXTV6.js";
+} from "./chunk.4URTG3MF.js";
 
 // src/components/tab-panel/tab-panel.ts
 var tab_panel_default = SynTabPanel;
@@ -9,4 +9,4 @@ SynTabPanel.define("syn-tab-panel");
 export {
   tab_panel_default
 };
-//# sourceMappingURL=chunk.BA4QMNTH.js.map
+//# sourceMappingURL=chunk.YIYXW5NV.js.map

package/dist/chunks/{chunk.SAV6MIQK.js → chunk.YOJL35VB.js}

@@ -18,8 +18,8 @@ var radio_custom_styles_default = css`
   /* Checked */
   /* stylelint-disable-next-line no-descending-specificity */
   .radio--checked .radio__control {
-    background-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
-    border-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    background-color: var(--syn-interactive-emphasis-color);
+    border-color: var(--syn-interactive-emphasis-color);
   }
 
   /* Reset original hover */
@@ -30,14 +30,14 @@ var radio_custom_styles_default = css`
 
   /* Checked + hover */
   .radio.radio--checked:not(.radio--disabled):hover .radio__control  {
-    background-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-950));
-    border-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-950));
+    background-color: var(--syn-interactive-emphasis-color-hover);
+    border-color: var(--syn-interactive-emphasis-color-hover);
   }
 
   /* Checked + active */
   .radio.radio--checked:not(.radio--disabled):active .radio__control  {
-    background-color: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));
-    border-color: var(--syn-interactive-emphasis-color-active, var(--syn-color-primary-950));
+    background-color: var(--syn-interactive-emphasis-color-active);
+    border-color: var(--syn-interactive-emphasis-color-active);
   }
 
   /* Not-Checked + Hover */
@@ -47,7 +47,7 @@ var radio_custom_styles_default = css`
 
   /* Not-Checked + active */
   .radio:not(.radio--checked):not(.radio--disabled):active .radio__control {
-    border-color: var(--syn-input-border-color-active, var(--syn-color-neutral-1000));
+    border-color: var(--syn-input-border-color-active);
   }
 
   /* Fix#456: Multi line radio fixes */
@@ -88,4 +88,4 @@ var radio_custom_styles_default = css`
 export {
   radio_custom_styles_default
 };
-//# sourceMappingURL=chunk.SAV6MIQK.js.map
+//# sourceMappingURL=chunk.YOJL35VB.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/radio/radio.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host(:focus-visible) .radio__control {\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-width);\n  }\n\n  .radio {\n    align-items: flex-start;\n  }\n\n  /** #429: Use token for opacity */\n  .radio--disabled { \n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  /* Checked */\n  /* stylelint-disable-next-line no-descending-specificity */\n  .radio--checked .radio__control {\n    background-color: var(--syn-interactive-emphasis-color);\n    border-color: var(--syn-interactive-emphasis-color);\n  }\n\n  /* Reset original hover */\n  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n    background: inherit;\n    border-color: inherit;\n  }\n\n  /* Checked + hover */\n  .radio.radio--checked:not(.radio--disabled):hover .radio__control  {\n    background-color: var(--syn-interactive-emphasis-color-hover);\n    border-color: var(--syn-interactive-emphasis-color-hover);\n  }\n\n  /* Checked + active */\n  .radio.radio--checked:not(.radio--disabled):active .radio__control  {\n    background-color: var(--syn-interactive-emphasis-color-active);\n    border-color: var(--syn-interactive-emphasis-color-active);\n  }\n\n  /* Not-Checked + Hover */\n  .radio:not(.radio--checked):not(.radio--disabled):hover .radio__control {\n    border-color: var(--syn-input-border-color-hover);\n  }\n\n  /* Not-Checked + active */\n  .radio:not(.radio--checked):not(.radio--disabled):active .radio__control {\n    border-color: var(--syn-input-border-color-active);\n  }\n\n  /* Fix#456: Multi line radio fixes */\n  .radio__label {\n    align-self: center;\n    margin-inline-start: var(--syn-spacing-x-small);\n    margin-top: -1px;\n  }\n\n  .radio--small .radio__label {\n    font: var(--syn-body-small-regular);\n  }\n\n  .radio--medium .radio__label {\n    font: var(--syn-body-medium-regular);\n  }\n\n  .radio--large .radio__label {\n    font: var(--syn-body-large-regular);\n  }\n\n  /* /Fix#456 */\n\n  /**\n   * #920: The new icons are instances in figma.\n   * The width of the system icon is 12px x 12px, so there is no inner padding.\n   * To accommodate for this, we need to set the width and height of the icon to 50% to get the same result as before.\n   */\n  .radio__checked-icon {\n    scale: 0.5;\n  }\n\n  .radio--small .radio__label, .radio--large .radio__label  {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,8BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.SJX5NWKN.js → chunk.Z3SZOYBJ.js}

@@ -1,6 +1,6 @@
 import {
   SynSelect
-} from "./chunk.YEANAJGY.js";
+} from "./chunk.6EK4W7PI.js";
 
 // src/components/select/select.ts
 var select_default = SynSelect;
@@ -9,4 +9,4 @@ SynSelect.define("syn-select");
 export {
   select_default
 };
-//# sourceMappingURL=chunk.SJX5NWKN.js.map
+//# sourceMappingURL=chunk.Z3SZOYBJ.js.map

package/dist/chunks/{chunk.5MVDJQDM.js → chunk.ZNJG4EY4.js}

@@ -1,6 +1,6 @@
 import {
   SynTabGroup
-} from "./chunk.4RFP5BXR.js";
+} from "./chunk.VYQ53GHN.js";
 
 // src/components/tab-group/tab-group.ts
 var tab_group_default = SynTabGroup;
@@ -9,4 +9,4 @@ SynTabGroup.define("syn-tab-group");
 export {
   tab_group_default
 };
-//# sourceMappingURL=chunk.5MVDJQDM.js.map
+//# sourceMappingURL=chunk.ZNJG4EY4.js.map